Posted by : FRANS YESEKEL
Jumat, 24 Mei 2013
Banyak Orang Nanya2 sama gue cara buat buku tamu macam yang di atas, dan terpikir untuk di share aja...
Tanpa Bacod Lagi, caranya :
1.Buat dulu C-box mu KLIK SINI , tapi kalo uda ada gak usah.
2.Masuk ke blogger kalian.
3.Buat Post Baru, Kemudian Buat judulnya "GUEST BOOK" seterah apa yang mau kalian buat.
4.kemudian klik HTML yang ada di pojok kiri itu, kalo gak tau lihat gambar di bawah.
KLIK UNTUK MEMPERJELAS.
5.kemudian Pastekan Kode Di bawah ini, di bagian HTML itu.
<div style="-moz-border-radius:10px; border-radius:10px; padding:10px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBX82vUfDyzb8kxYrem2mZwBLkP-3T2EcKOhvKrPariX4vwKzYsV8kgNmz_iXvExU3goDCuLCoeGGBzj9SV-K9U8MUji8eqA522Wy_6EgWawdGqYydXwLJuZi1PylhnIHuczjdyXdDieSO/s1600/biru70.png);"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); });</script><style>/* ---------------Simple Slide panel with jQuery---------------------------------- */#panel { height: auto; background: #f90; width: auto; display: none; padding: 7px; border: #0C0; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px;}.slide { margin: 0; padding: 0; border-top: solid 4px #f90; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuHX_8ZRNDHnxXtMrggIs1Zev8AGrdfPpiYKY8zEPExplODb6aJFcSCgwh0ja5t7gdT2DUr01ar23VXHiniu4vrUxWwJrRq6C0ZYG-49fYImsnZcwiqrkUOmgySnrwKJTyVQFU7P79Wo/s1600/btn-slide.png) no-repeat center top; }.btn-slide { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKptW2P9LVnzQR2FAiWeV2TVjOCk4BI7edRzWHwNyXrRdk9CQaRjWdwl4y8wKQeFZNvTCd8F2ChI5etRo9lPBOCssQj0ge1nS33Am38XTbZnJUSGivfWsvuWxYMc3gEcnFtTACHeAl8B8/s1600/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none;}.active { background-position: right 12px;}</style><div id="panel">
<!-- Taruh Script Buku tamunya disini -->
</div><p class="slide"><a href="#" class="btn-slide">Gues Book</a></p></div>
6.Kode yang berwarna hijau itu adalah Scrip Buku Tamu Kalian.
7.Kalo rasanya uda selesai, simpan dan lihat hasilnya.
Frans Yesekel Backlinks
URL |
Code For Forum |
HTML Code |
Related Posts :
- Back to Home »
- Tips »
- Buku Tamu Slide Effect With Jquery.