HOMEDemo Simple Tabs
Blue Dark CSS3 Blogger Template
Di dalam template ini terdapat menu navigasi yang di buat dengan sentuhan CSS3, untuk mengaturnya sobat bisa mengunjungi halaman Edit HTML dan cari kode HTML menunav. Nah mungkin itu saja yang perlu di ketahui. kalau ada pertanyaan atau apalah itu yang jelas tentang template ini, sobat bisa taruh pesan atau kritikan di kotak komentar di bawh ini.
OkeMAgazine Blogger Template
Okemagazine Blogger Template adalah hasil karya ke-2 setelah Alien Black Template yang sudah pernah saya bagikan kepada sobat semua. Sama halnya dengan template hasil karya saya sebelumnya, Okemagazine Blogger Template ini juga akan dibagikan kepada sobat semua yang menginginkannya walaupun g ada yang spesial dan menarik dari template ini, g percaya? liat aja spesifikasinya.
Float Teks Berjalan
Float Teks BerjalanDi Kesempatan ini saya akan memberikan trik untuk mempercantik blog dengan efek Marquee. Namun kali ini saya padukan dengan Membuat Image Float. jadi namanya Float Teks Berjalan, saya sendiri yang menamakannya . Untuk contohnya klik saja Demo dan arahkan pandangan anda ke tulisan yang berwarna biru berjalan yang letaknya di bawah.
Bagaimana apakah sobat tertarik ingin memasangnya? kalau memang tertarik silahkan pasang, lah cara masangnya bagaimana? untuk cara memasangnya tinggal ikuti saja langkah dan penjelasan di bawah ini :
- seperti biasa kita login terlebih dahulu di blogger.com
- setelah itu masuk ke Rancangan >> Edit HTML
- lalu silahkan cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
.container {width: 500px; margin: 10px auto;}
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: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
Catatan : setiap properti atau nilainya dapat sobat sesuaikan dengan tampilan atau theme template sobat
- kalau sudah silahkan cari kode </head> dan tambahkan kode di bawah ini tepat di atasnya
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
- Nah setelah itu simpan deh dan setelah menyimpannya kita menuju Elemen Halaman dan tambahkan sebuah gadget
- Setelah menambahkan sebuah gadget, pilih yang HTML/Javascript
- Setelah itu masukan kode di bawah ini
<div class="container">
<ul class="tabs">
<li><a href="#tab1">Blue Dark CSS3</a></li>
<li><a href="#tab2">Okemagazine</a></li>
<li><a href="#tab3">Float teks</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Blue Dark CSS3 Blogger Template</h2>
<a href="http://oketrik.blogspot.com/2010/09/blue-dark-css3-blogger-template.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uJZdyQDWhNMeOXV9137jR7YITBNrem-mUvWO8Bx_ain0O1Y62ENv4W7qno1S82kLH58ncr6-9-2leoOaFLP0tMTK3_2-VO_23tK7Otj2dP6hdPlRDXUlBThdOzWDKBOZBLKW_EWHB-jA/s400/Screenshout+Blue+Dark+CSS3+Blogger+Template.png" alt="Blue Dark CSS3 Blogger Template" /></a><p>Di dalam template ini terdapat menu navigasi yang di buat dengan sentuhan CSS3, untuk mengaturnya sobat bisa mengunjungi halaman Edit HTML dan cari kode HTML menunav. Nah mungkin itu saja yang perlu di ketahui. kalau ada pertanyaan atau apalah itu yang jelas tentang template ini, sobat bisa taruh pesan atau kritikan di kotak komentar di bawh ini.</p>
</div>
<div id="tab2" class="tab_content">
<h2>OkeMAgazine Blogger Template</h2>
<a href="http://oketrik.blogspot.com/2010/07/okemagazine-blogger-template.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsxQ4M5z0S-r-kJb7BoBbftqiuQC0yT-b8HUktY19SJ7uiUkDflUMVAheWLBAeg34EJjvWUbPiVpmRjyGYShivhq7xEWLJyxAo_R-fIrTpMXZ-hiIfSkhKv-LnWtbcYWRwqpv1X8KWNs/s400/okemagazinetemplate-oketrik.blogspot.com+-+2010-07-17+-+23-42-48.png" alt="okemagazine blogger template" /></a>
<p>Okemagazine Blogger Template adalah hasil karya ke-2 setelah Alien Black Template yang sudah pernah saya bagikan kepada sobat semua. Sama halnya dengan template hasil karya saya sebelumnya, Okemagazine Blogger Template ini juga akan dibagikan kepada sobat semua yang menginginkannya walaupun g ada yang spesial dan menarik dari template ini, g percaya? liat aja spesifikasinya.</p>
</div>
<div id="tab3" class="tab_content">
<h2>Float Teks Berjalan</h2>
<a href="http://oketrik.blogspot.com/2009/12/membuat-float-teks-berjalan.html">Float Teks Berjalan</a>
<p>Di Kesempatan ini saya akan memberikan trik untuk mempercantik blog dengan efek Marquee. Namun kali ini saya padukan dengan Membuat Image Float. jadi namanya Float Teks Berjalan, saya sendiri yang menamakannya . Untuk contohnya klik saja Demo dan arahkan pandangan anda ke tulisan yang berwarna biru berjalan yang letaknya di bawah.</p>
</div>
</div>
</div>
Penjelasan :
- Warna Merah : Menunjukan Judul dari tabs, sesuaikan dengan judul konten atau isi tab
- Warna Biru : Menunjukan url judul tabs atau isi kontent
- Warna Oranye : menunjukan url gambar dari isi tab tersebut
- Warna Ungu : menunjukan isi/konten dari tabs tersebut
- Setelah itu sobat dapat menyimpannya dan melihat hasilnya
hihihihi Mungkin ada yang kesel y karena ada cara mudah malah ngasih cara yang sulit, hmmmm jangan salah kapra dahulu, saya memberikan cara yang sulit agar sobat dapat mengganti dan memodifikasinya. Maaf deh kalau saya membuat sulit sahabat semua, oke saya akhiri y. Terima kasih dan Happy Blogging.
3 Komentar untuk Pasang Simple Tabs di Blogger
wii.. mantap nih, baru liat yang ada efek glownya seperti itu :)
@secangkir teh dan sekerat roti >> sebenarnya itu efek glow dari template ini mas, kalau simple tabsnya g ada efek glownya
wah....
langsung Coba ajah gan......