Pada kesempatan kali ini Sobat Many-cara Akan Berbagi tutorial bagaimana cara mebuat menu 3 kolom dengan efek Flipping. Oke langsung saja ikuti langkah² di bawah ini.
Lihat demonya
Disini
Caranya seperi biasa login dulu ke Blogger
1. Pilih template> Edit HTML > Proses
2. Cari kode ]]></b:skin>
3. Copy kode Kode Css di bawah ini dan pastekan tepat di atas
kode ]]></b:skin>
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#fff;
}
#flip-container div ul{
background:#f9f9f9;
border:1px solid #f0f0f0;
margin:0; padding:15px 5px;
list-style-position:inside;
}
#flip-container div ul li{
padding:5px 0;
}
#flip-container div ul.orange{ background:#f9d999; }
#flip-container div ul.green{ background:#d9f9d9; }
#flip-container div ul.blue{ background:#c9d9f9 }
4.Cari kode </head> . Dan pastekan ode di bawah ini tepat di Atas kode tadi
<script src="http://manycara.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://manycara.googlecode.com/files/jquery.quickflip.js" type="text/javascript"></script>
<link href="./styles.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
$('document').ready(function(){
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid=$(this).attr('id').substr(4);
$('#flip-container').quickFlipper('', flipid, 1);
return false;
});
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&&window.location.replace(m)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
5.Dan klik Save.
Untuk kode HTML anda bisa terserah sobat. Misalkan di Tambahkan Gadget>> HTML/JavaScript
<div id="flip-tabs" >
<ul id="flip-navigation" >
<li class="selected"><a href="#" id="tab-0" >Recent</a></li>
<li><a href="#" id="tab-1" >Popular</a></li>
<li><a href="#" id="tab-2" >Comments</a></li>
</ul>
<div id="flip-container" >
<div>
<!--Put Content for first tab here-->
</div>
<div>
<!--Put Content for second tab here-->
</div>
<div>
<!--Put Content for third tab here-->
</div>
</div>
</div>
Ganti kode yang berwarna merah terserah sobat aja deh. :)
Sekian. Dan semoga bermanfaat
Title : Cara membuat menu 3 kolom dengan efek Flipping
Description : Pada kesempatan kali ini Sobat Many-cara Akan Berbagi tutorial bagaimana cara mebuat menu 3 kolom dengan efek Flipping. Oke langsung saja i...