Membuat Menu Sild Out Navigasi

Mungkin kawan-kawan penasaran cara Membuat Menu Sild Out Navigasi yang terdapat pada blog ini..dan bertanya dalam hati bagaimana cara membuatnya..?

Setelah beberapa waktu libur untuk otak-atik templet blok sekarang saya ini berbagi Trik untuk kawan-kawan dengan judul Cara Memasang Menu Slid Out Navigasi yang saya terapkan pada blog saya.

Ok langsung saja saya akan jelaskan bagaimana cara membuatnya :

Login Blogger

Klik Rancangan / Template kemudian Edit Html Lalu cari Code ]]></b:skin>

Setelah ketemu code di atas, kemudian copas code di bawah ini dan letakan sebelum code ]]></b:skin> tadi :

/*----------------

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/AVvXsEiKokab9VP7GfEMBO8cNC6hGo0Iwzk9gIA4NvsFUMeeBzMJODQTXAf28VtBiffoO5Dig-BwAzSd7i6fvXtSn1_-MIGyKMkgqRiXDg5HN4N2c6R5-qFoQmYesjoh8WVT_-MvuMejmA4LVnI/s1600/home.png);

}

ul#navixed .about a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL5DI4C20jVh63TDP97jVPYRMVyOdiu8R_DRitrcITbn6xePqneoJ4AstIjSocT-ECQKfhrT5fYxcOiqT89NmasxnQflEVfUuiFHxODw7UsBPjXUDuueumsgleACx_ud6t0UjubxsnFYY/s1600/id_card.png);

}

ul#navixed .search a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6MoH4_wB4SB0p51-q_-AGM_5Qg5PD3ggUFavQRRHSO64uXhjlYYZSJTsDTffcC8Ihjv-3huGPz_YK0qCeTUg8na7AvWBD8eA-PMy8wQ1GFEwEDkh6UtID20Ab-qptPjE7lvaSL9zzkc/s1600/search.png);

}

ul#navixed .podcasts a      {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pY0P0XzSkmxs4i_VV15smOALEXNWX6trB3E4JCXGuPsINeWfPDQrd6fsS2jJWRJ_vDeUJ56VSCAzCH4CQLXqVAI9G8NxSXNmGrTxXsFzbjhEARvgp0iAm42xzgpZw5N9whv3fYL4_BI/s1600/ipod.png);

}

ul#navixed .rssfeed a   {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qnC4sMMmLIDk66DxRuE8icu8-_9kokMdsYbL-vizMT43PgH5t9l4WJETPwt02MFa0tMgSQsjPLcg41wb0_6NDIpzhYDZAI1q4_CeX_ykOvLZLTgVbn8TMNZO0vVdxsL2iMhcVSRULoQ/s1600/rss.png);

}

ul#navixed .photos a     {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9snziBS5_ZAStgAz7GzdtrGFDAdrhABodod40SQvdfXJwU1D7LvLMCM7WUqA5cjGrv_YKp6Fienxb8jQk1MuBJhOBLsRl0Txmqv8WMchvbFm_mJbFcMPqc6etrhpJI5jS1HnpA7Rp40/s1600/camera.png);

}

ul#navixed .contact a    {

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5QiwaVN6Ud3RrXkM43AfzwBXBHJmguyBm2gP9KyzI2vTdloau6Zewq-M__r9cw0-e1C5RF4lYsQotWBYTMN734jN1_KhdpgGBH2ipu-ueIAotgHavAdsRxdEvjpoviJqAib8D1UdCdM/s1600/mail.png);

}

Kemudian  cari Code </head> dan letakan script berikit ini di atas code </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, cari code </body> kemudian letakan script berikut di atas code </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>

catatan :

# : Silakan anda ganti dengan masing-masing Link menu navigasi yang ada di blog kalian.

setelah itu jangan lupa Simpan Template...dan selesai deh langkah - langkah pembuatn Membuat Slid out Navigasi.

Selamt mencoba dan semoga bermanfaat buat kalian semua..Salam Blogger.