Bagi teman-teman mungkin merasa blognya terlalu banyak memasang widget/gadget sehingga kelihatan acak-acakan. Sekarang sudah ada solusinya, anda bisa mencoba widget yang satu ini dan bisa anda lihat contohnya pada gambar dibawah ini.
Jika anda tertarik, mari lanjutkan baca tutorialnya.
Jika anda tertarik, mari lanjutkan baca tutorialnya.
Langsung saja saya beritahu caranya, yaitu ikuti langkah-langkah berikut ini.
1. Pastikan anda sudah login ke blogger, jika belum maka klik saja disini.
2. Pilih rancangan (template) pada blog yang anda inginkan
3. Pilih edit HTML
4. Beri tanda centang pada kotak disamping tulisan “Expand Template Widget”
5. Jika sudah, maka cari kode ]]></b:skin>
6. Jika sudah ketemu, maka copy paste atau letakkan kode dibawah ini tepat diatas kode pada langkah ke 5
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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: 3px 5px;
}
7. Jika sudah, selanjutnya cari kode </head>
8. Jika sudah ketemu, maka copy paste atau letakkan kode dibawah ini tepat diatas kode pada langkah ke 7
<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. Sesudah itu klik “simpan template”
10. Sekarang kita menuju “elemen laman”
11. Klik salah satu “tambah gadget” dimanapun yang anda suka
12. Setelah itu akan muncul beberapa pilihan gadget, tetapi yang harus anda pilih adalah HTML/JavaScript
13. Copy paste atau letakkan kode dibawah ini kedalam gadget yang anda pilih pada langkah 12
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
/*kode gadget untuk tab 1*/
</div>
</div>
<div class="Page">
<div class="Pad">
/*kode gadget untuk tab 2*/
</div>
</div>
<div class="Page">
<div class="Pad">
/*kode gadget untuk tab 3*/
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
14. Ganti Tab 1 sampai Tab 3 dengan nama menu pilihan anda, kemudian sesuaikan kode gadget pilihan anda kedalam /*kode gadget untuk tab masing-masing*/ dan anda juga bisa mengubah ukuran gadget sesuai dengan yang anda inginkan yaitu ganti angka pada “width: 256px;” sesuai lebar gadget yang anda inginkan dan ganti angka pada “height: 270px;” sesuai dengan tinggi gadget yang anda inginkan.
15. Jika semua proses sudah selesai, maka langsung saja klik “simpan”
16. Lihat hasilnya dengan cara klik “lihat blog”
17. Selesai
Tidak ada komentar:
Posting Komentar