Thursday, February 15, 2018

Cara Menciptakan Sajian Blog Dengan Gambar

Written by Ani on 10:48 PM in Desain Blog, Menu Desain, Widget with No comments

Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman gres sesuai dengan URL halaman yang aku masukan.

Beranda
Desain Blog
Tips dan Trik
Hubungi

Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.

Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
Lalu Add Gadget, sesudah itu Pilih HTML/JavaScript.
Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.

Sebagai contoh, Copy semua isyarat dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.

<style>
#tabs31{margin:0;padding:0;}
#tabs31 ul{list-style: none;}
#tabs31 ul li{float:left; margin-right:25px;}
#tabs31 img {width:50px; height:50px;}
figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
</style>

<div id="tabs31">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">
<img src="https://lh4.googleusercontent.com/-bUpj573Wb-U/Um-q4tDqVrI/AAAAAAAABHQ/eRZQc8iwpos/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Beranda</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
<img src="https://lh4.googleusercontent.com/-8eCUh34i-9w/Um-q5t5iIVI/AAAAAAAABHk/749vcX4aIjg/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
<img src="https://lh3.googleusercontent.com/-9CqH39Abvgc/Um-q5dzGnCI/AAAAAAAABHg/K7J6NfDKkOg/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Tips dan Trik</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
<img src="https://lh4.googleusercontent.com/-C1v5xdd6vIs/Um-q5RYveJI/AAAAAAAABHo/QqJs0t8By-w/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>

</ul>
</div>

Save Gadget, selesai.

Keterangan Kode Css Langkah 5:

#tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
#tabs31 ul li{float:left; menciptakan gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
#tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
figcaption untuk mengatur keterangan dibawah tulisan.

Keterangan Kode HTML Langkah 5:

format dari hidangan <li><a href="url halaman menu">
<img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Keterangan dibawah gambar</figcaption></li>

Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

Gunakanlah gambar dengan ukuran yang sama disetiap gambar, semoga tampilan hidangan terlihat rapi, caranya dapat lihat di cara menciptakan icon blog. Cara mengambil URL gambar, dapat kau baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara menciptakan dan mengisi hidangan blog. URL Label atau kategori juga dapat kita masukan ke menu.

Semoga Bermanfaat.

Cara Mengganti Judul Blog Dengan Gambar

Written by Ani on 10:48 AM in Desain Blog, Header with No comments

Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk abjad tulisan, dan goresan pena tersebut sanggup kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang sanggup mengganggu Seo blog.

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan eksklusif gambar di widget header blog pada belahan tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak memiliki H1.

Berikut ini yaitu cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.

Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
Lalu Pastekan instruksi berikut ini ke dalamnya.

Keterangan Kode diatas.

http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kau inginkan
http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
fandrajuani.blogspot.com Ganti Title gambar dengan yang kau inginkan

Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
Tampilan template di Tata Letak menjadi ibarat ini.

Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar

Sekarang blog memiliki 2 Header yaitu Widget header dan gambar Header.
Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya memiliki 1 Header. Selesai.

Jika Widget Header tidak sanggup dihapus, ikuti langkah dibawah ini.

Login ke blogger, dari halaman dasbor pilih pengaturan template.
Selanjutnya Klik edit HTML dan cari instruksi ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>

Setelah itu ganti kata true dengan false
Terakhir save template, kemudian kembali ke pengaturan tata letak, widget header sudah sanggup dihapus. Selesai.

Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

Menghapus Widget Header ibarat referensi diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, sebab judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama ibarat judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.

Setelah melaksanakan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, ibarat situs www.chkme.com, www.seositecheckup.com, www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.

Untuk cara Upload Gambar dan Ambil URL gambar, sanggup dibaca di artikel perihal cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog ibarat cara menciptakan sajian blog dengan gambar icon disamping kiri judul sajian blog.

Jika tidak ingin memakai cara diatas, kau sanggup baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang sanggup anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot memakai template orisinil blogger yaitu dengan mengganti goresan pena judul blog dengan gambar. Semoga Bermanfaat.

Macam Bentuk Numbered List Dan Bullet List

Written by Ani on 10:48 PM in HTML dan CSS, Tips dan Trik with No comments

Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger. Cara menggunakannya lihat dibawah ini.

Buatlah entri gres atau edit artikel lama
Dan Klik Numbered List
Lalu klik bab HTML di sebelah Compose.
Terus ganti isyarat <ol> dengan salah satu isyarat dibawah.
Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
Untuk Bullet list, klik bullet list, kemudian lihat pada bab HTML
Dan ganti isyarat <ul> dengan salah satu isyarat bentuk bullet list dibawah.

Macam Bentuk Numbered List

Bentuk Dasar, <ol> Tanpa Edit HTML

Mulai dari angka 8, Ganti isyarat <ol> dengan <ol start="8">
Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, ibarat goresan pena ini.

Dalam Bentuk Huruf Besar, <ol type="A">

Dalam Bentuk Huruf Kecil, <ol type="a">

Dalam Bentuk abjad atau angka romawi, <ol type="I">

Angka romawi abjad kecil, <ol type="i">

Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.

Macam Bentuk Bullet List

Bentuk dasar bullet list, <ul> tanpa edit html

Bentuk Bulat sederhana, <ul type="circle">

Bentuk Kotak, <ul type="square">

Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti teladan gambar dibawah ini.

Macam Bentuk Numbered List dan Bullet List yang dapat digunakan di blogger Macam Bentuk Numbered List dan Bullet List

Contoh gambar

Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis ibarat menulis biasa diblog, diatur memakai justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.

Berikut sedikit trik cara semoga tampilan numbered list rata dengan goresan pena biasa.

Login ke blogger, dari halaman dasbor, pilih pengaturan template.
Terus edit html, dan cari isyarat ]]></b:skin> kemudian letakan isyarat berikut ini diatasnya.

.post ol {
padding:0px 24px 0px;
width:96%;max-width:100%;}

Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
Jika belum rata, Ganti 24px dan 96% semoga rata dengan tampilan posting kamu.
Save template, selesai.

Pada dikala menulis, tampilan numbered list tetap ibarat biasa, tetapi jikalau sudah dipublikasikan, maka tampilannya akan berubah, rata dengan goresan pena biasa. Preview dulu goresan pena untuk melihat hasilnya.

Itulah sedikit tips trik menulis artikel memakai numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog memakai numbered list yang disisipkan gambar, atau isyarat script ditengah-tengahnya. Semoga Bermanfaat.

Cara Menciptakan Video Point Blank

Written by Ani on 10:48 AM in Game with No comments

Cara menciptakan video point blank. Point Blank merupakan game online, yang menyajikan permainan perang. Terdiri dari 2 team yaitu Ct-Force dan Free Rebels. Macam permainannya pun cukup beragam, ada bom mission, deatmatch, elimination, destroy mission, dino mode, dan lain-lainnya.

Game ini juga menyediakan banyak kawasan pilihan bermain, serta senjata lengkap yang harus dibeli dengan vocher dari Gemscool, pengembang point blank. Berikut ini yaitu Fitur terbaru yang disediakan oleh point blank ke pada para pemain, yaitu Video Record, atau merekam video. Dengan fitur video record, kita sanggup merekam aktifitas kita pada dikala bermain game point blank.

Cara memakai Video Record di point blank, silakan ikuti langkah-langkah dibawah ini.

Login atau Masuklah ke game Point Blank
Selanjutnya, buka Option, kemudian pilih bab Control, dan lihat pada bab Mode Video Capture. Seperti gambar dibawah ini.

Game ini juga menyediakan banyak kawasan pilihan bermain Cara Membuat Video Point Blank

Dari gambar diatas untuk merekam video point blank kita harus menekan Tombol Scroll Lock di Keyboard. Maka pada dikala merekam video, akan ada goresan pena Rec berwarna merah di atas kanan layar pb. ibarat dibawah ini.

Untuk menghentikan rekaman, maka tekan kembali Scroll Lock di Keyboard.
Sekarang, video point blank yang sudah direkam sudah jadi.
Untuk melihat hasilnya, silakan Exit / keluar terlebih dahulu dari game point blank, Lalu buka My Document, dan buka Folder Point Blank, kemudian buka lagi Folder Movie.

Hasil video rekaman berformat AVI, dengan ukuran yang tidak mengecewakan kecil. Silakan putar hasil rekamanmu di pemutar video. Selesai.

Video dibawah ini yaitu referensi hasil rekaman dengan durasi 1 menit. Silakan dilihat untuk lebih jelasnya cara menciptakan video point blank.

Itulah sedikit klarifikasi sederhana wacana cara menciptakan atau merekam video point blank sendiri, tanpa memakai software. Silakan dicoba dan buatlah rekaman video point blank punya kalian sendiri. Semoga Bermanfaat.

Cara Menciptakan Gambar Posting Berputar

Written by Ani on 10:48 PM in Desain Blog, Post with No comments

Berikut ini yaitu cara menciptakan gambar yang ada dipostingan setiap artikel berputar dan membesar dikala di sentuh kursor mouse. Salah satu cara semoga gambar sanggup diperbesar dan lebih gampang untuk dilihat dikala disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.

Untuk menciptakan gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.

Login ke blogger.
Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari instruksi ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode).
Setelah ketemu ]]></b:skin>, Copy instruksi dibawah ini. Lalu Pastekan di Atas ]]></b:skin>

.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}

Dan save template. Selesai.
Atau sanggup juga ditempatkan di Tambahkan CSS pada bab perancang template blogger(desainer template).
Lalu save, selesai.

Keterangan instruksi diatas: 0.5s untuk mengatur usang putaran. scale 1.9 untuk mengatur besarnya gambar sesudah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk instruksi lainnya sebaiknya jangan diganti, semoga instruksi tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse.

Itulah sedikit tutorial desain blog dan tips trik yang sanggup dipakai di blog, yang aku sanggup bagikan yaitu perihal cara menciptakan gambar posting berputar dan membesar dikala di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada hambatan dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara menciptakan sajian blog dengan gambar. Semoga bermanfaat.

Cara Menciptakan Gambar Berputar Di Blog

Written by Ani on 10:48 AM in Desain Blog with No comments

Artikel kali ini masih seputar gambar yaitu wacana cara menciptakan gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara menciptakan gambar posting berputar dan juga membesar dikala di sentuh oleh kursor. Bedanya, jikalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.

Dengan cara memasukan gambar kita sendiri, ke tata letak pada bab Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
Setelah itu copi isyarat dibawah ini.

Dan Pastekan di HTML/Javascript Tadi.
Setelah itu save, kemudian pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.

Keterangan Kode:

width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s ialah usang putaran gambar.
scale(1) ini fungsinya biar gambar tetap pada ukuran semula dikala disentuh mouse, jadi gambar tidak membesar atau mengecil dikala disentuh kursor.

Dan http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg ialah URL dari gambar yang ingin kalian masukan.

Itulah sedikit pembahasan atau tutorial desain blog yang sanggup aku bagikan, yaitu wacana cara menciptakan gambar berputar di blog, dikala disentuh kursor mouse. Semoga Bermanfaat.

Cara Menciptakan Entri Terkenal Bergerak

Written by Ani on 10:48 PM in Desain Blog with No comments

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

Ikuti langkah-langkah dibawah ini.

Login ke blog, dari halaman dasbor pilih pengaturan Template.
Klik Edit HTML, kemudian cari kode <div class='widget-content popular-posts'>
Selanjutnya Copy aba-aba berikut dan tempatkan di Sebelahnya.

Langkah selanjutnya, masukan aba-aba </marquee> di final rangkaian kode. Jadinya menyerupai ini.

</ul>
<b:include name='quickedit'/></marquee>
</div>
</b:includable>
</b:widget>

Susunan Kode lengkapnya.

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    </marquee>
</div>
</b:includable>
</b:widget>

Save Template Selesai.

Keterangan kode:

marquee direction='down' arah gerakan, dapat diganti dengan up, left, atau right.
height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
scrollamount='2' scrolldelay='100' Waktu gerakan.
Silakan ganti sesuai dengan yang kalian ingnkan.

Silakan baca juga artikel wacana cara menciptakan artikel berjalan di blog. Lanjutan kombinasi dari entri terkenal bergerak ini. Contohnya dapat dilihat DISINI, diblog aku satunya.

Semoga Bermanfaat.

Canela Blog

Blog yang membahas segala informasi hobi, inspirasi, kesehatan, hiburan, blogger, tips dan trik yang menarik