Hay Kawan, pada postingan sebelumnya saya telah share tentang Mozilla Firofox 9, kali ini aku akan share tentang Tips Blogging yaitu Cara Mudah dan Simpel Membuat Widget TAB view tanpa "edit HTML". Pada biasanya kan kalau mau memasang widegt Tab View harus menambahkan kode pada edit HTML, kali ini tanpa perlu ribet, caranya lebih mudah dan simpel. Kalian hanya menggunakan cara seperti menambah widget seperti biasa. Okreww kawan, langsung saja, caranya Sebagai Berikut =>>
1. Login ke Blogger
2. Masuk menu Rancangan
3. Add / Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan Kode dibawah ini =>>
<center>6. Kemudian Save Gadget
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 53px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* 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", Serif; /* 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: #E3CEF6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#Transparent; /* 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></center>
<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: 165px;" class="Tabs">
<a>Full</a>
<a>Games</a>
<a>Askep</a>
</div>
<div style="width:165px; height:350px; " class="Pages">/* Ukuran Kotak Utama */
<div class="Page">
<div class="Pad">
<script style="text/javascript"> var numposts = 100; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script> <ul> <script src="http://andicxcools.blogspot.com/feeds/posts/default/-/Free%20Software?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript"> var numposts = 100; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script> <ul> <script src="http://andicxcools.blogspot.com/feeds/posts/default/-/Games%20Compressed?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript"> var numposts = 100; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script> <ul> <script src="http://andicxcools.blogspot.com/feeds/posts/default/-/Kumpulan%20Askep?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
7. Selesai dan Lihat Hasilnya
NB. Untuk Kode Yang Berwarna Biru keteranganya sudah diatas, sesuaikan dengan selera kawan, kemudian untuk kode yang bercetak tebal itu adalah Judul Tab, dan Kode yang berwarna, itu adalah kode widget intuk masing - masing Tab, Silahkan Ganti atau Rubah sesuai keperluan kawan. Okreww, Sekian dari saya, semoga bermanfaat, Salam Blogging....
0 comments:
Posting Komentar