Lagi lagi.. lagi.. saya menemukan sebuah menu hidden yang unik dan sangat menarik untuk di pasang di blog kalian. Kali ini tampilan menu hidden berada di atas, kalau yang sebelumnya kan disebelah kiri blog. Mau coba yang terdahulu dulu ? Cek aja disini http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html. Sebenarnya sistem kerjanya sama yang sebelumnya sama juga pada menu hidden yang kali ini, ya.. tapi kan selera orang berbeda - beda, kadang ingin di sebelah kanan ataupun di atas blog, kalian pilih aja selera hati kalian.
Sekarang sudah siapkah kalian melihat menu blog yang unik daripada yang lain ? Silahkan menuju ke sini untuk melihat demo nya http://sasacullens.blogspot.com/ . Gimana ? Baguskan ? Sudah pasti banyak yang bilang menu hidden itu bagus. Menu yang dilengkapi kode JavaScript ini mampu bekerja lebih cepat daripada yang lainnya.
- Login ke Blogger
- Klik Design > Edit HTML
- Letakkan kode berikut di atas kode ]]></b:skin>
ul#deopradipta2 {
position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
left: 200px;
list-style: none;
z-index:999999;
width:721px;
}
ul#deopradipta2 li {
width: 103px;
display:inline;
float:left;
}
ul#deopradipta2 li a {
display: block;
float:right;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#transparent;
background-repeat:no-repeat;
background-position:50% 10px;
border:2px solid #000;border-radius:5px;top:0px;box-shadow:0 0 5px #000;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#deopradipta2 li a:hnver{
background-color:#FF0000;
}
ul#deopradipta2 li a span{
letter-spacing:2px;
font-size:11px;
color:#000;
}
ul#deopradipta2 .aa a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEsSRHcmGztseUlgr2vZomY03EVzZUkpby9RTjfcYo6rOiI4TZn1f5P5PxYIpjrtzDRjJs2vNJUcall0sA0eGJ4l3sveKXHfOdYfCXjlwc4xUoqrcQzCYJMOA8Z-6cEEp3xDTw73lDp8c/s1600/1deo.png);
}
ul#deopradipta2 .ab a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirt9JTiOZL2HYg7UuJmsrTKPWKz2-xUefsLC5-HfhJrIiwSWj3sMW5geR08ONdZ155sgGxN3soNSJKUgL40OuXsCDbOlf1BsbgUt0ERUeiDSRPDpA7AmYG1Zkm1mygotwTDaK9VSjx_0E/s1600/3deo.png);
}
ul#deopradipta2 .ac a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR3SiFAjknRCKx7l_rSwztWLYOMvSyO1zwB1y7XQeojhL-qNJLu9zSzqsWNBnzXqfAjAW68AjT5uYW-8dRv5W_auaJTZmdpVGdJzwc1GmYBUPXa6N8IEcDJYBBTWs30ug0TbS-DYFKyoE/s1600/2deo.png);
}
ul#deopradipta2 .ad a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgajRAQ6MUVyT2yFQ80twWyEiKW-7ezLlypZW8feXaFEtjnVcMYA59PxbVaCHa2SO444fALwSiBrcOgl0tPYV6tBWkbiSI7AhoEN0RdUO-n5WdNieJI53-SjccrDQnQObWFbaiXul1zi1A/s1600/6deo.png);
}
ul#deopradipta2 .ae a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCdUau8hyphenhyphenEPDNbdf_y_AifDAjxXUIaT-dWiiEBII_5-q9AgKT-224FwLJBxzOn1Y9Jav_HBRDLtDBacnd_sN_184t5pLOspHs8kBQDTrp4iZrzDF7u399QJwrQjH_9zaMPxPaHBKp6d0/s1600/4deo.gif);
}
#Ganti kode berwarna Orange dengan link gambar yang kalian inginkan
- Letakkan kode berikut di bawah ]]></b:skin>
<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$('#deopradipta2 a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#deopradipta2 > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
- Terakhir letakkan kode berikut di atas kode </body>
<script src='http://idub.007sites.com/smile1.js' type='text/javascript'/>
<ul id='deopradipta2'>
<li class='aa'><a href='http://dopind.blogspot.com/feeds/posts/default'><span>RSS</span></a></li>
<li class='ab'><a href='http://www.facebook.com/manchesterunitedd'><span>FACEBOOK</span></a></li>
<li class='ac'><a href='http://twitter.com/49919491'><span>TWITTER</span></a></li>
<li class='ad'><a href='http://www.alexa.com/siteinfo/http://dopind.blogspot.com/?p=rwidget#'><span>ALEXA</span></a></li>
<li class='ae'><a href='http://dopind.blogspot.com/view'><span>VIEW</span></a></li>
</ul>
#Ganti kode warna Hijau dengan kode link yang kalian ingin pasang
#Ganti kode warna Putih dengan tulisan keterangan menu
#Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode *deopradipta2 .aa a* yang ada di langkah ke 3, begitu seterusnya
- Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D
Artikel Terkait
Langganan:
Posting Komentar (Atom)
40 komentar:
Artikel menarik sob..
ini bikin berat blog ga ???
Nice share :D
Happy blogwalking .............
wakawaka.. makasih sobb..
ya kagak lahh.. di coba dlu makanya ^^
Salam Blogger :D
ane kepingin menu sidebar ane bisa hidden kaya gitu sob. tp kan itu dropdown, ane mau nyoba yang dropdownnya nggeser ke kanan
oalah.. ya pas sama tuorialku yg pertama sob.. cek disini http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html
admin request gimana caranya biar blog bisa ada efek melodi2nya kayak di blog http://chuliepetal.blogspot.com
oalaah.. sobat klik efek itu aja udah muncul tuh kode2nya.. atau copy aja kode ini yakk ^^
<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="Akatsuki Blog @ dopind.blogspot" src="https://3534036885991089359-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex10/colourful.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>
wih keren ni masbro.izin untuk mencoba tutorialnya
silahkan sobbb.. mkasih yak ^^
keep post gan jangan lupa mampir ya
http://marvelous-adventure-inlampung.blogspot.com/
samal Dari Penjelajah Blog
wokeeee sobbbb.. pastii.. makasih udah mampir ^^
waahh thanks infonya yah ^^
tapi aku udah coba
ko jadi adanya di bawah yah ._.
loh kok ? emang iya ? -_-
sob kayakny ad yg slah deh, tdi ku coba gak mau,,
trus trnyta d langkah 5 tuh ul id sharusny bukan navixed tapi deopradipta2 :D
msh bnyak yg slah sob,,, va dah otak atik bru mau dia,,hadooohhh :D
tpi ttap aj, makasih ya :)
makasih buat koreksinya sob.. itu soalnya lngsung coppas dari blogku yg satunya.. mau ngedit lupa.. thankz yak ^^
punya ane..kok nempelnya di atas sendiri ya gan...lha biar berada dibawah header gimana gan?...thank's
wah info yg berguna sob, ijin gunakan script nya..he
@ciptoro : waduh.. emang berada diatas sob.. maunya dimana ? masih blon tau -_-
@mipta : silahkan ^^
sob mw tanya nih
gmn caranya ubah font jadi putih ??
ngrubah font yang mana ? blog apa di menu hidden ini ? klw di menu hidden nya
ul#deopradipta2 li a span{
letter-spacing:2px;
font-size:11px;
color:#000;
}
yg #000 diganti #fffff
Kalo Cara membuat Hidden Melayang Di Kiri Gimna Ia ?
Yang Kayak Ini http://sasacullens.blogspot.com/ Aku Suka Sobb !!
silahkan knjungi disini sob.. http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html
Minta template http://sasacullens.blogspot.com/
dong
mail aja sob kalau bisa .. boleh tau emailnya apa ? ^^
toLong di bantu doNk mas bro tuk memperkeren tampilan blog http://irwank-ks.blogspot.com
dibantu dari yang mana nih ?
Thanks gan bisa jalan di blog saya
http://asn-inc.blogspot.com/
wah,, selamat sob .. smoga bermanfaat yak ^^
Sob Template Kayak http://sasacullens.blogspot.com/
Kirim Ke Facebook Aku Yah
https://www.facebook.com/vx.cyber
Thanks :)
gan klo yg kaya punya agan yg gmn?
@anonim : udah sob .. sukses ^_^
@karyakita : punya ane ? kapan2 ane share kok sob ^^
Mau tanya cara bikin tulisan kayak mau tukar link gimana ya ??? bingung
udah bisa
makasii
@rizal : tulisan gmna sob (?) centricle.com/tools/html-entities mngkn itu yg ane mksd ya
@rara : sipp sob.. samasama ^_^
oah.. itu pakek fullmusik.net sob.. coba aja langsung kesana ^^
kasi tau dong . bener-bener belum paham neh kalo lewat edit html tuh nyari bskin atau /body danlainlain kan tulisannya banyak bro !!-_- .
cara nyarinya 'ctrl + f' trus ketik tuh /body pasti ketemu.. :)
Bagus min thx yaah
ehehe.. iya sob.. semoga bermanfaat yaa :)
Bagus bos infonya.. Wah gw tertarik nie dengan petir di blog nya bos.. bisa minta diajarin kita2 donk bos caranya..
Posting Komentar