Membuat Menu Hidden di Blog

        Memperindah blog adalah salah satu tujuan untuk meningkatkan pengunjung blog dan membuat pengunjung tidak bosan untuk selalu mampir di blog kita.  Jika tampilan dari blog itu-itu saja pasti kita akan bosan melihat blog yang kita kunjungi sama semta tampilannya dengan yang sebelumnya.  Nah.. Kali ini kita bicara tentang menu blog, kebanyakan blog menu itu pasti berada di bawahnya header seperti Akatsuki Blog™ ini.  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#deopradipta {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 50px;
    left: 0px;
    list-style: none;
    z-index:9999;
    }
    ul#deopradipta li {
    width: 100px;
    }
    ul#deopradipta li a {
    display: block;
    margin-left: -50px;
    width: 100px;
    height: 55px;
    background-color:#141414;
    background-repeat:no-repeat;
    background-position:48px center;
    border:1px solid #cfcfcf;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    }
    ul#deopradipta .aa a{
    background-image: url(
    http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
    }
    ul#deopradipta .ab a{
    background-image: url(
    http://megapolitan-group.com/inc/images/icon_fasilitas.png);
    }
    ul#deopradipta .ac a{
    background-image: url(
    http://www.e-isik.com/tr/images/icon_admin.png);
    }
    ul#deopradipta .ad a{
    background-image: url(
    http://www.scortaproduction.com/images/icon_govin.png);
    }
    ul#deopradipta .ae a{
    background-image: url(
    http://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Money_Coin_Icon.svg/50px-Money_Coin_Icon.svg.png);
    }
    ul#deopradipta .af a{
    background-image: url(
    http://fatek.ung.ac.id/informatika/image/icon_berita.png);
    }
    ul#deopradipta .ag a{
    background-image: url(
    http://www.kemendag.go.id/images/pelayanan_perdagangan_icon_steep.png);
    }
    ul#deopradipta .ah a{
    background-image: url(
    http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
    }

    #Ganti kode berwarna Orange dengan link gambar yang kalian inginkan

  4. Letakkan kode berikut di bawah  ]]></b:skin>

    <script src='http://www.google.com/jsapi'/>
    <script>
    google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
    </script>
    <script type='text/javascript'>
    $(function() {
    $(&#39;#deopradipta a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
    $(&#39;#deopradipta &gt; li&#39;).hover(
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
    },
    function () {
    $(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
    }
    );
    });
    </script>

  5. Terakhir letakkan kode berikut di atas kode </body>

    <ul id='deopradipta'>
    <li class='aa'><a href='http://dopind.blogspot.com/' title='Beranda'/></li>
    <li class='ab'><a href='http://dopind.blogspot.com/2010/10/about-me.html'/></li>
    <li class='ac'><a href='http://dopind.blogspot.com/2011/10/daftar-isi.html'/></li>
    <li class='ad'><a href='http://dopind.blogspot.com/2010/10/friends-link_10.html'/></li>
    <li class='ae'><a href='http://dopind.blogspot.com/2010/10/pasang-iklanbanner-di-akatsuki-blog.html'/></li>
    <li class='af'><a href='http://www.blogger.com/profile/10331503479536442674'/></li>
    <li class='ag'><a href='http://dopind.blogspot.com/2011/12/duidcoid-komunitas-bisnis-online.html'/></li>
    <li class='ah'><a href='http://dopind.blogspot.com/2010/10/friends-link.html'/></li>
    </ul>

    #Ganti kode warna Hijau dengan kode yang kalian ingin pasang
    #Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode  *deopradipta .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

33 komentar:

MUXLIMO mengatakan...

gak jalan uy di ane.. :(
http://muxdemo.blogspot.com/

Deo Pradipta mengatakan...

sudah sob.. silahkan dicoba lagi :D

MUX SPARROW mengatakan...

udah apanya nih?? masih sama kok.. ga brubah, sob.. (_ _")

Deo Pradipta mengatakan...

sudah sob.. udah aku coba tadi :3

Deo Pradipta mengatakan...

oke sob ^_^

Rara Nurisnaini Yanuarina mengatakan...

udh berhasil aku.x

alhamdulillah ya .. ssuatu

Deo Pradipta mengatakan...

hohoho.. sipp sobbb ^_^

ardian mengatakan...

berhasil gan, tapi cara mnculin deskripsi url nya sebelum diklik gmna ya?!
trz klo nyari gmbarx th dmn?
mhn bntuannya gan....

Deo Pradipta mengatakan...

gambar itu di langkah no.3 sob.. yg warna orange diganti..

kalau deskripsinya itu dilangkah ke 5 sob.. kyk di home.. title="beranda".. kyk gitu aja :3

ardian mengatakan...

Ok, thanks sob....

Deo Pradipta mengatakan...

oke sob.. sama_sama ^_^

Unknown mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Ino mengatakan...

Deo.... Sip banget nih............. boleh tanya ga..... aq minta tolong bisa???? plizzz berkaitan dengan Edit Template... nih....

Deo Pradipta mengatakan...

okedah sob.. klw bisa ngmngin di FB aja http://www.facebook.com/manchesterunitedd

Farhan mengatakan...

sob ini buat blogspot atau wordpress?

Deo Pradipta mengatakan...

buat blogspot sob.. wordpress masih bingung ane -_-

PSIKOLOG HATI mengatakan...

BOLEH TOLONGIN AKU GK
aku masih awam dgn bhsa program apa lgi sama yg namanya scrip,,,
aku udah cb smw langkahmu tpi cman dikit adja yg jdi,,,,,boleh gk gan editkan scrip blog ku...????

PSIKOLOG HATI mengatakan...

klo boleh,,,tolong buatkan saja menu2 kyk menu blog pnyamu tpi pakai nama
home, mmp, mgm, struktur, basis, program

tlng di bantu yach,,,coz ini mw aku pakai untuk perusahaanku...

PSIKOLOG HATI mengatakan...

klo gan bisa bantu nanti scrip nya aku kirim lewat pesan fb adja yach,,,,
mohon bantuannya gan....
085211328349 N 082150607970
sms aku d nmr ntu klo gan mw bantu..
cz aku gk tiap hari online gan.....

Deo Pradipta mengatakan...

sama sob.. ane fokus UN*juga.. jadi gak bisa bantu.. maaf.. :3

princessladyheart mengatakan...

sOb mCNA z cArA gUna'y Ko' w pUsiNg gA ngERtik bikiN'y....

Unknown mengatakan...

bos kalau mau bikin yang di hidden linknya gitu gimana ya. Bisa keluarnya kalau udah klik like atau +1 gitu

Deo Pradipta mengatakan...

@ladyheart : coba aja di pakai dulu.. cuma coppas kode aja kok ^^

@tanto : ane masi gak paham sob :/

Karya kita mengatakan...

gan klo contoh menu yg laen ada ga?

Deo Pradipta mengatakan...

silahkan cek dsini sob http://dopind.blogspot.com/2012/02/membuat-menu-hidden-2-di-blog.html ^_^

Karya kita mengatakan...

izin otw ke tkp sob :)

Deo Pradipta mengatakan...

iya sob.. silahkan ^^

Unknown mengatakan...

sipppp dah ane mau coba

hanggarps mengatakan...

ini kayak yang lagi dopind gunakan yah

Deo Pradipta mengatakan...

@rizal : ehehe.. silahkan di cobacoba sob ^^
@hanggar : bukan contohnya ada di http://sasacullens.blogspot.com/ ^^

Unknown mengatakan...

kakak datang dong di blog ku http://snakebluee.blogspot.com/
kk disana koment k,jadi teman k, y plis............

Deo Pradipta mengatakan...

oke sob.. langsung ke TKP sobat :)

azzuhruf mengatakan...

wah... keren!! thank you so much!! :D

Posting Komentar

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