Membuat scroll menu 3 kolom

Sebagaimana yang sudah diketahui, memasang  menu scroll adalah bertujuan untuk menghemat ruang lingkup dalam blog. Bayangkan jika blog sobat dipaksa memasang widget daftar link berjumlah 75. Pasti menu daftar link tersebut sangat memboroskan ruang di sidebar blog sobat. Nah, daripada boros, sobat bisa mengakalinya dengan memasang menu scroll ini pada widget daftar link, atau pada widget lainnya seperti label/kategori, daftar isi, dll. Untuk lebih jelasnya sobat semua dapat melihat pada blog saya yang bentuknya seperti terlihat pada gambar.

Cukup efisien bukan ?

Untuk membuatnya cukup mudah, sobat tinggal mengikuti langkah-langkah  sebagai berikut :

 

1.        Login ke akun blogspot milik sobat

2.      Pilih rancangan

3.      Pilih menu Edit HTML

4.     Carilah Kode ]]></b:skin>

5.      Copy dan pastekan kode dibawah ini sebelum kode ]]></b:skin> :

  

.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: red; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://i1127.photobucket.com/albums/l625/hasyim871/te-1.png) center center repeat-x;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
.indentmenu{
font: bold 11px algerian;
width: 150%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 50%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: Darkorchid url(http://extjs.com/deploy/dev/docs/) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: red; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}
.indentmenu ul li a:visited{
color: Cyan;
}
.indentmenu ul li a.selected{
color: Cyan !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://i1127.photobucket.com/albums/l625/hasyim871/Visone-Girardi.png) center center repeat;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}</b:if>

Hasyim Ibnu Hasbullah

6.     Simpan template sobat

7.      Untuk menampilkannya pada widget blog sobat, pilih rancangan lalu pilih tambah gadget dan masukkan kode dibawah ini :

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="dog1">Motivasi</a></li>

<li><a href="#" rel="dog2">Blogging</a></li>

<li><a href="#" rel="dog3">Download</a></li>

<li><a href=""></a></li>

</ul>

<br style="clear: left"/>

</div>

<ilayer clip="0,0,430,150" width="400" name="scroll1" height="150">

<layer width="400" name="scroll2" height="150" bgcolor="black">

<div id="scroll3" style="width:335px;height:150px;background-color:white;overflow:scroll">

<div style="border:1px Darkorchid; width:300px; height: 300px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">

<ul>

<li><a href='http://hasyim-kata-motivasi.blogspot.com/2011/09/suatu-hari-pada-saat-sebuah-lubang.html'> <b>Belajar Dari Seekor Kupu-kupu </b></a></li>

<li><a href='http://hasyim-kata-motivasi.blogspot.com/2011/09/kata-motivasi-garam-dan-telaga.html'><b>Garam Dan Air Telaga</b> </a></li>

</ul>

</div>

<div id="dog2" class="tabcontent">

<ul>

<li><a href="http://hasyim-blog.blogspot.com/2011/12/membuat-scroll-menu-3-kolom.html"><b>Facebook Like Bomb 2</b></a></li>

<li><a href="http://hasyim-blog.blogspot.com/"><b>Facebook Like Bomb 1</b></a></li>

</ul>

</div>

<div id="dog3" class="tabcontent">

<ul>

<li><a href="http://hasyim-blog.blogspot.com/2011/12/membuat-scroll-menu-3-kolom.html"><b>Facebook Like Bomb 2</b></a></li>

<li><a href="http://hasyim-blog.blogspot.com/"><b>Facebook Like Bomb 1</b></a></li>

</ul>

</div>

</div>

</div>

</layer>

</ilayer>

<script>

var nsstyle='display:""'

if (document.layers)

var scrolldoc=document.scroll1.document.scroll2

function up(){

if (!document.layers) return

if (scrolldoc.top<0)

scrolldoc.top+=10

temp2=setTimeout("up()",50)

}

function down(){

if (!document.layers) return

if (scrolldoc.top-150>=scrolldoc.document.height*-1)

scrolldoc.top-=10

temp=setTimeout("down()",50)

}

function clearup(){

if (window.temp2)

clearInterval(temp2)

}

function cleardown(){

if (window.temp)

clearInterval(temp)

}

</script>

<br/><span style="&{nsstyle};"><a onmouseout="clearup()" href="#" onmousedown="up()" onclick="return false"

onmouseup="clearup()"></a> <a

onmouseout="cleardown()"

onmousedown="down()" href="#" onmouseup="cleardown()" onclick="return false"><a href="#" onclick="if (document.layers) scrolldoc.top=0;return false"></a><a href="#" onclick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false"></a></a

onmouseout="cleardown()"

onmousedown="down()"></span>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")

mypets.setpersist(true)

mypets.setselectedClassTarget("link")

mypets.init(2000)

</script>

Untuk menyesuaikannya dengan template sobat, baik warna maupun ukurannya silahkan di otak-atik sendiri...! Dan tambahkan link posting serta judul posting sobat diantara kode <ul> dan </ul>
Contoh : 
 

<ul>

<li><a href="http://hasyim-blog.blogspot.com/2011/12/membuat-scroll-menu-3-kolom.html"><b>membuat menu scroll 3 kolom</b></a></li>
<li><a href="link posting sobat"><b>judul posting sobat</b></a></li>
</ul>


Semoga bermanfaat...