News Update :


Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik



Assalamu'alaikum sobat wawasanfadhitya..

Kembali kali ini saya akan sharing tentang tutorial blog, yaitu cara membuat buku tamu/guest book muncul dari atas jika tombolnya diklik. Widget ini merupakan variasi dari kebanyakan buku tamu yg hanya menetap di bagian samping halaman blog yang sangat membosankan.

Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik
Widget buku tamu ini juga sedikit berbeda dari yang biasanya. Apabila yang biasa antara tombol tulisan "Buku Tamu" dan bagian buku tamunya menyatu, kalau yang ini tidak menyatu..(Lihat Contoh)
Nah jadi kalok sobat penasaran mau bikin jenis buku tamu yang satu ini, saya telah menyediakan tutorialnya.Ayo langsung aja ke TKP!!


Langkah Pertama anda harus membuat buku tamu dulu, misal:CBOX!!
Langkah Kedua:
1.Login Blogger
2.Pilih Rancangan
3.Tambah Gadget ->HTML/JavaScript
4.Copy Pastekan kode dibawah ini:

<style type="text/css">


#at{


position:fixed;


left:0px;


z-index:+1000;


}


* html #at{position:relative;}


.attab{


height:100px;


width:30px;


float:left;


cursor:pointer;


background:url();


}


.atcontent{


float:left;


border:2px solid #999;


background: #000;


-moz-border-radius-topleft:15px;


-moz-border-radius-topright:15px;


-moz-border-radius-bottomleft:15px;


-moz-border-radius-bottomright:15px;


padding:10px;


-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;


}


</style>


<script type="text/javascript">


function showHideAT(){


var at = document.getElementById("at");


var w = at.offsetWidth;


at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);


at.opened = !at.opened;


}


function moveAT(x0, xf){


var at = document.getElementById("at");


var dx = Math.abs(x0-xf) > 25 ? 35 : 1;


var dir = xf>x0 ? 1 : -1;


var x = x0 + dx * dir;


at.style.top = x.toString() + "px";


if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}


}


</script>


<div id="at">


<div class="attab" onclick="showHideAT()"> </div>


<div class="atcontent">


<div align="center">


<div style="background:#000;">




LETAKKAN KODE BUKU TAMU SOBAT DISINI


</div>


</div>
<br />


<div align="right"><a href="javascript:void(0);"
onclick="showHideAT()"><img border="0" src="https://lh3.googleusercontent.com/-iEyQzG3PHeo/TX6lL0mJbQI/AAAAAAAAAV0/399SFMoXYkQ/s1600/CLOSE.png"
alt="close" title="Click here to Close Cbox" /></a></div>
</div></div>




<script type="text/javascript">


var at = document.getElementById("at");


at.style.top = (-200-at.offsetWidth).toString() + "px";


</script>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img
border="0" src="https://lh6.googleusercontent.com/-19uO6YoM54U/TX6lPCoD1pI/AAAAAAAAAV4/oXYF6O8rw38/s1600/guestbook.png"
alt="Guest Book" title="Click here to open Guest Book" /></img
border="0"></a></center>

5.Ganti tulisan berwarna merah dengan kode buku tamu sobat.
6.Save

nah sekian dulu ya tutorial dari saya..
Wassalam..






Anda sedang membaca artikel tentang Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik dan anda bisa menemukan artikel Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik ini dengan url http://wawasanfadhitya.blogspot.com/2012/04/cara-membuat-buku-tamu-muncul-dari-atas.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik sebagai sumbernya.

Share on :
Bookmark and Share
| | 13 comments



Artikel Terkait

13 comments:

cerita anak kost mengatakan...

wah sepertinya menarik, sayang inet saya lagi lemot nie. jadi ga maksimal melihat contohnya. tapi ntar boleh di coba ah klo ud pengen. tenkyu ya.

Fandi Adhitya mengatakan...

oke gan..

planktoon blog mengatakan...

sob,..saya nyoba klik punya kamu,tp ko' ga muncul???

Fandi Adhitya mengatakan...

@planktoon: muncul kok gan, yang diklik tuh tulisan guest book diatas arsip blog gan!

dynamicdreamz mengatakan...

A very well-written post. I read and liked the post and have also bookmarked you. All the best for future endeavors.
Hire PHP Developer

Fandi Adhitya mengatakan...

thanks guy

Blog Panik mengatakan...

wah boleh dicoba juga nih kang brooo, ane masih standar sih hehehe

Fandi Adhitya mengatakan...

silahkan gan :)

fendy thahir mengatakan...

yang buku tamunya muncul ketika mouse melintas ada ga, gan.? biar ga perlu diklik.

Fandi Adhitya mengatakan...

ada gan..silahkan ketik di google..kalau saya blm pernah post yg itu

Rudy Hartono mengatakan...

makasih sekali informasinya sangat membantu untuk yang masih belum memasang, nice share

Fandi Adhitya mengatakan...

sama2 gan

harianini sgp mengatakan...

Saya sangat berterimakasih banyak kepada EYANG WORO MANGGOLO atas bantuannya saya bisa menang togel 4D nya..saya ingin berbagi cerita kepada semuanya bahwa saya ini cuma seorang TKI dari malaysia dan saya cuma bekerja sebagai pembantu,tentunya anda tau kalau pembantu itu gajinya tidak seberapa dan saya kepengen pulang kampung tapi gaji saya tidak cukup akhirnya saya coba pinjam keteman saya,dia pun juga tidak punya uang dan saya pindah lagi keteman yang lain dia pun juga tidak punya,,akhirnya teman saya memberikan nomor telpon EYANG WORO MANGGOLO dan katanya ini paranormal sangat terkenal yang banyak membantu orang dalam mengatasi masalah,dengan penuh semangat saya langsun menghubungi EYANG WORO MANGGOLO dan ALHAMDULILLAH saya diberikan anka yang benar-benar tembus dan berkat bantuan EYANG WORO MANGGOLO saya sudah bisa berkumpul kembali dengan keluarga saya dikampung,,jika anda sangat membutuhkan bantuan..jangan anda ragu silahkan hubungi saja EYANG WORO MANGGOLO di 082=391=772=208 karna beliau meman benar-benar paranormal yang bisa dipercaya dan yang punya room terimah kasih banyak atas tumpangannya.

Komentar di: Cara Membuat Buku Tamu Muncul Dari Atas Jika Diklik

Berkomentarlah dengan sopan dan pastikan komentar anda bukan spam. Komentar spam akan dihapus.

 

Page Rank Check

Technology Blogs