Cara Menampilkan dan Menyembunyikan Widget pada halaman tertentu

Secara default bila kita menambahkan widget pada blog akan muncul pada bagian homepage dan juga pada bagian halaman halaman post lainnya. Untuk membuat widget hanya tampil pada halaman tertentu atau juga menyembunyikan widget pada halaman tertentu sesuai yang kita hendaki, kita bisa lakukan dengan menambahkan kode perintah tertentu pada template. Menyembunyikan widget biasanya digunakan pada halaman-statis yang memerlukan ruang tersendiri di blog, seperti halaman Contact, About Me, Sitemap, Tukar Link atau halaman lainya yang kita kehendaki. Atau mungkin juga Anda hanya ingin menampilkan widget-widget tersebut hanya di homepage saja. Untuk mempermudah kita bahas satu persatu sebagai berikut :

Kode perintah dibawah disisipkan pada bagian widget yang ingin kita tampilkan pada halaman utama atau homepage, dibawah ini langkah dan Kode yang perlu ditambahkan adalah sebagai berikut.

Menampilkan elemen/widget hanya dihalaman Utama/Hompage :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
...........
</b:if>

Menyembunyikan elemen/widget di Halaman Utama/Hompage :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
...........
</b:if>

Menampilkan elemen/widget hanya di Staticpages :

<b:if cond='data:blog.pageType == "static_page"'>
...........
</b:if>

Menyembunyikan elemen/widget di Staticpages :

<b:if cond='data:blog.pageType != "static_page"'>
...........
</b:if>

Menampilkan elemen/widget hanya di Itempages (Postingan) :

<b:if cond='data:blog.pageType == "item"'>
...........
</b:if>

Menyembunyikan elemen/widget di Itempages (Postingan) :

<b:if cond='data:blog.pageType != "item"'>
...........
</b:if>

Menampilkan elemen/widget hanya Pada Archivepages :

<b:if cond='data:blog.pageType == "archive"'>
............
</b:if>

Menyembunyikan elemen/widget di Archivepages :

<b:if cond='data:blog.pageType != "archive"'>
............
</b:if>

Menampilkan elemen/widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url == "URL Postingan"'>
............
</b:if>

Menyembunyikan elemen/widget di URL Postingan Tertentu :

<b:if cond='data:blog.url != "Alamat Postingan"'>
.............
</b:if>

note :
perhatikan Kode "==" untuk menampilkan
sedangkan Kode "!=" untuk menyembunyikan

Contoh Untuk menampilkan elemen/widget hanya di Homepage Saja.

Kodenya :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- ISI dari elemen atau Widget -->
</b:if>

Contoh pemasangan :

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

Kode yang saya Blok warna Merah adalah batas dari penggunaan kode.
Kode yang saya Blok warna Kuning adalah kodenya.

Atau

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* -- Ini adalah CSS style -- */
</style>

<script type='text/javascript' >
//Ini adalah kode JavaScript
</script>
</b:if>

Dengan menerapkan teknik menampilkan dan menyembunyikan widget pada halaman tertentu diatas maka sekarang Anda bisa mengatur dan meletakannya widget yang ada di blog sesuai dengan keinginan anda.

OK,.. Cukup sekian tutorial dari saya hari ini mengenai Cara menampilkan dan menyembunyikan widget pada halaman tertentu. Apabila ada pertanyaan silahkan corat coret di kolom komentar,.
Selamat mencoba dan semoga berhasil.....

Kritik dan Saran Anda di sini

Artikel Anda dianggap sebagai saran untuk artikel kami. Artikel sampel yang sedang Anda edit akan ditinjau dan diperbarui di blog kami jika sempurna!

Sunting ARTIKEL
----------------------------------------
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUqaiIH6P6IOJcdaUyxaOFbhJg9t1CsKzlS-4ODkU37UhxU9Vc2RiOrzrNXVAzfMpLYdLOv1IpSizjw7do2u5EJ8kikQSz2S54tDKhEe59rJMZdCBl6YIdO8woh-AEtfvMsXxQDYiDzvc/s1600/icons.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="blogger widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUqaiIH6P6IOJcdaUyxaOFbhJg9t1CsKzlS-4ODkU37UhxU9Vc2RiOrzrNXVAzfMpLYdLOv1IpSizjw7do2u5EJ8kikQSz2S54tDKhEe59rJMZdCBl6YIdO8woh-AEtfvMsXxQDYiDzvc/s1600/icons.jpg" title="blogger widget"></a><br />
<div style="text-align: justify;">
<span style="font-size: x-large;">S</span>ecara default bila kita menambahkan widget pada blog akan muncul pada bagian homepage dan juga pada bagian halaman halaman post lainnya. Untuk <b>membuat widget hanya tampil pada halaman tertentu</b> atau juga <b>menyembunyikan widget pada halaman tertentu</b> sesuai yang kita hendaki, kita bisa lakukan dengan menambahkan kode perintah tertentu pada template. <span style="color: red;">Menyembunyikan widget</span> biasanya digunakan pada halaman-statis yang memerlukan ruang tersendiri di blog, seperti halaman Contact, About Me, Sitemap, Tukar Link atau halaman lainya yang kita kehendaki. Atau mungkin juga Anda hanya ingin menampilkan widget-widget tersebut hanya di homepage saja. Untuk mempermudah kita bahas satu persatu sebagai berikut :
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpkZJ8qyrfzDHUY8yCrEvHqfzAGiWaNMxFl11VFRbZtKPt54IsVqnrMoeZb7bNpHoVokNE8QGJoaoOT0rgpwXkSchlpJOUBnBjVFBwY8siA3HfNWvWsIi-HJKaNMKImy0EJR2QJ7iuSI/s1600/lab-tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="507" data-original-width="866" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCpkZJ8qyrfzDHUY8yCrEvHqfzAGiWaNMxFl11VFRbZtKPt54IsVqnrMoeZb7bNpHoVokNE8QGJoaoOT0rgpwXkSchlpJOUBnBjVFBwY8siA3HfNWvWsIi-HJKaNMKImy0EJR2QJ7iuSI/s1600/lab-tutorial.jpg" /></a>
</div><span style="font-family: 'Courier New'; font-size: 10pt; line-height: 15.35pt; text-align: justify;"><br /></span>
<div class="notes"><div style="text-align: justify;">
<span style="font-family: 'Courier New'; font-size: 10pt; line-height: 15.35pt; text-align: justify;"><span style="color: #666666;"><i><code>Kode</code> perintah dibawah disisipkan pada bagian widget yang ingin kita tampilkan pada halaman utama atau homepage, dibawah ini langkah dan <code>Kode</code> yang perlu ditambahkan adalah sebagai berikut.</i></span> </span>
</div></div>
<br />
<br />
<ul>
<li><b>Menampilkan elemen/widget hanya dihalaman Utama/Hompage :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.url </span><span style="color: #0b5394;">==</span><span style="color: #b45f06;"> data:blog.homepageUrl'> </span><br />
<span style="color: #b45f06;">...........</span><br />
<span style="color: #b45f06;"></b:if> </span></div>
<ul>
<li><b><b>Menyembunyikan</b> elemen/widget di Halaman Utama/Hompage :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.url </span><span style="color: #134f5c;">!=</span><span style="color: #b45f06;"> data:blog.homepageUrl'><br /> ...........<br /> </b:if></span></div>
<ul>
<li><b> Menampilkan elemen/widget hanya di Staticpages :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType</span><span style="color: #134f5c;"> ==</span><span style="color: #b45f06;"> "static_page"'><br />...........<br /></b:if> </span></div>
<ul>
<li><b>Menyembunyikan elemen/widget di Staticpages :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType </span><span style="color: #134f5c;">!=</span><span style="color: #b45f06;"> "static_page"'><br />...........<br /></b:if>  </span></div>
</div>
<ul>
<li><b>Menampilkan <b>elemen/widget</b> hanya di Itempages (Postingan) :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType </span><span style="color: #134f5c;">==</span><span style="color: #b45f06;"> "item"'><br /> ...........<br /> </b:if> </span></div>
<ul>
<li><b>Menyembunyikan <b>elemen/widget</b> di Itempages (Postingan) :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType </span><span style="color: #134f5c;">!=</span><span style="color: #b45f06;"> "item"'><br /> ...........<br /> </b:if> </span></div>
<ul>
<li><b>Menampilkan <b>elemen/widget </b>hanya Pada Archivepages :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType </span><span style="color: #134f5c;">==</span><span style="color: #b45f06;"> "archive"'><br />............<br /> </b:if></span></div>
<ul>
<li><b>Menyembunyikan <b>elemen/widget </b>di Archivepages :</b></li>
</ul>

<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.pageType </span><span style="color: #134f5c;">!= </span><span style="color: #b45f06;">"archive"'><br /> ............<br /> </b:if> </span></div>
<ul>
<li><b>Menampilkan <b>elemen/widget</b> pada URL Postingan Tertentu :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.url </span><span style="color: #134f5c;">== </span><span style="color: #b45f06;">"URL Postingan"'><br /> ............<br /> </b:if> </span></div>
<ul>
<li><b> Menyembunyikan <b>elemen/widget</b>  di URL Postingan Tertentu :</b></li>
</ul>
<div class="blockquote">
<span style="color: #b45f06;"><b:if cond='data:blog.url </span><span style="color: #134f5c;">!=</span><span style="color: #b45f06;"> "Alamat Postingan"'><br /> .............<br /> </b:if></span></div>

<div class="note">
<i><span style="color: #666666;"><b>note :</b> <br />perhatikan <code>Kode</code> </span><b><span style="color: blue;">"</span></b></i><b><span style="color: blue;">==</span></b><i><b><span style="color: blue;">"</span></b><span style="color: #666666;"> untuk menampilkan </span></i><br />
<i><span style="color: #666666;">sedangkan <code>Kode</code> </span></i><span kode="" span="" style="color: #666666; font-style: italic;"><b><span style="color: blue;">"</span></b></span><b style="font-style: italic;"><span style="color: blue;">!=</span></b><span style="font-style: italic;"><b><span style="color: blue;">"</span></b><span style="color: #666666;"> untuk menyembunyikan</span></span></div>
<br />
<h3 class="ono-wae">
<span style="font-size: small;">
Contoh Untuk menampilkan elemen/widget hanya di Homepage Saja.</span></h3>
<b>Kodenya :</b><br />
<pre><code><b:if cond='data:blog.url == data:blog.homepageUrl'>
<span style="color: #b45f06;"></span>
</b:if></code></pre>
<br />
<b>Contoh pemasangan :</b><br />
<pre class="prettyprint" data-codetype="HTML"><b:widget id='HTML1' locked='false' title='Nama title' type='HTML'>
<span style="background-color: red;"><b:includable id='main'></span>
<span style="background-color: yellow;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<span style="background-color: yellow;"></b:if></span>
<span style="background-color: red;"></b:includable></span>
</b:widget></pre>
<br /><div class="announce">
<b><code>Kode</code></b> yang saya Blok warna <span style="color: red;">Merah</span> adalah batas dari penggunaan kode.<br />
<b><code>Kode</code></b> yang saya Blok warna <span style="color: yellow;">Kuning</span> adalah kodenya.<br /></div>
<br />
<div style="text-align: center;">
<h2><span style="color: #666666; font-family: pacifico; font-size: 45px; text-align: center; text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;">Atau</span></h2>
</div>
<pre class="prettyprint" data-codetype="HTML"><span style="color: blue;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span>
<style type='text/css'>
<span style="color: #b45f06;">/* -- Ini adalah CSS style -- */</span>
</style>

Saling Berbagi Facebook Twitter Google+

Sukai

1 komentar

Hashtag: #Berita #JavaScript #Tutorial Blog

Anda dan lainnya

1 comment:

Dwi Agung Wicaksono20 July, 2020 12:45
Silahkan tinggalkan Pesan Anda disini jika ada hal yang ingin di sampaikan, tulis nama asli Anda, situs web asli Anda dan pesan Anda. Jika tidak dengan bersedih hati Pesan Anda akan Saya hapus. :)