Cara ini sudah banyak dilakukan oleh beberapa blogger yang templatesnya kurang memadai untuk widget, jika Anda berminat untuk menggunakannya silahkan ikuti tutorial berikut ini.
Langkah Pertama
Cara Membuat Tab View Widget Pada Sidebar
Cara ini sudah banyak dilakukan oleh beberapa blogger yang templatesnya kurang memadai untuk widget, jika Anda berminat untuk menggunakannya silahkan ikuti tutorial berikut ini.
Langkah Pertama
- Login ke akun Blogger kamu.
- Dari halaman dashboard, pilih Edit HTML.
- Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya.
- Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}
- Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
- Setelah itu letakkan sumber script berikut di bawah ]]></b:skin><script src="http://my-project-tabview-tab.googlecode.com/files/tabview.js" type="text/javascript"/>
Langkah Kedua
- Pilih tab Elemen Halaman (Page Element).
- Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
- Kopikan script berikut dan letakkan pada kotak Content yang tersedia:<form action="tabview.html" method="get">Pada tulisan yang berwarna merah tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai keinginan.
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->
</div></div></form>
<script type="text/javascript" src="http://my-project-tabview-tab.googlecode.com/files/tabview-tab.js"></script>
Selain itu kamu juga bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.
- Simpan hasil kerjaan kamu dan lakukan pratinjau (preview) untuk melihat hasilnya.
Sekian dulu postingan saya mengenai cara membuat tab view widget pada sidebar. Semoga bagi anda yang wadah blognya sempit dengan memasang tab view widget ini bisa terbantu.
- Selayaknya Dibaca:
Related Post:
Widget
- Cara Membuat/Memasang Widget Top Komentator Berbentuk Cloud
- Cara Menambah Tombol Google +1
- Membuat Navigasi Breadcrumb Di Blogspot
- Cara Membuat Widget Top Komentator
- Cara Membuat Widget Translator Berbentuk Bendera
- Membuat Kotak Berlangganan Via Email
- Cara Membuat Recent Post Dengan Thumbnails
- Cara Membuat Kotak Blogroll dan Efek Marque
- Cara Membuat dan Memasang Shoutbox di Blog
- Menambahkan Random Posts Widget
- Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
- Cara Menambahkan Recent Posts + Comment Dengan Javascript
- Recent Artikel Blog di Facebook Melalui NetworkedBlogs
- Menambahkan Artikel Populer Pada Sidebar
Blog
- Ribuan Backlink Gratis dari IMTalk
- Cara Memasang Tweetmeme di Setiap Postingan
- Cara Mendaftarkan Blog ke DMOZ
- Cara Membuat Short URL Google Plus
- Cara Daftar Google Plus (Google+)
- Google Update Pagerank Juli 2011
- Cara Menghapus dan Mengecek Broken Link Pada Blog
- Apa itu Google Plus (Google+) ?
- Tips Menghadapi Komentar Negatif
- Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
- Kontes SEO, Berbahaya!
- Pentingnya Menjawab Setiap Komentar di Blog
- Kenali Pengunjung Blog Anda
- 10 Artikel Terbaik Bulan Juni 2011
- Metode On Page dan Off Page SEO
- Cara Membuat Link Internal di Setiap Postingan
- Siapa Pengunjung Setia di Blog Anda?
- Tips Mendapatkan Pengunjung Setia di Blog
- Favicon Generate - Fitur Baru Blogger
- Cara Menambah Tombol Google +1
- DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
- Cara Membuat Toolbar Alexa Sendiri
- Cara Memasang Alexa Widget
- Manfaat Alexa Toolbar
- Apa itu Alexa Rank?
Label:
Blog,
Widget
Previous Article
Subscribe to:
Post Comments (Atom)
16 comments
Nais info ..
ReplyAkhirnya widget blog Saya ga terlalu numpuk lagi karena sudah ada ini.
sip gan ,, nice info
ReplyMakasih gan, silahkan dicoba dan dipraktekkan.
ReplySaya mohon bagi yang sudah mencoba dan memakai kode di blog ini mohon jangan dihapus sumber dari sini.
makasih sob ,., seharusnya begitu tidak menghapus sumbernya. untuk menghargai yang punya,., blog bermanfaat sobat, teruskan
Reply: yupz, kebanyakan mereka hanya mementingkan diri sendiri tanpa mementingkan kepentingan orang lain. Terima kasih sobat, sobat juga sukses terus yah. :)
ReplyRibet banget om..
Replytapi bagus untuk melatih otak kita :D :D :D
Salam..
ijin coba dulu om :D
Replydicoba dolo gan :D
Replypulsa murah all operator
makasii infonya ... :D
Replymantaap gan artikelnya :)
ReplyMantaaap gan artikelnya :)
ReplyTerimakasih atas informasinya sangat bermanfaat :)
ReplyManteep sob untuk informasi artikelnya :)
Replyilmu yang sangat bermanfaat sekali nih, terimakasih gan :)
Replymantap dah artikelnya kawan
ReplyThanks sob informasinya :)
Replyhttp://goo.gl/yeUiCg
Post a Comment
Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).