Menampilkan atau Menyembunyikan Widget Di Blog

Menampilkan atau Menyembunyikan Widget Di Blog

Bola Hero Gawai

Menampilkan atau Menyembunyikan Widget Di Blog

show and hide
Bagi Anda yang sedang menata tampilan blognya kini saya share cara Menampilkan atau Menyembunyikan Widget Di Blog. Dengan Menampilkan atau Menyembunyikan Widget Di Blog tentunya halaman depan, halaman postingan, halaman statis, ataupun halaman arsip tidak penuh dijejali dengan widget. Kita bisa mengatur widget apa saja yang mau ditampilkan di halaman depan atau widget apa saja yang mau disembunyikan di halaman statis sehingga tampilan blog kita lebih rapih.

Cara Menampilkan atau Menyembunyikan Widget Di Blog cukup mudah. Namun untuk memudahkan pencarian kode html widgetnya nantinya, sebaiknya widget tersebut sudah diberi judul/title. Seperti misalnya kita mau mencari widget dengan title Widget1, seperti biasa kita pergi ke Dashboard >> Template >> Edit HTML >> Centang Expand Widget Templates. Gunakan CTRL + F pada keyboard untuk memudahkan pencarian dan ketikan Widget1 pada kolom pencariannya, kemudian kita akan menemukan kode HTML seperti di bawah ini:


<b:widget id='HTML1' locked='false' title='Widget1' 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>  

kemudian kita akan tambahkan script di bawah kode <b:includable id='main'> dan di atas kode </b:includable>.

1. Untuk menampilkan widget hanya di Homepage:
Tambahkan kode  <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> sehingga menjadi seperti di bawah ini.


<b:widget id='HTML1' locked='false' title='Widget1' 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>

2. Untuk menampilkan widget hanya di Postpage:
Tambahkan kode  <b:if cond='data:blog.pageType == &quot;item&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.


<b:widget id='HTML1' locked='false' title='Widget1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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>

3. Untuk menampilkan widget di halaman tertentu:
Tambahkan kode  <b:if cond='data:blog.url == &quot;URL Halaman&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.

<b:widget id='HTML1' locked='false' title='Widget1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;URL Halaman&quot;'>
<!-- 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>

Ganti URL Halaman dengan alamat URL Halaman tersebut.

4. Untuk menyembunyikan widget di halaman tertentu:
Tambahkan kode  <b:if cond='data:blog.url != &quot;URL Halaman&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.

<b:widget id='HTML1' locked='false' title='Widget1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != &quot;URL Halaman&quot;'>
<!-- 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>

Ganti URL Halaman dengan alamat URL Halaman tersebut.

5. Untuk menampilkan widget hanya di halaman Archive:
Tambahkan kode  <b:if cond='data:blog.pageType == &quot;archive&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.

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

6. Untuk menampilkan widget hanya di halaman statis:
Tambahkan kode  <b:if cond='data:blog.pageType == &quot;static_page&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.

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

7. Untuk menyembunyikan widget di halaman statis:
Tambahkan kode  <b:if cond='data:blog.pageType != &quot;static_page&quot;'> dan </b:if> sehingga menjadi seperti di bawah ini.

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

Demikian cara Menampilkan atau Menyembunyikan Widget Di Blog mudah-mudahan bermanfaat.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

18 Comments Add Comment

Terima kasih =D

Balas

bingung saya kalau liat tulisan kode2 HTML dan css.. tapi pasti keren ni dan wajib di coba, karena ada kalanya widget di sembunyikan dan ada kalanya widged di tampilkan.

Balas

ya pake tag kondisional mas. thenk for sharing

Balas

Mudah dimengerti tutornya Kang Adhy, siipp :-D

Balas

Tag kondisional adalah cara yang cukup efektif untuk mempercepat loading blog :)

Balas

mksh atas infonya ya mas
ijin untuk mempelajari

Balas

maaf kang agak melenceng ti artikel tapi inti na mah sama show hide tapi saya mah hilang and nongol yang ada nya di meta ,
mau tanya aja kang seandai nya
data:blog.url == data:blog.homepageUrl
saya noindex and nofollow dan hide
apa pengaruh gag yah terhadap webmaster smartphone blocked url soalnya beberapa url saya blocked bukan dari robots txt m=1 ataupun 0
saya test beberapa blog g mau nongol webmaster smatphone na di webmaster tau kali si google dah beberapa minggu tetep yang lama

Balas

bagus nih, biar lebih rapih tampilan home page-nya =)D

Balas

mas kalau pake css bisa gak ? misalnya jadi 1 group dari beberapa widget HTML yang ada ,kebetulan HTML yang saya buat tidak pake judul dan agar widget html tersebut hanya tampil di homepage /halaman depan saja tanpa diikutsertakan pada halaman postingan gimana ? soalnya saya coba cara yang diatas dengan beberapa sumber yang berbeda tidak berhasil.,

Balas

Meskipun tidak pakai judl, setiap widget HTML memiliki ID Widget seperti id='HTML1' atau id='HTML2' dan lainnya. Untuk menghilangkannya di postingan, coba seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#HTML1,#HTML2,#HTML3{
display:none;
visibility:hidden;
}
</style>
</b:if>


Silahkan sesuaikan ID widgetnya dengan id widget blog Anda yang ingin disembunyikan di postingan, simpan kode tadi di atas kode </head>

Balas

sudah berhasil ternyata mas ,saya pakenya css !
tapi yang pasti ilmunya mas sangat bermanfaat. terima kasih

Balas

betul banget mas sudah berhasil ,hanya saja saya nyimpannya dibawah ]]> apakah sama/tidak masalah ?

Balas

Bisa, asal jangan di atasnya saja :)

Balas

1 lagi mas :) ,cuman ini untuk halaman statisnya .agar ukurannya menjadi full tanpa ada space sidebar / widget yang tersisa ,gimana ya ? apa mesti nambahin margin,padding,dll..

Balas

Coba dengan ini
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#sidebar-wrapper{
display:none;
visibility:hidden;
}
.post-container {
margin:0!important;
}
</style>
</b:if>

Balas

wah BERHASIL banget mas ,mantap deh buat mas adhy...
cuman jarak (Height ) di halaman postinganya masih berjauhan ... tapi gak apa2,terima kasih banyak atas bantuannya (y)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×