<button class="bt5">Cara Mudah Bikin Buku Tamu Cantik Dengan Css</button>

Posted by : Stiker Jalingkut

Pada Kesempatan Kali,ini Kami Mau Berbagi Bagaimanh Cara Bikin Buku Tamu Dengan Css
Mungkin Gak Asing Lagi Buat Sobat Blogger Hampir Semuah Blogger Atau Website
Besar Di Dunia Maya Menggunakan Buku Tamu Atau Yang Di Kenal Cbox.
Tapi Kali,ini Kami Mau Merubahnya Menjadi Semangkin Cantik Hehehehe.
Terlihat Cantik Juga Pengunjungpun Suka Memberi Masukan Tau Masukan Apa Wkwkwk.
Kelebihan Css ini Di Bantu Dengan javascript Sehinga Mampu Menampilkan
Mp3 Sekalian Di Dalam Buku Tamu. Makanya Kami Namakan Buku Tamu Cantik'
Juga Pengunjungpun Betah Di Blog Sobat Gak Mau Pergi2 hehe. Denger Lagunyapun Bagus Matahariku Punya Mbk Agnes Hahahahha..

Sobat Bisa Lihat Demonya

Sobat Bisa Lihat Gambar Di Bawah Gambar Yang Belom Tersentuh Oleh Mous

Gambar Di Bawah Gambar Yang Sudah Tersentuh Mous Dia Langsung Terbuka Kaya
Mbuka Apa'y Hahahaha.

Caranya Sangat Mudah Di Demonya Ada Tulisan Buku Tamu Sobat Tinggal Klik Saja
Klik Pertama Buat Membuka Klik Ke,dua Buat Menutup Buku Tamunya

Nah Dah Taukan Caranya Sekarang Tinggal Sobat Yamg Mau Pasang Silakan
Copy Code Di Bawah ini. Tapi Sobat Masuk Dulu Pilih Tanmbah Gadget'y

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

</script>

<div class="pad">
<div>
<div>
<h1>
Buku Tamu</h1>
<p>
<img border="0" height="#" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZcBy9v1PKj-RYXiJAXdG1TgzQI-AmXdFfcAkLlubSC2nUe9zfk996qj-wYuqxo8J8GnhEqFI_qRX0E_M8dK-kiNj6fLX57VcE1Vsj4nINnzp88d5i3rGR0wxzelKpN4apjI7pUjd7Zc0/s1600/Buku+Tamu+Mas+Selladrt+4.png" style="border: 0px none; margin-top: -150px; padding: 2px;" width="#"/></p>
<p>
Buku Tamu Selladrt</p>
</div>
<div>
<div>
<p>

<iframe frameborder="0" width="260" height="285" src="http://www7.cbox.ws/box/?boxid=574586&boxtag=bzn4vg&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-574586" style="border:#000000 1px solid;" id="cboxmain7-574586"></iframe>
<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 41px; width: 260px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />
<iframe frameborder="0" width="260" height="75" src="http://www7.cbox.ws/box/?boxid=574586&boxtag=bzn4vg&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-574586" style="border:#48515A 1px solid;border-top:0px" id="cboxform6-680764"></iframe>
</p>
</div>
</div>
<div>
<div>
<p>
 </p>
<p>
Oh.......
Dengarlah matahariku, suara tangisanku.....Ku bersedih kar’na panah cinta menusuk jantungku.....Ucapkan matahariku, puisi tentang hidupku.....Tentang ku yang tak mampu menaklukkan waktu.....</p>
<p>
<img border="0" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1yRNzfWFqwnhyphenhyphenIPB11QsbBniNK6io5ysxdNX9-EDEj9loDO1j3QIkU06DNGrU2m_Fv-LcQsWzL89jpnWMOjV_3fE7Pzyt2pVC3aeW07MN_6QQCNO9s_RnjBHPfF3TM6XrhV0niGf3cK7/s320/Alam+Selladrt.jpg"  style="border: 0px none; margin-top: -210px; opacity: 0.2; padding: 2px;" width="auto"/></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="right">
<a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://sites.google.com/site/archivesiugi/home/2012/close_colorpicker.gif" alt="close" title="Klik disini untuk menutup Buku Tamu" /></a></div>
</div>
</div>
<center>
<a href="javascript:void(0);"onmouseout="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIT1BalpErNjXYHo42xi1lySTpwzStOVkG_Um8X5JB0Onaw95dg5vRvemYCzP6w6zS2I-7qIyCfgelaPHfgNRGLu_4A5PjVi3vhw1IcI-tS7SUOibyzfTDZ6m0uEGaAQs2G9ygSEMWbGX/s1600/Buku+Tamu+Mas+Selladrt+1.GIF" alt="cbox" title="OnMouseOut Untuk Masuk ke Buku Tamu" /></a></center>

<style type="text/css">
div.pad {width:600px;}
div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTpDO3fuVx6FoapUCZs3L_e4EVNKqBStlFeHlcsMxFaMp_mp2t0C8-g4JynkLBfEsdTnA914Cq3VHzBfd3wNOXf9kvwuH93fOBXXr93Z7FjDADEcnBLfd7mSf5gOqGgbtLRmRwisl4GuZ/s1600/Halaman+Utama+Selladrt.jpg);border-radius: 5px 0px 0px 5px;box-shadow: 0px 0px 40px #D4CFFC inset;
}
div.pad > div > div:nth-of-type(2),
div.pad > div > div:nth-of-type(2) div {
-webkit-transform-origin: 0 -900px;
-moz-transform-origin: 0 -900px;
-ms-transform-origin: 0 -900px;
-o-transform-origin: 0 -900px;
transform-origin: 0 -900px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(3),
div.pad > div > div:nth-of-type(3) div {
-webkit-transform-origin: 300px -900px;
-moz-transform-origin: 300px -900px;
-ms-transform-origin: 300px -900px;
-o-transform-origin: 300px -900px;
transform-origin: 300px -900px;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
}
div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}
div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;
}
div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;
-moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
}
div.pad > div:hover > div:nth-of-type(2),
div.pad > div:hover > div:nth-of-type(3),
div.pad > div:hover > div:nth-of-type(2) div,
div.pad > div:hover > div:nth-of-type(3) div
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
div.pad h1 {padding:0; margin:0; text-align:center; font:normal 42px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}
div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#D4CFFC; text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;padding:20px;}

#at{
position:fixed;
float:center;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7M2QSvPFAEJhzfYiDWO3DrbUeF7M5R5lzOtFZkvW01Oepw5LmfpndZ1uv5-8YSaQH34VJUZxPVjUMbxLNFJhOYkSGGB26ZX3tz3yoUWiG6hoJfLnuNc2cBKIMIbX0n6pQgr8cda6C5Z5K/s1600/petir.GIF);
}

.atcontent{
float:left;
border:0px solid #;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxKI6MqaOuKsAJMEmSaMJFGM1kyYzTfm0AT3VgCTnMqcAdA-Wdynl2Ec431-C2s31E0IkQ4H1S519QudvBz_d5lqHsNd6YTxSAtxsSPFqucTitiHbKa3QSNSaIBavpZo9NgKru9ENUHLd/s1600/Animasih+Selladrt+37.gif);
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
padding:10px 0 0;
-moz-box-shadow: 0px 0px 0px 0px #;
}
</style>

Sobat Tinggal Cari Code Yang Di Dalam Code Di Atas Seperti Di Bawah

http://www7.cbox.ws/box/?boxid=574586&boxtag=bzn4vg&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-574586" style="border:#48515A 1px solid;border-top:0px" id="cboxform6-680764">

Kalu Sudah Ketemu Ganti Dengan Buku Tamu Sobat
Lalu Simapn Lihat Hasilnya Jreng Hahahah.
Sekian Dulu Dari Kami Mas

{ 39 comentários... read them below or Comment }

AZLA18 Januari 2013 pukul 08.56
selamat malam genk..
Pertamax diamankan ..
ini tutorial yg oke banget genk
terima kasih sudah berbagi yah
BalasHapus
Balasan
mahbub ikhsan18 Januari 2013 pukul 09.59
kunjungan malam gan ...ajib gan ..thenks ilmu nya..
BalasHapus
Balasan
Masnady18 Januari 2013 pukul 10.59
langsung di amankan sobat.. kebetulan di blog saya belum ada buku tamunya sobat. makasih ya..
BalasHapus
Balasan
vlog media news18 Januari 2013 pukul 14.51
Wah benar-benar cantik buku tamunya mas bro... Karya yg sangat oke nih..
BalasHapus
Balasan
Anonim18 Januari 2013 pukul 16.18
saya save dlu gan, nanti mau di pke di blogku..
thank :)
BalasHapus
Balasan
Kang Muroi18 Januari 2013 pukul 17.07
kunjungan pagi nih, makasih infonya sob
BalasHapus
Balasan
Dannesya18 Januari 2013 pukul 17.23
waw mantap ini postingannya sip :D
BalasHapus
Balasan
Stiker Jalingkut18 Januari 2013 pukul 17.30
met pgi met aktivitas mbk. trmksih spot dan kunjungan mlm nya.
BalasHapus
Balasan
Asep Haryono18 Januari 2013 pukul 17.33
Wheihehiee met pagi juga mba e. Hiehiehiee ini mancapps Guestbook nya alais eh alias buku tamunya. Saya pelajari dahulu skripnya. HIHiehiee wab blognya mba e makin meriah aja nih banyak scriptnya hieiehieiee. Mantapps top 2013 nih
BalasHapus
Balasan
Arra Pena18 Januari 2013 pukul 17.47
Wah, terima kasih atas tutorial bikin cebok...eh Cbox nya, Om. :D
BalasHapus
Balasan
Asuka18 Januari 2013 pukul 17.47
Wah, sobat ini memang kreatif. . .
BalasHapus
Balasan
Penghuni 6018 Januari 2013 pukul 20.27
waduh, ada demonya jg toh, tp gak rusuh kan demonya?
hehe.. :D
siiplah, ada gak sob buku tamu yg bikin tamu jd betah..
BalasHapus
Balasan
Staff Administrator18 Januari 2013 pukul 21.21
Wah....beneran keren ....paling ajib deh pokoknya... :)
BalasHapus
Balasan
abang ichal18 Januari 2013 pukul 21.58
klo dilihat dari gambarnya sih ya itu yg dinamakan buku... bagus skali
BalasHapus
Balasan
Vpie ◥TwekzLibz◤ MahaDhifa18 Januari 2013 pukul 22.12
.. bagus banget,, namun sayang. aq udah lama gak pake chit chat. jd aq numpank tampank aja dech. he..86x ..
BalasHapus
Balasan
Masnady18 Januari 2013 pukul 22.19
siang sobbat, di lurusin dulu tangannya sob, biar bisa di pake ngeblog lagi.. kalau kritingkan susah ngetiknya wkwkkwkwkwkwk
BalasHapus
Balasan
Rizal Uye18 Januari 2013 pukul 23.51
keren mas, kalo gambar kover nya bisa di ganti gak mas?
BalasHapus
Balasan
Unknown19 Januari 2013 pukul 00.00
mau tanya nih mas,klau pakai spt di atas,loading jd berat ndak?
BalasHapus
Balasan
Unknown19 Januari 2013 pukul 01.25
kreatif sangat..terima kasih demo ini.
follow terus kamu disini dari malaysia
BalasHapus
Balasan
Yuni19 Januari 2013 pukul 04.51
bagus..tp pasti loadingnya lamaaa...hhehehe
BalasHapus
Balasan

Tambahkan komentar

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

{ 39 comentários... read them below or Comment }

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut