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 :
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)
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:
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 :
Sedangkan untuk menampilkan widget hanya pada halaman postingan (content page), kita cukup menambahkan kode berwarna merah berikut ini :
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 :)
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 != ""'>
<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