Vertikal Hover Menu Keren

19.48 Diposting oleh Unknown

Pada Postingan kali ini saya akan membahas bagaimana caranya membuat Vertikal Hover Menu, kalau dilihat tampilannya mungkin sama dengan Vertikal Menu yang ada pada postingan saya sebelumnya. Perbedaan Vertikal Hover Menu ini yaitu bila kita menggerakan Cursor mouse kita kesebuah Link yang ada didalam Menu tersebut maka akan keluar gambar baik itu gambar animasi atau bukan terserah kita sendiri yang mengaturnya. untuk Screen Shotnya bisa anda Lihat pada gambar dibawah ini :

Screen Shot Vertikal Hover Menu :

Screen Shot Vertikal Hover Menu ketika kita menggerakan mouse kita pada Link yang ada :

Seperti pada screen shot diatas ketika kita menggerakan mouse kita pada Link yang ada pada menu tersebut maka akan keluar gambar seperti gambar robot gundam diatas.

Bila anda berminat untuk membuat Vertikal Hover Menu ini caranya yaitu sebagai berikut :

1. Anda login dulu ke blogger dengan menggunakan Account anda

2. Setelah anda login anda langsung masuk ke menu Template dan klik Edit HTML

3. Sebelum anda memodifikasi Template anda ada baiknya anda backup dulu template anda

4. Pada bagian Edit HTML anda cari kode seperti ini ]]></b:skin>

5, Lalu copy dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

Kode CSS :

/*----------------Start CSS Hover Menu-------------------------------*/
#bullethover{
list-style-type:none;
margin:0;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
padding:0px;
border-top:10px solid #ff0000;
border-bottom:10px solid #ff0000;
border-left:5px solid #470000;
border-right:5px solid #470000;
text-shadow:0px 1px 1px #000;
}
#bullethover li{
font-family:Verdana;
font-size:12px;
font-weight:700;
padding:10px 0px 10px 0px;
background: -moz-linear-gradient(top, #000950, #0012ff, #000950);
background: -webkit-gradient(linear, 0% top, 0% bottom, from(#0012ff), to(#000950));
}
#bullethover li a{
padding:10px 10px 10px 20px;
text-decoration:none;
color:#fff;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-F2-iKhOg0E8tUCGn3WQ9RkwovHj-I5ANMFQtdO8QvNSjPtSJrNAeKyhcgGDnQYmwnLGFlCGWUhIPQsI-84CvqeKn_5Dhjmw3YZQmU1EnBbupzOh7cMsnYKsdk4aGsI_XYT_cGPTKus/s1600/bullet-arrow-red-001-1.png") no-repeat center left;
background-size:20px 20px;
background-repeat:no-repeat;
}
#bullethover li:hover a{
color:yellow;
padding-left:70px;
}
.bulletimagestyle{
position:absolute;
}
/*----------------end CSS Hover Menu -------------------------------*/

6. Setelah anda copy dan paste kode diatas Selanjutnya Masih pada Edit HTML sekarang anda cari kode seperti ini </head>

7, Bila sudah anda temukan kode tersebut lalu anda copy dan paste kode javascript dibawah ini tepat diatas kode </head> tersebut.

Kode Javascript :

//<![CDATA[

var bulletimg1 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxd157XTQOp2HJyPlXURWN7dONj39FEBxB49CgEcQ_teS1Jc6-gTPm3VuUcompXp6VSAyvCbMneaZG9slVnjLCoN5453D-wTxSj1fXeOD-ioAXWFSJJUc_kvi-_e2J61mvzTVPLHixcc/s1600/2-1.gif", 40, 2, 30]

var bulletimg2 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5YwHSUjDcaH6jcgeP2tA3jvt5E1AQgriN1eJN5oeAtfWn2PL8OFByrus0SUHaaLBM9H0pylKAZh8jQMJSr782JJcS0QT7SgSSeCjDCydZVGoftLNviuhIF1E2CDqClnKD-FzVWj7TPAQ/s1600/017.gif", 40, 2, 30]

var bulletimg3 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9APr495nGwShzAcTJOpRGsYsRO5Jo7D8NRwLR0qFOB2KIooChCTOPm-s0XXIaJpJOf1NHmSzFtHtrt9jC-hifMXPnqryzUqMoLE7ASmPTrrIPHXvthGOE71UI9odFRnfFrRZ23K1GVbM/s1600/1-1.gif", 40, 2, 30]

var bulletimg4 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_aG4PiJwv9A1zW0cUxRPLbNC1cdj22Hyn6sOXvChDlsxrmz8PvGPtIfQRzoaJRx82Glu_C8B0Tw2oO3tKMobXclgiYOdt-gZ4EUFXLHOqsrvGnUos-K-tbgpDpmfWvGkhtyjjAceWO0/s1600/3-1.gif", 40, 2, 30]

var bulletimg5 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTAusT4kk7VCVnpqHFhRStgdn_aPDlTUdEXJpKnE1K0E271IWYugEducY2gvmZkO9nQYtVntfx5PJGsX809y1dOgIayUadUHzImisD4XehqG1ZUpa4-FxZzlvw9sf_mWtGRGWamM5J1w/s1600/8-1.gif", 40, 2, 30]

var bulletimg6 = ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikm3skiQ2j1gtZs-Pt4oE8-5jGvXMjFqHZhDSI7caHsFpVwftWubbEpg39J44V2JE3Fpfs0vUFow0jSr8p8Si-BWH2R_PUVT0ceuPrHfMNuW7yjVD5FKAAFMBBgZtaL3182T4B-iGGSDY/s1600/15-1.gif", 40, 2, 30]

var classnameRE = /(^|\s+)BM($|\s+)/i

function caloffset(what, offsettype) {

var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop;

var parentEl = what.offsetParent;

while (parentEl != null) {

totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop;

parentEl = parentEl.offsetParent;

}

return totaloffset;

}

function displaybullet(linkobj) {

var reltovar = window[linkobj.getAttribute("rel")]

bulletobj.setAttribute("src", reltovar[0])

bulletobj.style.left = caloffset(linkobj, "left") - reltovar[1] - reltovar[2] + "px"

bulletobj.style.top = caloffset(linkobj, "top") - reltovar[3] + "px"

bulletobj.style.visibility = "visible"

}

function modifylinks() {

bulletobj = document.createElement("img")

bulletobj.setAttribute("id", "bulletimage")

bulletobj.className = "bulletimagestyle"

document.body.appendChild(bulletobj)

for (i = 0; i < document.links.length; i++) {

if (typeof document.links[i].className == "string" && document.links[i].className.search(classnameRE) != -1) {

document.links[i].onmouseover = function () {

displaybullet(this)

}

document.links[i].onmouseout = function () {

bulletobj.style.visibility = "hidden"

}

if (window.addEventListener) window.addEventListener("load", modifylinks, false)

else if (window.attachEvent) window.attachEvent("onload", modifylinks)

else if (document.getElementById || document.all) window.onload = modifylinks

//]]>

</script>

Keterangan kode Javascript diatas :

Tulisan yang berwarna kuning pada kode Javascript diatas yaitu Link dari gambar yang nanti akan keluar pada Vertikal Hover Menu bila kita menggerakan mouse kita pada link yang ada pada kotak Vertikal Hover Menu tersebut. silahkan anda ganti dengan Link gambar yang sesuai dengan keinginan anda.

8. Setelah itu anda klik save untuk menyimpan Template anda.

9. Sekarang anda masuk ke Menu Tata Letak dan anda klik Add Gadget atau tambah gadget pada bagian sidebar template anda, selanjutnya anda pilih gadget yang HTML Javascript. Setelah anda pilih gadgetnya sekarang anda copy dan paste kode XHTML dibawah ini pada gadget HTML Javascript tersebut kemudian klik sava atau simpan.

Kode XHTML :

<ul id="bullethover">

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg1" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg2" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg3" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg4" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg5" title="menu title Disini">Judul Posting Disini</a></li>

<li><a class="BM" href="http://www.blogger.com/Link%20Posting%20Anda%20disini" rel="bulletimg6" title="menu title Disini">Judul Posting Disini</a></li>

</ul>

10. klik Simpan dan buka blog anda untuk melihat hasilnya. Keterangan Kode XHTML :

Silahkan anda Ganti Tulisan warna biru diatas dengan Link postingan anda serta Judul dari Postingan anda, dan untuk tulisan bulletimg1 sd bulletimg6 adalah Link Gambar yang akan keluar bila anda menggerakan mouse anda pada Link tersebut. Contohnya pada Link 1 kita memakai Bulletimg1 maka yang keluar adalah gambar yang tertera pada kode Javascript diatas yaitu :

Silhkan anda ganti pilihan kode bulletimg nya pada setiap Link posting anda sesuai dengan Link gambar yang anda sukai.Selamat mencoba dan semoga postingan saya kali ini tentang cara membuat Vertikal Hover Menu ini bermanfaat bagi anda.

Tags: Widget

Linkbar

Vertikal Hover Menu Keren

Artikel Terkait Lainnya :

4 komentar:

I Like This Video

Entri Populer

CATEGORY

Widget

Template

Blogger Tips

Komputer

CBOX

Translate

Label

Arsip Blog

Recent Post