Cara Membuat Scroll Bar Pada Popular Post Diblogger

Pengertian Scroll Bar

ScrollBar mempunyai arti gulungan,jadi scroll bar di Blogger merupakan sebuah tempat dimana terdapat sebuah tombol yang bisa digerakkan ke atas dan kebawah atau kekiri dan kekanan,semua itu tergantung pada bentuk scroll bar yang kita buat,karena ada dua bentuk scroll bar yaitu scroll bar Vertikal dan Scroll bar Horizontal.

Untuk Cara Membuat Scroll Bar Pada Popular Post Diblogger mari kita lihat Langkah-langkah sebagi berikut :

Silahkan Sobat Log in ke Blogger terlebih dahulu
Langkah selanjutnya Sobat menuju ke Menu dashboard blog
Setelah Masuk di menu dashboard sobat pilih pada tombol “Template”
Langkah selanjutnya Sobat pilih pada tombol “Edit HTML”
Setelah itu silahkan sobat cari kode kaya gini ]]></b:skin>.gunakan Ctrl+f lalu ketik ]]></b:skin>.dan tekan Enter maka pencarian akan langsung ketemu.
Untuk langkah yang terakhir copy dan pastekan kode yang ada dibawah ini diatasnya kode yang sobat cari tadi ( ]]></b:skin>).

Cara membuat scroll bar Popular Post

silahkan sobat copy dan paste kode dibawah ini

#PopularPost1 .widget-content{
height:375px;
width:auto;
overflow:auto;
}

jika sobat bingung bisa melihat tampilan susunan kode tersebut menjadi seperti dibawah ini :

#PopularPost1 .widget-content{height:375px;width:auto;overflow:auto;}]]></b:skin>
<style type='text/css'>
/*-----Menu responsiv ----*/
body {margin: 0px;}
#menu {background: #228B22;color: #eee;height: 40px;border-bottom:5px solid #c00;margin: 2px 0px 0px 5px;width: 890px;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:40px;width:100%}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-transform: uppercase;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #c00;}

Jika sobat ingin membuat scroll bar pada Blog Archive di blogger,maka sobat tinggal merubah namanya saja.kodenya dirubah menjadi seperti dibawah ini :

#BlogArchive1 .widget-content{
height:375px;
width:auto;
overflow:auto;

Setelah itu sobat copy paste kode tersebut tepat diatasnya kode ]]></b:skin>
Contoh tampilannya bisa sobat lihat seperti dibawah ini

#BlogArchive1 .widget-content{height:375px;width:auto;overflow:auto;}]]></b:skin>
<style type='text/css'>
/*-----Menu Responsiv----*/
body {margin: 0px;}
#menu {background: #228B22;color: #eee;height: 40px;border-bottom:4px solid #c00;margin: 2px 0px 0px 5px;width: 890px;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-transform: uppercase;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #c00;}

Jika sobat ingin membuat scroll bar pada Label diBlogger,caranya cukup mudah,tinggal mengganti namanya saja,yaitu menjadi seperti dibawah ini :

Baca Juga

Cara Membuat Scroll Bar Pada Label Diblogger

#Label1 .widget-content{height:375px;width:auto;overflow:auto; }]]></b:skin>
<style type='text/css'>
/*-----Menu Responsive ----*/
body {margin: 0px;}
#menu {background: #228B22;color: #eee;height: 40px;border-bottom:4px solid #c00;margin: 2px 0px 0px 5px;width: 890px;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:100%}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-transform: uppercase;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out;
background: #c00;}

Keterangan : Heigh adalah ukuran tinggi kolom sroll bar,ukuran 375px bisa sobat ganti dengan ukuran yang sobat inginkan.

Cara Membuat Scroll Bar Pada PopularPost Diblogger yang ke dua

saya akan share cara membuat scroll bar yang lain,karena kadang –kadang ada template yang tidak bisa ditambahkan kode sroll bar tersebut,maka solusinya saya akan memberikan langkah-langkah Cara Membuat Scroll Bar Pada ArchiveBlog Diblogger yang lain,mungkin sobat bisa mencoba caranya sebagai berikut :

Seperti biasa Langkah yang pertama sobat Log in terlebih dahulu ke Blogger
Setelah itu sobat menuju menu dashboard Blog
Kemudian sobat pilih pada tombol “ Temlate”
Langkah selamjutnya sobat pilih pada tombol “edit HTML”
Kemudian sobat cari kodeseperti ini <div id='ArchiveList'>
Sobat tekan tombol Ctrl+f lalu ketik kode <div id='ArchiveList'> dan lalu tekan enter.maka pencarian akan langsung ketemu.
Tambahkan kode seperti ini <div style=’overflow:auto; width:ancho; height:375px;’> tepat diatas kode <div id='ArchiveList'>
Setelah Langkah diatas selesai silahkan sobat Tambahkan Kode </div> tepat di atasnya </b:includable>
Kode </div> ini mempunyai Fungsi sebagai Penutup.
Jika sobat masih belum faham atau masih bingung ,agar lebih jelas sobat bisa melihat susunan kodenya seperti dibawah ini:

<div class='widget-content'>
<div style=’overflow:auto; width:ancho; height:375px;’> tepat diatas kode <div id='ArchiveList'><div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
</div>
</div>
</div></b:includable>

Scroll Bar tidak asing lagi di pandangan kita,karena Scroll bar telah banyak kita jumpai diberbagai media,seperti dikomputer atau bahkan di internet atau disitus on line baik itu berupa web yang bersifat personal ataupun web yang bersifat umum,contohnya seperti, Blogger,WordPress,toko online,facebook dan lain sebagainya,scroolbar telah menjadi suatu pelengkap dalam perkembangan teknologi.

Dalam sebuah program internet dan elektronik seperti computer atau perangkat sejenisnya Scroll bar pada umumnya memiliki dua bentuk yaitu scroll bar vertical dan scroll bar Horisontal,scroll bar pada umumnya berada pada sebuah kotak bar dan memiliki ukuran yang berbeda-beda,dalam sebuah blog diBlogger scroll bar biasanya diprogram dalam ukuran sedang biasanya mempunyai ukuran dibawah 350px,dengan ukuran tersebut diharapkan dapat menghemat tempat sidebar pada blog,didalam kotak scroll bar biasanya telah dilengkapi dengan anak panah yang berada di ujung atas dan bawah,atau bisa juga anak panah tersebut berada di ujung kiri dan kanan,posisi anak panah tersebut tergantung pada bentuk scroll barnya,jika scroll barnya berbentuk vertical maka anak panah tersebut berada di ujujng atas dan ujung bawah,dan jika scroll bar tersebut berbentuk horizontal maka anak panah tersebut berada diujung kiri dan ujung kanan.

Di dalam kotak scroll bar terdapat elemen kotak yang ukurannya lebih kecil yang berfungsi untuk monitoring jarak seseorang dari bagian akhir dokumen. Scroll yang terdapat pada media elektronik pada program atau dokumen merupakan fungsi scrollbar yang utama.Seperti halnya Sistem teknologi Graphical User Interface (GUI) program tersebut telah menggunakan scrollbar sebagai salah satu fiturnya. GUI berperan penting dalam hal membantu seseorang mengontrol konten pada komputer atau perangkat sejenis lainnya dengan menggunakan pointing object kecil contohnya mouse yang terdapat pada komputer yang telah terhubung atau terinstall pada perangkat computer tersebut.

Objek ini memiliki bentuk seperti garis atau jari (finger)obyek ini disebut juga kursor yang biasa kita jumpai pada layar computer.Gambar yang bergerak (kursor) tersebut dapat berinteraksi dengan objek gambar lainnya seperti Scrollbar,baik itu scroll bar horizontal ataupun Scrollbar vertical.

Fungsi Dan Manfaat Scroll bar diblog

croll bar ini memiliki fungsi antara lain :

1.Mempermudah para pengunjung blog untuk melihat menu yang berada didalam scroll bar tersebut.

2.Mempermudah bagi pembaca untuk melihat isi secara keseluruhan,

3.Dapat menghemat tempat pada sis side bar,

4.Dengan adanya scroll bar loading halaman sebuah blog akan menjadi lebih cepat

5.Mempermudah pemilik blog dalam mengoreksi artikel-artikel yang telah diposting.

Demikian Tips tentang Cara Membuat Sroll Bar PopulartPost Diblogger

Semoga dapat bermanfaat

Location: Indonesia

Hallo