..:::!!!!! Selamat Datang !!!!!:::..Hello all_Friends ::::: Nur Rohman Share® !!!!...Mitra Bisnis Pulsa Elektrik Termurah...!!! Download Software | Tutorial Blog | Pusat Servis Computer dan Servis HP CONTACT-085789915222 & EMAIL- (si_owner@yahoo.com)

Cara Membuat Tabs di Sidebar

Saturday, June 9, 2012 | Nur Rohman | 0 komentar
Widget merupakan sebuah elemen pendukung dalam blog yang dapat menambah keleluasaan akses bagi pengunjung, tapi jika elemen ini tidak didesain maksimal bisa menjadi sebuah hal yang merusak tampilan blog. Tidak bisa dipungkiri lagi jika memasang terlalu banyak widget akan memberi kesan blog seperti sebuah kerumunan menu yang semerawut, disamping bisa membuat beban blog menjadi tambah berat. Membuat sebuah tab di sidebar bisa menjadi alternatif agar blog kamu terkesan lebih rapi, jika kamu memang membutuhkan banyak widget maka tidak ada salahnya loh untuk mencoba menambahkan sebuah tab pada sidebar. Mau coba? yuk kita langsung saja praktekan.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"




6. Langkah selanjutnya cari lagi kode dibawah ini atau yang mirip dengan kode ini :
]]></b:skin>

7. Copy kode dibawah ini dan taruh sebelum kode
/*----- Menu Tab Sidebar----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{
list-style:none;l
ist-style-type:none;
margin:0 0 0 4px;
padding:0;
float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{
color:#ffffff;
padding:10px 14px;
display:block;
text-decoration:none;
font:bold 12px Arial,Helvetica,Sans-serif;
text-transform:uppercase;
background: #e32dcb;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-khtml-border-top-left-radius:10px;
-khtml-border-top-right-radius:10px;
border-radius:10px 10px 0 0;
}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{
background: #999999 left -140px ;
color:#EE5D06;
text-decoration:none;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-khtml-border-top-left-radius:10px;
-khtml-border-top-right-radius:10px;
border-radius:10px 0px 0 0;
}
.tabs-widget-content{}
.tabviewsection{
margin-top:10px;
margin-bottom:0px;}

8. Langkah selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :
<div id='sidebar-wrapper'>

9. Copy kode di bawah ini dan taruh tepat setelah kode <div id='sidebar-wrapper'> :
<div class='tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
     
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
</b:section>                                     
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>                                       
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>                                      
</div>

</div>

<div style='height:5px;clear:both;'/>
Catatan : Silahkan anda bisa mengganti Judul tab yang berwarna merah diatas.

Klik save, sekarang kamu sudah memiliki sebuah menu tab sidebar dalam template kamu, jika ada kesulitan silahkan tinggalkan pertanyaan di kolom komentar.
Cara Membuat Tabs di Sidebar Reviewed by Nur Rohman on Saturday, June 9, 2012 Rating: 4.5
Share on: Twitter, Facebook, Delicious, Digg, Reddit

Ditulis Oleh : Nur Rohman ~ Tips dan Trik Blogspot

Christian angkouw Artikel Cara Membuat Tabs di Sidebar ini ditulis oleh Nur Rohman pada hari Saturday, June 9, 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Tabs di Sidebar dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Shobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

0 komentar:

Trimakasih atas kunjungan anda.. Blog ini Dofollow) Silahkan menaruh kritik dan saran pada kotak komentar ini, asal tidak SPAM dan bagi yang mencantumkan link, akan terhapus otomatis.