Cara Membuat Widget Tab View 3 Kolom di Blog

Cara Membuat Widget Tab View 3 Kolom di Blog

Kali ini saya mau bagi-bagi tutorial tentang Cara Membuat Widget Tab View 3 Kolom di Blog. Widget tab view 3 kolom adalah widget yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 buah widget lainnya agar tidak terlalu banyak memakan tempat. Kalau anda masih belum faham apa itu widget tab view 3 kolom itu apa... anda bisa melihat gambar diatas. Nah, bagi yang mau coba, Langsung saja..

Chek It Out......





1.  Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript.

2.  Pastekan kode dibawah ini


<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 70px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color: #000;
padding-top: 2px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 100;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #ffffff;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
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: 310px;" class="Tabs">
<a><span style="color: #fff">Judul1</span></a>
<a><span style="color: #fff">Judul2</span></a>
<a><span style="color: #fff">Judul3</span></a>
</div>
<div style="width: 310px; height: 250px;" class="Pages">


<div class="Page">
<div class="Pad"> 
  <li><a href="Link URL1a" target="_blank">Judul Artikel1a</a></li>

 <li><a href="Link URL1b" target="_blank">Judul Artikel1b</a></li>

</div></div>




<div class="Page">
<div class="Pad"> 
 <li><a href="Link URL2a" target="_blank">Judul Artikel2a</a></li>

 <li><a href="Link URL2b" target="_blank">Judul Artikel2b</a></li>

</div></div>



<div class="Page">
<div class="Pad"> 
  <li><a href="Link URL3a" target="_blank">Judul Artikel3a</a></li>

 <li><a href="Link URL3b" target="_blank">Judul Artikel3b</a></li>

</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://ilmu-matematika.blogspot.com/2014/06/cara-membuat-widget-tab-view-3-kolom-di.html" target="_blank">&#9658;Get this widget</a></div>



-  Ganti tulisan warna merah dengan Judul artikel dan link Artikel
-  Ganti tulisan warna biru dengan URL Link Artikel

3.  Simpan




Semoga bermanfaat...