Membuat Navigasi Blog Keren ~ Cheater Baturaja

Cara Membuat navigasi menu keren di Blog - kali ini saya akan membahas tutorial mempercantik blog yaitu Cara Membuat navigasi menu keren di Blog, yang seperti anda lihat gambar di samping adalah sebuah screen shoot dari menu navigasi tersebut

Cara membuatnya :

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

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.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/AVvXsEgFikeiOz6VJtDkl8XOrARDp2SoyTubT-dE3uxN2cAYj4L8v7p300uUsDJWrqhQUKBdKqCd7yuv_2QwEytJ3OQ2KmxR_JWKdb7PhwlPYa3tyKJe38JoMcB0bV84Q47w10khZrqIHw_CGbs/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQT6m_MQOEKn-EbtDDlaPJxok1Z7RR-p9t1uuVT9rOO4qMlP3uHej2mGFrX80DBS0dKvBfkbJXrpoOeKp3V9vSdoZvz7DPxhT1w5SrIul65YorGHfma00kbRbaGmCB3MiW4YS5h2ajYQ/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqTuwiCUsX04kJI5Ko35pWrFo_w4YAABAkcFdqC2Mb_tejRi1dIpzH-kjVI_qpTCJzzi96g8FbwxDQDkuQ9v7iUGpZ96HlCM6u9nIBSfW2MJ4-R6cxePvUkk4beAapLPqx2AqlRIWs60/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepNZru9qOZOTZJuUJjNhNp0Rei8LEOtRTzkHIBcxyF2LdiPnPJ4NZn5m9M4CG2g9YcnkI-BvMpfOV_sW5rRCVY_7DbiGP5_pMFwmHrCx6AWzawTlLHwW9mEft2Z9tBp_H0Qga5nh3HGk/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOqXzaaNfUE9UJpyjN3jGmyMnvO3UNsYFDXkG54nYaAgiRU_ShwENMDrU2Ep_hpy8i-R763B0A3zg1jqaI9W_ssyHebbmbVCLJY5-m7_D41TW1voZXvfJ3ew6fmhzHcEXzQdd-GhtGnE/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNq-NuCdh-3uG11qVgY_yFHcla6w27wvE3DjpXjcglF8Ad48hWk1YCeWV9fF4a2PArUBZLeRKMG8NIwvrrjlPvvb-iQ5d3ZeOWgQBAbC-aohr5cslQhzsIcnABJgp1F-c7MDHtgu6f_E/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32gEkXms2Ji0boDIKhlCfgeU5H7cEiVULGNsZ4eFmpL8ZZy3OR86ujUMcOO8NLnOatwzmUmImxCiTZ3XL12XaQfX_d-KsB1dJryXXJN5MlLzYhKBGBwJTPmsOxdz6QTJqPOOHseo4cJc/s1600/mail.png);

dan simpan script 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;
                $('#navixed a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });                 $('#navixed > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

terakhir simpan cara pemanggilannya 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>

ket : silahkan ganti # dengan link yang anda inginkan
selesai. Jangan lupa simpan template...

sekian artikel tentang Cara Membuat navigasi menu keren di Blog semoga bermanfaat dan menambah semangat blogging sobat yah...

Pastinya udah ada bayangan kan waktu membaca judulnya ?, ya navigasi blog, ituloh yang ada di bawah posting di halaman muka blogger kamu, yang biasanya skrinsutnya kaya gini nih....... Belum mudeng juga ??, ituloh yang fungsinya buat menunjukan posting paling lama blog kita, nah kalau yang di skrinsut di atas itu kan udah umum dan engga unik engga acan, tapi navigasi yang akan saya buat di sini lebih keren (setidaknya menurut saya) modelnya kaya penggaris(ruller bahasa inggerisnya) soalnya ada nomor nomornya, kalau masih penasaran ayo kita buat. Udah paham? yakin ?, oke kalau sudah yakin kita mulai eksperimenya... Langkah pertama kamu masuk ke ... 1. Masuk/login ke blogger sobat. 2.Masuk ke rancangan>>>Edit HTML. 3. Sebelum mengedit sebaiknya sobat centang dulu tulisan " Expand Template Widget" 4. Masukkan Script berikut diatas kode ]]>, gunakan ctrl+F untuk mempermudah pencarian kode. .paginator { margin-top:60px; font-size:1em; } .paginator table { border-collapse:collapse; table-layout:fixed; width:100%; } .paginator table td { padding:0; white-space:nowrap; text-align:center; } .paginator span { display:block; padding:3px 0; color:#fff; } .paginator span strong, .paginator span a { padding:2px 6px; } .paginator span strong { background:#ff6c24; font-style:normal; font-weight:normal; } .paginator .scroll_bar { width:100%; height:20px; position:relative; margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px; background:#ccc; overflow:hidden; } .paginator .scroll_thumb { position:absolute; z-index:2; width:0; height:3px; top:0; left:0; font-size:1px; background:#363636; } .paginator .scroll_knob { position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px; height:20px; overflow:hidden; background:url(http://i977.photobucket.com/albums/ae255/h3n6r4/Others/pagenavigationscrool.gif) no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator .current_page_mark { position:absolute; z-index:1; top:0; left:0; width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize .scroll_thumb { display:none; } .paginator_pages { width:600px; text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; } 5. Nah langkah selanjutnya kamu cari kode di template kamu, terus letakkan kode berikut di atasnya,

Membuat Navigasi Blog Keren

About Eko Septiawan

0 comments:

Posting Komentar

Popular Posts

Blog Archive