Tuesday, January 7, 2014

Cara Membuat Scroll Pada Widget Blogspot - Tutorial Gratis

Hy.. sobat blogger semua, selamat malam !!
pada malam hari ini saya mau share tutorial cara membuat atau menambakan Scroll Pada Widget Blogspot sobat semua..
Ada kalanya widget pada Blogspot anda tidak memiliki ukuran yang anda inginkan. Khususnya jika widget tersebut memiliki ukuran yang terlalu tinggi. Jika sobat semua mengalami hal seperti itu silahkan langsung aja disimak ya ...


Jika dilihat dari cara memasangnya, widget Blogspot terbagi menjadi Widget Bawaan Blogspot dan Custom Widget (widget pada mode HTML/Javascript). Widget bawaan ini adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan Custom Widget maksudnya adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan dan mengedit kode HTML/Javascript, karena widget tersebut tidak disediakan oleh Blogspot. Tentunya untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda. Namun pada intinya untuk menambahkan scroll pada widget ini yaitu dengan memberi sedikit tambahan kode HTML overflow:auto;
OK, silakan langsung saja simak langkah-langkahnya berikut ini.
  • Untuk widget standar/bawaan blogspot atau widget tanpa pengeditan kode HTML.
1. Pastikan widget telah dipasang pada Blog anda.
2. Login ke akun Blogger anda.
3. Masuk ke Bagian Tata Letak.
4. Katahuilah nama widget id pada widget yang akan diberikan scroll. Caranya, sentuhkan corsor pada tulisan edit Tata Letak widget tersebut dan lihat di bagian sudut kiri bawah monitor, disitu terdapat tulisan yang menampilkan nama widget id dan sebagainya. Perhatikan gambar dibawah, contoh berikut menampilkan nama widget id yaitu PopularPosts2.

5. Setelah widget id diketahui, maka selanjtnya anda masuk ke bagian Template lalu klik Edit HTML.
6. Dengan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut ini diatas kode ]]></b:skin>.

#PopularPosts2 .widget-content{
height:230px;
width:auto;
overflow:auto;

7. Ubahlah kode berwarna merah dengan widget id yang anda inginkan, dan kode berwarna biru dengan ukuran tinggi yang anda inginkan.
8. Setelah selesai, silakan akhiri dengan klik Simpan Template. Berikut contoh hasilnya.

  • Untuk widget mode pengeditan HTML/Javascript.
1. Login ke akun Blogger anda.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget dimanapun anda inginkan.
4. Pilih mode HTML/Javascript.
5. Yang perlu anda lakukan adalah hanya menambahkan sedikit kode HTML berikut pada kode HTML widget.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">


</div>

6. Masukan kode HTML widget pada tulisan berwarna merah. Ubahlah tampilan widget terutama pada kode berwarna biru dengan ukuran tinggi widget yang anda inginkan.
7. Setelah selesai, akhiri dengan klik Simpan. Berikut contoh hasilnya.

Silakan lihat hasilnya pada Blog anda, Semoga berhasil.

Related Posts

Cara Membuat Scroll Pada Widget Blogspot - Tutorial Gratis
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

2 komentar

Tulis komentar