Buku Tamu Slide

20.19Ryan Zahriel

Artikel kali ini adalah pesanan dari sahabat bloger saya, dia meminta saya agar di buatkan tutorial "Buku Tamu yg nempel di dinding" hehehehhe!! Sebenarnya punya saya itu hasil nyolong di blog orang kemudian saya rombak sendiri Cuman nyuri kodenya duank :D hehehhehe, tetapi lupa nyolongnya dimana (kalau ada yang merasa sebagai penciptanya saya berterima kasih dan minta maaf juga heheh )..,,


Fungsi dari buku tamu yang nempel di dinding ( cicak kaleeeee ) atau saya menamakannya Buku Tamu Slide adalah untuk mengirit tempat di blog sobat. Langsung saja cekidot dot

1. Seperti biasa pertama-tama login ke Blog sobat, jangan ke Facebook.

2. Klik tata letak atau layout.

3. Pilih Edit HTML.

4. Sebelum memulai pengeditan alahkah baiknya sobat membackup data sobat terlebih dahulu, caranya pilih Download Template Lengkap.

5. Cari kode ]]></b:skin> agar lebih mudah sobat bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.


6. Copy code di bawah kemudian paste di atas kode ]]></b:skin>


#chat{position:fixed; top:20px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:191px; width:53px; float:left; cursor:pointer; background:url(URL TOMBOL) no-repeat;}
.chatbox{float:left; border:0px solid #; background:  #faeba8 ; padding:25px 0 50px 25px}
.chatbox a {text-decoration: none;}

Catatan :
  • Tulisan yang berwarna orange adalah jarak atas kotak surat 
  • Kode yang berwarna hijau adalah lebar dan tinggi dari tombol slide
  • Tulisan yang berwarna merah itu diganti dengan url gambar tombol milik sobat
  • Tulisan yang berwarna biru adalah kode warna dari background Buku tamu milik sobat, jika sobat ingin menggantinya dengan gambar tinggal menyisipkan kode ini url(link background sobat letakkan disini)no-repeat
7. Simpan Template.

8 Kembali ke Elemen Laman.

9. Pilih HTML/JavaScript Tambah , kemudian masukkan kode di bawah.

<script type="text/javascript">
function showHidechat(){
var chat = document.getElementById("chat");
var w = chat.offsetWidth;
chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
chat.opened = !chat.opened;
}
function movechat(x0, xf){
var chat = document.getElementById("chat");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
chat.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
}
</script>
<div id="chat">
<div class="chat-click" onclick="showHidechat()"> </div>
<div class="chatbox">
<center>


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="300" height="145" src="http://www7.cbox.ws/box/?boxid=334764&amp;boxtag=9wsmre&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#00681A 1px solid;border-bottom:0px" id="cboxform"></iframe></div>
<div><iframe frameborder="0" width="300" height="400" src="http://www7.cbox.ws/box/?boxid=334764&amp;boxtag=9wsmre&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#00681A 1px solid;" id="cboxmain"></iframe></div>
</div>
<!-- END CBOX -->


</center>
<span style="float:right">
<a href="javascript:showHidechat()">
close
</a></span>
</div></div>

<script>
var chat = document.getElementById("chat");
chat.style.right = (30-chat.offsetWidth).toString() + "px";
</script>

You Might Also Like

0 komentar

Popular Posts

  • Membuat Read More
    Untuk membuat Read More seperti pada postingan saya,supaya artikel yang tampil lebih pendek ikuti langkah – langkah berikut: 1. Sign in di...
  • Download Adobe Photoshop Terbaru Source
    Siapa yang tidak tahu Adobe Photoshop? Software image editing yang satu ini sangat terkenal, sampai-sampai (mungkin) hampir semua orang per...
  • Cara Mengganti Cursor Di Blog
                             Bingung ni mau posting apa... tapi kemarin ada yang nanya tentang bagaimana cara ganti cursor di bloger, jadi ter...
  • Tampilan Baru Follower
                     Ternyata blogger melakukan update terhadap follower karena beberapa hari yang lalu follower saya berkurang jumlahnya da...
  • Buku Tamu Slide
    Artikel kali ini adalah pesanan dari sahabat bloger saya, dia meminta saya agar di buatkan tutorial " Buku Tamu yg nempel di dinding...
  • Cara Membuat Menu Tab View
    Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn...
  • Cara Mengenal Wireless Hacking Dan Segala Triknya
                       Wi-Fi (Wireless Fidelity) Wi-Fi (Wireless Fidelity) adalah koneksi tanpa kabel seperti handphone dengan mem...
  • Pengertian GPS
    GPS (Global Positioning System) adalah sistem satelit navigasi dan penentuan posisi yang dimiliki dan dikelola oleh Amerika Serikat. Sist...
  • Membuat Simbol Yahoo Messenger di Blogger
    Untuk membuat simbol Yahoo Messenger di blogger yang menunjukkan status anda dan pengunjung bisa langsung chat dgn anda, langkah-langkahny...
  • Cara Mengecek Berat Loading Blog
       Untuk melengkapi postingan saya mengenai 4 Faktor Yang Membuat Pengunjung Merasa Tidak Nyaman pada point 1 yaitu mengenai Loading...

Flickr Images

Formulir Kontak