Recent Post

Sponsored

Labels

addressbook Menyembunyikan Widget Ala Magazine Style Part.1

Diposting oleh dev | , | 9 komentar »

Magazine StyleMerubah tampilan blog memang merupakan hal yang menyenangkan. Selain membuang rasa jenuh terhadap tampilan blog yang sudah lama kita pakai, interface blog juga dapat membuat pengunjung merasa nyaman saat berkunjung ke blog kita. Di postingan sebelumnya saya sudah membahas bagaimana cara "Membuat Image Hover Dengan CSS". Pada kesempatan kali ini saya akan sedikit berbagi bagaimana cara menyembunyikan widget di homepage atau content page seperti yang sering kita lihat pada template magazine style.

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 :)

NB: Karena judul postingan ini "Menyembunyikan Widget Ala Magazine Style Part.1", maka pada postingan selanjutnya saya akan berbagi bagaimana menyembunyikan widget dengan cara yang berbeda dan tentu saja dapat di kombinasikan dengan cara pada postingan ini.

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 9komentar ke “Menyembunyikan Widget Ala Magazine Style Part.1”
Natha Lia said...
 date:

wah...makasih ya...kayaknya ini yg qu cari dech.........

See More My Blog

Natha Lia Blog

Download Ebook Free

Download Full Free Software

Adult Blog

dev said...
 date:

@Natha Lia: sama-sama..semoga bermanfaat..

Did You connected with zall said...
 date:

makasih sharing nya bro... jd inspirasi buat saya yg berencana mau buat koran rakyat online :)
Btw, ada contoh theme magazine buat wordpress gak bro? biar teman2 yg ngunjungi blog ini bs pada ngunduh langsung :)
Thanks

fikz said...
 date:

wuih..asik nih..dapt ilmu baru..he he
ijin coba ya.......

dev said...
 date:

@all: makasih juga kunjungannya..

amyoies said...
 date:

wah sip markusip...top markotop...joss markojos :P. langsung ke tkp....

dev said...
 date:

amyoies: silahkan, semoga berhasil :)

kowandy said...
 date:

ilmu baru lagi..thnks ya

cerita anak kost said...
 date:

makasih bang, berhasil. ane ngelakuin ini biar kecepatan blog bertambah. makasih ya bang.


leave comment
back to top
comment notes

Post a Comment

devbook.net