Belajarblogspot News :

Cara Memasang Tab View Pada Blogspot

Written By Unknown on Selasa, 08 November 2011 | Selasa, November 08, 2011

Tab view selain berfungsi mempercantik halaman blog kita juga berfungsi untuk menghemat tempat pada halaman blog kita agar terlihat rapi. Ukuran yang relatif kecil tapi bisa memuat banyak space.

Berikut cara memasang tab view pada side bar blogspot:

langkah pertama login ke akun blogger kalian
=>>dashbord =>> rancangan =>> edit html(jangan lupa centang expand widgat).

(Jangan lupa backup template terlebih dahulu untuk menghidari kesalahan)

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.


Cari kode </head>.

Dan apabila sudah ketemu silakan copy kode di bawah ini    
   
Kemudian letakkan kode sebelum </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>

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

    
Kemudian Simpan Template.

klik rancangan =>> Klik Layout/Tata Letak =>> Elemen Halaman =>> klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan=>> Cari dan pilih HTML/Javascript    

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

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    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>

    
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 hijau, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

selamat mencoba.

Cara Memasang Google Plusone +1 Blogspot

Written By Unknown on Minggu, 06 November 2011 | Minggu, November 06, 2011

fungsi lain Memasang Google Plusone +1  di Blogspot kita adalah selain sebagai tombol share juga berManfaat mendapat hasil terbaik berdasarkan dari banyak tidaknya Google +1 yang diberikan oleh pengunjung pada blog kita.

kita bisa menempatkan tombol google +1 sesuka kita baik di bawah postingan,kotak komentar atau di Pojok Kiri, Kanan, Atas, dan Bawah blog kita.

Berikut cara memasang tombol google+1 pada blogspot:

login ke akun blogger kalian=>>
dashbord =>> rancangan =>> edit html(jangan lupa centang expand widgat).

Selanjutnya cari kode </head> atau </body>.

jika sudah ketemu copy kode di bawah ini dan letakkan sebelum kode </head> atau </body>

    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


langkah kedua copy kode di bawah ini:

    <!-- Posisi tombol +1 -->
    <div class='post-share-buttons' style='float:right;padding:4px;'>
    <g:plusone></g:plusone>
    </div>

Lalu taruh di tempat yang anda ingin kan.

klik rancangan =>> Klik Layout/Tata Letak =>> Elemen Halaman =>> klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan=>> Cari dan pilih HTML/Javascript

Keterangan:

Apabila anda ingin memasang tombol/button di bagian atas postingan:

cari kode <div class='post-body'> (gunakan Ctrl+F) dan letakan kode tersebut tepat di bawah kode <div class='post-body'>.

Jika anda ingin memasang tombol/button +1 di bagian bawah postingan. cari kode  <div class="post-header-line-1"> (gunakan Ctrl+F). dan letakan kode tersebut tepat di atas <div class='post-body'>.

Untuk mengganti posisinya +1 bisa merubah Float dengan mengganti Right (kanan) dan Left (kiri) sesuai dengan keinginan anda.

Cukup mudah bukan cara Memasang Google +1 Plusone di Blogspot.
Semoga informasi ini bermanfaat untuk anda.

Translate

 
Powered : Belajarblogspot
Copyright © 2011. BelajarBlogspot - All Rights Reserved
Template Created by Creating Website
powered by Blogger