Cara Membuat Kumpulan Komentar berisi Avatar

Senin, 19 November 2012 0 komentar
Kawan masih ingat dengan postingan saya tentang Cara Membuat Kumpulan Komentar Bag-III yang sekarang ini sudah tak berfungsi lagi, :x; kemungkinan W2B yang punya sudah menghapus filenya atau memindahkan tempat menyimpannya yang menyebabkan menjadi macet, tapi kawan jangan kecewa karena sekarang saya akan berbagi dengan kawan Cara Membuat Kumpulan Komentar berisi Avatar, untuk Demonya kawan bisa lihat pada Kumpulan Komentar Blog saya ini 

Cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak
  • Selanjutnya Pilih Tambah Gadget - HTML / JavaScript 
  • Copas Kode berikut kedalamnya
<style type="text/css">
ul.bbc_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.bbc_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:1px solid #999;
}
.bbc_recent_comments li .avatarImage{
padding:3px;
background:#fefefe;-webkit-box-shadow:2px 2px 2px #999;-moz-box-shadow:2px 2px 2px #999;box-shadow:2px 2px 2px #999;
border:1px solid #999;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.bbc_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.bbc_recent_comments li span{
margin-top:4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments= 25,
showAvatar   = true,
avatarSize   = 40,
characters   = 150,
showMorelink = true,
moreLinktext  = "More",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoQctdXY7PNnpbCyugA81OQKh2PlsLlo39bBFX_582cq5kOwJeT3g6fcnY8J05Q9aYlHhHjgy8XW4MoHNWCVaM7QTFkHBp-7Nv2wsgTLAMpLvUbOODTdyshdLuCeYUJccMniprqfMT5w5/s1600/avatar.png",
hideCredits     = false;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/bbc_recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://blogbego-creation.blogspot.com/feeds/comments/default?alt=json&callback=bbc_recent_comments&max-results=25"></script>


  • Silahkan ganti teks yang berwarna biru dengan URL / Link Avatar kawan 
  • Silahkan ganti teks yang berwarna merah [URL / Link saya] dengan URL / Link Blog kawan
  • Simpan Blog kawan


Cara Memasang Widget Fans Page Facebook di blog

Minggu, 18 November 2012 0 komentar
Cara Memasang Widget Fans Page Facebook di blog  - memang sangat sudah pasaran turtorialnya, tetapi kali ini saya mempunyai tutorial yang sangat gampan, mudah dan cepat.

Berikut langkah-langkah untuk memasang Fans Page Facebook di blog

Lankah Ke I :
  1. login ke akun blogger anda
  2. Pilih menu Template
  3. Klik Pada Tombol Edit HTML
  4. Klik Tombol Proses Atau Lanjutkan
  5. Jangan Lupa Download Template Lengkap Terlebih dahulu untuk mengantisifasi kesalahan dalan edit.
  6. Cari kode </head> (Gunakan Tombol CTRL + F untuk mempermudah pencarian kode)
  7. Copy kode dibawah dan letakan datas kode </head>
  8. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  9. Sekarang Klik Simpan
Langkah Ke II :
  1. Pilih Menu Tata Letak Atau Layout
  2. Klik Tambah Gadget atau Add a Gadget
  3. Pilih HTML/JavaScript
  4. Copy kode berikut
  5. <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
    .w2bslikebox div{border:none;position:relative;display:block;}
    .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
    .w2bslikebox span a{color: #808080;text-decoration:none;}
    .w2bslikebox span a:hover{text-decoration:underline;}
    </style><div class="w2bslikebox" style=""><div>

    <iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://seo-xp.blogspot.com/2012/09/cara-memasang-widget-fans-page-facebook.html">Tutorial Here</a></span></div></div>
    Keterangan :
    Perhatikan Tulisan URL PAGE ANDA ganti Dengan URL Fans Page Facebook anda (Contoh URL Fans Facebook lihat gambar dibawah)
  6. Sekarang Paste kode diatas pada box HTML/JavaScript yang sudah anda pilih tadi
  7. Klik simpan
  8. Selesai dan lihat hasilnya

Tambahkan Emoticon pada Blog

Rabu, 14 November 2012 0 komentar
Sekarang ini saya berbagi untuk kawan Blogger yang suka pernak pernik seperti emoticon pada Blog yang biasanya disisipkan dipostingan maupun pada Komentar :z; seperti pada Blog saya ini, bagaimana kawan suka, kalau kawan suka ikuti caranya sebagai berikut :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
  • Copas Script berikut dibawah ]]></b:skin> atau diatas </body> 
<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>

  • Untuk Template dengan Komentar Default / standar [Template yang belum beralih ke Thread] bisa ditampilkan pada posting dan Komentar, sedangkan Template kawan yang sudah beralih ke Thread Comment cuma bisa pada postingan saja
  • Cara pemanggilan atau penulisan :[Titik dua] Abjad/huruf kecil [a - z] ;[titik koma] tanpa spasi

:a ;   :b ;   :c ;   :d ;   :e ;   :f ;   :g ;   :h ;   :i ;   :j ;  

:k ;   :l ;   :m ;   :n ;   :o ;   :p ;   :q ;   :r ;   :s ;  

:t ;   :u ;    :v ;   :w ;   :x ;   :y ;   :z ; 

 [INGAT TANPA SPASI] 


  • Khusus untuk Template yang sudah beralih ke Thread Comment, Copas Kode berikut diatas </body> sedangkan untuk pemanggilan / penulisannya sama seperti diatas


<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed>");
theText = theText.replace(/:a;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");
theText = theText.replace(/:b;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");
theText = theText.replace(/:c;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");
theText = theText.replace(/:d;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");
theText = theText.replace(/:e;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");
theText = theText.replace(/:f;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");
theText = theText.replace(/:g;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");
theText = theText.replace(/:h;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");
theText = theText.replace(/:i;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");
theText = theText.replace(/:j;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");
theText = theText.replace(/:k;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");
theText = theText.replace(/:l;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");
theText = theText.replace(/:m;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");
theText = theText.replace(/:n;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");
theText = theText.replace(/:o;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");
theText = theText.replace(/:p;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");
theText = theText.replace(/:q;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");
theText = theText.replace(/:r;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");
theText = theText.replace(/:s;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");
theText = theText.replace(/:t;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");
theText = theText.replace(/:u;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");
theText = theText.replace(/:v;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");
theText = theText.replace(/:w;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");
theText = theText.replace(/:x;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1fvXGZblbYEDD2rIQ0mkJ0lVdFwBlIvPIVMLWNha3vP-nCOCB-puPjab5DaiEV_O_FI5bLNirnR6AtkWSyOSagmfPpEXbotcqpc6dRo68J5OHDILHBvfStukf89CgKFS5ggtKT4h0IA/s1600/buatD.gif'/>");
theText = theText.replace(/:y;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz5E1GoU89MjwoOddFW0w_z2P-1OdrvcXCxaNBtsIb61x6kaYlFm-1_RwFgaKS22LG1enMYEBLor2fHQVcxS6x4vGAhgbjNJbCicGATbsbrC00L3IYvTytqWtKc9FjPFFZcvOCt-r5zG8/s1600/joget.gif'/>");
theText = theText.replace(/:z;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLi_o0OCLfcEoqNfrx_XFhfgqJJtAoQOfsZ5PjQqNtDSqIcIeB4euzC0W5RUsS5mD014-yOVK_vbEwavBOLkQl2QK6JS5mI3Ub7qgpMxI7MbJn-BvA3hiZAMrnHqcmhksutS7-woBhibQ/s1600/xKopi.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>


  • Jangan lupa simpan Template kawan


Blogger Template Kreasi BB.2 Gratis

Kamis, 08 November 2012 0 komentar
Blogger Template yang sekarang ini saya beri nama Kreasi BB.2 untuk kawan yang ingin mencobanya dipersilahkan karena saya bagikan secara cuma-cuma alias tetap Gratis, :w; karena gratis makanya saya  minta pada kawan hanyalah kesadaran saja agar jangan menghilangkan Link yang mengarah ke Blog saya sebagai pencipta Template ini :y; 



Cara Install Template
  • Download Template Kreasi BB.2 selanjutnya Ekstrak dulu di Komputer kawan
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - pilih Cadangkan / Pulihkan 
  • Simpan Template kawan dulu untuk jaga-jaga [Unduh Template Lengkap]
  • Pilih File Kreasi BB.2 yang sudah kawan ekstrak tadi - Unggah 

          



  • Selanjutnya pilih Tata Letak untuk memindahkan Widget agar sesuai pada tempat yang kawan inginkan 

Cara Setting Template Kreasi BB.2
  • Pilih kembali Template - Edit HTML - Lanjutkan
  • Cari Header, selengkapnya sebagai berikut :


#header {height: 70px;margin:0 auto 0;}

#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}

#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt06f-kedqiPGLo6zFbhIjThPe5w2wCjCJbgsrk6SXGm9DR2V0YZLdRI9lnG6N3gqZrv1fLWyy7u950COOxiKuZJyot830pWCtkYCDqcrVTmPzU7WQH43mBSF7eU6uIL8dD6j6GUzUN3w/s320/Kreasi+BB.2.png) no-repeat 0 0;}

#header .ad {width: 400px;float: right;padding: 15px 6px 0 0;}

Silahkan ganti teks yang berwarna merah dengan Link image [Judul Blog] kawan



  • Cari <div id='NavbarMenu'> selengkapnya sebagai berikut
<div id='NavbarMenu'>
     <div id='NavbarMenuleft'>
        <ul id='nav'>   
<li><a href='http://belogbego.blogspot.com/'>BERANDA</a></li>
<li><a href='/search?max-results=500'>Daftar Isi</a></li>
<li> <a href='#'>EDIT</a>
         <ul>
         <li> <a href='#'>EDIT-a</a></li>
         <li> <a href='#'>EDIT-b</a></li>
           </ul></li>
<li> <a href='#'>PAGE</a>
           <ul>
           <li> <a href='#'>PAGE-a</a></li>
           <li> <a href='#'>PAGE-b</a></li>
           <li> <a href='#'>PAGE-c</a></li>
           </ul></li>
<li><a href='#'>LAMAN</a>
           <ul>
           <li><a href='#'>LAMAN Page #A</a>
                       <ul>
                       <li><a href='#'>Page #A-1</a></li>
                       <li><a href='#'>Page #A-2</a></li>
                       <li><a href='#'>Page #A-3</a></li>
                       </ul></li>
            <li><a href='#'>LAMAN #B</a></li>
            <li><a href='#'>LAMAN #C</a></li>
            <li><a href='#'>LAMAN #D</a></li>
            <li><a href='#'>LAMAN #E</a></li>
            </ul></li> 
<li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>       
<li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>         
</ul>
    </div>

Silahkan ganti sesuai dengan keinginan kawan, Seandainya pada Template kawan banyak menyimpan Script / HTML silahkan copas dan simpan disesuaikan agar tidak hilang  misalnya Blog Description, Keyword dan lain sebagainya
  • Jangan lupa simpan Template kawan


DipoSpace: Akademi Google Webmaster

Selasa, 06 November 2012 0 komentar

Agar para webmaster dapat membuat situs atau blog yang hebat yang memberikan nilai tambah bagi pengunjungnya, Google Webmaster membuka suatu akademi yaitu Akademi Google Webmaster. Banyak hal yang akan didapat pada akademi ini.
Baca selengkapnya Akademi Google Webmaster »

Cara Membuat Tab Menu pada Gadget

Senin, 05 November 2012 0 komentar
Melanjutkan Cara Membuat Tab Menu di Blog yang scriptnya disimpan pada Template :z; sekarang dengan cara lain yaitu langsung disimpan pada Widget yang bagi saya pribadi lebih gampang saat mau edit [setting] dibandingkan dengan yang sebelumnya :w;


Caranya sebagai berikut :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript
  • Copas Script berikut kedalamnya


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div style="width:300px; height:250px;" class="Pages">
<div class="Page">
<div class="Pad">
Tab 1 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3 - SIMPAN DISINI FILE KAWAN
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 4 - SIMPAN DISINI FILE KAWAN
</div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

  • Simpan Blog kawan :q;
  • Cara setting / Edit sama seperti sebelumnya


Cara Membuat Tab Menu di Blog

Jumat, 02 November 2012 0 komentar
Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, :y; Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog 


Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template :z;
Cara Membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template
  • Copas HTML berikut diatas ]]></b:skin>
div.TabView div.Tabs {height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ 
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ 
padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ 
border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}
div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}
div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } 
div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* 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: 5px 5px} 

  • Selanjutnya Copas Script berikut dibawah ]]></b:skin>

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

  • Simpan Template kawan 
  • Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
  • Copas Script berikut kedalamnya
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

  • Simpan Blog kawan dan lihat hasilnya

Sedikit penjelasan saya : 
Lebar Tab adalah [width:73px;] sebanyak 4 tab ditambah border:8px [1+2+2+2+1], maka lebar keseluruhannya menjadi 300px;