Cara Membuat Widget Shoutbox Melayang Dan Tersembunyi Di Kanan Blog

Oke pertama-tama sobat blogger harus punya dulu Shoutbox baru bisa menggunakan widget ini.
Bagi sobat blogger yang belum punya Shoutbox : Klik Di Sini

Lengkapi pendaftaran kamu, kemudian copy kode yang sudah di sediakan dari web tersebut, selanjutkan masukkan kode script (html) "Shoutbox" kamu ke blog.

Lanjut...

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.

2. Klik Tambah Gadget.

3. Pilih Gadget HTML/Javascript.

4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style type="text/css">
#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/AVvXsEidbq_hqVlkiYcYXnuMfhSPI6yaEr-fzlr-S_kt1VxNu0mP8yyhLp_22Mlk0k2gc8YaMfniLeGd1YUDqlJohw5SIzW5FcV3XSOOkGSgIkVn4szKWk-ZkSjqfaLU7Co2pUuMH20N02WE2ZA/s1600/Cara+Membuat+Widget+Shoutbox+Melayang+Dan+Tersembunyi+Di+Kanan+Blog.gif') 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">

Masukkan Kode Shoutbox Kamu Di Sini

Terimakasih Atas Kunjungan
<br />
Dan Pesannya.
<br />
<br />
<div style="text-align:right">
<a href="http://tutorial-blog-eno.blogspot.com/2014/11/cara-membuat-widget-shoutbox-melayang-dan-tersembunyi-di-kanan-blog.html">[Mau Seperti Ini?]</a>><a href="javascript:showHideGB()">
[Tutup.]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :

• top:50px; adalah jarak ukuran, silahkan kamu ganti dengan selera yang kamu mau.
• height:100px; adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
• width:30px; adalah ukuran lebar, silahkan kamu ganti dengan selera yang kamu mau.
• Warna fuchsia adalah URL gambar, silahkan kamu ganti dengan selera yang kamu mau.
• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Ikuti perintah Kode yang saya beri warna red.
• Warna aqua adalah teks, silahkan kamu ganti dengan selera yang kamu mau.

5. Simpan Pengaturan.

Rekomendasi Untuk Kamu :

• Kumpulan Gambar Tab "Shoutbox"

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

BACA JUGA ARTIKEL TERKAIT DI BAWAH INI :

Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Saat ini kamu sedang membaca artikel tentang Cara Membuat Widget Shoutbox Melayang Dan Tersembunyi Di Kanan Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke. <a href="http://tutorial-blog-eno.blogspot.com/2014/11/cara-membuat-widget-shoutbox-melayang-dan-tersembunyi-di-kanan-blog.html" target="_blank">Cara Membuat Widget Shoutbox Melayang Dan Tersembunyi Di Kanan Blog</a>

[Mau Seperti Ini?]