CARA MEMBUAT MENU MULTI TAB DI BLOG


CARA MEMBUAT MENU MULTI TAB DI BLOG...
...Menu Multi Tab ini biasanya digunakan pada blog yang kontennya sudah padat.. jadi bisa menghemat ruang .. 3 in 1 widget jadinya...tinggal klik tabnya saja untuk berpindah-pindah ke isi menu tab berikutnya... didalam widget multi tab ini pada tiap-tiap tab-nya bisa kamu sematkan kode script Buku Tamu (Tab 1), Kode script Daftar isi (Tab 2), dan Kode Script Blogroll (Tab 3) atau terserahlah sesuai keinginan Shobat...
.... Pahami langkah-langkah cara membuatnya berikut ini ;

A. Menyisipkan Kode Script Menu Multi Tab di Kode HTML Template Blog

1. Seperti biasa.. Login ke Blogger > Rancangan > Edit HTML ( Biasakan centang expand template widget )..
2. Lalu Copy kode script dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/
3. Dan Paste kan sebelum kode ]]></b:skin> ...seperti contoh dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/

]]></b:skin>


4. Kembali ke Wigdet Edit HTML... Copy lagi kode dibawah ini...

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5. Paste kan lagi sebelum kode </head>
    Maka akan menjadi ...seperti contoh dibawah ini...


<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

</head>
6. Jika sudah selesai dan benar, sesuai dengan langkah-langkah diatas.. maka klik Simpan Template...

B. Menambahkan Widget Menu Multi Tab di Elemen Halaman Blog
1. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript... ( Silahkan letakan widget Menu Multi Tab ini di bagian halaman blog yang kamu inginkan )...
2. Lalu Copy kode script dibawah ini...
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
<a>GANTILAH NAMA MENU TAB 1 INI</a>
<a>GANTILAH NAMA MENU TAB 2 INI</a>
<a>GANTILAH NAMA MENU TAB 3 INI</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
ISI MENU TAB 1 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 2 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 3 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
3. Jika sudah.. Simpan  blog Shobat  dan lihatlah hasilnya...

Read more »
Diposting oleh Unknown di 17.10 0 komentar

 

Tips merubah background Sidebar

 Tips merubah background Sidebar

Sidebar biasanya berada disebelah kanan atau kiri postingan artikel. Tidak jauh berbeda dengan merubah background blog, untuk mengganti background sidebar ini kita juga akan meng-utak-atik kode css-nya.

Langkah-langkahnya :
  • Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
  • Pilih ‘TATA LETAK’
  • Klik "Pilih Edit HTML"
  • Silakan anda download terlebih dahulu Template anda klik "Download Template Lengkap" sebelah kanan atas ( menjaga jika template anda kacau dan mengembalikan ke template semula)
  • (gunakan Ctrl + F ) Anda cari kode css seperti di bawah ini atau yang mirip dibawah ini :
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
  • Jika kita perhatikan kode diatas, kita tidak menemukan kode backgroundnya, Seandainya anda menemukan kode yang seperti diatas, anda perlu menambahkan kode backgroundnya seperti : background-color : #CCCCCC ; dan kode diatas akan berubah seperti :

#sidebar {
width: 226px;
float: $endSide;
background-color : #CCCCCC ;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

  • Silakan Anda ubah Kode warna backgrgroundnya, sesuaikan dengan keinginan anda (untuk kode warna HTML silakan anda lihat DISINI)
  • Kalau warna background sdh sesuai dengan keinginan, klik simpan template 
  • Selesai
  • Semoga sukses.


Read more »
Diposting oleh Unknown di 17.08 0 komentar

 
 
Support : Klenak-Klenik Androids
Publis by Klenak-Klenik Androids