Cara Supaya Widget Blog Tampil di Halaman Depan Saja

Widget blog merupakan bagian dari konten blog itu sendiri, bisa berupa link, popular post, recent post, gambar, iklan dll. Mungkin Anda pernah melihat  sebuah blog dengan konten widget yang seolah – olah mengalami perubahan, tidak statis, misal ada sebuah widget yang tampil ketika di halaman depan blog saja sedangkan ketika membaca artikel widget tersebut seolah mengahilang.


Lihat juga : Menghilangkan Sidebar Ketika Mengakses Laman Blog

Bukan hanya mengatur widget supaya hanya tampil pada halaman depan blog saja, kita juga bisa mengatur/menyebunyikan widget dengan beberapa opsi lain, Anda bisa memilih 4 opsi untuk mengatur widget


Cara Supaya Widget Blog Tampil di Halaman Depan Saja
  1. Menampilkan widget hanya di halaman depan saja 
  2. Menampilkan widget hanya pada halaman tertentu saja 
  3. Menghilangkan widget hanya pada halaman tertentu saja 
  4. Menampilkan Widget ketika Artikel blog dibaca 
  5. Menyembunyikan Widget ketika Artikel blog dibaca
 #Menampilkan widget hanya di Halaman Depan Saja
Maksudnya widget hanya tampil ketika di home/halaman depan saja, Anda bisa menambahkan tag, kondisi parameter berikut <b:if cond='data:blog.url == data:blog.homepageUrl'>  pada  setiap widget yang ingin diatur supaya tampil di halaman depan


#Menampilkan Widget Hanya Pada Halaman Tertentu Saja

Anda bisa menambahkan parameter berikut  <b:if cond='data:blog.url ==  "Alamat URL"'>


#Menyembunyikan Widget Hanya Pada Halaman Tertentu saja
Kondisinya hampir sama dengan poin 2 namun operator perbandingan yang digunakan adalah “!=”, tambahkan parameter berikut <b:if cond='data:blog.url !=  "Alamat URL"'>


#Menampilkan Widget Ketika Artikel Blog di Baca
Tambahakan parameter berikut  <b:if cond='data:blog.pageType == "item"'>


#Menghilangkan Widget Ketika Artikel di Baca
Ini juga sama hanya operator yang digunakan berbeda, tambahkan <b:if cond='data:blog.pageType != "item"'>


#Instalasi/Cara Penempatan Widget
Misal disini Saya ingin supaya widget popular post yang terdapat di blog saya tampil pada halaman depan saja maka langkah – langkah yang perlu saya lakukan adalah sebagai berikut
  1. Masuk ke halaman Edit HTML
  2. Cari Widget Popular Post
  3. Bila sudah temukan, umumnya script widget akan tertutup, untuk itu perlu dibuka dengan cara mengklik pada bagian tengah seperti yang ditunjukan pada gambar dibawah ini
    widget yang tertutup
  4. Bagian <b:includable id='main'> yang tertutup juga nanti di klik sehingga nanti akan muncul script berikut,
    
    <b:includable id='main'>
                        <b:if cond='data:title'>
                          <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 == &quot;false&quot;'>
                                  <b:if cond='data:showSnippets == &quot;false&quot;'>
                                    <!-- (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/>
                                  <b:if cond='data:showSnippets == &quot;false&quot;'>
                                    <!-- (3) Show only thumbnails -->
                                    <div class='item-thumbnail-only'>
                                      <b:if cond='data:post.thumbnail'>
                                        <div class='item-thumbnail'>
                                          <a expr:href='data:post.href' target='_blank'>
                                            <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                          </a>
                                        </div>
                                      </b:if>
                                      <div class='item-title'>
                                        <a expr:href='data:post.href'>
                                          <data:post.title/>
                                        </a>
                                      </div>
                                    </div>
                                    <div style='clear: both;'/>
                                    <b:else/>
                                    <!-- (4) Show snippets and thumbnails -->
                                    <div class='item-content'>
                                      <b:if cond='data:post.thumbnail'>
                                        <div class='item-thumbnail'>
                                          <a expr:href='data:post.href' target='_blank'>
                                            <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                                          </a>
                                        </div>
                                      </b:if>
                                      <div class='item-title'>
                                        <a expr:href='data:post.href'>
                                          <data:post.title/>
                                        </a>
                                      </div>
                                      <div class='item-snippet'>
                                        <data:post.snippet/>
                                      </div>
                                    </div>
                                    <div style='clear: both;'/>
                                  </b:if>
                                </b:if>
                              </li>
                            </b:loop>
                          </ul>
                          <b:include name='quickedit'/>
                        </div>
                      </b:includable>
    
    
  5. Tambahkan parameter <b:if cond='data:blog.url == data:blog.homepageUrl'> pada bagian atas <b:if cond='data:title'> dan ditutup dengan </b:if> pada bagian bawah </div> paling bawah atau dibagian atas </b:includable>
Intinya penempatan parmeter menyembunyikan atau menampilkan widget di tempatkan pada bagian atas <b:if cond='data:title'> dan tag penutupnya ditaruh dibagian atas </b:includable>. 

Nanti  parameter yang sudah dijelaskan diatas bisa Anda tambahkan pada salah satu widget blog yang ada, pilih salah parameter/conditional yang sesuai dengan kebutuhan, apakah widget akan ditampilkan pada halaman depan saja, widget disembunyikan ketika artikel dibaca, widget ditampilkan ketika artikel dibaca. dll. Anda tinggal gunakan operator == untuk kondisi menampilkan atau != untuk menyembunyikan widget

2 Responses to "Cara Supaya Widget Blog Tampil di Halaman Depan Saja"

  1. Ini teh sangat penting buat para blogger, hanya saja penyetingannya harus lebih hati2 agar tidak salah ketik...

    ReplyDelete
  2. Bisa di coba nih, makasih ya gan

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...