Kali ini saya akan share cara Membuat Buku tamu yang ada di samping kanan blog..Menggunakan chat Box yang bisa muncul dan menghilang (wah...ribet bilangnya...^_^ yang jelas kayak yg ada di blog saya ini..)
Banyak situs yang menyediakan layanan Chat Box Misalnya Shoutmix, chatbox, cbox, oggix, shoutcamp dan masih banyak lagi yang lainnya..tinggal pilh sesuai selera..
langkah-langkahnya :
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcU-eCwon5icaO4EROc1FLdm2B6n1oVUc4L94E3JPpAWO0OPsB6dX6-E7fAx_GvcAsPNeam4i-uOGSkt7tbq6HagWMBUhy_WsNs2dthmOtePc1Oa9S98eOpYB-1PrNmPIr95qBG-0yC-7/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
<br/>
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<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></div></div>
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
gantilah dengan kode script ShoutMix atau ChatBox milik Sobat.
Jika ada yang kurang jelas silahkan tinggalkan komentar.
Banyak situs yang menyediakan layanan Chat Box Misalnya Shoutmix, chatbox, cbox, oggix, shoutcamp dan masih banyak lagi yang lainnya..tinggal pilh sesuai selera..
langkah-langkahnya :
- Login ke blog sobat
- Pilih Tata letak
- Tambah Widget (Pilih Widget HTML/JAVASCRIPT)
- Copy code di bawah ini ke dalam Widget :
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcU-eCwon5icaO4EROc1FLdm2B6n1oVUc4L94E3JPpAWO0OPsB6dX6-E7fAx_GvcAsPNeam4i-uOGSkt7tbq6HagWMBUhy_WsNs2dthmOtePc1Oa9S98eOpYB-1PrNmPIr95qBG-0yC-7/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
<br/>
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<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></div></div>
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
gantilah dengan kode script ShoutMix atau ChatBox milik Sobat.
Jika ada yang kurang jelas silahkan tinggalkan komentar.
Baca Juga yang ini Sob...:
Tutor Blogger
- Cara Membuat Scroll pada Label Blog
- Daftar Social Bookmark Indonesia | Tutor Blogger
- Cara Mendapatkan PageRank Dari Google
- Penyebab Link in Alexa Tidak Bertambah atau No Data
- Perbedaan Menjiplak dan Meng-Copas di Blogger
- Membuat Scroll Pada Kotak Komentar Blog
- Membuat Kotak Komentar Thread Keren di Blogger
- Widget Penting yang harus ada di Blogger.
- Cara Cepat dan Mudah Mengetahui Blog Dofollow Atau Nofollow
- Tips Mendapat Backlink Berkualitas Permanent.
- Penyebab Jumlah Pelanggan Feedburner Naik-Turun
- Membuat Recent Coment avatar di Blogger
- Membuat Random Post di Blogger.
- Pentingnya Blogwalking | Tips SEO
- Di Halaman Awal/Home Blog Hanya Muncul 1 Postingan.
- Cara Scan Blog dari Virus atau Malware
- Memasang Meta tag Otomatis di setiap halaman Blog.
- Cara Membuat Link Sumber Otomatis ketika Artikel Blog di Copas.
- Berkomentar Bisa Dapat Backlink Untuk Optimasi SEO
- Membuat Thread Balas/Reply Komentar Blogger.
- Cara Membuat artikel Terkait dengan Scroll di bawah postingan Blog.
- Cara Membuat Tombol Shared (Daun) keren di Blog.
- Cara Menampilkan Navbar Blog secara Auto Hidden.
- Cara Membuat Box Followers Twitter di Blog.
- Cara Merubah Tulisan Posting Baru, Beranda, Posting Lama dengan Gambar.
makasih sekali informasinya sangat membantu untuk yang masih belum memasang, nice share
BalasHapussiip" Makasih juga Dah Berkunjung.... :)
BalasHapus
BalasHapusmaksudnya apa ya,..
itu panahnya ngikut gk mas ?
BalasHapusMantabsss bro.. makasih tipnys...
BalasHapusmaksudnya ganti dengan kode chat box itu gmn ya??
BalasHapuskunjungan perdana mas trmksih mas dah berbagi kapan2 mampir mas di tempat ane biar tambah rame mas blog ane gak sepi kayak sawah hehehe
BalasHapusbos . . ikutan yaaa, makasih sebelumnya.
BalasHapusrada bingung mas, nyari url chat box yg mana sih????
BalasHapusterimakasih gan atas tutorialnya !! salam kenal
BalasHapusmakasih kawan.. sharenya
BalasHapusMakasiiihh kakak :)
BalasHapusmakasih, berkunjung balik yah, komen juga di buku tamunya :D
BalasHapusvisit me..
BalasHapushttp://bani-fahmi.blogspot.com