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 !!

9 Responses to "Cara Membuat menu Tab View 3 kolom di Blog | Blogger"

  1. kok ngk bisa y,.,.mohon pencerahan

    ReplyDelete
  2. terima kasih sudah mengingatkan bro,,,sudah saya perbaiki tuh script nya,
    sukses!!

    ReplyDelete
  3. mantap gan tutor nya..kode ini lah yang ane cari2 maklum lagi belajar buat template gan..makasih ya info nya langsung praktek ane

    ReplyDelete
  4. oke,,langsung dicoba aja gan,,semoga berhasill!!!trima kasih sudah berkomentar

    ReplyDelete
  5. Mas sekalian ulas isi konten pada kolom itu mas. terutama script arsip, script komentar, script kategory, (apabila ingin memasukkan itu) biar ga nyari di web lain :D mksih mas

    ReplyDelete
  6. script buat popular post. komentar. dllnya mana gan??

    ReplyDelete
  7. masih script komentar yang saya share gan,,
    maklum,,,...belum balik ke kota untuk edit posting hehehe jadi hanya bisa membalas komentar agan2 saja dulu
    thanks y udah diingatin gan :-D

    ReplyDelete
  8. enggak bisa dicopy -_- sialan

    ReplyDelete
  9. terima kasih bro scriptnya sukses selalu bro

    ReplyDelete
*Komentar Tanpa Moderasi*
Silahkan berkomentar yang sopan, tidak mengandung unsur sara, pornografi.
Jika blog ini membantu, jangan lupa like Fanspage dan Follow Google+
Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel