Cara membuat menu Animated Horizontal untuk blogger

Untuk sobat blogger yang mau membuat menu Animated Horizontal untuk blogger yuk kita ikuti langkah langkah berikut ini
1.Login ke akun blogger dashboard
2.Klik layout (tata letak)
3.Klik Edit HTML centang expand widget templates
4.Cari kode yang seperti ini ]]></b:skin>
5.Copy paste kode dibawah ini dan simpan tepat dibawah kode tadi

&lt;script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery-1.2.3.js' type='text/javascript'/&gt;
&lt;script src='http://bloggerplugnplay-files.bravehost.com/Source%285%29%5CSource/jquery.easing.1.3.js' type='text/javascript'/&gt;
&lt;script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery.kwicks-1.5.1.js' type='text/javascript'/&gt;
&lt;script type='text/javascript'&gt;
$().ready(function() {
$(&amp;#39;.kwicks&amp;#39;).kwicks({
max : 200,
duration: 800,
easing: &amp;#39;easeOutQuint&amp;#39;
});
});
&lt;/script&gt;

&lt;style media='screen' type='text/css'&gt;

div.kwicks_container {
width: 840px;
margin: 100px auto 0 auto;
}
/*-------------------------KWICKS--------------------*/
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
width:840px;
height:50px;
z-index:2;
}
.kwicks li {
display: block;
float: left;
overflow: hidden;
padding: 0;
cursor: pointer;
width: 100px;
height: 35px;
z-index:2;
cursor:pointer;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FF9933;
}
.kwicks li a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjr8ph41iopLfptZZBAXe_FRJFhM9aQ-FtA3xztfh3flAhtM2FbgHkv1NdOmEcpAkfj_KuV_zaxutfZZ1fgBdwrHtkknRDnkMnfgRXKw21j_e9bfnL2O5lDKIv1obihemoOE7d9UNn_I2/);
background-repeat:no-repeat;
font-family: &amp;quot;Lucida Grande&amp;quot;, &amp;quot;Lucida Sans Unicode&amp;quot;, Arial;
font-size: 14px;
letter-spacing: -0.07em;
color: #AA0000;
height: 40px;
outline:none;
display:block;
z-index:100;
cursor:pointer;
text-transform: uppercase;
font-weight: bold;
margin-top: -3px;
margin-left: 5px;
text-decoration: none;
}
.kwicks li h3 {
position: absolute;
width: 120px;
font-family: &amp;quot;Lucida Grande&amp;quot;, &amp;quot;Lucida Sans Unicode&amp;quot;, Arial;
font-size: 10px;
color: #FF6600;
letter-spacing: -0.02em;
outline:none;
z-index:0;
cursor:pointer;
text-transform: uppercase;
font-weight: normal;
margin-left: 5px;
text-decoration: none;
left: 0px;
top: 15px;
right: 0px;
bottom: 0px;
}
#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 {
margin: 0pt;
overflow: hidden;
position: absolute;
display: block;
width: 120px;
}
#kwick_1 {
left: 0px;
border: none;
}
#kwick_2 {
left: 120px;
}
#kwick_3 {
left: 240px;
}
#kwick_4 {
left: 360px;
}
#kwick_5 {
left: 480px;
}
#kwick_6 {
left: 600px;
}
#kwick_7 {
right: 0px;
}
#kwick_1 a {
background-position:0px 0px;
}
.kwicks a:hover, .kwicks #active {
color: #3399FF;
}
.kwicks li a:hover h3, .kwicks li #active h3 {
color: #999999;
}
#kwick_2 a {
background-position:0px -50px;
}
#kwick_3 a {
background-position:0px -192px;
}
#kwick_4 a {
background-position:0px -100px;
}
#kwick_5 a {
background-position:0px -150px;
}
#kwick_6 a {
background-position:0px -250px;
}
#kwick_7 a {
background-position:0px -300px;
}
&lt;/style&gt;

Lalu save template
6.Klik layout(tata letak)page element klik Add a GADGET pilih HTML
7.Copy paste kode dibawah ini lalu simpan

<div class="kwicks_container">

<ul class="kwicks">
<li id="kwick_1">
<a href="http://masih-berharap.blogspot.com">Home
<h3>Still wish</h3>
</a>
</li>
<li id="kwick_2">
<a href="http://www-createmoney.blogspot.com">Make money
<h3>Create money</h3>

</a>
</li>
<li id="kwick_3">
<a href="http://ka-31.blogspot.com/">Blogger Bandung
<h3>Bandung nuaing</h3>
</a>
</li>
<li id="kwick_4">
<a href="http://hospital-asep.blogspot.com">Hospital
<h3>Health Comunity</h3>

</a>
</li>
<li id="kwick_5">
<a href="http://ka-31.blogspot.com/2009/11/mysql-downloads.html">PHP
<h3>PHP Programming</h3>
</a>
</li>
<li id="kwick_6">
<a href="http://masih-berharap.blogspot.com/search/label/Widgets">Widget
<h3>Widget For Blogger</h3>

</a>
</li>
<li id="kwick_7">
<a href="http://masih-berharap.blogspot.com/2009/10/free-download-template-blogger-magazine.html">Template
<h3>Free Download template</h3>
</a>
</li>
</ul>
</div>

Trik ini udah saya praktekan untuk melihat demonya KLIK DISINI

Posted in: Google Adsense,Tip Blogging