Cara Menambah dan Memasang Widget Di Blog

Widget adalah alat atau fitur tambahan yang disediakan oleh blogger selain konten postingan untuk memudahkan kita di dalam navigasi blog atau keterangan yang ada pada blog itu sendiri sehingga pengunjung blog dapat lebih mudah mengerti dan mengenali isi dari blog kita.

Postingan ini merupakan panduan cara menambah dan memasang widget di blog untuk kalian yang belum atau ingin mengetahui bagaimana cara memasukan/menambah maupun menghapus widget di blog. Caranya sangat mudah dan praktis serta sangat mudah dimengerti.

Ada banyak widget yang disediakan oleh blogger maupun dari luar blogger dengan berbagai macam fitur dan kegunaannya. Kalian tinggal memilih sesuka hati sesuai dengan kebutuhan yang ingin ditambahkan pada blog kalian.

Berikut tahapan-tahapan caranya.

1. Login ke dalam Blogger.com

2. Pada dashboard pilih blog dari daftar blog yang kalian punya.

3. Kemudian di sebelah kolom kiri halaman pilih "Layout" atau "Tata Letak".

4. Muncul halaman layout blog kalian dan pilih "Tambahkan Gadget"  di bagian mana saja yang kalian suka.

5. Pada jendela baru yang keluar, muncul daftar berbagai macam widget yang dapat kalian tambakan ke blog kalian.

6. Contoh, kita memilih widget "Daftar Blog" kemudian selanjutnya kita mensetting bagaimana dan isi dari daftar blog itu. Klik "Simpan".

7. Kita bebas menaruh widget yang kita buat tadi dimana saja kita suka. Contoh, kita pasang widget itu di bagian footer maka kita tinggal drag dan kemudian drop pada bagian paling bawah.

8. Setelah itu, klik "simpan setelan" dan lihat hasilnya dengan klik "Lihat Blog" di bagian atas.

9. Maka tampilan baru blog kita otomatis akan terlihat widget yang baru kita tambahkan yaitu "Daftar Blog" di halaman bagian paling bawah.

Read More

Cara Membuat DropDown Menu di Bawah Header Blog

Selamat pagi, tadi subuh saya telah membuat artikel bagaimana Cara Membuat Header dengan Iklan 728 x 90 di Blog. Nah, tutorial berikut merupakan kelanjutan dari tutorial sebelumnya. Nah, kali ini saya ingin memberikan tutorial "Cara Membuat DropDown Menu di Bawah Header" setelah anda membuat header pada tutorial sebelumnya. 

Cara membuatnya juga terbilang mudah, karena hanya meletakkan CSS dan HTML nya saja di template editor. Oke kita mulai dari penerapan CSS kemudian HTML nya.

CSS

Letakkan kode CSS berikut tepat di atas ]]</b:skin>

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

HTML

Letakkan kode berikut tepat di bawah </header>

<nav>
<ul>
<li><a href='/search/label/Tutorial'>Tutorial</a></li>
<li class='sub'><a href='/search/label/Template'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='/search/label/SEO'>SEO</a></li>
</ul>
</li>
</ul>
</nav>

Kemudian simpan template anda. Tutorial membuat menu dropdown berakhir sampai sini.
buka juga menampilkan widget di halaman tertentu

Read More

Menampilkan Widget Tertentu Di Halaman Tertentu

Ketika kita sedang menuju blog seseorang, terlihat tampilan widget blog tersebut kadang ganti-ganti. Misalnya, di halaman depan Wigdet A, di halalaman lainnya Widget A tidak muncul. Ada apa gerangan....

Sebenarnya, ada beberapa cara yang dilakukan oleh blogger untuk melakukan hal tersebut. Maksudnya Menampilkan Widget Tertentu Di Halaman Tertentu. Mau tahu?

Beginilah caranya secara umum (tips ini tujuannya adalah mempercantik tampilan blog).

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Tanda Titik - titik di atas adalah kode widget yang harus di tempatkan

Sebagai Contoh perhatikan di bawah ini.
Coba anda menuju Dunia Sarah. Di halaman depan Widget Fan Facebook tidak muncul. Lalu di halaman kedua ketika klik sebuah artikel, maka Widget Fan Facebook muncul. Untuk melakukan hal itu silahkan coba ikuti langkah berikut.

Menampilkan Widget Tertentu Di Halaman Tertentu
1. Tentunya anda harus buka akun blog anda sendiri.
2. Masuklah ke Elemen Template. Lalu klik Edit HTML
3. Carilah widget yang anda sembunyikan (sebelumnya anda sudah memasang widget di dalam blog anda).
4. Misalnya Widget Fan Facebook. Silahkan cari tulisan "Fan Facebook" (gunakan Ctrl + F untuk mencari secara cepat)
5. Setelah ketemu, maka akan muncul kode persis seperti dibawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>

6. Selanjutnya tambahkan kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>

sebelum kode

<!-- only display title if it's non-empty -->

7. Setelah ditambahkan lalu masukkan kode </b:if> sebelum kode

</b:includable>
</b:widget>

8. Maka hasilnya akan persis seperti di bawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>

9. Selesai. Simpan Template blog anda.

Catatan : Huruf yang berwarna biru adalah Kode yang ditambahkan. Ingat satuhal, penempatannya jangan salah yah. Harus pas. Kalao gak pas, maka eror. Untuk mengantisipasinya, sebaiknya sebelum memulai langkahlangkah di atas, Simpan Template Blog anda terlebih dahulu.

Read More