Selain itu juga supaya kolom sidebar di template yang kita pakai nantinya tidak terlalu berjajar kebawah, jika kita banyak memasang widget ataupun gadget, karena dengan menggunakan teknik tab ini dalam satu kolomnya kita bisa memasang 3-4 widget, itupun tergantung dari lebar kolom template yang kita pakai. Coba perhatikan gambar diatas, dalam 1 kolom terdiri dari 4 gadget yang berbeda.
Jika anda ingin membuatnya bisa mnegikuti cara dibawah ini :
Sigin Di draft Blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
1. Memasukkan kode javascript dan jquery .
Copy semua kode javascript dan jquery di bawah ini :
<script src='http://sites.google.com/site/blogsbaru/jquery1.2.6min.js ' type='text/javascript'></script>
<script type='text/javascript'>
var starttab=0; /* Tab pertama */
var endtab=3; /* Jika ingin mengurangi / menambah Tab, rubah nilainya */
var sidebarname="sidebar1"; /* Ganti dengan nama kolom sidebar anda */
</script>
<script src='http://sites.google.com/site/albaniyu/bloggertabv1.0-min.js' type='text/javascript'></script>
</script type='text/javascript'>
<script type='text/javascript'>
var starttab=0; /* Tab pertama */
var endtab=3; /* Jika ingin mengurangi / menambah Tab, rubah nilainya */
var sidebarname="sidebar1"; /* Ganti dengan nama kolom sidebar anda */
</script>
<script src='http://sites.google.com/site/albaniyu/bloggertabv1.0-min.js' type='text/javascript'></script>
</script type='text/javascript'>
Simpan diatas kode ini </head>
Kemudian simpan dulu .
2. Memasukkan Kode CSS .
Setelah itu masukkan kode CSS untuk membuat Tab, copy kode di bawah :
/*--- Mulai Tab ----*/
.widget-wrapper2{ border:1px solid #7f7f7f;
background-color:#999999;
padding:8px;}
.widget-tab {-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#999999;
border:1px solid #7f7f7f;
font-family:Arial,Helvetica,sans-serif; padding:15px !important; }
.widget-tab ul {margin:0px; padding:0px 20px 0px 20px;
border-bottom:1px dashed #fff }
.widget-tab ul li {list-style:none; border-bottom:1px solid #7f7f7f;
padding-top:10px; padding-bottom:10px;
font-size:13px; }
.widget-tab ul li:last-child{ border-bottom:none; }
.widget-tab ul li a { text-decoration:none; color:#3e4346; }
.widget-tab ul li a small { color:#8b959c; font-size:9px;
text-transform:uppercase;font-family:Verdana,Arial,Helvetica,sans-serif; position:relative;left:4px;top:0px;}
.tab-content ul li a:hover{color:#a59c83;}
.tab-content ul li a:hover small{color:#baae8e;}
.active-tab{background:#999999 url(http://sites.google.com/site/blogsbaru/tabinactivebg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;border-width:1px 1px 2px !important;
color:#fff !important;}
ul.tab-wrapper{ margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.tab-wrapper li {-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#999999 url(http://sites.google.com/site/blogsbaru/tabtopbg.gif) repeat-x scroll left top;
border:1px solid #7f7f7f;color:#3e4346;
cursor:pointer; display:inline;font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px;
font-weight:bold;
line-height:2em; list-style-image:none !important;list-style-position:outside !important;list-style-type:none !important;margin-right:1px;
padding:8px 14px;text-align:center;
text-decoration:none;text-transform:uppercase; }
/*------ Akhir Tab ----*/
.widget-wrapper2{ border:1px solid #7f7f7f;
background-color:#999999;
padding:8px;}
.widget-tab {-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#999999;
border:1px solid #7f7f7f;
font-family:Arial,Helvetica,sans-serif; padding:15px !important; }
.widget-tab ul {margin:0px; padding:0px 20px 0px 20px;
border-bottom:1px dashed #fff }
.widget-tab ul li {list-style:none; border-bottom:1px solid #7f7f7f;
padding-top:10px; padding-bottom:10px;
font-size:13px; }
.widget-tab ul li:last-child{ border-bottom:none; }
.widget-tab ul li a { text-decoration:none; color:#3e4346; }
.widget-tab ul li a small { color:#8b959c; font-size:9px;
text-transform:uppercase;font-family:Verdana,Arial,Helvetica,sans-serif; position:relative;left:4px;top:0px;}
.tab-content ul li a:hover{color:#a59c83;}
.tab-content ul li a:hover small{color:#baae8e;}
.active-tab{background:#999999 url(http://sites.google.com/site/blogsbaru/tabinactivebg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;border-width:1px 1px 2px !important;
color:#fff !important;}
ul.tab-wrapper{ margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }
ul.tab-wrapper li {-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#999999 url(http://sites.google.com/site/blogsbaru/tabtopbg.gif) repeat-x scroll left top;
border:1px solid #7f7f7f;color:#3e4346;
cursor:pointer; display:inline;font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px;
font-weight:bold;
line-height:2em; list-style-image:none !important;list-style-position:outside !important;list-style-type:none !important;margin-right:1px;
padding:8px 14px;text-align:center;
text-decoration:none;text-transform:uppercase; }
/*------ Akhir Tab ----*/
Setelah anda copy, simpan atau paste diatas kode ini </b:skin>
Kemudian jangan lupa disimpan simpan .
Jika anda ingin tampilan kolomnya berbentuk kotak alias tidak bersudut lancipdi browser firefox dan opera, tinggal menghapus semua kode berikut
-moz-border-radius dan -webkit-border-radius
Pada tata letak, di kolom sidebar kita tinggal memasukkan apa saja gadget yang ingin ditambahkan, dan jangan bingung dulu bila tampilan pada tata letak,kolom nya tampil seperti biasa yaitu berjajar kebawah. Cobalah dulu masukkan gadget apa saja pada kolom sidebar tsb, baru kemudian lihat hasilnya dihalaman blog kita .
Belajar Bersama
**** Semoga Bermanfaat ****
12 komentar:
:))
Sy coba ga bs :(
saya mencobanya tetapi tdk berhasi....
tolong di jelaskan lebih terinci....
kalo bisa berikan contohnya....
mkasi...
@ Mas Fariz
Contohnya seperti anda lihat di blog ini..
bang bagaiman cara menambah icon di blogger,yang sepertitepat di atas ikln feedburner,kalau mau
bang bagaiman cara menambah icon di blogger,yang sepertitepat di atas ikln feedburner,kalau mau tolong kirimkan ke email rydestoper@gmail.com
@Ridho's
Maksudnya icon yang mana nich..
cara mengganti nama di menu sidebar
saya akan coba mudah-mudahan berhasil :)
@bdangkal..
terima kasih atas kunjungannya..
sering2 aja mampir disini..:D
kok belum update postingannya oom.:))
Tak tunggu update postingannya. Bisa share cara membuat posisi tampilan dari halaman home berubah tempat widget atau tampilan gambarnya berpindah posisi ketika masuk halaman posting atau sub page
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.