Cara Menampilkan Widget Hanya di Homepage/Halaman Posting


Ketika melakukan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu saya pernah berbicara mengenai bagaimana menyembunyikan sidebar Blogger di halaman tertentu, dengan menggunakan conditional tags dan CSS (display), dan jika yang diinginkan hanya untuk menyembunyikan satu atau beberapa widget, maka tentu kurang tepat jika diterapkan. So, dalam kesempatan ini, saya ingin berbagi mengenai bagamana menampilkan atau menyembunyikan salah satu atau beberapa widget dalam halaman tertentu, dan menampikannya pada jenis halaman lain.

Konsep Hack Menampilkan Widget Pada Halaman Tertentu

Cara ini sebenarnya masih sama dengan artikel yang sebelumnya sudah saya sebutkan, yaitu menggunakan conditional tags (b if), salah satu tag XML Blogger, untuk memberikan perintah agar suatu elemen ditampilkan pada bagian/halaman tertentu saja dan menyembunyikannya pada bagian/halaman lain.  Conditional (if) juga dikenal penggunaanya pada PHP, dan juga dikenal dalam bahasa Inggris (if clause, conditional sentence) hehehehe..... Bedanya dengan cara sebelumnya, cara yang saya tawarkan ini tidak akan menggunakan CSS, melainkan menggunakan conditional tags langsung pada elemen yang hendak diberikan perintah, yang dalam hal ini adalah elemen-elemen widget.

Langkah-langkah Menampilkan Widget Pada Halaman Tertentu

1. Mencari ID Widget
Sebelum memberikan conditional tags, anda harus mengetahui ID widget yang hendak ditampilkan pada halaman tertentu. Cara mencarinya sangat mudah:
a. Ada dua cara untuk mengakses editor widget (sebenarnya ada 3, yaitu melalui edit HTML, tapi cara ini akan lebih rumit:
- Jika anda dalam kondisi login Blogger, anda dapat langsung mengakses "quickedit" langsung dari halaman blog, quickedit adalah tool untuk mengedit widget secara langsung, letaknya biasanya adalah di bagian pojok kanan bawah widget, berupa ikon obeng dan kunci (screwdriver and wrench). Klik icon pada widget yang diinginkan dan akan muncul pop-up window dimana anda dapat mengedit konten widget.
- Atau akses editor widget melalui halaman "Layout", lalu klik link "edit" di salah satu bagian widget. Kemudian akan muncul pop-up window.
b. Lihat di bagian URL/address di browser pada halaman pop up window tersebut. Letak ID widget berada di bagian akhir URL (geser URL ke kanan). Perhatikan contoh gambar berikut:
buka-rahasia.blogspot.com

d. Simpan Id Widget tersebut, misalnya dari contoh di atas, Id widget yang hendak saya edit adalah "HTML11".

2. Memberikan Conditional Tags Pada Elemen Widget
Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan contoh widget yang sudah disampaikan di atas:
a. Masuk ke halaman template (Dashboard > Template)
b. Klik "Edit HTML" > Proceed.
c. Jangan lupa klik/centang "Expand Widget Templates" untuk menampilkan seluruh elemen widget di dalam editor.
d. Tekan CTRL+F, masukkan ID widget yang diinginkan yang sebelumnya telah dicari dan dipersiapkan. Dalam contoh ini saya akan menggunakan id widget "HTML11" sebagai contoh dan berikut kurang lebihnya elemen widget sobat:
buka-rahasia.blogspot.com
e. Kemudian tambahkan conditional tag setelah <b:includable id='main'> dan tag penutupnya sebelum </b:includable>. Berikut conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan itulah yang harus ditambahkan:

Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='' 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 != &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>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='' 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 != &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>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- 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>

Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- 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>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- 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>

f. Setelah conditional tags ditambahkan, save template.

Jika ingin melakukan hal yang sama pada beberapa widget, anda harus melakukan dan mengulang cara yang sama seperti di atas: cari ID widget, cari elemen widget sesuai ID di edit HTML, dan masukkan conditional tags berdasarkan jenis halaman ke dalam elemen widget. Save and Done.
Semoga bermanfaat and have a nice Blogging.

© buka-rahasia.blogspot.com. 2012 - 'Til drop. All rights reserved.

Cara Menampilkan Widget Hanya di Homepage/Halaman Posting
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 99 Comment(s):

Beben Koben said...

yang perlu diperhatikan satu lagi nih!!!
jangan salah melakukan penampilannya. nanti kategori hanya ada pd hal utama saja, padahal kan kalo 1 full halaman postingan membantu mesin untuk meng crawler ;)

begitu kira2

Unknown said...

@Koben: Benar sekali, sobatku beben Koben, sebagai tambahan gunakan cara ini untuk widget2 tertentu yang memang hanya ingin ditampilkan di halaman-halaman tertentu saja, misalnya widget iklan. Jangan gunakan pada widget2 yang mengandung link posting, navigasi, dan sejenisnya.
Sip. Btw, komentar sobat di salah satu blog di Pakistan tadi ane reply xixixixi...

Anonymous said...

kenapa iklan google adsensenya di banned mas ahmad.

apa karena menampilkan iklan affiliate porno perbesar penis yah mas

sama donk nasib kita 2 padahal traffik udah berjibun "-"

Unknown said...

terimakasih sob buat infonya :)

Unknown said...

@anonymous: Saya melepas adsense sebelum ada banned besar-besaran kemarin itu, dan alhamdulillah tidak ada kasus apa pun pada akun saya. Sebelumny saya melepas adsense di blog ini karena tidak produktif dan tidak tertarget.

Anonymous said...

Informasi yg sangat bermanfaat.
ini yg aku cari cari selama ini.

Thanks Makasih banyak Pak Atas Tutorialnya "-"

Beben Koben said...

@Ahmad yg mana tuh...xixixixixixi.
mantap2 maen jg sampe ke sono master :D

rihsan said...

mantap mas share juga dong cara membuat widget di footer dan sesuai dengan template blog tersebut ditunggu yaa :D lebih kurangnya seperti blog arifpoetrayunar.blogspot.com

Muhammad Zulfi Rahmanzi said...

keren sob izin copy scriptnya ye (visit : http://sangmastervirus.blogspot.com/)

fiska said...

wah, berguna nie..
bz ngurangin loading pas buka artikel ^^
thanks ya min..

http://theartworkers.blogspot.com/ said...

manteb kang...

Unknown said...

oke sip gan azmi,, saya coba dulu di blog Marketing Jepara

Pak Kusir said...

Jadi seperti, label, arsip, follower itu harus ada di homepage ya mas??

syaefudin said...

ilmu baru nih
keren banget gan
w coba deh di blog w
salm kujung

kumpulan gif animation said...

mantap kang .... informasinya

abang said...

sangat bermanfaat kang Azmi,

Unknown said...

sip brow

Jun said...

Begitu ya gan ...
thanks ya :)

WaOne Creator said...

Mas aku mau tanya..kok semua link blog.ku kayak begini

http://waonecreator.blogspot.com/2012/10/all-in-shop-hack.html#.UHkd4uFzoak

ada begininya #.UHkd4uFzoak apa itu berpengaruh pada blog

terimah kasih

Dwi Sugiarto said...

Mas cara agar widget linkwithin 4 kotak di halaman posting seperti punya mas,bagaimana?

Lensa Olahraga said...

penjelasannya lengkap banget, tutorial di blog ini juga bagus2 dan sangat membantu buat saya yang baru belajar ngeblog, :D thx mas, salam kenal :)

Ahmad said...

wah penjelasannya mantab banget sob, thanks atas info dan penjelasannya . slam kenal

hary said...

sangat membantu sekali arikelnya gan.. thanks

irwansyah said...

menarik untuk disimak sob penjabarannya sangat jelas dan gambalang

syakir said...

Mantabs mas.. nice info,. thanks

Radit Aditya Rahman said...

Thank buat infonya sob, aku simak semua info dari anda menjadi masukan buat saya untuk mengikuti jejak anda….

shubhi said...

Makasih infonya bos,,,

tas bayi said...

matur suwun infonya gan..............

dk said...

makasih gan, infonya sangat berguna!
sukses!

C3C3P said...

terimakasih udah share artikel nya ijin nyimak gan,dan saya tunggu artikel terbaru nya,,,,:)

Sunthree said...

Keren tipsnya gan, ini dia yang dicari langsung dipraktekin langsung bisa jalan. thanks infonya

Anonymous said...

langsung ke tempat ah, kayaknya keren nih di coba bang azmi hehehe

Rico Ade Mandana said...

ada yang curi konten bang ini linknya, per tanggal 27oktober2012 tidak ada link sumbernya
http://catatan-27.blogspot.com/2012/10/cara-bikin-redirect-halaman-blogger.html

Unknown said...

@Rico: Terima Kasih buat informasinya :)

Anonymous said...

LAngsung dicoba dan mendarat di TKP sob

Anonymous said...

Terimakasih, Bermanfaat

you said...

Gan kenapa ya tampilan blog ketika dbuka di google chrome sama di mozila berbeda... kalau dcrhome templatenya sesuai html v kalo di mozila tampilannya ko sangat sederhana.. mohon panduannya

Unknown said...

Itu berarti template anda tidak diuji cross browsers. Artinya kemungkinan ada beberapa CSS (terutama CSS3) khusus untuk mozilla yang tidak ditambahkan, padahal sangat penting. Perlu dicek CSS nya satu per satu tuh

Unknown said...

Boleh dicoba sob triks nya ?

Yang berminat Pasang Iklan Murah Hanya 5000/bulan Pasang 1 gratis 1.

Unknown said...

ok gan tahanks buat ilmu nya....

Unknown said...

maturnuwun buat infonya :)

Dapah blog said...

Menampilkan Widget Hanya di Homepage dan Halaman Posting! Manfaatnya apa sih Pak??? maklum blogger pemula.


Salam sukses selalu Pak...

Rumah Indihome Jogja said...

Pak Bro widget nya sih dah ilang , tapi kolom bar nya masih nyantol, itu gimana ya ngilanginnya ?

Anonymous said...

Sangat berguna ni,
apalagi untuk widget2 yang banya,
mending di home page aja biar pas buka postingan lain gag terlalu lemod

terima kasih gan

firmanu swantara said...

saya sudah coba widget follower nya di taruh di home page, tapi gak bisa, mohon bantuannya

Zulham Efendi said...

aku mencoba melakukannya beberapa kali dan ternyata yang harus di pahami adalah bagian mana kode penutup dari kode pembukanya agar tidak terjadi error hehehe,..terimakasih mas izmi

Anonymous said...

thanks mas atas Tutorialnya mas,.. :D

spider group said...

Om'' gimana caranya Bikin Forum yang kayak Om Punya
terimakasih Om

DI BAWAH INI said...

Berhasil mas bisa tampil di satu halaman tertentu ..
Bagaimana mas agar bisa tampil di dua, tiga, atau beberapa halaman postingan ...
mohon dibantu ...
(pakdenanto.com)

Orangbiasaji said...

Makasih tutorialnya om ... sudah berhasil diterapin ke blog ane, silahkan ceh . Catatan ala orang biasa skalian blogwalking om hehehe

Unknown said...

Thanks mas bro tips untuk menyembunyikan widgetnya. aku coba dan hasilnya ok. Salam kenal ya

Unknown said...

klo cuma disembunyikan pada laman?

Unknown said...

gabungkan dua tag, tag untuk menampilkan di homepage dan dan tag menampilkan di posting

Unknown said...

Ini namanya tag conditional ya om ?

rahmat said...

Makasih banget sob, sangat erguna

Anonymous said...

nah ini yang saya cari
kebetulan widget di blog saya lmyn banyak, jd widget hanya tampil di homepage saja
hanya sebagian yang muncul di tiap post
dan hasilnya blog pun menjadi lebih ringan, cepat, dan pengunjung jd lmyn naik hehe....

mantap
makasih banyak

Anonymous said...

makasi bang atas sharingnya kebetulan lg cari dan dapet disini..thx u

Unknown said...

mas maaf mau nanya.. gini mas . wa lagi ngubah" struktur template nih mas .. kepinginnya gini mas . jadi apabila kita berada di halaman artikel . nah judul widget ataupun isi widget itu tidak terdeteksi sebagai tag h1 h2 h3 .. jadi yang terdeteksi itu cuman judul blog - judul artikel - dan tag tag di dalam artikel tersebut .

mohon pencerahannya ya mas . untuk cara melakukan hal tsbt .

Unknown said...

Hai, tidak bisa diubah title widgetnya, karena secara default pada engine Blogger, title widget selalu diformat dalam h2 atau h3. Widget sendiri adalah fitur yang sebenarnya tidak menyatu dengan template, tapi langsung dari engine dan disimpan dalam server Blogger. Jika ingin menghilangkan title, sederhana saja, jangan isi form title pada widget.
Widget yang terdeteksi memiliki title sebenarnya tidak masalah, asalkan dia lebih rendah format H-nya dibanding judul artikel.

Rahmat said...

Makasih atas tutorial di atas gan..saya kebetulan pengen nampilin widget yang ada flashnya cuman pada static page saja..o iya, gimana ya cara menghapus atau memblok salah satu pelanggan RSS blog kita? Saya punya pelanggan RSS yang malah bikin autoblog dari kontent artikel saya..Jengkel jadinya..Thanks gan :)

Unknown said...

Kalo anda pakai feedburner, buka halaman subscriber, lalu ke arah email subscriber list. Di situ akan ada list pelanggan melalui email, cari email yang menurut anda dicurigai digunakan untuk subscribe konten autoblog, dan delete (klik tanda X)

Unknown said...

Sebaiknya diredirect ke feedburner karena akan ada banyak keuntungan, termasuk mengetahui dan menghalangi autoblog.
http://buka-rahasia.blogspot.com/2012/03/cara-buat-redirect-feed-blog-feedburner.html

Rahmat said...

OK mas, maksih banyak bantuannya mas..kapan-kapan saya mampir lagi ya mas :)

Vpie ◥TwekzLibz◤ MahaDhifa said...

.. ijin nyoba ya?!? ..

Unknown said...

Terimakasih mas infonya, sangat bermanfaat buat saya yang pemula.. :-)

Unknown said...

mastah newbie mau tanya,tolong di jawab...
itu maksudnya menampilkan widget di halaman statis gimana?
saya mau mencoba menampilkan widget hanya saat orang membuka next post/posting lama !

Unknown said...

halaman statis itu di blogger disebut pages, contoh url nya blog.blospot.com/p/hal-statis.html

Unknown said...

nah ini yg ane cari,
kalo cara untuk auto load saat scrol ke bawah gimana mas?

mampir ya rizaber.blogspot.com

Unknown said...

Infinite scroll berkaitan erat dengan Ajax-load, dan blogger sama sekali belum support itu. Jadi belum bisa.

Semut Merah said...

Trims untuk tutornya mas, berbagi itu mmg indah hehe,,, btw sy msh bingung cara buat rich snippet, banyak master yg mengurai tp terlalu pelik. Apa mas punya cara yg lbh simple? Makasih mas

Anonymous said...

Sukses di blog saya mas, thanks bgt..

Unknown said...

Artikel yang sangat2 membantu saya.. Terima kasih :)

Lizanovia M. Hadi said...

Mas, sekarang saya sudah ganti template.
Yang bikin bingung, search kode seperti yang di tutorial, kok ngga ada ya? Not found. Menu yang ada sekarang itu "Lompat ke Widget"
Lumayan bingung juga buat edit2 sekarang hehe

Mohon bantuannya, mas
Blog saya lizanovia.blogspot.com
Terima kasih

Unknown said...

@Mbak Liza:
Caranya hampir sama mbak dengan yang dulu, masuk aja ke edit HTML, lalu pastikan kursor sudah klik di bagian HTML, trus klik CTRL+F. Nanti akan muncul fitur search milik Blogger, bukan browser. Nah masukkan kode ke dalamnya, tekan Enter, nanti search otomatis akan membuka tag-tag yang tertutup dan menuju ke kode yang dimaksud, kalo ada lebih dari satu, tekan enter lagi hingga ke kode yang dituju.

Unknown said...

Makasih atas infonya.
Mohon izin ntuk mempraktekan di blog ane.

Andykid said...

thanks gan, ini yg lg dicari.

sangat bermanfaat ilmunya. :)

Lizanovia M. Hadi said...

Mas, edit html yang sekarang ngga ada expand widgetnya lagi, jadi agak susah buat saya yang awam ini. Karena tampilannya ngga sama kayak sebelumnya. Mohon bantuannya ( lagi ), trims sebelumnya :)

Lizanovia M. Hadi said...

Sudah bisa, mas :) Thank you
Blog ini jadi helper utama saya

Unknown said...

oh oke, mbak. sip. Maaf balasnya telat. ya di bawah artikel sudah saya kasih info mengenai cara cari kode di editor baru. :)

Mas Malik said...

ookok gan mataabb http://bacathok.blogspot.com/

Alexia Edotx said...

Makasih Mas.. Akhirnya punya ane bisa juga. :D

http://wallpaper-ids.blogspot.com/

Unknown said...

wah makasih banget sob, sudah berhasil nih :D
http://yoga-tc.blogspot.com/

A Mahfuda said...

mau tanya nih... walaupun agak berbeda dengan judul.
caraya menambah sidebar di bawah blog seperti yang mas Azmi gunakan untuk menaruh recent post dsb...
gmna caranya soaalnya blog sya terlalu panjang jika di truh di sidebar kanan semua..
mohon bantuannya

Anonymous said...

makasih iformasi dan tutorialnya mas Azmi,. blognya bagus dan banyak memberikan manfaat bagi saya.

Unknown said...

thanks gan tutornya.. sangat bermnafaat

OM HP said...

Udah ane terapin, and it's work. jelas banget tutornya. Thanks mas

Admin said...

Langsung d cba Mas, mkasih bnyak nch...

Meer said...

makasih...beguna bangat...

Diki Pradipta Tri Atmojo said...

makasih, langsung ke TKP ^^

Dea said...

Akhirnya ketemu yang saya cari, thanks ya :)

Unknown said...

Terimakasih mas, berguna sekali untuk iklan ukuran 300x1050 :D
sudah saya terapkan di blog :)

Bimbel Anak said...

nice share jadi nambah ilmu disini..thx mas...

Juju Onyols - Sikonyols said...

Mau nanya pak, apakah bisa memasang widget dalam dua posisi berbeda?

misal dihalaman homepage saja dan page static

Unknown said...

Bisa. Buat dua widget yang sama, lalu atur masing-masing untuk tampil hanya di homepage dan hanya di halaman statis saja.

juan said...

Izin bookmark mas khoirul..

Unknown said...

monggo massss

Unknown said...

trimakasih mas....

pakningbertuah said...

mantap..sangat membantu saya yang pemula. terima kasih

Umroh Berbudi said...

Waaah ini yg saya cari-cari gan, mantaaab
semoga ilmu-ilmunya tambah berkah gan

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap