Cara Membuat Related Post Unik di Bawah Postingan Tanpa Merubah HTML Template

Pernahkah anda membuka suatu situs lalu dibawahnya terdapat tampilan menu bergambar yang menandakan related post atau postingan terkait. Menarik bukan, dikarenakan juga tampilannya cukup bagus dan menarik dengan adanya gambar thumbnail .
Ini juga merupakan salah satu trik SEO agar pengunjung melihat , tertarik dan akhirnya mengklik tautan artikel tersebut.
Related post ini akan terisi dan berubah otomatis tanpa anda harus mengaturnya lagi. Membuatnya pun sangat mudah , tanpa harus mengatur ngatur lagi rancangan HTML.

Bagaimana cara membuat artikel terkait / related post bergambar di bawah postingan ?

1. Pergilah ke situs Linkwithin

2. Isi form yang tersedia . Isi alamat email anda , masukan alamat blog anda , pilih platform blog yang anda gunakan . Lalu pada "widht" pilih berapa jumlah post yang ingin anda tampilkan .
Perlu diperhatikan, jika blog anda memakai background warna hitam dan teks berwarna cerah silahkan checklist pilihan " My blog has light text on a dark background " , tapi jika background anda berwarna putih biarkan saja pilihan itu. Setelah selesai pilih "Get Widget"

3. Lalu anda akan masuk ke sebuah halaman, klik saja "instal widget" , dan anda akan masuk ke menu rancangan blog anda

4. Nanti secara otomatis akan ada widget baru yang terpasang pada menu rancangan template anda yaitu Linkwithin , biarkan saja , lalu jangan lupa SAVE template anda sebelum keluar

5 . Selesai sudah, jika cara yang anda lakukan benar maka akan muncul hasilnya pada postingan blog anda seperti ini :

OKK. Selamat Mencoba Yaaaa
klo ada yang mau di tanya komen jaaaa OKK...

Cara Membuat Widget Melayang Pada Pojok Kanan Blog

Gara-gara melihat widget melayang pada blog sobat saya akhirnya saya tertarik bikin tutorial kayak gini. Bukan berarti saya jago yah. Kebetulan saja saya tau yang bagian ini.

Sebagai contoh hasilnya yaa google+ saya yang melayang pada pojok kanan bawah blog ini yang dapat anda lihat pada blog ini. Mau tau cara buatnya baca tutorial ini yaaa. klo mau buat widget melayang tutorial dasar nya ada di bawah ini:

1. Login ke Blogger
2. Pilih blog anda dan pilih tab "Tata Letak" (ini ga tau kalo bahasa inggris tertulisnya apa :D)
3. Cari widget yang ada code shoutmix atau cbox-nya (Sebenarnya widget apa aja yang tipenya HTML/JavaScript) kemudian > klik "edit"
Kalo ga ada, silahkan klik "Tambah Gadget" > Cari "HTML/JavaScript" > Kosongkan "Judul" > Isi "Konten" dengan kode pada nomer 4.
4. Kemudian akan muncul dialog. Tambahkan kode berikut dalam kotak dialog widget.

<style type="text/css">
.melayang {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: black;
color: white;
margin: 10px;
padding: 20px;
}
</style>
<div class="melayang">
Ini adalah widget melayang. Tutorialnya bisa didapatkan <a href="http://economoy.blogspot.com">disini</a> :D
</div>

5. Kemudian Klik Simpan.

6. Nah lihat blog anda dibagian bawah kanan akan muncul widget yang melayang :)

NB: tulisan warna merah dapat anda ganti dengan link gambar ataupun widget yang mau anda pasang.

Untuk mengatur posisinya, anda dapat merubah bottom bisa diganti dengan top, kemudian left dengan right. Kemudian angka 0 nya bisa diganti dengan 100px. Kemudian baris margin: 10px bisa dihapus

top: 100px;

left: 0; 

Ini berarti 100pixel jaraknya dari top dan 0 dari left. begitu seterusnya anda bisa gunakan kreativitas anda disini

Sementara untuk warnanya bisa disesuaikan dengan kemauan anda dengan mengedit background-color dan color untuk tulisannya.

Mungkin itu saja yang dapat saya shere kan klo kurang paham tinggalkan komentar jaa yaa sob??

Cara Membuat Google+1 Melayang pada Pojok Kanan Bawah Blog

Saya terpancing membuat Tutorial ini karena saya melihat blog sobat saya yang membuat widget seperti ini. Akhirnya saya pun memulai trik pembuatan widget ini walaupun sempat gagal tapi akhirnya saya pun berhasil. Karena widget ini sangat penting kita pasang pada blog kita karena dengan memasang widget google+1 ini maka kita dapat mempromosikan postingan kita lebih cepat di google klo banyak yang memberi +1 pada postingan kita. 

Baiklah mari kita mulai saja cara pembuatannya :

1. Login ke dashboard blogger

2. Masuk ke tab "Tata Letak"

3. Lalu pilih tambah Gadget lalu pilih tambah "HTML/Javascrip"

4. Masukan kode dibawah ini pada kotak dialog yang ada : 

<style type="text/css">

    .melayang {

    position: fixed;

    bottom: 0;

    right: 0;

    width: 130px;

    background-color: black;

    color: white;

    margin: 10px;

    padding: 20px;

    }

    </style>

    <div class="melayang">

    <g:plusone expr:annotation='data:annotation' expr:href='data:blog.canonicalHomepageUrl' expr:size='data:size' source='blogger' width='250'/>

    <script type='text/javascript'>

      window.___gcfg = {&quot;lang&quot;: &quot;<data:language/>&quot;};

      (function() {

        var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;;

        po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;;

        var s = document.getElementsByTagName(&#39;script&#39;)[0];

        s.parentNode.insertBefore(po, s);

      })();

    </script>

    </g:plusone></div>

 5. Kemudian Pilih Save atau Simpan dan lihat blog anda

 NB: tulisan merah di atas dapat anda ganti dengan scrip lain yang anda inginkan ada bila anda ingin merubahnya untuk info lebih jelasnya baca postingan saya yang satu ini.

Oke selamat mencoba ya sob semoga berhasil??

Cara Membuat Widget SMS Gratis

Cara membuatnya : Widget Sms Gratis

1. Login blogger

2. Rancangan, elemen laman, tambah gadget, html/java script

3. Copas kode di bawah ini :

 <iframe name="I2" src="http://sms-online.web.id/widget"style="border: 2px solid rgb(255, 255, 255);" frameborder="0" height="238" scrolling="no" width="97%"> not support</iframe><br /><small><center><a href='http://economoy.blogspot.com' rel='nofollow'>Make Widget</a></center></small><br />

yang berwarna Biru silahkan ganti sesuai keinginan 97 (lebar) 238 (tinggi)
Simpan..............

Selamat mencoba

Membuat Menu Auto-Hide ( Spoiler )

Hampir sama dengan postingan saya disini, kali ini akan menulis bagaimana membuat menu auto-hide yaitu menu yang bisa dikenal sebagai spoiler berguna untuk menyimpan / menyembunyikan sebuah gadget/widget yang dirasa terlalu menonjol dan menyebabkan blog kita terlalu besar agar blog kita terlihat rapi, jadi nantinya spoiler hanya akan muncul jika di klik oleh mouse dan sembunyi ketika diklik lagi.

Cara untuk membuatnya adalah :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script yang ada di bawah ini :

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
TARUH SCRIPT / KONTEN KALIAN DISINI
</div></div></div></div></div>

Keterangan :
+ Tulisan yang berwarna merah bisa Anda ganti sesuai keinginan.
+ Yang berwarna hijau adalah tempat untuk meletakkan konten / script widget Anda.

4. Klik Simpan dan selesai.

Selamat mencoba dan semoga bermanfaat ...

Cara Membuat Chat Room Pada Blog

Yang di maksud disini adalah chat room seperti mIRC, dan bukan shoutbox seperti kotak pesan singkat begitu.

Untuk script-script chat yang banyak tersedia di internet kan biasa nya di sediakan bagi website kita yang sudah memiliki hosting sendiri, dan biasa nya script tersebut mesti di instal dulu di tempat kita menyewa hosting, tapi..biasa nya para pemiliki web hosting memiliki aturan bahwa kita tidak boleh menginstal script-script yang terlalu memakan banyak resource seperti script IRC (chatting), namun sebenarnya ada cara lain untuk membuat chat room sendiri tanpa harus menyewa hosting VPS.Yaitu dengan menggunakan Chat room hosting 99chats.com.

 

Apa itu chat room hosting (99chats.com)? Jadi, chat room hosting itu seperti website yang sudah menyediakan script khusus yang bisa kita pasang di website kita namun tanpa harus menginstal di tempat kita hosting, kita cukup copy saja script nya (biasa nya berupa java Script) maka website kita sudah bisa memiliki chat room sendiri, dan untuk Customize nya bisa kita atur sendiri seperti warna, dan juga luas nya.

 

Untuk mencoba nya silahkan kunjungi website nya di link berikut : 99chats.com

Cara Membuat Popular Posts Dengan Efek Slide

Dilihat dari tampilannya, Popular Posts dengan menggunakan efek animasi slide memang sangat keren bila dipasang pada web atau blog kita. Sampai saat ini saya masih tetap tertarik dengan widget ini, makanya kali ini saya update kembali random post tersebut. Random post ini sudah lama saya dapatkan dari blogger senior Abu Farhan (Tanks Bang...., sukses dan tetap berkarya selalu...)

Pada update kali ini, saya sedikit merubah tampilan widget random post tersebut, biar tampil beda, saya yakin sobat blogger suka. Silahkan anda 

LIHAT DEMO

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:10px;
padding: 0px;
height:280px;
}
#spylist ul{
width:275px;
overflow:hidden;
list-style-type: none;
padding: 0px;
margin:0px;
}
#spylist li {
width:240px;
padding: 7px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:65px;
overflow: hidden;
background: -moz-linear-gradient(center left, #727273 0%, #ccc 40%,#ccc 90%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #727273),color-stop(0.40,

#ccc),color-stop(0.90, #ccc),color-stop(1, #ffffff));
border-style:solid;
border-left-width:10px;
border-color:#ddd;
box-shadow: 3px 4px 3px #797979;
-webkit-box-shadow: 3px 4px 3px #797979;
-moz-box-shadow: 3px 4px 3px #797979;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
#spylist li img {
float:left;
margin-right:7px;
margin-left:7px;
background:#EFEFEF;
border:2px solid #fff;
box-shadow: -3px 2px 2px  #000;
-webkit-box-shadow: -3px 2px 2px #000;
-moz-box-shadow: -3px 2px 2px #000;
}
.spydate{
overflow:hidden;
font-size:10px;
text-shadow: 1px 2px 2px #8EABFF;
color:#455D95;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#012EB0";
aBold = false;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "ULR BLOG ANDA";
limitspy=3
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js'

type='text/javascript'></script>
</div>

5. SIMPAN

Selamat mencoba ya...
Semoga bermanfaat..... Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

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

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script src="http://creatingwebsite.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat !

Cara Membuat Widget Atau Sidebar Blog Menjadi Dua Kolom

Membuat widget atau sidebar blog menjadi dua kolom maksudnya adalah seperti kasus blog saya ini, sobat bisa perhatikan bagaimana saya membuat satu widget menjadi dua bagian, dengan demikian  bisa membuat sidebar blog lebih hemat dan sedikit rapi.

Sobat tertarik ingin mencoba? lanjutkan..

Membuat membuat widget atau sidebar blog menjadi dua kolom sangat mudah, sobat hanya perlu menambahkan sedikit kode html. Tenang, saya tidak mengajarkan html karena sobat pasti tidak mau, yang penting bagaimana bersihnya. hehe..

Nah, dalam widget tersebut saya menambahkan kode tabel sehingga menjadi dua kolom dan diikuti script widgetnya. Adapun langkah - langkah pembuatan yang saya lakukan seperti sidebar blog saya ini adalah :

1. Pastinya sobat login ke blog --> Rancangan --> Add Gadget --> Pilih HTML/JavaScript

2. Copy kode-kode HTML berikut :

<table border="0" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 1</b></td><td align="center"><b>JUDUL 2</b></td></tr>
<tr><td align="center">KODE JUDUL 1 DISINI</td><td align="center">KODE JUDUL 2 DISINI</td></tr>
</table>
<table border="0" width="300">
<tr bgcolor="#FF6C74"><td align="center"><b>JUDUL 3</b></td><td align="center"><b>JUDUL 4</b></td></tr>
<tr><td align="center">KODE JUDUL 3 DISINI</td><td align="center">KODE JUDUL 4 DISINI</td></tr>
</table>

Keterangan :

• Perhatikan kode warna merah, angka 300 adalah lebar tabel. Sobat sesuaikan dengan lebar sidebar blog.
• Kemudian kode warna biru adalah untuk judul-judulnya, sobat bisa ganti sesuai keinginan sobat disini saya menggunakan 'statistik' dan 'alexa' SERTA 'pagerank' dan 'rantop'.
• kode yang ditandai dengan warna kuning tersebut adalah backgrounnya silahkan ganti dengan warna yang sesuai dengan warna blog sobat. LIHAT KODE WARNA HTML DISINI

3. Paste di dalam kotak HTML/JavaScript tadi.

4. Selesai, dan Save..

Jika sudah sesuai prosedur Insya Allah berhasil. Kalau sudah berhasil minta like satu, supaya gak ketinggalan info gabung juga di halaman facebook economoy :D 

Sumber Artikel: http://www.masterendi.com

Membuat Dan Mengatur Letak atau Posisi Widget Melayang

Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat widget melayang dan cara mengatur posisi widget melayang tersebut. Anda sudah tau widget buku tamu melayang ? Baca dulu biar anda tau, hehehehee disana menjelaskan bagaimana membuat buku tamu melayang, dan sekarang saya akan jelaskan untuk widget melayang dan cara mengatur posisinya.

Nahhh . . . Pertama sama jelaskan dulu bagaimana membuat widget melayang :  

• Pertama Masuk ke Edit HTML di Tata Letak, jangan lupa centang expand widget template, lalu cari code ]]></b:skin> kalau sudah ketemu copy dan paste code berikut tepat diatas code ]]></b:skin> tadi :

#melayang {
position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

• Kalau sudah dipaste, silahkan anda Save Template, dan langsung menuju Elemen Laman dan Tambah widget, masukan code berikut :

<div id='melayang'>

Taruh code widget anda disini

</div>

• Kalau sudah dimasukan silahkan anda Save, dan lihat hasilnya.

Nahhh diatas tadi saya sudah menjelaskan bagai mana membuat widget melayang, sekarang saya akan menjelaskan bagaimana mengatur posisi widget melayang tersebut :

• Perhatikan code CSS berikut yang sudah anda copy di atas code ]]></b:skin> tadi:

#melayang {
position:fixed;_position:absolute;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Code yang akan anda gunakan untuk mengatur posisi widget melayang tersebut :

top:0px; left:0px; untuk posisi pojok kiri atas.top:0px; right:0px; untuk posisi pojok kanan atas.bottom:0px; left:0px; untuk posisi pojok bawah kiri.

bottom:0px; right:0px; untuk posisi pojok bawah kanan.

Buku Tamu Tersembunyi Di Bagian Kanan Blog

Keren....!!Buku Tamu tersembunyi alias tidak terlihat merupakan trik yang sangat bermanfaat bagi peblogger, karena selain dapat menghemat tempat juga dapat menambah keindahan dan........ yang tidak kalah pentingnya dapat mengurangi beban blog dalam proses loading ( Begitu kata sumber tips ini yaitu :LOVE IS BEAUTY)

Sebenarnya tips ini bukan hanya buku tamu yang dapat anda tampilkan, tapi bisa berupa image atau widget lainnya. Silahkan anda pilih mana yang menurut anda paling sesuai untuk ditampilkan.

Langkah-langkah yang dapat anda lakukan cukup mudah yaitu :

1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak.
3. Pilih Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda + pada HTML/JavaScript.
6. Copy kode dibawah ini kemudian paste pada kolom yang tersedia.
   
   

   <style type="text/css">
#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzBn-_3fNR42ztbdv3PvWajIKQFHnFo9GbD4EUOuVO5x9clKcsA3Jt6TRaSGLZti3DUTPoyGrKmu-dkkqxTgFNhz3Yy1gokp8-gQCuIhAwmuk9opleejBtfHoqXlnswq1NyChCTMBJdKH9/s128/guestbook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#FFFFFF;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
MASUKAN KODE BUKU TAMU/WIDGET DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
   



7. Klik tombol Simpan.
8. Lihat Pemapilan Blog anda sekarang.

Keterangan :

1. height:150px; merupakan tinggi dari widget, silahkan anda atur.
2. width:30px; merupkan lebar dari widget, silahkan anda atur.
3. border:2px solid #1300F2; merupakan ketebalan dan warna garis/border, silahkan anda ganti.
4. background:#FFFFFF; merupakan latar belakang widget, silahkan anda ganti.
5. background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') dapat anda ganti dengan image hasil kreasi anda sendiri.
6. MASUKAN KODE BUKU TAMU/WIDGET DISINI merupakan tempat meletakan kode buku tamu maupun kode-kode lainnya yang ingin anda tampilkan.
7. [close] dapat anda ganti dengan kata tutup atau kata apa saja yang searti.

Selamat mencoba, semoga bermanfaat