Cara Membuat Tab View Menu Blog di Blogspot - Kusnadi Komputer
Hi quest ,  welcome  |  sign in  |  registered now  |  need help ?
  • Tujuan dari Yayasan Sasmita Jaya adalah mewujudkan suatu sarana pendidikan yang murah dan terjangkau oleh seluruh lapisan masyarakat tanpa melupakan kualitas dari pendidikan itu sendiri
  • SMK yang memiliki kesetaraan dalam Ilmu dan Teknologi, Mampu bekerja, Ber-akhlak mulia, dan selalu Ikhlas dalam Pengabdian.
  • Layanan Hosting serta desain website, sehingga akan menjadi sebuah solusi lengkap untuk kebutuhan website bisnis anda.
  • Sajikan saat hangat dengan secangkir teh, saya percaya, Anda akan mendapat pujian dari keluarga tercinta. Selamat Mencoba.
  •  Wujudkan impian anda untuk segera HAMIL.
  •  Hanya dengan satu akses untuk pencarian dari 47.732.098 pekerjaan yang dipublikasikan oleh 70.845 situs di dunia

Jumat, 27 April 2012

Cara Membuat Tab View Menu Blog di Blogspot



AB | Cara Membuat Tab View Menu Blog di Blogspot - Salah satu mempercantik tampilan blog kita adalah dengan Membuat Tab View Menu Blog. Ada pun tujuannya Membuat Tab View Menu Blog adalah ntuk menghemat tempat, dimana tab view menu sangat efisien. Bayangkan dengan ukuran yang relatif kecil tapi bisa memuat banyak space/tempat. Oleh karena itulah AB mencoba membagi bagaimana Cara Membuat Tab View Menu Blog di Blogspot.

Contoh Tab View Menu
Kode script Cara Membuat Tab View Menu Blog di Blogspot sangat banyak sekali. Diperlukan kehati-hatian dan kesabaran ketika kita ingin Membuat Tab View Menu Blog di Blogspot. Jadi, setelah anda yakin ingin Membuat Tab View Menu Blog di Blogspot, sebaiknya Simpan dahulu template blog anda untuk menjaga-jaga saja.

Beginilah ceritanya bagaimana Cara Membuat Tab View Menu Blog di Blogspot:
1. Seperti biasa Anda harus membuka Akun Blogger anda.
2. Pilih Rancangan / design Tata Letak.
3. Selanjutnya pilih Edit HTML.
4. Pesan AB : Jangan lupa backup template anda terlebih dahulu dengan mengklik Download Template Lengkap)
5. Centang Expand Template Widget
6. Carilah kode </head> (gunakahn CTRL + F untuk memudahkan pencarian), setelah ketemu lalu Copy-lah kode javascript dibawah ini dan paste-kanlah tepat sebelum kode </head>
Klik Spoiler Berikut:
<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>
7. Setelah langkah diatas selesai, selanjutnya carilah kode seperti : ]]></b:skin> Lalu, Copy-lah kode script di bawah ini, dan pastekan tepat berada di atas kode ]]></b:skin>
Klik Spoiler Berikut:
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
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: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}
8. Simpanlah Template Blog anda. Kemudian Simpan.
9. Beralih / pilih Rancangan atau Elemen Laman Kemudian Simpan Template.
10. Tambahkan Widget / Gadget
11. Pilih yang HTML / Javascript,
12. Copylah kode script di bawah ini dan pastekan ke dalam widget/gadget baru tadi.
Klik Spoiler Berikut:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Menu 1.1 <br />
Menu 1.2 <br />
Menu 1.3 <br /> </div>
</div>
<div class="Page">
<div class="Pad">
Menu 2.1 <br />
Menu 2.2 <br />
Menu 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Menu 3.1 <br />
Menu 3.2 <br />
Menu 3.3 <br /> </div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
13. Aturlah sedemikian Rupa
14. Setelah anda selesai mengedit widget di atas, Simpanlah.
15. Simpan Template anda dan lihat hasilnya.

Catatan :
  • Silahkan anda ganti kode-kode yang di warnai biru denga ukuran sesuai keinginan anda.
  • Silahkan anda ganti kode-kode yang di warnai merah dengan warna sesuai keinginan anda
  • Untuk warna Orange, tulisan Menu1, Menu 2, Menu 3, gantilah sesuai keinginan anda. (Contoh : lihat gambar di atas, Blogger, Tips-Trik, Adsense itu Menu pada Tab yang AB buat).
  • Untuk Menu 1.1, Menu 1.2, Menu 1.3 silahkan masukkan kode script yang anda inginkan, apabila script cuma satu saja, hapus saja Menu 1.2 dan 1.3. Ingat isinya sesuaikan dengan Menu 1.
  • Untuk Menu 2.1 sampai 2.3 dan Menu 3.1 sampai 3.3 langkahnya hampir sama dengan Menu 1.1. Ingat isinya sesuaikan dengan Menunya ok.
  • Gambar di atas hanya contoh saja, jangan jadikan patokan. Silahkan Anda masukkan Gambar atau Iklan atau kode-kode widget yang menurut anda bagus dan cantik.

Tidak ada komentar:

Posting Komentar