Cara Membuat Tab View Widget Pada Sidebar



tab view
Cara Membuat Tab View Widget Pada Sidebar - Sesuai judul, Saya akan share tutorial cara membuat tab view widget pada sidebar. Mungkin sobat blogger pasti pernah merasakan menggunakan templates yang buat wadah widgetnya agak sempit dan tidak bisa dimuat jika dipasang satu persatu. Inilah solusinya, dengan tab view widget Anda bisa mempermudah ruang untuk widget Anda, dan tidak akan boros halaman.

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*/
}
  • 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"/>
  • Simpanlah hasil editing tersebut.



  • 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">
      <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>
      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.
    • 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.

    Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

    Tidak tahu cara berlangganan? Klik disini

    Related Post:

    Anda sedang membaca artikel tentang Cara Membuat Tab View Widget Pada Sidebar dan anda bisa menemukan artikel Cara Membuat Tab View Widget Pada Sidebar ini dengan url http://daw-xp.blogspot.com/2011/03/cara-membuat-tab-view-widget-pada.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Tab View Widget Pada Sidebar ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Tab View Widget Pada Sidebar sumbernya.


    20 comments

    Anonymous March 27, 2011 at 8:55 AM

    Nais info ..

    Akhirnya widget blog Saya ga terlalu numpuk lagi karena sudah ada ini.

    Reply delete
    Dunia komputer May 6, 2011 at 9:48 PM

    sip gan ,, nice info

    Reply delete
    Deny Arya Wiranata May 6, 2011 at 9:53 PM

    Makasih gan, silahkan dicoba dan dipraktekkan.
    Saya mohon bagi yang sudah mencoba dan memakai kode di blog ini mohon jangan dihapus sumber dari sini.

    Reply delete
    FirdausTech July 10, 2011 at 9:24 AM

    makasih sob ,., seharusnya begitu tidak menghapus sumbernya. untuk menghargai yang punya,., blog bermanfaat sobat, teruskan

    Reply delete
    Deny Arya Wiranata July 11, 2011 at 6:13 PM

    @FirdausTech : yupz, kebanyakan mereka hanya mementingkan diri sendiri tanpa mementingkan kepentingan orang lain. Terima kasih sobat, sobat juga sukses terus yah. :)

    Reply delete
    raa pramuja July 10, 2012 at 12:39 AM

    Ribet banget om..

    tapi bagus untuk melatih otak kita :D :D :D

    Salam..

    Reply delete
    bolajozz August 27, 2012 at 1:00 PM

    ijin coba dulu om :D

    Reply delete
    Solatarefill October 18, 2012 at 5:39 PM

    dicoba dolo gan :D

    pulsa murah all operator

    Reply delete
    hezty tatawarna December 25, 2013 at 6:28 PM

    makasii infonya ... :D

    Reply delete
    Ace Maxs February 4, 2015 at 10:35 PM

    mantap dah artikelnya
    http://acemaxs31.com/

    Reply delete
    Grosir Ace Maxs Tasik February 6, 2015 at 8:29 AM

    mantaap gan artikelnya :)

    Reply delete
    Obat Tradisional Varises February 14, 2015 at 9:01 AM

    Mantaaap gan artikelnya :)

    Reply delete
    Kedai Jelly Gamat Gold G February 18, 2015 at 11:52 AM

    Terimakasih atas informasinya sangat bermanfaat :)

    Reply delete
    Grosir Obat Jelly Gamat Gold March 14, 2015 at 11:10 AM

    Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/
    http://jamutradisionalmujarab.com/

    Reply delete
    Obat Tradisional Rubella March 30, 2015 at 3:18 PM

    Manteep sob untuk informasi artikelnya :)

    Reply delete
    Obat Herbal Luka Tersiram Air Panas April 21, 2015 at 11:52 AM

    ilmu yang sangat bermanfaat sekali nih, terimakasih gan :)

    Reply delete
    obat migren April 21, 2015 at 3:57 PM

    mantap dah artikelnya kawan

    Reply delete
    Risti Amalia April 24, 2015 at 11:46 AM

    Keren sob artikelnya, izin nyimaknya :)
    http://goo.gl/n3Bp8g

    Reply delete
    Dewii Sumiyati May 4, 2015 at 9:28 AM

    Thanks sob informasinya :)
    http://goo.gl/yeUiCg

    Reply delete
    Obat Tradisional Radang Paru-Paru May 15, 2015 at 9:50 AM

    keren banget sob, artikelnya sangat membantu sekali
    Izin nyimaks aja sob :)
    http://goo.gl/VWOqxm

    Reply delete

    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).

     

    Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors