My Profile

Avatar


Designer, UI

London, UK

April 1, 1988


Some text..

Some other text..



Interests

News W3Schools Labels Games Friends Games Friends Food Design Art Photos


Hey!

People are looking at your profile. Find out who.

Social Media template by w3.css

Status: Feeling Blue

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/AVvXsEhfbuLA5oRvZx6D3hUHZb1JGCSRpf5K3O9otA2VGpJzNhBpQujI5tSliOBlsxrzesPuMiVSu43HPRBPZHOp8JL0Y2eA3ZifWjPUEN1FFL1FRpF5bT8o0yfXE20T2GOzmm8hCh4IUzCXy-E/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