KAWAH PAPANDAYAN

Cara Membuat Buku Tamu Melayang Diblog

Cara Membuat Buku Tamu Melayang Diblog - Ini merupakan lanjutan dari tutorial sebelumnya yaitu Cara Membuat Buku Tamu Pada Blog yang mana pada tutorial tersebut membahas tentang bagaimana cara membuat Buku Tamu. Nah selanjutnya kalau sahabat sudah membuat Buku Tamu tersebut kita akan mencoba memodifikasi supaya Buku Tamu yang sudah sahabat buat bisa tampil lebih menarik.

Disini kita akan mencoba  Membuat Buku Tamu Melayang Diblog dengan posisi Buku Tamu berada disamping Blog dan tetap diam walaupun halaman blog di scroll keatas dan kebawah, untuk contohnya yang sudah saya buat sendiri silahkan sahabat lihat DISINI. Oh ea hampir lupa sebelumnya saya juga pernah membahas tentang Cara Membuat Buku Tamu Terbuka Tanpa Diklick, tutorial itu juga sama kelanjutan dari tutorial Cara Membuat Buku Tamu Pada Blog.

Baiklah mari kita mulai Cara Membuat Buku Tamu Melayang Diblog, silahkan sahabat lakukan langkah langkah dibawah ini :

1. Login ke Blogger

2. Pilih Tata Letak

3. Lalu tambahkan Gadget baru atau Widget Baru "Add Gadget"

4. Setelah itu pilih HTML/Javascript

5. Copy kode dibawah ini dan letakan kedalam Widget yang telah sahabat buat.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:142px;
width:60px;
float:left;
cursor:pointer;
background:url('http://4.bp.blogspot.com/-5hjVLVvaT70/T6lPVIf69gI/AAAAAAAAAow/JBKJCSbiClo/s1600/Nomor-Cantik.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ff8000;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 60-w) : moveGB(50-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 SAHABAT DISINI

<div style="text-align:right">
<a href="http://www.sundaboy.com/">Media Sharing</a>><a href="javascript:showHideGB()">(BUKA)</a>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
Silahkan sahabat ganti MASUKAN KODE BUKU TAMU SAHABAT DISINI dengan kode Buku Tamu milik sahabat.

Apabila sahabat mengerti kode java script silahkan untuk merubah atau memberi sentuhan lain didalam kode script diatas, tapi dimohon untuk tidak menghapus link yang ada didalamnya.

6. Simpan Template dan lihatlah hasilnya.

Nah itu Tutorial Cara Membuat Buku Tamu Melayang Diblog, semoga dapat bermanfaat. kalau terdapat kode yang salah dimohon untuk memberitahukannya melalui kotak komentar dibawah ini. sekian dan terimakasih, salam hangat dari Sundaboy.

Media Sharing | SundaBoy

Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Buku Tamu Melayang Diblog. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

11 komentar:

  1. mantap gan, izinj nyoba ya

    BalasHapus
  2. Minta bantuan like nya please ntar aku follow blog nya kalo udah like ini http://www.youtube.com/watch?v=aX6tLXftXZY

    BalasHapus
  3. Wah, keren tips cara membuat buku tamunya.. salam kenal dari saya,

    BalasHapus
  4. salam kenal gan, dan terimakasih atas tips dan tutorialnya !!

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================