Cara Memasang Tab View Widget di Blog

Malam Sobat Free Download dan Tutorial, Setelah sebelumnya saya share tentang Cara Membuat Recent Post, Cara Membuat Recent Comment serta Membuat Daftar isi di Blog. Pada Kali ini, saya akan share bagaimana menggabungkan ketiga widget Recent Post, Comment dan Daftar isi dalam satu tempat dengan Cara Membuat Tab View. Contohnya bisa sobat lihat pada gambar disamping. Manfaat dengan adanya Tab View, bisa menghemat space atau tempat di sidebar anda. Baiklah, langsung saja untuk membuat Tab View di Blog ikuti langkah-langkah di bawah ini.

Cara Memasang Tab View di Blog :

Login ke akun Blogger anda
Klik Tata Letak > Tambah Gadget pilih HTML/JavaScript

Copy dan paste Script dibawah ini

Keterangan :

Untuk tulisan yang berwarna Biru, ganti dengan judul tiap widget yang dipasang
Untuk tulisan berwarna Merah ganti atau isi dengan Kode widget yang ingin anda pasang. misalnya:
Kode untuk Recent Post bisa anda liat disini
Kode untuk Daftar Isi bisa anda liat disini
Kode untuk Recent Comment anda liat disini

setelah selesai semua, silahkan simpan dan lihat hasilnya.

Demikianlah Tentang Cara Memasang Tab View di Blog, semoga bermanfaat.

Cara Mudah Membuat Menu Tab View Di Blog - Tab view adalah suatu widget yang berisi beberapa widget yang terdiri dari beberapa slot yang dapat di isi sesuai keinginan sobat, misalnya Daftar isi blog dan lain-lain.

Berikut Ini Cara Memasang Emoticon Di Kotak Komentar Blog :

1. Login ke Blogger.
2. Kemudian Pilih Tata Letak → Tambah Gadget → html/javascript.
3. Copy paste code dibawah ini dan letakkan ke kolom html/javascript.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#fff; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:200px; " class="Pages">
<div class="Page">
<div class="Pad">

Isi menu tab view 1

</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 2

</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Selanjutnaya simpan dan lihat hasilnay.
Note : Ganti ' Title 1,2 & 3 ' sesui Judul widget sobat. Ganti ' Isi menu tab view 1,2 & 3 ' dengan kode widget sobat. Selamat mencoba dan semoga bermanfaat.

Judul : Cara Memasang Tab View Widget di Blog
Deskripsi : Malam Sobat Free Download dan Tutorial , Setelah sebelumnya saya share tentang Cara Membuat Recent Post, Cara Membuat Recent Comment s...