Cara Membuat Menu Tersembunyi di Samping Blog

yah...gini lah nasih yang cuma bisa ngo-pass...sekali bikin artikel yah kayak gini...ora bagus :D
tidak berlama-lama lagi kita lanjut ke pembuatan menu yang tersembunyi di samping blog...bisa di lihat di blog sebelah =))

okeh lanjutkan :
seperti para master berbicara, pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian): :D

]]></b:skin>


setelah ketemu...perbanyak lah berdo'a :)) sekedar intermezo aja...(garing-red)...tempelkan kode berikut tepat di bawahnya,ingat!!! tepat di bawahnya :

<style type='text/css'>
#sejagad {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px #0000FF;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#sejagad{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #sejagad:hover{width:400px;opacity:1.0;margin-left:0;}
.sejagadkotak {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}
.sejagadkotak:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}
.sejagadkotak2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}
.sejagad15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}
.sejagad2 ul.bom {margin: 0; padding: 0;}
.sejagadkotak2 li {margin-left:20px;}
.sejagadkotak2 li a {color: #FFFFF; line-height: 4px; font-size: 30px;font-weight: bold; text-decoration:none;}
.sejagadkotak2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}
.sejagadkotak2 h3 { font: 30px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}
.sentuhansejagad {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}
.sentuhansejagad:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: blue;}</style>
wes????
kalau udah..berdo'a lagi...=)) peace...becanda doankk...ank....ank.....

lanjut :
selanjutnya...masukan kode di bawah ini ke  <body> ingat yah...ke bawah...yang berarti di bawahnya :D

<div id='sejagad'><span class='sentuhansejagad'>Menu</span>
<div class='sejagadkotak'><div class='sejagadkotak2 sejagad15'>
<h3>Welcome to Androidkan</h3>
<a href='http://androidkan.blogspot.com/' title='Home'><img alt='androidkan.blogspot.com' height='130px'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcqmMrP_fmMBo9DMJA0P03jFh4FSlZbodRaW5tBWuKkSPPkV_pauPacGsEzN4QtTvoE8HaiWraHErg_WhTDX_ZyG48vU671KpWX5BlL93_Fl7RQeOsgYrRWhlGVqYzpo_O-6lVd6usOyc/s1600/Untitled.png' title='androidkan.blogspot.com' width='130px'/></a>
<p><a href='http://androidkan.blogspot.com/' title='Home'>Home  &#187;</a></p>
<p><a href='http://androidkan.blogspot.com/search/label/games%20android/' title='Games'> Games  &#187;</a></p>
<p><a href='http://androidkan.blogspot.com/search/label/applications/' title='Applications'> Applications  &#187;</a></p>
<p><a href='http://androidkan.blogspot.com/search/label/Room%20Root' title='Room Root'> Room Root  &#187;</a></p>
<p><a href='http://androidkan.blogspot.com/p/sitemap.html' title='Sitemap'> Sitemap  &#187;</a></p>
</div>
</div></div>
keteranganya sob :
kuning : ganti dengan kata-kata sobat yang puitis...tis..tis....
merah : itu link gambar,sobat bisag anti dengan URL gambar yang sobat suka.
biru : ganti dengan URL blog sobat.
ijo : ganti dengan URL Menu yang sesuai blog sobat.

wes...wes......selanjutnya save..low ng percaya pratinjau aja dulu....jreng.......liat dah hasilnya jadi kayak gini ng ???? contohnya ajah :P

akhir kata...selamat mencoba dan selamat berkreasi...

bagi yang ora mau klik-klik...saya kasih pripiyu-nya :O
Cara Membuat Menu Tersembunyi di Samping Blog
Tampilan saat kursor di dekatkan pada box menu

Tampilan saat kursor di dekatkan pada tulisan menu
sumber : saya
nb : yang kebangetan pengen ngo-pass silahkan aja..tapi tinggalkan jejak di komen yo?
-salam copas selalu-

Posting Komentar

Post a Comment (0)

Lebih baru Lebih lama