Cara Membuat Tab View di Blog - Cara menambah atau memasang menu tab view di blog/di slidebar blosgger .
Selamat datang di blog Temukan Cara. Masih belum bosan kan dengan artikel-artikel dari Temukan Cara ? Jika belum, mari ikuti tutorial blogger berikutnya, sebelumnya saya telah berbagi Tutorial tentang Cara membuat tombol like temui kami di facebook. Pada kesempatan kali ini saya akan berbagi tutorial tentang Cara membuat Tab view di blog, jika masih belum mengerti dengan apa yang saya katakan tentang tombol gulung, anda bisa melihat contoh gambarnya dibawah ini:
Tombol gulung (Tab view)
ini berfungsi untuk merapikan tampilan blog yang kacau karena terlalu
banyak widget di sidebar. Dengan adanya widget ini, maka tampilan blog anda akan menjadi terlihat lebih rapi ,cantik dan elegan,sesuai dengan fungsinya yaitu
menggulung widget yang tidak diperlukan.Jika anda tertarik simak caranya di bawah ini:
1.) Pertama anda harus Login/ masuk ke akun Blogger anda
2.) Kemudian masuk ke Dashboard > Template > Edit Html > Lanjutkan
3.) Jangan lupa Centang tanda expand template widget
4.) Cari kode ]]></b:skin> , agar mudah melakukan pencarian Tekan Ctrl+F lalu ketik atau copy paste kode ]]></b:skin> maka akan ketemu.
5.) Setelah ketemu kodi ]]></b:skin> , letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
Kode
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).
6.) Setelah itu cari kode </head>
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).
6.) Setelah itu cari kode </head>
7.) Jika sudah ketemu kode </head>, copy kode dibawah ini kemudaian paste dibawah kode </head>
Kode
<script type='text/javascript'>
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>
9.) Selanjutnya Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
Demikian tentang Cara membuat Tab view di blog yang dapat saya sampaikan. Semoga cara-cara di atas dapat membantu anda. Jika ada cara yang lain bisa menambahkannya pada kotak komentar. Terimakasih anda telah mengunjungi blog Temukan Cara ini.
Komentar
Posting Komentar