Tuesday 27 August 2013

Cara Memasang Widget Tab Keren di Blog

Pengen Blog Kamu Tampil Profesional, Rapi dan Menarik tentunya ???
Apalagi blog kamu penuh dengan widget yang terpasang,, tentunya kurang rapi dan bikin loading blog jadi lelet, saya sarankan ganti saja tampilan widged'a ke bentuk tampilan TAB seperti gambar dibawah ini :


Jangan Dibaca aja,,,Langsung praktek yukk,,,,


Langkah Pertama :

  • Login Ke Blog masing2
  • Edit template HTMLnya : cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi :
/* 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*/}
Note : Pada bagian yang diberi tanda keterangan merah, 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://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>
  • Simpan edit template tadi

  • Langkah Kedua :

  • Pilih menu Tata Letak.
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Kopikan script berikut ini :
<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://enes-sc.googlecode.com/files/tabview-tab.js"></script>

Pada tulisan yang berwarna merah 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 sidebarblog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.
Sumber

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin

Unknown

Perhatian : Semua artikel blog ini sudah diprotect, Bagi yang ingin copy-paste artikel ini, mohon lampirkan sumber linknya. Terima Kasih!

11 komentar:

  1. siip gan!
    jangan lupa visit back and follow follow yah.
    skaliklik.blogspot.com

    ReplyDelete
  2. 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,-
    Ready Stock!
    Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
    Ready Stock!
    Nokia Lumia-710-whiteRp. 900.000,-
    Ready Stock!
    Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
    Ready Stock!
    Nokia Lumia 710 - Black.Rp. 900.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
    Ready Stock!
    Apple iPod Touch 4 Gen 8GB.Rp.700.000.
    Ready Stock!
    APPLE iPod Nano 8GB - Pink.Rp.500.000,-
    Ready Stock!
    Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
    Ready Stock!
    Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
    Ready Stock!
    Acer TravelMate TM8481-2462G32.Rp. 1.400.000
    Ready Stock!
    Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
    Ready Stock!
    Nikon D7000 kit 18-105mm.Rp.1.700.000.
    Ready Stock!
    Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
    Ready Stock!
    Nikon Coolpix L 120 Red.Rp. 900.000
    Ready Stock!
    Nikon Coolpix P 500 Black.Rp 1.000.000

    ReplyDelete
  3. ada informasi lagi gan yang lebih simple? ditunggu updatenya ya

    ReplyDelete
  4. mantap, keep sharing bro
    kunjungi ya di www.sirtalia.com

    ReplyDelete
  5. keren jg ni trick, nyoba dlu yah...!
    visit back, http://socialpointkitahack.blogspot.com/
    komenya jg ea hehehe

    ReplyDelete
  6. Mantapppp...bro....

    http://www.acehindependent.com

    ReplyDelete

 

Copyright @ 2015 INFORMASI DAN TEKNOLOGI.

Designed by Deddy De Gazaa | Boh Jak