Cara Mudah Membuat Menu Navigasi Kwick Blog Keren

C6969


Cara Mudah Membuat Menu Navigasi Kwick Blog Keren - Membuat menu navigasi merupakan kebutuhan blog yang paling penting , selain mempercantik tampilan juga mempermudah para pencari informasi dari blog anda untuk mengetahui apa yang anda bagikan dalam blog , seperti contoh ; bila anda memasang kata " Sitemap " pada menu navigasi , para pencari informasi akan membukanya dan dengan mudah dia dapat menemukan apa yang akan di cari nya.
Tutorialnya adalah sebagai berikut :

Login Blogger
Desain > Template > Edit HTML
Lalu taruh kode berikut di atas ]]></b:skin>
    .kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
    }
    .kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
    .kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
    );background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
    #kwick1 a:hover{background-position:0 -50px!important}
    #kwick2 a{background-position:-190px 0}
    #kwick2 a:hover{background-position:-190px -50px!important}
    #kwick3 a{background-position:-380px 0}
    #kwick3 a:hover{background-position:-380px -50px!important}
    #kwick4 a{background-position:-570px 0}
    #kwick4 a:hover{background-position:-570px -50px!important}
    #kwick5 a{background-position:-760px 0}
    #kwick5 a:hover{background-position:-760px -50px!important}
    #kwick6 a{background-position:-950px 0}
    #kwick6 a:hover{background-position:-950px -50px!important}
    .kwicks li ul a{float:left;width:12em}
    .kwicks ul ul{top:auto}
    .kwicks li ul ul{left:12em;margin:0 0 0 10px}
    .kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
    }

    /* C6969 BLOGGER - siicunn.blogspot.com */
Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya
    <script src='https://sites.google.com/site/cunayz182/files/jquery-1.2.3.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/cunayz182/files/jquery.easing.1.3.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/cunayz182/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>

    /* C6969 BLOGGER - siicunn.blogspot.com */
Selanjutnya Tambah Widget >> HTML/JavaScript
    <div class='kwickswrap'>
    <ul class='kwicks'>
    <li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
    <li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
    <li id='kwick3'><a href='#' title='about'>About</a></li>
    <li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
    <li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
    <li id='kwick6'><a href='http://siicunn.blogspot.com/' title='recomended links'>Tutorial Blog dan SEO</a></li>
    </ul>
    </div>
    </td>
    <script type="text/javascript">
    $().ready(function() {
    $('.kwicks').kwicks({
    max : 190,
    duration: 800,
    easing: 'easeOutQuint'
    });
    });
    </script>

    /* C6969 BLOGGER - siicunn.blogspot.com */
Simpan dan letakkan widget tersebut ke tempat dimana anda ingin meletakkan menu tersebut dengan cara men-drag nya pada Tata Letak.

Note : Saya tidak bertanggung jawab atas kerusakan/crash karena terjadi kesalahan pribadi dalam penambahan widget yang anda lakukan.Sebelum mencoba kode HTML/CSS diatas ,ada baiknya anda mem-backup template anda terlebih dahulu untuk menghindari hal yang tidak di inginkan.

Nah itulah tadi mengenai Cara Mudah Membuat Menu Navigasi Kwick Blog Keren , semoga dapat bermanfaat bagi sobat-sobat semua , Jika artikel-artikel yang kami terbitkan membantu silahkan tinggalkan komentar ataupun +1 anda (seberapa penting +1 anda buat kami pada artikel ini dan sobat juga dapat berlangganan artikel dengan siicunn.blogspot.com baik itu melalu RSS Feed ataupun melalu akun email anda untuk mendapatkan pemberitaan postingan lebih cepat dari yang lainnya melalui email anda.
Terimakasih telah berkunjung ke siicunn.blogspot.com

1 Comments:

  1. Silahkan tinggalkan komentar anda dibawah ini.
    Komentar yang bersifat spam akan langsung di hapus oleh admin blog.
    Terima Kasih.

    ReplyDelete