Serieswans.com | Cara Menampilkan dan Menyembunyikan Widget Halaman di Blog - Hallo sahabat blogger, pada kesempatan kali ini saya akan membagikan tutorial cara menampilkan dan menyembunyikan widget di blog. widget blog yang terlalu banyak tentunya akan mengurangi proses kecepatan loading blog. bagi seorang blogger harus pintar untuk memilih widget apa saja yang penting untuk di tampilkan di blognya. contohnya widget artikel terbaru atau popular post ini juga menurut saya sangat penting.
Usahakan anda tidak memasang widget-widget yang keberadaanya tidak terlalu digunakan, supaya tampilan blognya menjadi lebih rapih.
Jika anda sedang merapihkan tampilan blognya, ada cara untuk menampilkan dan menyembunyikan suatu elemen atau widget di halaman tertentu pada blog. fungsi cara tersebut adalah untuk membuat halaman blog anda terlihat lebih rapih dan membuat kecepatan loading blognya lebih cepat.
Cara Menampilkan atau Menyembunyikan Element Widget ini cukup mudah untuk di implementasikana di blog, karena hanya memerlukan waktu beberapa menit saja.
 |
| Menampilkan dan Menyembunyikan Widget Halaman di Blog |
Cara Menampilkan atau Menyembunyikan Element Widget
Kita hanya perlu menyisipkan atau menambahkan kode di dalam widget tersebut pada template blog anda. misalkan anda ingin menampikan widget popular post hanya di hompage saja atau anda ingin menyembunyikan widget artikel terbaru di halaman statis ataupun di halaman postinan saja.
Untuk menyembunyikan widget di blog pada halaman tertentu adalah dengan menggunakan Tag Kondisional (Conditional Tags).
Apa itu Conditional Tags (Tag Kondisional)
Tag Kondisional merupakan suatu tag XML Blogger yang berfungsi untuk membuat perintah agar suatu widget atau elemen yang akan di tampilkan pada halaman bisa di tampilkan atau di sembunyikan.
Oleh karena itu pada tutorial kali ini saya membagikan cara untuk menampilkan atau menyembunyikan widget pada halaman tertentu di blog, silahan anda pilih sesuai kebutuhan. silahkan simak dan ikuti langkah-langkah di bawah ini.
Cara Menampilkan Widget Pada Halaman Tertentu di Blogger
Sebelum kita masuk ke tutorial menyembunyikan dan menampilkan widget, anda harus mengetahui cara menemukan ID Widget yang akan di sembunyikan. Silahkan anda ikuti cara di bawah ini untuk mencari ID Widget.
1. Login ke Blogger.com dan masuk menu Dashboard blog.
2. Pilih Tata Letak/Layout => Klik edit pada widget yang anda pilih.
3. Lihat pada bagian URL/Adreess di halaman pop up new window tersebut.
3. setelah itu geser URL ke kanan paling ujung, dan anda lihat kata widgetID=HTML1. HTML1 ini adalah ID Widgetnya, untuk lebih jelas anda bisa lihat gambar di bawah ini.
 |
| ID Widget Blog |
4. Kita telah menemukan ID Widgetnya, silahkan simpan ID Widget tersebut di notepad. sekarang kita lanjut ke langkah selanjutnya.
Menambahkan kode Tag Kondisioanl pada Element Widget
Setelah anda menemukan ID Widget yang ingin anda tambahkan tag kondisional untuk menampikan atau menyembuykan di halaman tertentu, anda harus menambahkan tag kondisonal <b:if cond= pada element widget tersebut.
Cara menambahkan Tag Kondisional pada Widget blog
1. Masuk ke menu Dashboard blog => Tema/Template => Edit HTML
2. Kemudian anda cari kode ID Widget yang anda simpan di notepad tadi, tekan tombol CTRL + F untuk memudahkan mencari ID Widgetnya.
Sebagai contoh disini saya mencari ID Widget Artikel Terbaru dan kode ID Widget pada template saya adalah (HTML1).
3. Namun ada cara simpel untuk mencari kode tersebut yaitu klik tombol Lompat ke Widget, nah disitu tinggal anda pilih ID Widgetnya. anda bisa lihat pada gambar di bawah ini.
 |
| ID Widget Blog |
4. Selanjutnya kita tambahkan Tag Kondisonal <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah <b:includable id='main'> dan </b:if> pada tag penutupnya yaitu </b:includable>.
contohnya bisa lihat gambar di bawah ini.
 |
| Pemasang Tag Kondisional pada Widget |
Atau perhatikan pada kode berikut.
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<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:if>
</b:includable>
</b:widget>
5. Terakhir simpan Tema dan cek hasilnya
Beberapa Tag Kondisional yang bisa anda gunakan
Dibawah ini ada beberapa Tag Kondisional yang bisa anda gunakan untuk menampilkan atau menyembunyikan widget pada halaman di blogger.
Untuk Menampilkan Widget hanya di halaman Homepage gunakan tag kondisional <b:if cond='data:blog.url==data:blog.homepageUrl'>
contoh penerapanya seperti berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<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:if>
</b:includable>
</b:widget>
2. Menampilkan Widget hanya di halaman Postingan gunakan Tag Kondisional <b:if cond='data:blog.pageType == "item"'>
contoh penerapannya seperti berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
3. Menampilkan Widget hanya di halaman Arsip (Archive) gunakan Tag Kondisional <b:if cond='data:blog.pageType == "archive"'>
contoh penerapannya seperti berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
4. Menampilkan Widget hanya di halaman Statis gunakan Tag Kondisional <b:if cond='data:blog.pageType != "static_page"'>
contoh penerapannya seperti berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
5. Menampilkan Widget hanya di satu halaman gunakan Tag Kondisional <b:if cond='data:blog.url == "Masukan Link URL Halaman disini"'>
Contoh penerapannya seperti berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><div class='widget-content'>
<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=6&alt=json-in-script&callback=artikelterbaru"></script>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.url == "Masukan Link URL Halaman disini"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Itulah beberpa Tag Kondisional yang bisa anda gunakan untuk menyembunyikan ataupun menampilkan widget pada halaman tertentu
Jika anda ingin menyembunyikan atau menampilkan widget lain, jangan lupa cari dulu ID dari widgetnya.
Demikian pembahasan tutorial kali ini mengenai Cara Menampilkan dan Menyembunyikan Widget Halaman di Blog. jika anda rasa artikel ini bermfaat silahkan share ke teman-teman media sosial anda dan jangan lupa tinggalkan komentar anda mengenai postingan artikel ini ya. terima kasih sudah berkunjung ke blog serieswans.com
4 komentar