Blog ini hanyalah dapur,.................

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

/*widget Slide Menu vertikal by noer cara buat web gratis.com*/

ul#Slide-Menu-vertikal-cbwg {

list-style: none;

z-index:999999;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li {

width: 200px;

display:inline;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li a {

display: block;

position:relative;

width: 200px;

height: 25px;

background-color:#aaa;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #aaa;

text-decoration:none;

text-align:center;

-moz-border-radius: 5px;

border-radius: 5px;

margin:0;

padding:0;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

}

ul#Slide-Menu-vertikal-cbwg li a:hover{

background-color:#fff;

border:1px solid #bbb;

padding-top: 80px;

}

ul#Slide-Menu-vertikal-cbwg li a span{

background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));

border-top:2px solid #bbb;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

display: block;

width: 200px;

height: 25px;

font-size:14px;

font-weight:bold;

color:#000;

margin:0;

padding:0;

}

ul#Slide-Menu-vertikal-cbwg li a span:hover{

text-decoration:none;

text-align:center;

font-size:14px;

font-weight:bold;

color:#40954E;

background-color:#eee;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

</style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

Catatan :

Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="http://www.facebook.com/pages/Akademik-Musik-Themaster/160786153993473"><span>INFO MUSIC</span></a>
</li>

<li class="ITEM 2">
<a href="http://freedownloadvideosexxx.blogspot.com/"><span>FREE DOWNLOAD</span></a>
</li>

<li class="ITEM 3">
<a href="http://www.indonetwork.co.id/johnthemaster/profile"><span>LOWONGAN BELAJAR</span></a>
</li>

<li class="ITEM 4">
<a href="http://johnlambaiblog.blogspot.com/"><span>INGIN KE SURGA??</span></a>
</li>

<li class="ITEM 5">
<a href="http://johnthemasterfree.blogspot.com/"><span>FREE SEXXXX</span></a>
</li>

<li class="ITEM 6">
<a href="http://johnthemaster.tk/"><span>HOME</span></a>
</li>

<li class="ITEM 7">
<a href="http://profiljohnthemaster.blogspot.com/"><span>PROFILE</span></a>
</li>

<li class="ITEM 8">
<a href="http://www.google.co.id/#sclient=psy&hl=id&biw=1366&bih=648&source=hp&q=www.johnlambai.com&pbx=1&oq=&aq=&aqi=&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.&fp=28c02bf069601b94&pf=p&pdl=500"><span>ARTIKEL</span></a>
</li>
</ul>