JONS STYLE : Penerapan "Simple Tabs" di Blogger Template

Demo

Simple Tabs dengan CSS dan jQuery ini dikembangkan oleh Sohtanaka. Saya sekedar mencoba menerapkan Simple Tabs ini di 'blogger template', pada posisi diatas footer. Simple Tabs ini bisa digunakan pada tiap tabnya sesuai keinginan anda, misalnya untuk content headline seperti content slider, dan sebagainya.

Jika tertarik menggunakan Tabs pada 'template blogger' anda dapat lihat demonya terlebih dahulu di bagian footer.

Tahapan Penerapan 'Simple Tabs' di 'Blogger Template'

1. Masukan script jQuery berikut diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
:: Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan kode Javascript berikut dibawah script jQuery tadi:

$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(800)})});

:: Catatan: .fadeIn(800) dapat anda rubah menjadi .fadeIn(400) sesuai selera anda, atau menjadi .slideDown(800).

3. Masukan kode HTML berikut sebelum <div id='footer-wrapper'>:

<div class='pageTabs'>
<h1>Demo Content Tabs</h1>
<ul class='tabs'>
<li><a href='#tab1'>Demo Tabs</a></li>
<li><a href='#tab2'>Nudging</a></li>
<li><a href='#tab3'>Cufon</a></li>
<li><a href='#tab4'>jQuery Template</a></li>

</ul>
<div class='tab_container'>

<div class='tab_content' id='tab1'>
<h2>Demo Tabs</h2>
<a href='http://deconstructioncode.blogspot.com/2009/07/demo-simple-tabs-dengan-css-dan-jquery.html'><img alt='' src='http://lh4.ggpht.com/_dfnTVAxeWMI/SldsjllKjgI/AAAAAAAABa0/Zwqg4W1Wt-0/Tab_thumb.jpg'/></a>
<h3><a href='http://deconstructioncode.blogspot.com/2009/07/demo-simple-tabs-dengan-css-dan-jquery.html'>Tabs jQuery on Blogger Template</a></h3>
<p>Simple Tabs dengan CSS dan jQuery ini dikembangkan oleh <a href='http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/'>Sohtanaka</a>. Saya sekedar mencoba menerapkan Simple Tabs ini di 'blogger template', pada posisi diatas footer. Simple Tabs ini bisa digunakan pada tiap tabnya sesuai keinginan anda, misalnya untuk content headline seperti <a href='http://deconstructioncode.blogspot.com/2009/07/content-slider-di-blogger-template.html'>content slider</a>, dan sebagainya.</p>
</div>
<div class='tab_content' id='tab2'>
<h2>jQuery Link Nudging</h2>
<a href='http://deconstructioncode.blogspot.com/2009/07/link-nudging-di-blogger-template.html'> <img alt='link nudging' src='http://lh4.ggpht.com/_dfnTVAxeWMI/SlX7u1OXPLI/AAAAAAAABZs/TRyhD4X853w/link-nudging.jpg'/></a>
<h3><a href='http://deconstructioncode.blogspot.com/2009/07/link-nudging-di-blogger-template.html'>Link Nudging in Blogger Template</a></h3>
<br/>
<p>Link Nudging adalah salah satu fasilitas dari jQuery yang memberikan effect pada link. Effect Link Nudging ini di kembangkan oleh David Walsh Blog, yang kali ini akan diterapkan pada blogger template, tepatnya pada Widget (gadget) Label Blogger di sidebar (sebelumnya lihat Labels (DEMO Link Nudging), di sidebar).</p>

</div>
<div class='tab_content' id='tab3'>
<h2>"CufÃ³n sIFR"</h2>
<a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'><img alt='' src='http://lh4.ggpht.com/_dfnTVAxeWMI/Sld027PZ3mI/AAAAAAAABa4/4Iz09hCjL2Y/Typo-Cufon-tab.jpg'/></a>

<h3><a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'>Free Blogger Template dengan "CufÃ³n sIFR"
</a></h3>
<p>Free Blogger Template ini menggunakan sIFR, untuk mengganti jenis font pada heading (h1, h2, h3, h4, dan h5). Jenis sIFR yang digunakan adalah CufÃ³n dan jenis Font "TypoLatinserif-Bold_700". </p>

<p>
Penggunaan sIFR di blogspot memang agak tidak sempurna, karena ketika loading masih terlihat jenis font aslinya, namun itu alternatif lain agar font tidak terlihat standar lagi dan lebih variatif.</p>

</div>
<div class='tab_content' id='tab4'>
<h2>jQuery Template</h2>
<a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'> <img alt='' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Sld2i4RkaUI/AAAAAAAABa8/fMmPAqb8egk/template_thumb.jpg'/></a>

<h3><a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'>Free Blogger Templates dengan sentuhan jQuery - 2
</a></h3>
<p>Ini 'free bloggger template' yang kedua sebelum template 'jQuery in Blogger Template', dan template yang bergaya 3D ini saya namakan 'jQuery in Blogger Template II - Lemon Fruit Taste. Free Blogger Template' external link</p>

<p>Template di Blogger ini masih menggunakan fasilitas jQuery, diantaranya:
1. Back to top whit smoothscroll.
2. Link hover animation.
3. SlideShow.
4. Dropdown Menu.</p>

</div>
</div>
</div>
:: Catatan: isi dari konten tiap tab ini perlu anda rubah sesuai yang anda inginkan.

4. Masukan kode CSS berikut:

/* pageTabs
*/

.pageTabs {width: 760px; height:150px; margin: 10px auto 0; font-size:11px;}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p {
padding-bottom:10px;
}

:: Catatan: kode css ini perlu anda sesuaikan dengan karakter template anda

5. Save template, selesai.

Artikel Terkait di Bawah posting

Blogger

JQery

Tips N Triks

JONS STYLE

Anti Virus

20 Mei 2010

Penerapan "Simple Tabs" di Blogger Template

Tahapan Penerapan 'Simple Tabs' di 'Blogger Template'

0 komentar:

LOGIN

Facebook

Site Info

Supported by

Blog Archive

Get Money

About me