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

Menampilkan widget hanya di halaman depan saja
Menampilkan widget hanya pada halaman tertentu saja
Menghilangkan widget hanya pada halaman tertentu saja
Menampilkan Widget ketika Artikel blog dibaca
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

Masuk ke halaman Edit HTML
Cari Widget Popular Post
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

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>

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

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

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

Maman AchmanDecember 28, 2016 at 3:49 PM

Ini teh sangat penting buat para blogger, hanya saja penyetingannya harus lebih hati2 agar tidak salah ketik...
Berbagai InfoDecember 30, 2016 at 3:15 PM

Bisa di coba nih, makasih ya gan

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin