Cara Membuat menu Di Atas Hader Blog

Selamat Siang Shobat,,,,,Jumpa lagi ... dengan ! Bakalan-Tlogorejo-City sekarang saya sedikit mau berbagi tentang Cara Membuat menu Di Atas Hader Blog...Seperti gambar di bawah ini.....Oke langsung aja ya......

Ikuti Langkah dan Cara membuatnya......

Gambar1

Gambar 2

Cara membuatnya :

1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya : 

.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/AVvXsEiy5KjyDIOwTUU8E16pQfEL5f_IwZrj6kAYNdFd8L-Mfv8LzCCo7zZp9DIzXoAkYYXg3t3AYQucEym8AbM_ns-TsV6pFepoS1RULsVJsb99Rmc-9GsgYiSIDbf-wO68gNoMIyXrmWnsULA/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifuFuEii0SG-M1N64o8GqWiu-6_CKnr_J8pdD7VAT6LVLUJHOIIRAjy1tXusVrLFgWncPU2a2hyphenhyphen6Xi4S96PZUXy2scTdxsY0HvRKZpQLgN6quPfGWVqDOOQtRJWzxFay1oAr3992PWRTw/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfTgMnbsHzzSciHRJFjAQUmH7Qzcr2AE-eM_KHgC99dsUeuzDiE2b343qhSSLZcvM_-lh0LkfeCevdh4LOryIIOT61xrjyY5pKDUTy-70f03nD2QDLATFbHjiCGY9hHASzKyLAJRbiNog/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilukaNGWz4t_bRAFeTL60qXZCIjKP2BzAN74iqMc3RFH3y0FV0Jqrg1o3ebdOH9B4t_vUN_KMKpuhtXRJrQcpAle-ZHiFSHinLCry1DbyhUcXdaEmM56hmoSzT8wa-NYMDiUnYI5PU5n8/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5w7quCbe68zxeg4dMnqBesN91EKhEKSG3CgM6fyK33Sfv4acJpEW2BGXzrZLjLQSc7QNz5a_0vT9sixo1-MEf038xaNUZtiQEHrXhw25Xhbxbu7AnEfMHchD3yUynL-yDc_Ox3RSscaY/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vOxta-aFx-vbL-fQoxi93-4TsMjkzIHnLd-n9G67I9F7sXPEI7AACnpFqvRI4vSdDZf9c7X-hS2qibqCTfS6GHwLL8csyWyC6fgJv-0WFygrC3De-PECzUVI77DTlGdLhYEzWdtmm5w/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWHn_FljmwMKe-fq0BuDWqv75dkBIRVuooLAelyx2mK0exVrYzEhTnwZ27Wa3mHGF7PSJd2fseGjNxCIZk4ZlrKXq8ZhXLnfLxDITOxXAazwjOWSFlSxUF0lzfjr4bDpyFHqOMt5rQp4/s1600/mail.png);

 Langkah selanjutnya cari kode </head>

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

<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>:

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

NB :>> 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........................................