westjava27

Pada blog, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.
Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

1. Silahkan login ke blogger dengan ID sobat tentunya.
2. Tuju Tata Letak.
3. Klik Edit HTML.
4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
5. Kemudian letakkan kode javascript berikut 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 Simpan Template.
8. Langkah selanjutnya, silahkan sobat klik Tata Letak.
9. Klik Elemen Halaman dan tambahkan Gadget.
10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    <form action=”tabview.html” method=”get”>
    <div id=”TabView”>
    <div style=”width: 300px;”>
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div style=”width: 300px; height: 250px;”>
    <div>
    <div>
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>
    <div>
    <div>
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>
    <div>
    <div>
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type=”text/javascript”>
    tabview_initialize(‘TabView’);
    </script>
11. Kemudian Simpan.

Keterangan :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
• Kode yang berwarna biru silahkan sobat isi dengan judul – judul dari menu.
• Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Selamat mencoba......



Sumber: http://eritristiyanto.wordpress.com/2010/02/08/cara-membuat-tab-view-menu-blogspot/#more-874

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore bagian pertama, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond) untuk static pages pada scriptnya. Selain itu, script ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:
1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore bagian pertama untuk mengetahui mana saja yang harus dihapus.
3. Copy-paste script berikut tepat DI BAWAH (gunakan Ctrl+F):






Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari (gunakan Ctrl+F), dan GANTI dengan:










Read More >>




Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar.



Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.

4. Preview terlebih dahulu, jika sudah beres, kemudian save.



sumber: (Cara Membuat Auto Read more (Thumbnails) Blogspot V2)