Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Vertikal Floating Image di Blog

Menu Vertikal Floating Image di Blog
Membuat Menu Vertikal Floating Image di Blog – pada awalnya ngeblog mungkin hanya karena iseng-isengan saja, tapi apa boleh buat jika lama-kelamaan sudah terbiasa dan menjadi hoby keseharian.
Menu blog memang sangat banyak dan bermacam ragam sehingga terkadang kita dibuat bingung untuk memilih mau menerapkan yang cocok pada template blog yang sudah kita pakai. Jika ingin menggunakan menu blog versi vertikal floating image mungkin ini adalah langkah yang sangat mudah untuk diterapkan kedalam blog. Menu vertikal ini cukup ramping, hanya berbentuk gambar kecil yang berjajar dari atas kebawah berupa gambar yang nantinya apabila tersentuh oleh mouse maka akan nampak animasi menu yang akan melebar kesamping kanan. Menu ini juga tidak satu warna tapi melainkan berwarna-warni. Untuk memasang menu vertikal ini kedalam blog maka berikut adalah tutorialnya tentang cara Membuat Menu Vertikal Floating Image di Blog dengan CSS:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
Menu Vertikal Floating Image di Blog
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}

*{
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Menu Vertikal Floating Image di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="#">
<span>Home</span>
</a>
</li>

<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>

<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</ul>
</div>
Keterangan:
Silahkan ubah tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Save, maka selesai dan silahkan lihat hasilnya dari cara Membuat Menu Vertikal Floating Image di Blog.

Berlangganan artikel via email

39 Response to "Membuat Menu Vertikal Floating Image di Blog"

Wah menunya beda ya,,biasannya bentuknya horisontal,tapi ini vertikal..keren mas

Balas

wah mantap gan makasih gan semoga sukses selalu

Balas

Keren gan, boleh dicoba nih :))

Balas

makasih buat infonya gan

Balas

berarti ndak pakai edit template ya mas?

Balas

keren gan, mungkin ntar ane coba di blog sy....
:)

Balas

keren sob, patut dicoba nih

kombacknya mas broo...

Balas

keren sob, boleh dicoba nih

Balas

Dulu saya pernah pakai widget ini mas, lumayan ringan menurut saya! Dan saya paling suka warna2 nya, serasa suasana windows phone. :D

Balas

makin manteb aja ni tutor blognya mas

Balas

Bisa ga ini diterapkan dalam postingan?

Balas

keren mas, tapi ini berat nggak??

Balas
avatar
Anonymous

wih ada kode CSS baru lagi di blog ini :)

Balas

Mantap gan tutorialnya :)

Balas

gak seru kalo horisontal doang mas :)

Balas

selamat malam kembali mas :)
(pas bales udah malem)

Balas

sama2.. tankyu udah mampir :)

Balas

alhamdulillah..dapat pengetahuan baru lagi disini,
pokoknya saya simpan dulu ini gan, mungkin suatu saat bisa diguakan, terima kasih banyak atas tutorialnya

Balas

iya mbak :)

pake juga gapapa, tinggal pilih aja

Balas

silahkan mas dicoba :)

Balas

silahkan mas,
yoi bro :)

Balas

boleh sob silahkan

Balas

kalo sekarang suasananya faceblog evolutions bangetsss mas :)

Balas

yang penting happy mas :)

Balas

bisa mas, silahkan kode HTMLnya masukin kolom posting

Balas

elemen "position: fixed" itu supaya menunya melayang ya sob? Kreatif plus keren menunya :)

Balas

seperti yang udah dikatakan mas daniel diatas mas :)

Balas

ntar kalo berkunjung lagi jam 12 malem aku kasih yang baru lagi mas :)

Balas

mas twitter juga mantab :)

Balas

sama2.. tankyu udah mampir om, saya bisanya nyuguhin seadanya aja nih :)

Balas

iya mas, tankyu udah mampir :)

Balas

langsung pake yang html bisa??.. biar gak usah ngasi css.. hoho.

Balas

wah keren ini. boleh dicoba........
.
tpi kira2 nambah berat loading gak?mksih salam http://thephatar.blogspot.com

Balas

hehe sipp dah. lain kali kalau minat saya tes mas :)

Balas

Siip banget triknya bos, ane bookmark. Siapa tahu lupa pagenya. Thanks sob.

Balas
avatar
Anonymous

Thanks Mas Menunya cukup Keren.....

Balas
avatar
Anonymous

keren banget mas
menu vertikalnya....

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Vertikal Floating Image di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode