Membuat Menu Hidden (2) di Blog


      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.

  1. Login ke Blogger
  2. Klik Design > Edit HTML
  3. 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(http://2.bp.blogspot.com/-Ji6q1sKijRU/TzUcTqFViYI/AAAAAAAAAsg/0opjdDXDBq0/s1600/1deo.png);
    }
    ul#deopradipta2 .ab a {
    background-image: url(http://3.bp.blogspot.com/-1jyeR5djAv8/TzUcuIw6UBI/AAAAAAAAAsw/DrhFr-nOsAs/s1600/3deo.png);
    }
    ul#deopradipta2 .ac a {
    background-image: url(http://1.bp.blogspot.com/-KiCRSV017mc/TzUckSo8jUI/AAAAAAAAAso/Mt-3z_W4yb8/s1600/2deo.png);
    }
    ul#deopradipta2 .ad a {
    background-image: url(http://2.bp.blogspot.com/-umyl4sw9oRk/TzUe2Ya01PI/AAAAAAAAAtY/tZ3EYNNhmVE/s1600/6deo.png);
    }
    ul#deopradipta2 .ae a {
    background-image: url(http://2.bp.blogspot.com/-ha4GRLroFXM/TzUc2nhEeaI/AAAAAAAAAs4/R5tkmqkOwIQ/s1600/4deo.gif);
    }

    #Ganti kode berwarna Orange dengan link gambar yang kalian inginkan

  4. 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;
    $(&#39;#deopradipta2 a&#39;).each(function(){
    $(this).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },d+=150);
    });


    $(&#39;#deopradipta2 &gt; li&#39;).hover(
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-2px&#39;
    },200);
    },
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({
    &#39;marginTop&#39;:&#39;-80px&#39;
    },200);
    }
    );
    });
    </script>

  5. 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

  6. Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D

Artikel Terkait

41 komentar:

Dhedi Js mengatakan...

Artikel menarik sob..
ini bikin berat blog ga ???
Nice share :D

Happy blogwalking .............

Deo Pradipta mengatakan...

wakawaka.. makasih sobb..
ya kagak lahh.. di coba dlu makanya ^^

Salam Blogger :D

bima mengatakan...

ane kepingin menu sidebar ane bisa hidden kaya gitu sob. tp kan itu dropdown, ane mau nyoba yang dropdownnya nggeser ke kanan

Deo Pradipta mengatakan...

oalah.. ya pas sama tuorialku yg pertama sob.. cek disini http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html

Ryuu-7Marsu mengatakan...

admin request gimana caranya biar blog bisa ada efek melodi2nya kayak di blog http://chuliepetal.blogspot.com

Deo Pradipta mengatakan...

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>

Dapur Tutorial Blogspot mengatakan...

wih keren ni masbro.izin untuk mencoba tutorialnya

Deo Pradipta mengatakan...

silahkan sobbb.. mkasih yak ^^

Kasyfi assegaf mengatakan...

keep post gan jangan lupa mampir ya

http://marvelous-adventure-inlampung.blogspot.com/

samal Dari Penjelajah Blog

Deo Pradipta mengatakan...

wokeeee sobbbb.. pastii.. makasih udah mampir ^^

dilla rania mengatakan...

waahh thanks infonya yah ^^
tapi aku udah coba
ko jadi adanya di bawah yah ._.

Deo Pradipta mengatakan...

loh kok ? emang iya ? -_-

Iva Mairisti mengatakan...

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

Iva Mairisti mengatakan...

msh bnyak yg slah sob,,, va dah otak atik bru mau dia,,hadooohhh :D
tpi ttap aj, makasih ya :)

Deo Pradipta mengatakan...

makasih buat koreksinya sob.. itu soalnya lngsung coppas dari blogku yg satunya.. mau ngedit lupa.. thankz yak ^^

ciptoro mengatakan...

punya ane..kok nempelnya di atas sendiri ya gan...lha biar berada dibawah header gimana gan?...thank's

mipta mengatakan...

wah info yg berguna sob, ijin gunakan script nya..he

Deo Pradipta mengatakan...

@ciptoro : waduh.. emang berada diatas sob.. maunya dimana ? masih blon tau -_-

@mipta : silahkan ^^

tantoIT mengatakan...

sob mw tanya nih

gmn caranya ubah font jadi putih ??

Deo Pradipta mengatakan...

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

Anonim mengatakan...

Kalo Cara membuat Hidden Melayang Di Kiri Gimna Ia ?

Yang Kayak Ini http://sasacullens.blogspot.com/ Aku Suka Sobb !!

Deo Pradipta mengatakan...

silahkan knjungi disini sob.. http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html

Anonim mengatakan...

Minta template http://sasacullens.blogspot.com/

dong

Deo Pradipta mengatakan...

mail aja sob kalau bisa .. boleh tau emailnya apa ? ^^

Irwan_Lovers mengatakan...

toLong di bantu doNk mas bro tuk memperkeren tampilan blog http://irwank-ks.blogspot.com

Deo Pradipta mengatakan...

dibantu dari yang mana nih ?

Bedebah mengatakan...

Thanks gan bisa jalan di blog saya
http://asn-inc.blogspot.com/

Deo Pradipta mengatakan...

wah,, selamat sob .. smoga bermanfaat yak ^^

Anonim mengatakan...

Sob Template Kayak http://sasacullens.blogspot.com/

Kirim Ke Facebook Aku Yah

https://www.facebook.com/vx.cyber

Thanks :)

Karya kita mengatakan...

gan klo yg kaya punya agan yg gmn?

Deo Pradipta mengatakan...

@anonim : udah sob .. sukses ^_^

@karyakita : punya ane ? kapan2 ane share kok sob ^^

Rizal Blogger mengatakan...

Mau tanya cara bikin tulisan kayak mau tukar link gimana ya ??? bingung

Rara_Ocit mengatakan...

udah bisa
makasii

Deo Pradipta mengatakan...

@rizal : tulisan gmna sob (?) centricle.com/tools/html-entities mngkn itu yg ane mksd ya

@rara : sipp sob.. samasama ^_^

diitra mengatakan...

Bro mau tanya, metode pemasangan lagu di blog http://sasacullens.blogspot.com/
lagunya soalnya langsung mulai dan gak macet .
inbox fb aku aja ya sob : https://www.facebook.com/Diitraa

Deo Pradipta mengatakan...

oah.. itu pakek fullmusik.net sob.. coba aja langsung kesana ^^

hn mutiara mengatakan...

kasi tau dong . bener-bener belum paham neh kalo lewat edit html tuh nyari bskin atau /body danlainlain kan tulisannya banyak bro !!-_- .

Deo Pradipta mengatakan...

cara nyarinya 'ctrl + f' trus ketik tuh /body pasti ketemu.. :)

Gufran Algifari mengatakan...

Bagus min thx yaah

Deo Pradipta mengatakan...

ehehe.. iya sob.. semoga bermanfaat yaa :)

FAEDAH JAYA mengatakan...

Bagus bos infonya.. Wah gw tertarik nie dengan petir di blog nya bos.. bisa minta diajarin kita2 donk bos caranya..

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -