Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Membuat Scroll Box Widget Recent Post dengan Thumbnail Bawaan Blogger

Setelah di posting sebelumnya kita bahas cara buat widget recent posts yang serba fleksible dan dilengkapi dengan beberapa pengaturan tampilan termasuk dengan thumnail ataupun mau dibuat tanpa thumnail, mungkin masih ada yang menjadi ganjalan saat widget ini selesai dibuat dan terpajang dengan cantik di salah satu sudut blog. Jika posting yang dimunculkan di recent posts hanya 4 atau 5 posting tentu masalah tak akan terlihat, namun ketika kita ingin menampilkan posting di recent posts dfalam jumlah cukup besar barulah persoalan mulai terlihat dan terasakan. Ya .... karena posting akan terlihat berderet meninggi dengan ketinggian yang .... heh ... heh ... ngudubilah .... seperti tangga hotel bertingkat seribu .... He ... heh ... tinggiiiiiiiiiiii .... sekali!

Tidak boleh tidak masalah ini harus segera diatasi jika blog tak ingin terlihat runyam di mata. Scroll box menjadi solusi paling tepat hingga ketinggian widget terbatasi dan dapat diatur.

Untuk mengikuti panduan membuat scroll box widget recent posts bawaan blogger ini sampeyan harus membuat recent posts-nya terlebih dahulu. Untuk tutorialnya bisa dibuka melalui lin di bawah ini:



Cara membuat Scroll Box Widget Recent Posts dilengkapi Thumbnail


  • Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN>
  • Setelah DASBOARD (Dasbor) terbuka, klik DESIGN (Rancangan).
  • KLIK Edit HTML kemudian lanjutkan klik DOWNLOAD FULL TEMPLATE (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
  • KLIK Expand Widget Template.
  • Cari kode <b:if cond='data:gadgetSnippet != &quot;&quot;'>.
  • Di bawah kode ini terdapat kode HTML berikutnya dengan bentuk seperti di bawah:

  •     <b:if cond='data:gadgetSnippet != ""'>
    <data:gadgetSnippet/>
    <b:else/>
    <div class='widget-content'>
    <b:if cond='data:nonSocialFragment != ""'>
    <data:nonSocialFragment/>
    </b:if>
    </div>
    </b:if>
  • Rubah kode HTML di atas menjadi seperti berikut:

  • <div style="height:400px;margin:10px auto;padding:2px;border:2px solid #aaa;background:#999 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);overflow:auto;overflow-x:hidden;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;">
    <div style="margin:3px auto;margin-left:2px;margin-right:2px;padding:3px;background:black;border:1px solid #555;">

    <b:if cond='data:gadgetSnippet != ""'>
    <data:gadgetSnippet/>
    <b:else/>
    <div class='widget-content'>
    <b:if cond='data:nonSocialFragment != ""'>
    <data:nonSocialFragment/>
    </b:if>
    </div>
    </b:if>

    </div>
    </div>
  • KLIK SAVE/Simpan Template.
  • Buka blog dan lihat hasilnya.


Silahkan gantai backgroundnya jika dikehendaki atau untuk penyesuaian dengan warna teks dan background blog.


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

2 komentar:

  1. sdah dCTRL+F kode yang di atas ko ga ada di HTML saya?

    BalasHapus
  2. sdah d CTRL+F kode yang di atas ko ga ada di HTML saya?

    BalasHapus

 
GR | Edited by | gubhug reyot