Cara Membuat Menu Di Atas Hader Blog

Selamat Siang Shobat,,,,,Jumpa lagi ... dengan ! YULIA sekarang saya sedikit mau berbagi tentang Cara Membuat menu Di Atas Hader Blog....

Oke langsung aja ya......
Ikuti Langkah dan Cara membuatnya......


Cara membuatnya :
Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

Klik: :

Isi Spoiler Anda Disini .headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -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#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
   
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzr7YMDOvH_wF8079UwWYvmbtlZ8jgBGkhvxy4L1C6-wTzhSqiX9kR5Nm9uMQNAtXJt7RiaZkwgwT4-iprwv-fj40JjhN2xVB92yvRdP4caXVoU5MB_PBJe_EqlrRWtr4TG-B-bAz/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-7DKAOsZaBoV4QaWHha00FeMT4Buwah5MMksFHKJkzyiQOe5rRSDCj57OGfjczXl8tiw2Y-h1LMAv-pBUcG7u9FaIQ7YS4Jz0ryfVrT2t3loYPt2OJ8IS7sAm_t_X24j3rufFkxU/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_Weqw48aesrAPoacTM8y8sWsE2MjFQb_t9qJ2Bwp5EufDLYlVZzzfEWMoWGPjAwjKhxJaeHHwNw_I1hzLk9PfP901ktEY3hteDdORzPBIJYI7shlkLSC8TyjOWMzafZa-LhXDSPU/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4coDwHIj6O9Qp6apmki4m2z-4WldD5DZ9jC_lmoq5BqG4omkG3eoleFpVVQEH6AmdI0ThkuD1tIYrUH65dYRxFF7UWdVRlU_BfY_AEafUk1KMo7uRaAJCI6wRDGXJwvG1WKIBcEF/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqN1EqH8jDviYDMQgLTZ09YB31lodokOYJMzP862jaMKKzHg0hsRqRCPKHly8uz0faMAqrXwhFR3FSRPbc8oZb_Vb_3clQoy0F159Tf9rgzxn02fsFsIfDmMX6ruzZ3MGEiT0TwZTd/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghRvrpm6_NugPKxdo8hR20KswXpR1yaac6sMWZYC1PHR45APiGHKJMQsYRWdXjQo-wm5a6PmgtM2_FvYOY92xqUwVzVKT1rbryJY36xvnGgvEV-FwymQIMRsj9sw2CMaISnzYstK_j/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19OfyGztqzhcpqt281gu-y_9uANZrr6C4I9GpmdCtZxPCdDBX6bTyFVZY1oAZVb4M-o34NapvJLxU8V_xpbcebrN-FkC_rxMs6qwq0cspzb3hccBy5ZHdkCTckGYcuTLqgraD1Ctv/s1600/mail.png);

 Langkah selanjutnya cari kode </head>
Dan simpan script di bawah ini di atas kode </head> :

Klik: :

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

Terakhir simpan kode pemanggilnya (kode di bawah ini di atas kode <body>:

Klik: :

Isi Spoiler Anda Disini <ul id='navixed'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

NB: silahkan ganti # dengan link yang anda inginkan
selesai. Jangan lupa simpan template.
Selamat  Mencoba Semoga Berhasil.....

Shabatku Dalam hidup terkadang kita mendapatkan banyak apa yang tidak kita inginkan,,Tapi setelah kita mendapatkan apa yang kita inginkan,Terkadang tidak bisa membuat hidup kita lebih bahagia....
Dan mencari teman buatku sangat mudah...Tapi teman yang paling istimewa dan yang paling aku sukai adalah...?Teman Yang Mau menunjuukkan kesalahanku.......?
Untuk itu Berilah komentar,Karena kritik dan saran Sahabat Sangat saya Butuhkan.....

Terima kasihh....

TERIMAKASIH ATAS KUNJUNGANNYA YA......

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Menu Di Atas Hader Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://yuliabloggerindonesia.blogspot.com/2012/11/cara-membuat-menu-di-atas-hader-blog.html" target="_blank">Cara Membuat Menu Di Atas Hader Blog</a>