Sabtu, 05 Mei 2018

Kenali Cara Menampilkan Widget Pada Halaman Blogspot

Bagaimana maksud pengenalan cara menampilkan widget pada halaman blogspot? Ketika mengawali membuat website, anda mungkin akan dibingungkan dengan pengkodeaan yang satu tempat tetapi tidak tampil untuk semua halaman. Misalnya, halaman postingan yang berisi konten singkat tidak ditampilkan secara otomatis ketika halaman ini dibuka yakni menampilkan konten secara keseluruhan. Intinya adalah ada tampilan yang hilang. Nah, inilah yang di maksud dalam pembahasan pengenalan cara menampilkan widget pada halaman blogspot.


Setiap programmer blog khususnya blogspot memang harus memahami bagaimana cara menampilkan widget pada halaman tertentu. Bila tidak paham, penyettingan akan dianggap gagal. Mengapa? Ada kode-kode CSS yang membutuhkan blocking pada halaman tertentu agar tidak mengganggu penampilan blog. Di sini lah kepentingan anda memahami cara menampilkan widget pada halaman blogspot. Maksud cara menampilkan widget bisa jadi hanya pada satu halaman dan mengabaikan halaman lain.

Lalu bagaimana pengenalan cara menampilkan widget pada halaman blogspot?

Cari ID dari Widget Sebelum Menampilkan Dan Membloking Halaman

Bagi yang belum terbiasa mengutak-atik cara menampilkan widget baik untuk satu halaman atau memblok halaman, hal ini dirasa menyulitkan. Mengapa? Hal ini berurusan dengan pengkodeaan. Untuk itu, anda perlu memperhatikan langkah jelasnya yang bisa meminimalisir kebingungan dalam menampilkan widget.

1. Terlebih dahulu masuk ke dalam dasbor.
2. Klik menu Tata Letak untuk memilih widget yang mau disetting tampilannya
3. Di dalam widget, ada kata EDIT. Nah, anda bisa meng-klik ini.
4. Nah, akan muncul layar widget. Di bagian url, anda akan melihat ID yang harus dicopy untuk pelacakan. Contohnya seperti gambar di bawah.
5. Bila sudah, anda bisa mencopy saja untuk pelacakan di bagian HTML. Contohnya adalah HTML7



Berikan Perintah Kondisi b:if Pada Gadget atau Widget

Nanti anda harus memasangkan perintah b:if dalam widget yang anda pilih. Kalau melihat gambar di atas, anda harus memasukkan HTML7 di kolom pencarian yang berada di badan kode HTML Bloggger.

Silahkan masuk ke bagian TEMA/TEMPLATE. Nanti ada dua tombol yakni tombol “Sesuaikan” dan juga tombol “Edit HTML”. Anda memilih Edit HTML untuk memasukkan b:if ke dalam widget tertentu. Nantinya, anda akan melihat badan HTML. Setelah itu, anda meng-klik mouse di badan HTML. Setelah itu, klik CTRL+F. Nanti akan muncul kotak kecil di bagian kanan. Anda masukkan HTML7 ke kolom yang dimaksud.

Kesimpulan langkahnya:
- Klik Tema
- Klik Edit HTML
- Klik CTRL+F untuk memunculkan kolom di badan pos
- Masukkan kode widget yang sudah anda copy
- Klik untuk menemukan widget yang dituju

Berikut hasil pencarian kode yang dimaksud.

<b:widget id='HTML7' locked='false' 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 != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Anda bisa melihat tulisan berwarna biru. Di situlah kode b:if diletakkan sesuai keinginan yaitu di tengah-tengah <b:includable id='main'></b:includable>.

Kalau anda ingin memasang kode b:if di CSS, HTML tertentu, anda bisa menggunakannya juga dengan cara seperti meletakkan kode yang mau diblok atau ditampilkan di tengah kode b:if.

Beberapa Aturan Menampilkan Atau Mem-blok Widget Pada Halaman Blogspot

Sebagai programmer blog, anda harus mempelajari perintah menampilkan widget atau memblok-nya. Mengapa? Karena di dalam template Bloggger memang tersetting dengan bantuak kode menampilkan widget atau mem-bloknya.

Berikut aturan menampilkan atau mem-blok widget.

1.    Menampilkan Widget Pada Halaman Homepage Saja

Biasanya digunakan untuk postingan yang berjejer di bawah dan yang lainnya. Anda pasti sudah paham antara postingan tampilan homepage dan postingan khusus halaman postingan yang menampilkan full artikel. Maka ini menggunakan kode seperti di bawah. Bisa juga secara sengaja untuk menampilkan widget khusus di homepage. Berikut perintahnya.

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

2.    Menampilkan Widget di Semua Halaman KECUALI pada Homepage

Pembahahasan ini sama dengan yang diatas. Hanya saja, kebalikan dari pembahasan di atas. Di sini bisa menampilkan widget untuk seluruh halaman tetapi tidak untuk homepage. Tentu, halaman artikel berbeda dengan halaman homepage sehingga membutuhkan pemakanan kode. Catatan pentingnya, ini bisa dipasangkan di dalam CSS, HTML dan juga widget. Berikut perintahnya.

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

3.    Menampilkan Widget di Semua Halaman Posting Artikel

Mungkin anda ingin menampilkan banyak iklan di halaman posting di bagian sidebar tetapi tidak ingin di tampilkan di halaman homepage, arsip dan lainnya. Anda bisa memasang kode ini di dalam kode HTML, CSS widget HTML blog.

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

4.    Menampilkan Widget di Semua Halaman KECUALI halaman Posting Artikel

Pada halaman selain blog, ada dua jenis halaman yang sama-sama digunakan sebagai halaman tulisan atau postingan. Halaman itu berupa halaman yang terikat pada halaman homepage atau biasa disebut halaman postingan itu sendiri. Sedangkan halaman lainnya adalah halaman statisꟷmirip halaman potingan tetapi bukan ini sesuai standar kode. Biasanya tampilannya berbeda. Maka dari itu, di dalam kode CSS, biasanya memakai kode seperti ini di dalam kode CSS khusus postingan agar tampilannya berbeda. Ini kalau ingin menampilkan hal yang berbeda.

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

5.    Menampilkan Widget di Semua Laman Statis

Pembahasan ini sama dengan pembahasan point 4. Biasanya digunakan untuk mendesain halaman statis menjadi halaman semacam minisite. Tentunya, dilengkapi tampian widget tertent yang hanya tampil di laman statis.

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

6.    Menampilkan Widget di Semua Halaman KECUALI pada Laman Statis

Mungkin halaman statis anda tidak mau diribetkan dengan sidebar. Maka widget yang ada bisa disembunyikan pada halaman statis. Kodenya seperti ini.

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

7.    Menampilkan Widget di Semua Halaman Arsip

Sepertinya, kode b:if ini jarang dipakai. Halaman arsip biasanya diperlukan untuk menampilkan artikel postingan. Kalau widget tidak mau ditampilkan, anda bisa menggunakan ini.

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

8.    Menampilkan Widget di Semua Halaman KECUALI pada Halaman Arsip

Pembahasan ini kebalikan dari pembahasan di atas.

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

9.    Menampilkan Widget Hanya Pada Satu Halaman Tertentu

Mungkin anda ingin memasangkan widget atau iklan di tengah posting hanya di halaman tertentu saja. Maka anda bisa memasukkan kode seperti ini.

<b:if cond='data:blog.url == "URL Halaman di sini"'>
Kode Yang Dibatasi....
</b:if>

10.    Menampilkan Widget di Semua Halaman KECUALI satu URL tertentu

Kode di bawah sebaliknya dari yang di atas. Anda bisa memakainya bila tidak mau menampilkan hal tertentu pada url tertentu.

<b:if cond='data:blog.url != "URL Halaman di sini"'>
Kode Yang Dibatasi....
</b:if>

Artikel Terkait


EmoticonEmoticon