Saturday, July 6, 2013

Cara Menambahkan Widget TAB dengan tiga Kolom

Kali ini Blog-KrenZ akan memposting Artikel tentang Cara Menambahkan Widget Tab dengan tiga kolom , Script yang saya ambil dari blog Airaloka , sebelumnya juga Blog-KrenZ memposting Artikel tentang '' Aksi unik pengguna Facebook terbaru '' kita kembali kepembicaraan , Pernah Lihat Widget Seperti gambar di bawah ini ??
                                    
Yang belum tau lihat gambar di atas yahh , Mau pasang Widget seperti di atas ?? langsung aja Blog-KrenZ langsung bagi-bagi .

1. Masuk ke Bloger Sobat atau Klik ini >> Bloger <<

2. pergi ke tata letak

3. pilih HTML/java Script ,

4. lalu pastekan kode di bawah ini di kolom html java script
<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">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">

<div class="Page">
<div class="Pad">
Konten dari Tab 1
</div></div>

<div class="Page">
<div class="Pad">
Konten dari Tab 2
</div></div>

<div class="Page">
<div class="Pad">
Konten dari Tab 3
</div></div>

</div>
</div>

</form>

<script src="http://airalokadotcom.googlecode.com/files/tab%20view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style="text-align:right;margin-right:7px;"><a title="Widget Tab View 3 Kolom" style="font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;" href="http://ikfanahmadfauzi.blogspot.com/2013/07/cara-menambahkan-widget-tab-dengan-tiga.html" target="_blank">&#9658;Get this widget</a></div>

5. Tinggal di save dan lihat hasilnya

[Tambahan Sedikit ]
Warna yang berwarna merah Masukan Sript Widget yang di inginkan
Warna yang berwarna Biru adalah Judul dari masing-masing Widget

12 comments:

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini Dofollow

↑↑→Thanks for Visiting←↑↑

Privasi komentar !

↓↓→Thanks for Visiting ←↓↓
Ada aturan-aturan jika berkomentar , di mohon untuk membacanya

-] → Dilarang Spam ,Flod , junk , iklan, sara , sex
-] → menggunakan bahasa yang sopan
-] → dilarang live link pada saat berkomentar
-] → di larang menghina postingan , dan teman yang berkomentar
-] → Blog ini menggunakan sistem Dofollow

↑↑→Thanks for Visiting←↑↑