Follow my Blog

Rabu, 24 Oktober 2012

Menyembunyikan Widget Magazine Template

Konsep dari template bergaya magazine adalah membuat tampilan yang berbeda pada homepage dan content page. Pada postingan kali ini saya akan berbagi dasar membuat tampilan blog ala magazine style dengan menyembunyikan element pada homepage atau content page agar blog kita terlihat semi-magazine style. Fungsi menyembunyikan widget selain membuat tampilan blog kita lebih hidup, cara ini juga bisa digunakan untuk mengoptimalisasi widget mana saja yang terpakai di homepage dan content page. Sebagai contohnya dapat teman-teman lihat di sidebar blog ini pada widget "Random Post" yang hanya saya tampilkan di content page menggantikan widget "Stay Connect With KBM". Selain itu cara ini juga sangat berguna untuk teman-teman yang bermain di jual-beli link karena banyak sekali pengiklan yang hanya menginginkan linknya dipasang di homepage.
Untuk menyembunyikan widget/element, tahap pertama yang harus kita lakukan adalah mengetahui widget id element yang akan kita sembunyikan. Caranya silahkan masuk halaman "Edit HTML" blogger:
Layout >> Edit HTML >> kemudian klik "Expand Widget Templates"
Sekarang cari widget id dari element yang akan kita sembunyikan, widget id biasanya diawali dengan kode seperti berikut ini :

<b:widget id='

Sebagai contohnya silahkan liat widget "Stay Connect with KBM" pada blog ini:
(Untuk lebih mempermudah teman-teman bisa langsung mencari title dari widget yang akan kita sembunyikan)

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' 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>


Setelah menemukan widget id maka kita cukup menambahkan beberapa kode HTML seperti dibawah ini untuk menyembunyikan widget tersebut di home page atau di content page:

Menampilkan widget hanya pada Home Page

Untuk menampilkan widget hanya pada halaman depan (home page) silahkan tambahkan kode yang berwarna merah dibawah ini pada kode HTML widget yang telah kita cari pada tahap sebelumnya :

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Menampilkan widget hanya pada Content Page

Sedangkan untuk menampilkan widget hanya pada halaman postingan (content page), kita cukup menambahkan kode berwarna merah berikut ini :

<b:widget id='HTML15' locked='false' title='Stay Connect With KBM' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Kedua kode di atas hanya contoh untuk menyembunyikan widget, kode di atas juga bisa digunakan untuk menyembunyikan seluruh sidebar, footer dan sebagainya. Teman-teman bisa berkreasi sepuasnya untuk membuat tampilan lebih bergaya magazine template. Selamat berkreasi :)

Tidak ada komentar:

Posting Komentar