Cara Membuat Widget Tab View 3 Kolom Pada Blog Bloger Aceh

Bloger Aceh adalah Blog tentang Tip, Trik dan Tutorial Blogger dalam mempercantik blog

20 February, 2013

Cara Membuat Widget Tab View 3 Kolom Pada Blog

tab view 3 kolom
Halo sobat Blogger, kali ini Blogeraceh akan membagikan sedikit tips untuk menghemat lokasi widget di blog sobat. kalau biasanya sobat memiliki banyak widget yang perlu ditampilkan baik itu untuk mempercantik template, script atau untuk optimasi SEO tapi terlalu banyak, maka sebaiknya sobat menggunakan widget tab view dengan 3 kolom pada blog dengan cara seperti dibawah yang akan Blogeraceh bagikan nanti, ok sobat langsung saja ke TKP ya..



  1. Buka Tata letak dan Tambahkan HTML/CSS pada blog sobat
  2. Untuk Judul kosongkan saja, langsung isi HTML nya seperti dibawah.


    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a><span style="color: #fff">R. Comment</span></a>
    <a><span style="color: #fff">FB. Comment</span></a>
    <a><span style="color: #fff">Sahabat</span></a>
    </div>
    <div style="width: 310px; height: 400px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    ------------| isi konten 1 |-----------
    </div></div>

    <div class="Page">
    <div class="Pad">
    ------------| isi konten 2 |-----------
    </div></div>

    <div class="Page">
    <div class="Pad">
    ------------| isi konten 3 |-----------
    </div></div>

    </div>
    </div>

    </form>

    <script src="http://septiamujizat.googlecode.com/files/tab_view.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  3. Untuk Tulisan berwarna bisa diganti dengan judul Tab seperti keinginan sobat, dan tanda ----|isi konten|---- adalah tempat sobat meletakkan isi konten seperti link sahabat, script, twitter,comment,fan page dan hal-hal lain. untuk posisi lebar, tinggi dan ukuran lain bisa diubah menurut petunjuk di script.
Untuk Contoh yang telah jadi bisa sobat lihat di blog Blogeraceh yang satu lagi yaitu Investasi Online. Semoga cara membuat widget tab view 3 kolom pada blog yang Blogeraceh bagikan bisa bermanfaat bagi blog sobat.
Happy Blogging!

Labels:

15 Comments:

At Wednesday, February 20, 2013 , Blogger Hamim said...

Nice info sob :)
postingannya bermanfaat sekali.. :)

 
At Thursday, February 21, 2013 , Blogger Unknown said...

Thanks mas infonya, slalu hadir di blog mas bro

 
At Thursday, February 21, 2013 , Blogger Ihsan said...

sama-sama gan, :GR17

 
At Thursday, February 21, 2013 , Blogger Ihsan said...

sip :GR10 Mr.x ,
aktif banget blogwalking ya,, :GR06

 
At Wednesday, March 06, 2013 , Blogger Unknown said...

gan mau nnya kalo mau masukin post populer ama blog active itu
kita nulis manual apa gmn..?

 
At Thursday, March 07, 2013 , Blogger Ihsan said...

agan harus tau kode html nya dulu, nanti tinggal disisipkan lewat script ini.
kalo pake yang bawaan blogger ngak bisa disisipkan gan, :GR23

 
At Wednesday, March 20, 2013 , Blogger Admin PKS-Net said...

Izin sedot gan...

 
At Tuesday, May 07, 2013 , Blogger Unknown said...

Makasih ya...walau menunya belum diisi...

 
At Tuesday, May 14, 2013 , Blogger Mas Zuhdi said...

thanks ilmunya masbro... salam kenal dari Toko Online Baru

 
At Tuesday, May 21, 2013 , Blogger lang lang blog said...

contoh penampakan tiga kolomnya mana sob

 
At Tuesday, May 21, 2013 , Blogger Ihsan said...

di blog bisnis saya http://investasi-pc.blogspot.com

 
At Tuesday, June 04, 2013 , Blogger Admin Trix said...

Mampir + comment balik ya http://novaibnu.blgspot.com

 
At Tuesday, June 25, 2013 , Blogger Unknown said...

Mantap,saya coba terapkan dulu digubuk saya ya gan

 
At Sunday, July 07, 2013 , Blogger Unknown said...

Ga sekalian kasih link script nya bos ?? biar ga cari2 lg di web lain. seperti scrip recent koment, arsip, popularpost, dll. thanks

 
At Monday, July 08, 2013 , Blogger Ihsan said...

boleh dilihat di Menu Daftar isi gan,, tapi belum lengkap semua, semoga kedepan segera dilengkapi,, Thank sarannya :GR17

 

Post a Comment

Berkomentar sesuai Artikel Posting Blog,, jika ingin memasang link gunakan Tempat yang Blogeraceh Sediakan di Menu Link Exchange

Subscribe to Post Comments [Atom]