Tentu sobat semua juga sudah pernah menjumpai kan?? yaitu blog seseorang yang dimana di blog tersebut terdapat beberapa widget yang terkadang saat kita menuju ke halaman beranda/home page disitu banyak sekali widget yang tampil,,, tetapi begitu kita membuka halaman sebuah posting/artikel blog tersebut,,,, maka widget tersebut hilang... atau juga sebaliknya....
Nah,,, inilah yang saat ini akan kita bahas...
Ok lah.. Tak perlu banyak kata2 langsung aja sobat blogger semua ikuti tutorial dibawah ini.
Cara Membuat Widget Muncul dan Hilang di Halaman Home dan Halaman Post.
1. Login ke Blogger
2. Langsung menuju ke Design/Rancangan
3, Klik Edit HTML
4. centang tulisan "Expand Widget Template"
5. Cari kode berikut :
]]></b:skin>
Letakkan kode berikut ini setelah kode diatas
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#main-wrapper{float:right;}
#sidebar-wrapper{float:left;}
</b:if>
</style>
<b:if cond='data:blog.pageType == "item"'>
#main-wrapper{float:right;}
#sidebar-wrapper{float:left;}
</b:if>
</style>
Selanjutnya sobat harus cari kode id widget, disini sobat blogger semuanya diharuskan untuk memberi judul/nama dari widget sobat ya?? misalnya : Teman Bengkel Humor, Popular, Statistik, Dll...
hal ini dilakukan Agar sobat blogger tidak pusing dalam menentukan widget yang mana yang mau di sembunyikan??
Kode id widget biasanya dimulai dengan kode <b:widget id=
Contoh kode widget label:
<b:widget id='Label1' locked='false' title='Title' type='Label'>
Berikut caranya melakukannya:
- Masuk ke blogger
- Klik Tata Letak
- Klik Edit Html >> Expand Widget Template (jangan lupa backup)
- Lalu cari judul/nama widget sobat. (Disini saya kasih contoh ya?? misalnya : Statistik) (ctrl +f biar gampang nemuin kodenya)
1 . Jika ingin menampilkan widget hanya pada halaman home page/beranda (tidak pada posting)
Struktur kode yang disisipkan akan seperti di bawah ini :
<b:widget id='HTML1' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name="quickedit">
</b:includable>
</b:widget>
Keterangan :
Huruf yang berwarna kuning adalah judul widget sedangkan huruf yang berwarna Hijau adalah kode untuk menampilkan widget hanya dihalaman Home saja.
Simpan Template dan lihat hasilnya,,
2 .Jika ingin menghilangkan widget pada halaman home page/beranda (tampil selain home)
Struktur kode yang disisipkan akan seperti di bawah ini :
<b:widget id='HTML14' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name="quickedit">
</b:includable>
</b:widget>
Keterangan :
Huruf yang berwarna kuning adalah judul widget. Huruf yang berwarna Hijau adalah kode untuk menghilangkan pada halaman home ( tampil saat anda membuka link posting )
Simpan Template dan lihat hasilnya,,
Kesimpulan:
Di bawah kode id pada setiap widget, biasanya terdapat kode b:includable seperti ini
<b:includable id='main'>
1. Jika sobat ingin menampilkan widget hanya pada halaman homepage, sisipkan kode ini (conditions) di bawah code <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Jangan lupa untuk memberikan tag penutup kode diatas
</b:if>
2. Begitupun untuk menyembunyikan widget pada halaman home. sisipkan kode ini (conditions) setelah kode <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
Dan juga Jangan lupa untuk memberikan tag penutup kode diatas
</b:if>
Jika Sudah selesai semua jangan lupa klik simpan template.
Bagaimana??? Simpel Gampang dan Mudah kan..!!
Jika posting ini bermanfaat dan suka dengan posting ini tolong support ya..! Dengan cara share melalui Google+ / FB Share / Twitter Share / yang lainnya, tombol sharenya berada di samping kiri posting. Terima Kasih ya,,.
Tidak ada komentar:
Posting Komentar