March 5, 2013


Kadang ketika kita ingin membuat penambahan fungsi scroll pada widget standar blogger yang kita pasang entah dihalaman sidebar dan footer seperti arsip blog, artikel populer dan atau lainnya, membuat kita bingung bagaimana cara memodifikasi setiap daftar widget tersebut? agar semua widget terdapat keseragaman dan sehingga tampilan halaman blog kita lebih terkesan menarik dipandang.

Selain itu juga dengan adanya fungsi scroll pada setiap widget akan menghemat ruang dihalaman sidebar atau pada halaman footer blog yang memanjang kebawah. Jadi untuk memodifikasi semua widget yang telah kita pasang sebelumnya, perlu dilakukan beberapa trik yang sangat sederhana. Oleh karenanya, untuk menerapkan trik tersebut, silahkan saudara mengikuti uraian singkat dibawah ini.

1. Masuk terlebih dulu ke blog blogger yang anda kelola, apabila sebelumnya sudah masuk, pada halaman draf blogger klik menu Template.
2. Backup template, untuk menjaga kemungkinan terjadi eror.
3. Lalu klik Edit HTML.
4. Beri tanda centang atau ceklis pada kotak Expand Template Widget.
5. Kemudian cari nama widget yang akan diberi fungsi scroll, caranya adalah sebagai berikut :

• Tekan Ctrl F pada keyboard, lalu ketik nama widget. Sebagai contoh : daftar widget Artikel Populer, maka lihat nama widget pada blog yang anda kelola untuk mencari pada editor template.

• Contoh struktur widget artikel populer pada editor template Krang Francisco adalah sebagai berikut :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>

……………….Rangkaian Kode disini………………………

</div>
</b:includable>
</b:widget>

• Atau contoh widget Like, Follow & Review seperti pada halaman sidebar disamping, struktur rangkaian kode dalam editor template Kraeng Francisco adalah sebagai berikut :

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

</b:includable>
</b:widget>

• Apabila telah menemukan nama widget yang ingin anda tambahkan fungsi scroll, letakkan kode berikut : <div style='overflow:auto; width:auto; height:250px;'> tepat dibawah kode <div class='widget-content popular-posts'> atau <div class='widget-content'>.

• Kemudian scroll kebawah cari lagi kode </b:includable> atau untuk mempermudah jika dalam editor template anda terdapat kode <b:include name='quickedit'/>, letakkan kode </div> tepat diatas kode tersebut, sehingga terbentuk seperti struktur kode dibawah.

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>   <<<<<<<<<perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>

……………….Rangkaian Kode disini………………………

</div>
</div>
</b:includable>  <<<<<<<<<perhatikan bagian ini.
</b:widget>

Atau seperti contoh dibawah

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'> <<<<<<<<<perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>
<data:content/>
</div>

</div>
</b:includable> <<<<<<<<<perhatikan bagian ini.
</b:widget>

6. Untuk melihat hasilnya klik tombol pritinjau, apabila berhasil maka sebagai contohnya perhatikan pada gambar berikut yang telah jadi.


7. Jika sudah, Simpan Template anda dan Tutup kembali editor template.

8. Selesai.

Keterangan :

• Untuk mempermudah cara mencari nama widget selalu gunakan Ctrl F, lalu ketik nama widget seperti pada contoh uraian diatas.

250px adalah tinggi scroll, anda bisa menyesuaikan dengan kebutuhan, misalnya menjadi 100px, 150px atau 200px.

<div class='widget-content'>, sebagai kunci utama untuk meletakkan kode pembuka <div style='overflow:auto; width:auto; height:250px;'>, dibawahnya. Anda bisa melihat perbedaannya pada contoh struktur widget Artikel Populer dan Like, Follow & Review.

</b:includable> dan <b:include name='quickedit'/> sebagai tempat penutup kode </div>, diatasnya.

• Jika sebelumnya anda pernah menghapus kode <b:include name='quickedit'/>, letakkan kode penutup </div> tepat diatas </b:includable>, seperti pada contoh diatas.

Selamat mencoba, sekian dan terima kasih.
Salam…

Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Cara Membuat Scroll Pada Widget Standar Blogger diposting oleh Kraeng Francisco pada March 5, 2013. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

20 comments:

  1. saya juga pakai mas. tapi di link partner aja..hehehe
    biar nggak pajang kebawah kalau pakai scroll.

    semoga artikelnya bermanfaat ya mas.

    ReplyDelete
    Replies
    1. betul sobat....yang paling penting pada intinya agar bisa menghemat tempat ya.

      Ok terima kasih sob.

      Delete
  2. emang perlu pakai scroll kayak nya ya, biar gx terlalu ngabisin lahan di blog kita. saya save dulu, buat dipraktekin ntar. makasih infonya !

    #salam terhangat dari Mr.DHI

    ReplyDelete
  3. bener juga mas buat memper kecil ruang biar lebih simpel'y mas trmksih banyak ilmunya

    ReplyDelete
    Replies
    1. benar sobat trik tersebut sangat cocok untuk diterapkan, karena akan menghemat ruang pada sidebar blog dan pada halaman footer.

      Delete
  4. bener juga mas itu sangat berguan selain memper sempit ruwah juga malh asik trmksih mas ilmunya

    ReplyDelete
  5. Mantab penyesuaian tinggi widget memang harus di lakukan selain untuk menghemat tempat pada kolom sidebar juga membuat tampilan sidebar lebih menarik karena tinggi nya terlihat sama thanks sob sharing nya semoga sukses..(Wassalam)

    ReplyDelete
    Replies
    1. ya, saya sependapat mempunyai keseragaman tentu akan membuat tampilan blog lebih beda dari yang lainnya.

      Delete
  6. Wuihhhhh mantef banget nih bang widgetnya sebelumnya aku minta izin nih bang mau aku sedot buat koleksi ntar suatu saat pasti bermanfaat nih...hahahahyyyyy

    ReplyDelete
    Replies
    1. boleh, silahkan saja sob hehe...

      Terima kasih.

      Delete
  7. selamat pagi sobat Kraeng Fransisco,,,,hampir saja materi postingan kita sama sob,,,,hehehehe...untung barusan saya buat tutorial mengenai cara membuat efek gambar membesar,,,,mungkin besok atau lusa baru saya posting mengenai cara membuat scroll pada gadget standar blogger,,,,saya juga menggunakan cara ini untuk membuat fungsi scroll pada entri populer dan kategori dalam blog saya sob...

    ReplyDelete
  8. cocok buat blogroll aja nbih

    ReplyDelete
  9. met siang mas trmksih banyak mas berkunjung sore hehehe maaf mas berkunjung pke alamat ini //selladrtrenunanjiwa.blogspot.com/

    ReplyDelete
  10. khehe mantep sob, bakalan ane praktekin

    ReplyDelete
  11. met malam kang mas aq kmari mau nganterin kopi mas heheh. met ngeblok mas'y

    ReplyDelete
  12. Selamat malam Sobat, apa kabar?
    Terima kasih sob atas infonya, sebab selama ini saya menambahkannya tdk melalui Tempelate tetapi langsung menambahkannya pada widget.
    thank's banget sob.

    salam sukses.

    ReplyDelete
  13. mantap, boleh dicoba nih tutorialnya ^^
    terima kasih,,

    ReplyDelete
  14. sudah saya praktekin untuk widget 'tulisan terpopuler' di blog saya, terimakasih banyak mas :)

    ReplyDelete
  15. Terima kasih mas, bermanfaat bangett!! jika berkenan, bisa kunjungi balik blog saya : http://3denda.blogspot.com/

    ReplyDelete