Baca lewat email biar asik ->
author

Artikel ini ditulis oleh : Putu Hadi

Putu Hadi adalah Blogger dan Penulis penyuka Android. Follow saya di Twitter, artikel ini bermanfaat buat kamu? jangan lupa tinggalkan komentar ya...


Senin, 14 Desember 2009

Widget Multi Tab gaya baru untuk Blogger


Ini cocok buanget(halah bahasa alay) buat blogger yang blognya punya template yang lumayan agak sempit (halah lagi dah). Jadi dengan multi tab ini para sahabat blogger bisa memasukkan 3 widget dalam 1 widget, kek kantong ajaib yah. Mungkin blogger-blogger lama sudah pada tau widget ini di masa lalu karena dulu banyak yang menggunakan. Langsung saja lookj kasih dah caranya dan cara ini lookj kutip dari bloggerstop.net.


1. Masuk Ke Blogger lalu cari Edit HTML

2. Centang expand template widget dan temukan </head>

3. Masukkan kode ini di atas kode tadi:
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>

.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
#fragment-1 {
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}
</style>
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->

Keterangan : Oprek-oprek warna merah untuk mengubah settingan Tab dan oprek-oprek warna biru untuk mengubah settingan content.

3. Klik Simpan dan sekarang menuju Tata Letak

4. Tambahkan Gadget, pilih HTML/Javascript dan copy paste kode di bawah ini ke dalam form yang disediakan.
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">
<span style="text-align:left;">
<p>First tab is active by default:</p>
</span>
</div>
<div id="fragment-2">
<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center>
</div>
<div id="fragment-3">
Content of Tab #3
<span ><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a></span>
</div>
</div>

Keterangan : oprek-oprek warna merah untuk mengubah judul dan oprek-oprek warna biru untuk mengubah kontennya.

Gampang kan? oiya postingan ini lookj ambil aslinya dari http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html

12 komentar:

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. nah yg ini enak tanpa javascript

    BalasHapus
  7. woalaah ada ding ternyata...kekekeke...lelet ntar

    BalasHapus
  8. hehehe, yuk langsung aja :gotkp daripada kelamaan ntar cepetan :newyear

    BalasHapus
  9. gan comment nya comment sendiri neh,,,,*kidink gan :malu

    BalasHapus

Artikel ini berguna? jangan menjadi silent reader, saya akan selalu menjawab komentar

Ada 2 aturan berkomentar yaitu jangan asal komentar, jangan mengiklan, hargai penulis yang membuat artikel ya..terima kasih.