Cara Gampang Menampilkan/Menyembunyikan Widget Blog Di Halaman Tertentu

Pada Kesempatan kali ini saya akan berabagi tutorial Cara Membuat Widget Hanya tampil di halaman depan blog atau halaman postingan.

Dalam aktivitas nge-blog , seorang blogger harus lebih berilmu untuk memilih widget apa saja yang harus tampil di blognya.

Jangan hingga widget-widget yang tidak dibutuhkan juga ikut ditampilkan disetiap halaman web sobat, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang.

Selain desain yang kurang rapih jikalau terlalu banyak widget yang tampil disetiap halaman juga terlalu banyak widget yang tampil akan menciptakan loading blog menjadi berat, sehingga hal ini akan berdampak pada skor loading sobat.


Oleh sebab itu kita harus lebih efisien dalam memanfaatkan setiap halaman web kita biar terlihat lebih manis dan rapih, yang niscaya tidak menciptakan loading blog juga menjadi berat.

Pada kasus ini, teman sanggup menampilkan widget tertentu hanya di halaman yang teman inginkan, misalkan teman akan menampilkan widget hanya di homepage, halaman statis, maupun halaman posting saja.

Nah, oleh sebab itu pada kali  ini, saya akan mengembangkan tutorial cara untuk menampilkan atau menyembunyikan widget hanya di halaman tertentu sesuai dengan yang teman inginkan.

Menampilkan Widget Pada Halaman Tertentu Menggunakan  Conditional Tag

Nah, untuk menyembungikan widget di halaman tertentu dengan memakai conditional tags <b:if> tag kondisional yakni salah satu tag XML Blogger, berfungsi untuk menciptakan perintah biar suatu widget/elemen akan ditampilkan pada bagian/halaman tertentu saja dan disembunyikan dihalaman lainnya.

Oleh sebab itu pada kesempatan kali ini saya akan menawarkan tutorial cara menyembunyikan atau menampilkan suatu widget hanya dihalaman yang teman inginkan dengan  memakai conditional tags eksklusif pada elemen yang hendak diberikan perintah.

Step - step Menampilkan Widget Pada Halaman Tertentu

1. Tentukan ID Widget yang Akan di Berikan Tag Conditional

Nah, Sebelum kita menawarkan conditional tags pada widget tertentu, teman harus mengetahui terlebih dahulu ID widget yang akan ditampilkan atau disembunyikan pada halaman tertentu.

Untuk mencari ID Widget sangat mudah:

1. Masuk ke Dashboard blog -  layout - klik widget yang akan diberikan tag conditional

Contoh:
Disini saya akan mengambil ID widget dari popular post pada blog saya

2. Lihat di potongan URL/address di browser pada halaman pop up window tersebut.

ID widget terletak di potongan simpulan URL silahkan teman geser URL ke kanan.

Untuk lebih jelasnya silahkan Perhatikan pola gambar berikut:





3. Setelah menemukan ID Widget yang teman cari, kemudian simpan di note pad, kemudian lanjut ke langkah selanjutnya

2. Memberikan Conditional Tags Pada Elemen Widget Barusan

Sekarang teman sudah mendapat ID Widget yang akan teman berikan tag conditional kemudian untuk menampilkan widget di halaman tertentu, soabt harus menawarkan conditional tags <b:if cond=  pada elemen widget yang barusan teman cari.

 Untuk menawarkan tag conditional pada widget tadi, berikut langkah silahkan perhatikan dengan baik:

1. Masuk ke halaman Dashboard - Template - Edit HTML

2. Gunakan Shortcut keyboard CTRL+F untuk mencari ID yang tadi teman sudah simpan di notepad,

Saya contohkan dengan memakai ID widget Popular Post pada template saya yaitu "PopularPosts1"

lihat gambar berikut:

3. Kemudian tambahkan conditional tag sehabis isyarat <b:includable id='main'> dan tag penutupnya </b:includable> sebelumnya

Perhatikan pola code dibawah ini tag yang saya beri tanda merah yakni tag conditional  yang harus harus ditambahkan:

 <b:includable id='main'>  <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>   <div class='widget-content popular-posts'>     <ul>       <b:loop values='data:posts' var='post'>       <li>         <b:if cond='!data:showThumbnails'>           <b:if cond='!data:showSnippets'>             <!-- (1) No snippet/thumbnail -->             <a expr:href='data:post.href'><data:post.title/></a>           <b:else/>             <!-- (2) Show only snippets -->             <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>             <div class='item-snippet'><data:post.snippet/></div>           </b:if>         <b:else/>           <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->           <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>             <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>               <div class='item-thumbnail'>                 <a expr:href='data:post.href' target='_blank'>                   <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>                     <img alt='' border='0' expr:src='data:image'/>                   </b:with>                 </a>               </div>             </b:if>             <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>             <b:if cond='data:showSnippets'>               <div class='item-snippet'><data:post.snippet/></div>             </b:if>           </div>           <div style='clear: both;'/>         </b:if>       </li>       </b:loop>     </ul>     <b:include name='quickedit'/>   </div>   </b:if>  </b:includable> 

Berikut yakni beberapa tag conditional yang sanggup teman gunakan

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

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

 <b:includable id='main'>  <b:if cond='data:blog.url==data:blog.homepageUrl'>   <b:if cond='data:title !=&quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div style='clear: both;'/> </b:if> </li></b:loop> </ul> <b:include name='quickedit'/> </div>  </b:if>  </b:includable> 

2. Cara Menampilkan Widget Hanya di Halaman Posting

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

 <b:includable id='main'>  <b:if cond='data:blog.pageType == "item"'>   <b:if cond='data:title !=&quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div style='clear: both;'/> </b:if> </li></b:loop> </ul> <b:include name='quickedit'/> </div>  </b:if>  </b:includable> 

3. Cara Menampilkan Widget Hanya di Halaman Statis

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

 <b:includable id='main'>  <b:if cond='data:blog.pageType != "static_page"'>   <b:if cond='data:title !=&quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div style='clear: both;'/> </b:if> </li></b:loop> </ul> <b:include name='quickedit'/> </div>  </b:if>  </b:includable> 

4. Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

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

 <b:includable id='main'>  <b:if cond='data:blog.pageType == "archive"'>   <b:if cond='data:title !=&quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div style='clear: both;'/> </b:if> </li></b:loop> </ul> <b:include name='quickedit'/> </div>  </b:if>  </b:includable> 

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

<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>

 <b:includable id='main'>  <b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>   <b:if cond='data:title !=&quot;&quot;'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div></b:if> <b:else/> <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div></b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div><b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div></b:if> </div><div style='clear: both;'/> </b:if> </li></b:loop> </ul> <b:include name='quickedit'/> </div>  </b:if>  </b:includable> 

6. Jangan lupa Setelah selesai  menambahkan conditional tags Save template.



Bagi teman yang ingi ingin menyembunyikan atau menampilan widget lain, teman sanggup mengulang untuk mencari ID widgetnya, cari elemen widget sesuai ID di edit HTMLdan gunakan tag conditional yang sama menyerupai diatas.

Oh iya, tag conditioanl ini berlaku untuk semua elemen ya sob, tidak hanya pada widget-widget saja, sanggup juga dipakai di dalam CSS.


Jangan lupa untuk share dan komen yang sob,

jangan sungkan untuk meminta tutorial lainnya yang serupa biar nanti saya buatkan untuk teman semuanya.

Jika menuurt teman artikel ini bermanfaat dan sanggup membantu jangan lupa untuk share ke temen-temennya biar mereka juga tahu Cara Praktis Menampilkan Widget Hanya di Homepage/Halaman Posting dengan dukungan artikel ini.

Terakhir, saya ucapkan terimakasih yang sudah berkunjung di blog kata mastah.

Salam Luar Biasa!
Sumber https://www.katamastah.com/

Berbagi :