Cara Memasang Fungsi Scroll Pada Blog

Untuk postingan kali ini saya akan membahas cara memasang fungsi scroll untuk blogger baik ditempatkan pada sidebar atau dalam potingan/ artitikel, berikut ini cara memasang fungsi scroll pada blog  dan  hasil tampilan fungsi scroll pada sidebar bisa dilihat di blog ini

1.    Pregilah ke Dashboard lalu klik Design

2.    Kemudian klik Edit HTML selanjutnya cari kode  </head>
Jika sudah ketemu, letakan kode di bawah ini tepat diatasnya

<style type='text/css'>#fungsiscroll {float: left;width: 100%;font-family:arial;font-size:12px;margin: 6px 0px 6px 0px;padding:0px;line-height: 18px;display:;}#fungsiscroll p {padding: 0px;margin: 0px;}#fungsiscroll a:hover {color: green;padding: 0px;}#fungsiscroll a {text-decoration:none;color:black;}#fungsiscroll a img {border: none;margin: 0px;padding: 0px 0px 15px 0px;}#fungsiscroll h2 {color: #000000;font-size: 14px;font-family: Arial;text-align:center;color:white;font-weight: bold;margin: 0px 0px 7px 0px;padding: 7px 5px 3px 13px;letter-spacing:0em;text-transform:normal;background: #222222;}#fungsiscroll ul {list-style-type:none;margin: 0px 0px 10px 0px;padding: 0px;}#fungsiscroll li {list-style-type: none;margin: 0px 0px 5px 0px;padding: 0px;border-bottom : 1px dashed #ccc;}#fungsiscroll ul ul {list-style-type: none;margin: 0px 0px 0px 0px;padding: 0px;}#fungsiscroll ul li li {background: #FFFFFF url(images/icon.png) no-repeat top left;padding: 0px 0px 5px 18px;margin: 0px 0px 0px 0px;border-bottom:1px solid #ddd;}#fungsiscroll ul li ul li {background: #FFFFFF url(images/icon.png) no-repeat top left;padding: 0px 0px 5px 18px;margin: 0px 0px 0px 0px;border-bottom:1px solid #ddd;}#l_fungsiscroll {background: #FFFFFF;float: left;width: 135px;margin: 0px;padding: 9px 9px 0px 9px;line-height: 20px;display: inline;border: 1px solid #C0C0C0;}#l_fungsiscroll p {margin: 0px;padding: 0px 0px 15px 0px;}#l_fungsiscroll a img {border: none;margin: 0px;padding: 0px 0px 15px 0px;}#l_sidebar ul {list-style-type: none;margin: 0px 0px 10px 0px;padding: 0px;}#l_sidebar ul ul {list-style-type: none;margin: 0px 0px 0px 0px;padding: 0px;}#l_fungsiscroll ul li li {background: #FFFFFF url(images/icon.png) no-repeat top left;padding: 0px 0px 5px 18px;margin: 0px 0px 0px 0px;}#l_fungsiscroll ul li ul li {background: #FFFFFF url(images/icon.png) no-repeat top left;padding: 0px 0px 5px 18px;margin: 0px 0px 0px 0px;}#r_fungsiscroll {background: #FFFFFF;float: right;width: 135px;margin: 0px;padding: 9px 9px 0px 9px;line-height: 20px;display: inline;border: 1px solid #C0C0C0;}#r_fungsiscroll p {padding: 0px 0px 15px 0px;margin: 0px;}#r_fungsiscroll a img {border: none;margin: 0px;padding: 0px 0px 15px 0px;}#r_fungsiscroll ul {list-style-type: none;margin: 0px 0px 10px 0px;padding: 0px;}#r_fungsiscroll ul ul {list-style-type: none;margin: 0px 0px 0px 0px;padding: 0px;}#r_fungsiscroll ul li li {background: #FFFFFF url(images/icon.png) no-repeat top left;padding: 0px 0px 5px 18px;margin: 0px 0px 0px 0px;}</style>

3.    Kemudian simpanlah template anda

4.    Lalu klik Page Elements  dan klik Tambah Gadget lalu pilih HTML/Javascript dan Copas kode berikut ini

:<script type="text/javascript"></script>
<div class="sidebar section" id="fungsiscroll">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div>
<div class="sidebar section" id="fungsiscroll">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div>
</div>
</div>
<div class="sidebar section" id="fungsiscroll">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="overflow:auto;width:95%;height:120px;">
<ul>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
</ul>
</div></div>

5    Kemudian simpan tGadget anda dan lihat hasilnya


Jika anda ingin membuat satu kolom saja, tinggal hapus kode <<div class="sidebar section" id="fungsiscroll"> yang kedua sampai .akhir

Selesai sudah cara membuat fungsi scroll pada blog.

Selamat mencoba dan semoga berhasil.

sumber: trik-blogger-andreas.