Membuat efek scroll di sidebar blogger

Membuat efek scroll di sidebar blogger

Assalamualaikum.
Efek scroll ini bagi saya berguna untuk menghemat halaman sidebar blog agar isi widget blog seperti kategori,daftar link,arsip,popular post tidak terlalu memanjang kebawah.Memasang efek scroll ini juga bermanfaat agar susunan sidebar blog terlihat lebih rapi.
Jika anda juga ingin memasang efek scrol di area sidebar blog,maka di artikel ini saya akan  membagikan sebuah tutorial tentang cara untuk memasang efek scroll di area sidebar blog anda.

Berikut cara membuat efek scroll pada widget sidebar blog.
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang akan anda pasangi auto readmore pada area posting (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.
Membuat efek scroll di sidebar blogger

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
Membuat efek scroll di sidebar blogger

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.

Membuat efek scroll di sidebar blogger

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode
]]></b:skin> 
agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).

6.Selanjutnya masukkan kode-kode berikut ini tepat diatasnya. 

-Untuk efek scroll pada widget label silahkan masukkan kode berikut:
#Label1 .widget-content{ height:150px; width:auto; overflow:auto;
border:1px solid #cccccc;
background-color:#eeeeee; }

-Untuk efek scroll pada popular post masukkan kode seperti dibawah ini:
#PopularPosts1 .widget-content{ height:150px; width:auto; overflow:auto;
border:1px solid #cccccc;
background-color:#eeeeee; }

-Untuk efek scroll pada arsip blog masukkan kode dibawah ini:
#BlogArchive1 .widget-content{ height:150px; width:auto; overflow:auto;
border:1px solid #cccccc;}
background-color:#eeeeee; }

7.Setelah itu silahkan klik save template.

Tambahan:

  • Untuk teks berwarna merah adalah id sebenarnya dari widget yang ada didalam template.Sebelum anda memasang kode diatas,sebaiknya anda menambahkan terlebih dahulu gadget label,popular post,arsip blog,di area widget sidebar,tentunya di pengaturan tata letak.Anda juga dapat mengganti teks yang berwarna merah diatas dengan id widget yang lainnya.
  • Height:150px adalah ketinggian efek scroll yang akan anda pasang di area sidebar,anda dapat menambahkan atau mengurangi nilainya menjadi semisal 250px,100px,300px sesuai selera anda.
  • Width:auto adalah lebar efek scroll otomatis menyesuaikan diri dengan lebar sidebar di template anda,anda bisa mengganti kata auto dengan nilai semisal 250px,150px sesuai selera anda,tapi saran saya biarkan saja tetap auto.
  • border:1px solid #cccccc warna garis dari efek scroll yang akan anda buat,border merupakan garis,1px adalah ukuran garis dan #cccccc adalah kode warna abu-abu.Anda dapat mengganti warna garis dengan cara  mengganti kode warna #cccccc dengan kode warna yang anda suka.
  • background-color:#eeeeee   adalah warna background dari efek scroll yang akan anda buat,jika anda ingin merubah warna background,silahkan anda ganti kode #eeeeee dengan kode warna yang anda suka,silahkan klik disini untuk mencari kode warna yang anda inginkan.

Demikianlah cara membuat efek scroll di sidebar blogger,semoga bermanfaat,terimakasih telah berkunjung.
Assalamualaikum.

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan