Architektur Blogger Headline Animator

Architektur Blogger

rss

November 2, 2010

Membuat Tab View Menu Pada Blog


Untuk menghemat tempat pada blog anda, tab view menu sangat efisien dan Ukuran yang relatif kecil tapi bisa memuat banyak space atau winget di dalamnya. dalam proses pembuatan Tab View Menu ini menggunakan code HTML yang cukup panjang dan sedikit menyusahkan. namun tidak jadi masalah sebab kali ini code HTMLnya suda di sediakan di posting kali ini.

Untuk itu di anjurkan agar sobat sebaiknya simak code-code HTML secara baik-baik cara membuatnya, dan yang paling penting adalah Backup Template sobat terlebih dahulu.



Mari kita lihat cara membuatnya:

1. Login dulu ke blog sobat
2. Masuk ke menu Perancangan
3. Pilih Edit HTML dan jangan lupa beri tanda centang pada Expand Template Widget
4. Cari code </head>
5. Kemudian letakkan kode javascript berikut ini sebelum kode </head>

===================================================================================
<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>
 
===================================================================================

6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

===================================================================================

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;
}
===================================================================================

7. Kemudian Save Template sobat
8. Kemudian langkah selanjutnya sobat klik Tata Letak
9. Tambahkan sebuah Badged
10. Pilih  HTML / Javascript, dan tambahkan kode berikut kedalamnya.

===================================================================================
 
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Winget 1</a>
<a>
Judul Winget 2</a>
<a>
Judul Winget 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad"> 
code winget 1 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad"> 
code winget 2 sobat di sini <br />
</div>
</div>

<div class="Page">
<div class="Pad">
code winget 3 sobat di sini <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
===================================================================================
11. Save Winget/badged Sobat

Keterangan :
  • Untuk kode yang berwarna BIRU adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
  • Kode yang berwarna HITAM silahkan sobat isi dengan judul - judul dari menu.
  • Dan yang berwarna HIJAU, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll
Semoga berhasil.!
Terima Kasih Atas Kunjungan Anda Di Blog Ini. Jika Ingin Artikel Terbaru Langsung Di Kirim Ke Email Anda? Masukan Email Anda Untuk Berlangganan (GRATIS). Klik Tombol Suka Jika Menyukai artikel ini.
Related Posts with Thumbnails
Stumble
Delicious
Technorati
Twitter
Facebook
Reddit

5 comments:

priagoenks on 05 November, 2010 12:13 said...

sob, ane mau nanya nih. ane dari dulu buat tab view gak pernah sukses. scriptnya gak pernah sukses. yg muncul ttp listnya tab 1.1 gitu. padahal scriptnya udah ane masukin.

trs buat widget recent comments jg slalu bermasalah.

mohon pencerahannya. thanks

Arsitektur Blogger on 05 November, 2010 18:26 said...

@priagoenks
maaf sebelumnya untuk para pakar blogger, bukanya saya sok tau or sok pintar. saya juga hanya seorang blogger pemula yang ingin membagi apa yang saya ketahui.

maaf sob.! dalam pembuatan Tab View Menu itu ada 3 script yang harus di perhatikan. yaitu :

1. script pada </head>
2. script pada ]]></b:skin>
3. script pada badget HTML yang sobat tambahkan.

yang jelasnya ada di posting di atas. sobat coba saja insyallah berhasil.

kemudian masalah pada winget Recent Comment itu biasanya alamat feed yang tidak tepat. saya juga perna mengalaminya beberapa hari kmarin. pada saat saya mengganti nama feed dan URL feed saya.

sobat gunakan saja fitur yang suda di sediakan blooger seperti tambahkan winget recent comments. kemudian masukan alamat feed default sob. seperti ini:

http://www.priagoenks.com/feeds/comments/default

somoga berhasil sob.!

maaf jika ada kesalahan dalam reply comments ini

priagoenks on 06 November, 2010 05:11 said...

@Arsitektur Blogger : recent comments nya ttp gak bisa sob...mhon pencerahannya... hehe

Arsitektur Blogger on 07 November, 2010 04:04 said...

@priagoenks
ok klo ga bisa coba periksa alamat feed sobat. soalnya setau saya winget recent comment yang di sediakan blogger selalu berhasil n tidak ada masala salagi alamad feed sobat benar.

sobat bisa pake code JavaScript di bawah ini pada badget HTML/javascript yang sobat tambahkan. ini merupakan code winget recent comment sederhana

<br/><div style="overflow: auto;width: ancho;height: 200px;
text-align: left; ">

<script style="text/javascript" src="http://diesilver.googlecode.com/files/recentcommentswidgetv2.js"></script><script style="text/javascript">var a_rc=6;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="http://www.nama blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>

jika sobat ga berhasil juga balas komentnya serta lampirkan alamat feed sobat.

good luck

international pharmacy on 27 December, 2011 02:26 said...

Keep on blogging! its getting through the tough times that make you stronger and then the good times will follow, keep writing about your experiences and we should all pull together.


Post a Comment

Jangan Lupa Tinggalkan Komentar Anda..! Sebab Komentar Anda Sangat Dibutuhkan Demi Pengembangan Blog ini. Asalkan Jangan Spam Dan Komentar Yang Bersifat Menguji. Makasi Atas Kunjungan Anda Di Blog Ini. Thanks for all of you

Berlangganan via email

Ingin Artikel Terbaru Langsung ke Email anda? Masukan Email Untuk Berlangganan:


Delivered by FeedBurner

Recent Comments



Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)