Pengikut


Salam Blogger, kali ini saya punya trik baru untuk para blogger di dunia. Trik ini berfungsi untuk menghemat ruang yang ada pada tampilan blog anda, karena Trik ini dapat menyatukan tiga widget menjadi hanya satu widget. Trik ini juga bisa dipakai untuk mempermudah para pengunjung untuk mencari kategori atau post yang mereka inginkan, dengan begitu pengunjung blog anda sedikitnya akan merasa terkesan dengan widget ini. Kayaknya udak panjang banget nih intermezzo nya, OK langsung aja.

Inilah langkah-langkah pembuatan widget 3 coloum tersebut :
1. Login ke blogger anda
2. Layout --Edit HTML
3. Kemudian cari kode  ]]></b:skin>
4. Copy kode dibawah ini dan letakkan sebelum kode ini ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}

5. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk 
    pengaturan Tab View.
6. Selanjutnya masukkan kode dibawah ini sebelum kode ini </head>
<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
7. Simpan Template

8. Selanjutnya kita Pergi ke menu Tata Letak--> Add Gadget --> 

     HTML/Javascript
  • Silahkan masukkan script dibawah ini ke HTML/Javascript :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
  • Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
  • Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
  • Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
  • Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya. 
Tutorial selesai "selamat mencoba ya!!"

Posting Komentar

  1. thank you for share, sangat bermanfaat :)

    BalasHapus
  2. kok tab 2 dan 3 nya gak berfungsi ya gan ??

    BalasHapus
    Balasan
    1. Wah ternyata bener, setelah dicobain tadi ternyata ga jalan. Dicek lagi ternyata file javascript yang dihosting di http://superinhost.com/trikblog/tabview.js ga berfungsi, atau sudah dihapus. Mohon maaf nanti saya coba ulik lagi javascriptnya biar berfungsi. Coba aja cek lagi update dari postingan ini 2-3 hari.

      Hapus
  3. itu sudah dihapus, jadi ga berfungsi..

    BalasHapus
    Balasan
    1. iya file javascript yang di hosting superinhost nya udah di delete, sekali lagi saya minta maaf. Nanti akan saya benerin koq, kembali lagi lain waktu...Salam Blogger

      Hapus
  4. UPDATE...SEKARANG POSTING INI SUDAH SAYA PERBAIKI, JADI ANDA SEMUA DAPAT MEMAKAI WIDGET YANG SATU INI, ENJOY OK, wassalam.

    BalasHapus
  5. Makasih Infona Bray..
    Cobain juga Punyaku ok... :D

    http://optimus-software.blogspot.com/2012/06/cara-membuat-widget-3-kolom-di-blog.html

    BalasHapus
    Balasan
    1. ya terimakasih nanti bila ada waktu pasti punya agan akan saya coba juga ok. thank's

      Hapus
  6. Balasan
    1. iya sama-sama gan, thank's juga buat kunjungan + komen nya, salam blogger

      Hapus
  7. Makasih gan atas artikelnya,,sangat bermanfaat sekali buat blog saya....harap kunjung balik gan.

    BalasHapus
    Balasan
    1. sama-sama gan, ane brsyukur gan kalo artikelnya bisa bermanfaat buat para pengunjung.. salam bloggger

      Hapus
  8. gan,,, javasciptnya udah di upload lagi apa blm?? kalo udah ane rencananya mau buat widget 3 kolom pake cara ini,, :) thanks gan,,,

    BalasHapus
    Balasan
    1. udah gan, udah saya perbaiki gan silahkan di test

      Hapus
  9. Balasan
    1. iya sip nanti saya kunjungi balik gan

      Hapus
  10. Itu judul di widget 3 kolom sidebar agan, bagaimana cara menggantinya jadi huruf kecil ??? Padahal kan di judul postingan agan hurufnya kapital ???
    Itu di masukin manual atau otomatis gan ???
    Mohon bantuannya gan...

    BalasHapus
    Balasan
    1. coba masukin pake manual dulu aja gan..

      Hapus
    2. Makasih gan bantuannya...
      Saya mau coba dulu.
      salam...

      Hapus
    3. silahkan gan dicoba, salam blogger

      Hapus
  11. mantap sob....
    visit back ya sob
    http://nyobakin.blogspot.com/

    BalasHapus
  12. ada link utk script arsip, script recent koment, popular post, dll, jadi biar ga cari2 lg di web lain mas, mksih :D

    BalasHapus
    Balasan
    1. salam blogger aja deh, kurang paham

      Hapus
  13. Salam kenal sob..? terima kasih atas artikel nya salam sukses
    Karrysta
    http://karristaent.blogspot.com

    BalasHapus
    Balasan
    1. sama sama sob, makasih komentarnya
      Salam Blogger

      Hapus
  14. Makasih bro, sdh bagi-bagi ilmu..
    scriptnya ana fake di blog ana, berkenan mampir monggo..
    http:bloggersumampir.blogspot.com

    BalasHapus
    Balasan
    1. iya gan nanti ane mampir.. makasih ya komentarnya

      Hapus
  15. gak bisa bro.... gimana nih???????????

    BalasHapus
    Balasan
    1. mungkin gak cocok sama template nya gan... atau salah step by step nya gan... makasih

      Hapus
  16. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    BalasHapus
  17. Kalau alternatif lain yg tanpa oprek template ada mas, langsung bikin widget gitu?

    kunjungan balik ke blog dofollow aku ya: www.saputramz.com

    BalasHapus
  18. kalau cara membuat gadget disamping posting post itu gimana ya bro?
    soalnya blog ane tidak ada gadget sampingnya, semua ada dibawah. saya coba tutorial membuat blogspot menjadi 3 kolom ternyata tidak bisa, soalnya kode yg disuruh dicari ternyata tidak ada di template saya.
    sebelumnya saya ucapkan terima kasih banyak

    BalasHapus
  19. ijin memahami untuk dipraktekkan bos,
    www.laatansabelajar.blogspot.com

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!