Cara Membuat Menu Kwicks Pada Blogger Ada 3 Versi

randomposts

Kali Saya Akan Share Cara Membuat Menu Kwicks Yang ELLEGANT pada BLog kita masing2 Kita Mulai Dari Versi 1 [one] : screenshot : 1.Login blo...

Cara Memasang Tombol Menu Di Footer Versi New

Tombol Share Via Button Slide With Icon

Cara Membuat Menu Terbaru Green Transparant In HEADER

MEMBUAT TOMBOL DOWNLOAD LEBIH KEREN MENGGUNAKAN CSS

Kali Saya Akan Share Cara Membuat Menu Kwicks Yang ELLEGANT pada BLog kita masing2
Kita Mulai Dari

Versi 1 [one] :

screenshot :

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

    /* Kwicks menu with jQuery
    ———————————————– */
    .kwicks {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR17jzF90CvqRcB8QWi9USBye6SY72EvDZiijAL3y3taY6qxiCayAn3mrNC1VSV4NC-hZPjgz3RJPqHG9SswP3-4uIVDZzodKKZJHA-wGtQ8-qay5lOmFIP2dEDybFK50-DucCvujpOqI/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
    }
    .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 40px;
    margin-right: 0px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYtJq7vmd5-JB4KIklWEt5gomq0CUVxIi1IWxML8YoKlfRADNxvRcSk68R8ihYBNWVKwGeGSuxSWGmjCQQSmPmB1BkhyphenhyphenjDR8PBISGEDj7mUnkug2MxZy-PdmFzAFo0hZtTz1uV7UlSe0/s1600/kwicks_sprite.jpg);
    background-repeat:no-repeat;
    }
    .kwicks a{
    display:block;
    height:40px;
    text-indent:-9999px;
    outline:none;
    }
    #kwick1 {
    background-position:0px 0px;
    }
    #kwick2 {
    background-position:-200px 0px;
    }
    #kwick3 {
    background-position:-400px 0px;
    }
    #kwick4 {
    background-position:-600px 0px;
    }
    #kwick1.active, #kwick1:hover {
    background-position: 0 bottom;
    }
    #kwick2.active, #kwick2:hover{
    background-position: -200px bottom;
    }
    #kwick3.active, #kwick3:hover {
    background-position: -400px bottom;
    }
    #kwick4.active, #kwick4:hover {
    background-position: -600px bottom;
    }
    #kwick1 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd2zxf-W4eAJA4zVWGNSXuFYvcswybbzUznMmaGUBp_XVfQqSZa-gQqcZKDveGgtuUvfQyXb-5Nv5tQMdp5OAFYM0VEzHzhlUFnhl4JCGk-g3SbpQNapqOEaPC8D6V90NsDomu559WMU/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: left 0px;
    }
    #kwick1 a:hover{
    background-position: left -80px;
    }
    #kwick4 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd2zxf-W4eAJA4zVWGNSXuFYvcswybbzUznMmaGUBp_XVfQqSZa-gQqcZKDveGgtuUvfQyXb-5Nv5tQMdp5OAFYM0VEzHzhlUFnhl4JCGk-g3SbpQNapqOEaPC8D6V90NsDomu559WMU/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: right -40px;
    }
    #kwick4 a:hover{
    background-position: right -120px;
    }

selanjutnya simpan script berikut diatas </head> :

    <script type=’text/javascript’ src=’http://asenk.com/js/jquery-1.2.6.min.js’></script>
    <script type=’text/javascript’ src=’http://asenk.com/js/kwicks.js’></script>
    <script type=’text/javascript’ src=’http://asenk.com/js/custom1.js’></script>

Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :

    <ul>
    <li id=”kwick1″><a href=”#”>Home</a></li>
    <li id=”kwick2″><a href=”#”>Contact</a></li>
    <li id=”kwick3″><a href=”#”>Downloads</a></li>
    <li id=”kwick4″><a href=”#”>Search</a></li>
    </ul>

Ganti # dengan url yang kamu inginkan..
Selamat mencoba ya..


Versi 2 :
Berikut Screenshotnya :

View Demo

Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :

Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates

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

    }

Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya

    <script src='https://sites.google.com/site/palmahutabarat69/my-forms/jquery-1.1.1.js' type='text/javascript'/>

    <script src='https://sites.google.com/site/palmahutabarat69/my-forms/jquery.easing.2.2.2.js' type='text/javascript'/>

    <script src='https://sites.google.com/site/palmahutabarat69/my-forms/jquery.kwicks-3.3.3.js' type='text/javascript'/>

Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ada di bawah :

    <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://www.palmahutabarat.clan.su/' title='recomended links'>Resource</a></li>

    </ul>

    </div>

    </td>

    <script type="text/javascript">

    $().ready(function() {

    $('.kwicks').kwicks({

    max : 190,

    duration: 800,

    easing: 'easeOutQuint'

    });

    });

    </script>

Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Versi 3 [three] :


Nah,selanjutnya cari kode ]]></b:skin> 

(gunakan Ctrl+F di keyboard sob),

setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut



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

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

    </head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    <script class='jsbin' src='https://sites.google.com/site/palmahutabarat69/my-forms/kwicks.js'>
    </script>
    <script type='text/javascript'>
    $(document).ready(function(){
    $(&#39;.kwicks&#39;).kwicks({
    duration: 500,
    max: 170,
    spacing: 0
    });
    });
    </script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Lalu simpan templates sobat.

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan ,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gambar(5)kemudian letakkan kode berikut:

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='Link Tujuan' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='Link Tujuan' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='Link Tujuan' title='about'>About</a></li>
<li id='kwick4'><a href='Link Tujuan' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='Link Tujuan' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='Link Tujuan' title='recomended links'>Resource</a></li>
</ul></td></tr></table>

Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.

Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

Copyright@Freerap Publisher  : PalmaHutabarat