Membuat Menu Navigasi Keren di Blog

Menu Navigasi biasanya digunakan dan di pasang di blog terkhusus disini untuk blogger untuk menghemat sekaligus memberi kemudahi pengunjung blog mengenai apa saja yang ada di dalam blog melalui menu-menu bahkan smpai mebuat Menu Navigasinya. Berhubungan dengan itulah postingan mengenai Tutorial Blog kali ini Kami beri Judul Membuat Menu Navigasi Keren di Blog.

Tutorial ini diharapkan bisa membantu Sahabat iDesainer semua untuk memberikan kemudahan bagi pengunjung Blog Anda semua dengan beberapa Menu dari Link-link yang terdapat di dalam Isi Blog Anda.
Berikut langkah-langkah yang perlu dilakukan antara lain sebagai berikut :
Pertama :
Login ke Akun Blogger Anda

Kedua :
Pergi ke Rancangan >> Page Elements >> Tambah Element Baru >> Link List

Ketiga :
Silahkan Masukkan beberapa Link yang akan didesain menjadi Sebuah Menu Navigasi

Keempat :
Tempatkan kode berikut Sebelum Kode </head>

<style type="text/css">

    /* Fancy Navigation Menu Widget For Blogger by Way2blogging.Org */

    #Linklist2 h2{display:none}

    #Linklist2 ul{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5YhmqMHlcuUy98mcs6VXm3d9aFA1Mc0iGrc085Fr4fAeTRnwX9seijlFWQ9xxXOJ0eSK51LuTwMzx5LnlZyHH0Sd4JsVsWsppp0VpvL0JHPhqKxMn6iTtbIuiN1bbtszK3PLhYxw5EKA/s1600/way2blogging-fancymenubg.gif") repeat-x scroll 0 0 transparent;width: 100%;margin: 0;padding: 0;list-style: none;float: left;font-size: 1.1em;}

    #Linklist2 ul li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}

    #Linklist2 ul li a, #Linklist2 ul li span { padding: 10px 20px;float:left;text-decoration:none;color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5YhmqMHlcuUy98mcs6VXm3d9aFA1Mc0iGrc085Fr4fAeTRnwX9seijlFWQ9xxXOJ0eSK51LuTwMzx5LnlZyHH0Sd4JsVsWsppp0VpvL0JHPhqKxMn6iTtbIuiN1bbtszK3PLhYxw5EKA/) repeat-x;text-transform: uppercase;clear: both;width: 100%;height: 20px;line-height: 20px;}

    #Linklist2 ul li a{ color: #555;background-position: left bottom;}

    #Linklist2 ul li span{ background-position: left top;}

    /* Fancy Navigation Menu Widget For Blogger by Way2blogging.Org */

</style><script type="text/javascript">

    //<![CDATA[

    $(document).ready(function () {

                $("#Linklist2 ul li").prepend("<span></span>");

                $("#Linklist2 ul li").each(function () {

                    var linkText = $(this).find("a").html();

                    $(this).find("span").show().html(linkText)

                });

                $("#Linklist2 ul li").hover(function () {

                    $(this).find("span").stop().animate({

                                marginTop: "-40"

                    }, 250)

                }, function () {

                    $(this).find("span").stop().animate({

                                marginTop: "0"

                    }, 250)

                })

    });

    //]]>

</script>

Jika Kode di atas tidak bekerja silahkan Anda Generate sendiri DISINI
Dilink tersebut juga dilengkapi cara penempatannya.
Silahkan dicoba