SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Auto Hidden Navigasi Menu Share diatas Header

Seperti postingan saya sebelumnya, tentang Auto Hidden Navigasi Menu Share di sisi kanan dan atas permintaan kawan kita pada kotak Komentar yang katanya ke dabling sama Buku Tamunya [ShoutMix] ada  nggak solusinya :z  jawabannya pasti ada :x  dan banyak cara yang bisa kita terapkan, ya hitung-hitung sambil berkreasi. Disini saya akan mencoba kasi contoh yang ringan-ringan saja [karena saya juga Newbie] misalnya :  :r
  1. Ganti salah satu Link image [misalnya Image Profil] dengan Link ShoutMix tapi sebelumnya Css ShoutMix disimpan dulu pada Post Editor yang selanjutnya copas Linknya.
  2. Pindahkan Box ShoutMix pada tempat lainnya [misalnya pada Menu Navigasi diatas posting atau bikin melayang di sisi kiri seperti Blog ini]
  3. Atau yang akan share-kan sama kawan sekarang ini, yaitu cara membuat auto hidden Navigasi menu di atas Header,  :# Demonya kawan bisa lihat disini 

Langsung saja ke cara membuatnya :
  • Masuk ke Account Blogger dengan ID kawan
  • Pilih Tambah Gadget - HTML atau JavaScript
  • Copas kode berikut kedalamnya 
    <style>
    ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
    list-style: none;
    z-index:999999;
    width:721px;
    }
    ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
    border:0;
    }
    ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #FFF;
    -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.96;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    ul#navigation li a:hover{
    background-color:#699ab8;
    }
    ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FF0;
    font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
    font-weight:bold;
    text-shadow: 0 -1px 1px #fff;
    }
    ul#navigation .rss a{
    background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
    }
    ul#navigation .facebook a {
    background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
    }
    ul#navigation .twitter a {
    background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
    }
    ul#navigation .profile a {
    background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
    }
    ul#navigation .e-mail a {
    background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/s400/mail_edit.png);
    }
    </style>

    <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(function() {
    var d=300;
    $('#navigation a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

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

    <ul id="navigation">
    <li class="rss"><a href="http://info-blogbego.blogspot.com/atom.xml" target="_blank"><span>RSS Feed</span></a></li>

    <li class="facebook"><a href="http://www.facebook.com/KASTAONE" target="_blank"><span>My Facebook</span></a></li>

    <li class="twitter"><a href="http://twitter.com/KASTAONE" target="_blank"><span>My Twitter</span></a></li>

    <li class="profile"><a href="http://www.blogger.com/profile/14829445231709686413" target="_blank"><span>My Profile</span></a></li>

    <li class="e-mail"><a href="https://mail.google.com/mail/u/0/?hl=id&shva=1#inbox" target="_blank"><span>My E-Mail</span></a>
    </li></ul>


    • Ganti Link atau URL saya dengan Link kawan 
    • Masalah warna silahkan kawan menggantinya sesuai keinginan
    • Simpan Template kawan dan lihat hasilnya
    Mudah-mudahan kawan tidak menemui masalah dan berkenan membantu saya dengan memberikan komentar, karena komentar kawan adalah motivasi bagi saya disamping sama-sama menguntungkan untuk menurunkan pagerank Alexa Blog kita, hehehe memaksa ?!


    16 komentar pada “Auto Hidden Navigasi Menu Share diatas Header”

    1. Nice Post gan boleh di coba nih .. gan

      BalasHapus
    2. kodenya itu digabung ya OM ?? jadi numpuk CSS sama JS nya...

      BalasHapus
    3. @Chat Seperti Facebook DI Blog YA SEMUANYA DISIMPAN DI GADGET, HAMPIR SAMA DENGAN YANG SEBELUMNYA :r

      BalasHapus
    4. betul betul lagi rajin berkreasi denganmenu nih :d
      mancap...lanjutkan dah :@

      BalasHapus
    5. @Beben Koben ya mas Beben lagi doyan sama menu :O

      BalasHapus
    6. wahhh.. ini pertanyaan saya langsung dikasi solusinya... maksih banyak mas putu ilmunya... hehe
      tambah mantab aja mas putu.. muantabs lah :D

      BalasHapus
    7. biar aja mas... yg ada udah keren abies mas... :D
      SEKALI LG TERIMA KASIH ILMU GRATISNYA MAS... eh MASTER PUTU :k

      BalasHapus
    8. @Muhammad Fakhrial Zld wah jangan panggil saya master, saya hanyalah newbie yang trus belajar :z

      BalasHapus
    9. siap master... ehhh mas putu... hihihi

      BalasHapus
    10. Mantap sob di coba dulu ya :D

      BalasHapus
    11. SOBAT, HTML YG KKG DAN SD ITU MOHON DIPERBAIKI JIKA SOBAT ADA WAKTU, TRIMS, OH YA MENU YG DISTUPA ITU HTML DISIMPAN DIMANA KOK SAYA MAU COPAS UNTUK YG DI KKG APA SD NDAK BISA KETEMU HE...HE...

      BalasHapus
      Balasan
      1. ITU SEMUA DISIMPAN DI TEMPLATE [EDIT HTML]

        Hapus

    BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
    BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

    TAMBAHKAN KOMENTAR DENGAN EMOTICON :
    DENGAN KODE ALFABET < :a s/d :z >

     

    Copyright  ©  TIPS BLOGBEGO

    site meter

    Template by Blogger templates
    Powered by Blogger