Demo 1 :
Tab konten 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Demo 2 :
Tab kontent 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Demo 3 :
Tab kontent 1
Tab kontent 2
Tab kontent 3
Tab kontent 4
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
/* CSS yang Pertama */
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyDdFcXudVVavZXXk7cbgxl6KFGHDF3lLGcGQ42eMSoWs1XnoPIWkzmt199MKEeFgtIPcZVk9jwDvCPNzOJsIysUm5Zg1cZJTNRGI22zpoSxBq6Cq5AD6tYbUXnxvh4PNXuklWWGpR8Bn/s1600/shade-Nano+Yulianto.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected main tab style */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfDKAQRthZRmYKOXWczZ97AwAFc5LPaSP7Y04hO7suZXYvJGXdSV1ddj91Xt1GLwQv-FW_F5MytUiKZYo1asg7upKSAlVPlim9d6RMgZ96ZLLf_-NS_IR-_PEOwyqgiUb07qfzPg3AweT/s1600/shadeactive-Nano+Yulianto.gif);
border-bottom-color: white;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* CSS yang kedua */
.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.modernbricksmenu2 ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px;
background-color: black;
border-top: 1px solid white;
}
.modernbricksmenu2 a:hover{
background-color: #D25A0B;
color: white;
}
.modernbricksmenu2 a.selected{
background-color: #D25A0B;
color: white;
border-color: #D25A0B;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* CSS yang ketiga */
.indentmenu{
font: bold 13px Arial;
width: 100%;
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
border-top: 1px solid navy;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54M-SEwDdxoeAWpYVcgxzOVPMTQn3jTq9RuE8IMc_pjCJWwYS9-slnSvU2vbWdYvRnFMpGGkzH-rTwfubmwOM4reKK8tMox1FoT4VQ1qzAKWw9ajbxOXjMW11J9hVI6hvRAmZdlTNWzgn/s1600/indentbg-Nano+Yulianto.gif) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px;
padding-bottom: 4px;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofuX7B20Lv7vV7u9p6CuibhLdcXzO9D4GsuyptMsT0N2_qQNmOr6PO6AoARnBsrocPprw5U3BeNKmQIuWOmmZv_iWUp2uqe-xvKPT7rs0aRCqY98QqLM2To3DVnPKjRuFhBsL7le9zsOm/s1600/indentbg2-Nano+Yulianto.gif) center center repeat-x;
}
.tabcontentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
Langkah kedua > Penempatan URL JavaScript
dibawah <body>
........
diatas </body>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Tab%20Konten.js"></script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
Tab pertama :
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab konten 1
</div>
<div id="country2" class="tabcontent">
Tab kontent 2
</div>
<div id="country3" class="tabcontent">
Tab kontent 3
</div>
<div id="country4" class="tabcontent">
Tab kontent 4
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init()
</script>
Tab kedua :
<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">
<div id="tcontent1" class="tabcontent">
Tab kontent 1
</div>
<div id="tcontent2" class="tabcontent">
Tab kontent 2
</div>
<div id="tcontent3" class="tabcontent">
Tab kontent 3
</div>
<div id="tcontent4" class="tabcontent">
Tab kontent 4
</div>
</div>
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
</ul>
</div>
<br style="clear: left" />
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link")
myflowers.init()
</script>
Tab ketiga :
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">
<div id="dog1" class="tabcontent">
Tab kontent 1
</div>
<div id="dog2" class="tabcontent">
Tab kontent 2
</div>
<div id="dog3" class="tabcontent">
Tab kontent 3
</div>
<div id="dog4" class="tabcontent">
Tab kontent 4
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
Credit : Dynamic Drive
Alhamdulillah
1 comments:
OK, di tunggu tab konten yang Efek Jquerynya lebih menarik,
Posting Komentar