Membuat menu Animated Horizontal untuk blogger


Langkahnya 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


By : Asep


&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/AVvXsEgbhNwmvRDOhcHQ9_fpcbJEyK8oMmv8JtKIaawqL1frHpgt0OI2I1AQEBJKHsXrx6WR869XhXX3o0Y2GZC5yRBteweI_nJX3ekFPQm41SpAS5nNeLlgWCK3gtpRccH1Oiccg68YFMrFCFZa/);
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>

Related Post:




Share/Bookmark

1 komentar:

Osi said...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Keywords'/>
</b:if>



Kode di atas buat apa ya ???...ku nemu di sini kode tsbt, tp lupa untuk apa kode tsbt, peletakannya di edit html

Post a Comment

powered by PRBbutton My Ping in TotalPing.com

Articel Post

Popular Posts

Followers

Novelas News Information. Powered by Blogger.