Udah pusing neg sama js..
Sedikit beralih ke CSS neg..

Kali ini ane akan share tentang Menu Image CSS.. (Apa tuh??)
Menu Image CSS ini adalah merupakan menu Vertical kalo dilihat dari bentuknya sih..
Tapi kalo dilihat dari penataan kode/scriptnya, Menu Image CSS ini
lebih ke Eksplorerisasi dari effect gambar az..

Penasaran kaya gimana bentuknya ???

Gimana ?? ada yg tertarik ?? (Layangan kalee..)
Begini neg sob cara membuatnya :

Langkah 1
Cari kode ]]></b:skin> pada Rancangan Edit HTML akun blog sobat.
Letakan kode dibawah ini diatas kode tersebut.

#menu {
 list-style: none;
        color: #FFFFFF;
 width: 450px;
 height: 493px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6NmnJ05w9lhX15UjF8cBYrbsRSE4hE1Zt2D3HWTiJ-NY9w0fOL9o1wj_8VkXrGQQp7dnsGID1D3b0y0GHnnwXO375lwx3moxY3iX2UFUlo-0ObGB5in3uXLwmeqJwOV9oMsFb8YHzJXi/") no-repeat;
 position: relative;
}
#menu span {
 display: none;
 position: absolute;
}
#menu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#menu a:hover {
 background-position: left bottom;
}
#menu a:hover span{
 display: block;
}
#menu .home {
 width: 210px;
 height: 54px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldr9OF28xOpeU0caleSBd4ZZnJahY0CvEzSEiK9TLz2zxs5sijAp_2wg5uj-uInhCOr6U9I8hmbTkreGJP3j3sfIXM0QTaVevUwJy96BaykNGSmsBRr1Co7KDaspMoqXhrrt6DXqLVHM/") no-repeat;
 left: 46px;
 top: 133px;
}
#menu .home span {
 width: 150px;
 height: 60px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFX0y6N2BgJ_bicoEjJVT9OhOfFlJ8QqjWLMHZjhOijbvl6PRJBgY6FhklKTs6nlD1YoBDeDBHE4Ur98h7EznH0qNcDfzb7l8uGZogkgru0Q1D9P9I8uBcdeqCdA9RSkFW9pVxNfNxlI/") no-repeat;
 left: 210px;
 top: -25px;
}
#menu .design {
 width: 210px;
 height: 54px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5LF4shsPXLO703rmVcAaYnmNess0B2Y-Nyo1StbxLLYXuRHjlt3dfqR9HYY_9qH5KXHHvCOyjKlTiDVA_KnZQ1CpVStU2XnLEW4-v-L-p3JtPmo1fFY7Iy6fRKczc2Je9CAeSmq14Fw/") no-repeat;
 left: 55px;
 top: 197px;
}
#menu .design span {
 width: 180px;
 height: 40px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfMVFG7VgRAaU3VaRkUrZ-N5ONEUXRzzPHzwP4sJitffdMfDrfd4t_ptsTDUx7T8MG0AhSdtZycQQDuBWSyJYWrCMcGFFtXKpWkswKaYg89Re50UN8A5Iz4uZsWL78AkX4Q1QFqs30jg/") no-repeat;
 left: 184px;
 top: 10px;
}
#menu .tut {
 width: 210px;
 height: 55px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2i5qHGmw1PZuS2zizNtFoEibKPzy3wdaFlH_MtXYaZcI-rNRRit0Oc99vvxCzDWzkTOai8JaUn_aQcsKF7yhvUKqlW2I413HOaLeoNuaBRFuYUicWw4rkX32ReTwn2E0e5qil3EuZsk/") no-repeat;
 left: 60px;
 top: 260px;
}
#menu .tut span {
 width: 180px;
 height: 40px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgezF3G0Yb7eMb4dPvcLW0Bsna3AO_4s9AcASUKcDDbN9KQEN5jFf34nXPd9Ho85kysweZTekIQnFOeeXlnfMAxxx3Xo2w9TyK1PD0JOogdLKyH_7iSr7gUyS1QCjig4suLxwZkArV4Q/") no-repeat;
 left: 206px;
 top: -10px;
}
#menu .rss {
 width: 210px;
 height: 53px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjutCglWcUDXqFQvV4rMFhMa_WDGV8GQFbNCXqPboarzzoy9GO_T6C_w0nzFh8se3moePQULVRpKG8M_ZaRFE5rs6k8mMyCjPur7dNMqeSya5saoeGEoU1BtY0xKjvTYYtGuhJBuR9Q4/") no-repeat;
 left: 70px;
 top: 325px;
}
#menu .rss span {
 width: 130px;
 height: 30px;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9TiW7_HkGdJjlmZ2MvPgYlHrF10lD_74oHsuAPQSHTCgCGeLi18hkAHYTQyZvgmypKd_9X75DStAWNeruayCSkmSEANBpkch23ciPczKgcL3zAjqPn7cr3ej_ulb35rVpaDWUSSy3aY/") no-repeat;
 left: 200px;
 top: 0px;
}

Silahkan sobat ganti URL gambar-gambarnya, dengan gambar yg sobat inginkan..

Langkah 2
Save template.

Langkah 3
Tambahkan kode dibawah ini pada Halaman Add Gadget HTML / Java Script

<ul id="menu">
<li><a class="home" href="LINK">Home<span></span></a></li>
<li><a class="design" href="LINK">About<span></span></a></li>
<li><a class="tut" href="LINK">Aboits<span></span></a></li>
<li><a class="rss" href="LINK">RSS<span></span></a></li>
</ul>

Ganti tulisan LINK dengan URL Link yg akan sobat tuju.


Langkah 4
Save template sobat dan lihat hasilnya.

Langkah 5
Selesai

Selamat mencoba dan semoga bermanfaat.