Cara Membuat menu Tab View 3 kolom di Blog | Blogger

Habis jalan jalan lagi dari blog tetangga,eh ketemu lagi cara untuk mempercantik tampilan blog,yaitu membuat menu tab view 3 kolom. Sobat udah pada tahu kan fungsi dari widget ini,fungsinya untuk mempermudah pengunjung untuk melihat lihat widget dengan cara membuka menu tab nya,
contoh nya udah ada saya pasang di Blog ane nih, seperti gambar ini :

oke langsung saja yah sob,langkah langkah pemasangan nya :

1.login dashbord blogger

2.pilih tata letak

3.pilih add gadget - HTML/java script 

4.pada bagian judul biarkan saja kosong karena akan terisi dengan jdul menu tab

5.lalu masukan kode dibawah ini :

<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">isi judul menu tab 1</span></a>

<a><span style="color: #fff">isi judul menu tab 2</span></a>

<a><span style="color: #fff">isi judul menu tab 3</span></a>

</div>

<div style="width: 310px; height: 400px;" class="Pages">

<div class="Page">

<div class="Pad">

------------| isi konten 1 |-----------

</div></div>

<div class="Page">

<div class="Pad">

------------| isi konten 2 |-----------

</div></div>

<div class="Page">

<div class="Pad">

------------| isi konten 3 |-----------

</div></div>

</div>

</div>

</form>

<script src="http://septiamujizat.googlecode.com/files/tab_view.js">

</script>

<script type="text/javascript">

tabview_initialize('TabView');

</script></div>

udah jelaskan?untuk yang warna biru judul widget nya,untuk yang warna merah isi script yang mau dipasang di blog kamu,misalnya script link sahabat,random post,artikel popular, fanspage dll

jujur aja sempet dibuat bingung sama nih widget,walau gagal berkali kali saat memasangnya akhirnya ketemu juga permasalahan nya yaitu tag penutup yang berlebihan, karena setiap tag penutup ( </div> yang berlebihan mempengaruhi  perubahan pada widget,

semoga ini jadi pembelajaran kedepan nya sob,siapa tau ada yang mengalami kejadian serupa :-D


tambahan dari komentar sobat blogger, untuk memasukan komentar kedalam menu tab,, silahkan masukan kode script dibawah ini :

<div style="overflow:auto;width:95;height:450px;border:1px

solid #ccc; padding:10px; margin:0 auto;background:#fff;">

<style type="text/css"> ul.w2b_recent_comments{list-

style:none;margin:0;padding:0;} .w2b_recent_comments li

{background:none !important;margin:0 0 6px !

important;padding:0 0 6px 0 !

important;display:block;clear:both;overflow:hidden;list-

style:none;} .w2b_recent_comments li .avatarImage

{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px

#ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px

#ccc;float:left;margin:0 6px 0

0;position:relative;overflow:hidden;} .avatarRound{-webkit-

border-radius:100px;-moz-border-radius:100px;border-

radius:100px;} .w2b_recent_comments li img

{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color:

#666;display: block;font-size: 12px;font-style: italic;line-

height: 1.4;} </style>
<script type="text/javascript">
 //<![CDATA[
 // Recent Comments Settings
var
numComments = 30,
showAvatar     = true,
 avatarSize      = 30,
 roundAvatar   = true,
characters       = 25,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="

http://rizaldipriantamascript.googlecode.com/files/Recent_Comm

ents_.js "></script> <script type="text/javascript"

src="http://dhanicyx.blogspot.com/feeds/comments/default?

alt=json&callback=w2b_recent_comments&max-

results=100"></script></div>

keterangan : sobat tinggal mengganti url dhani's blog dengan url blog sobat,,
                    untuk yang num comment artinya berapa banyak komentar yang ditampilkan
                    show avatar untuk menampilkan avatar dari komentar, avatar size ukuran avatar yang akan ditampilkan, character adalah jumlah karakter yang akan ditampilkan,,

oke itu saja tutorial membuat menu tab view 3 kolom di blog dengan mudah,
semoga bermanfaat sob !!

Share this post