Membuat Wudget Tab View 3 Kolom

Asslamu'alaikum Wr Wb

Pada kesempatan kali ini saya akan berbagi sedikit widget yang saya dapat dari teman blogger saya, mungkin widget ini sudah banyak yang tahu atau mungkin sudah menggunakannya tapi tak apalah yang penting posting :D

Oke untuk contoh widget'nya mungkin udah bisa lihat disebelah kanan blog ini, untuk cara nya baca tutorialnya berikut ini :

1. Pertama Login ke Blogger
2. Setelah itu masuk ke Tata Letak terus klik Tambah Widget dan pilih HTML/JavaScript
3. Pastekan berikut:

<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">Menu 1</span></a>
<a><span style="color: #fff">Menu 2</span></a>
<a><span style="color: #fff">Menu 3</span></a>
</div>
<div style="width: 310px; height: 400px;" class="Pages">

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

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

<div class="Page">
<div class="Pad">
Konten dari Menu 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://krisna18.blogspot.com/2014/01/membuat-wudget-tab-view-3-kolom.html" target="_blank">&#9658;Get this widget</a></div> 

4. Ganti warna hijau dengan nama menu dan ganti warna merah dengan script widget anda.
5. Klik Save


Jika ada kesalahan dalam memsang widget di atas bisa menghubungi saya melalui kolom yang sudah disediakan. Terimakasih..

Tweet

Postingan terkait:

— Add Comment — Blogger