Tapi demi menjawab pertanyaan dari temen-temen blogger semua kali ini ane akan mengupas bagamana membuat shoutbook / buku tamu melayang, ini atas dasar gabungan dari jquery jg javascript. dan perlu di ketahui klo java script klo signal lemot kaya sekaran ini yang aku alami kadang tak bekerja tapi klo script jquery itu tak jadi masalah. oke mari kita langsung ke TKP dan apa kata temen-temen yang bertanya dan meminta bagamana cara membuat shoutbook melayang seperti Anak Rantau Comunitas atau DuCthMen gunakan.
WAAAAHHHH....!!! KEREN BGT BUKU TAMUNYA GAN...!! BTW BOLEH TAU TUH CARA BUATNYA, ATAU SAYA MINTA LINK'NYA TUTOR BUAT BUKU TAMU SEPERTI ITU GAN.
wah,, bagus bner shout mix nya mas.. saya sng,, gmna cra buatnya ni mas??? ajari dunk pleesss.
DAN MASIH BANYAK LAGI YANG BERTANYA DAN COMMENT YANG SAMA.
Tutor ini hasil dari rekayasa dari fancybox oleh web disainer Soh Tanaka, tapi sayang dalam tutor ini mengunakan bahasa inggris, jadi banyak rekan bloger yang tak mengerti karena kurang fasih dalam bahasa inggris, kaya AKU contohnya, dan sebenarnya ini script buat www.wordpress.com tapi setelah aku utak-atik akhirnya bisa juga di pasang di BLOGSPOT.Dan seperti apa hasil dari pemasangan script ini pada blog kita....?????
Silahkan teman-teman liat Di Sini dan ini Inline Modal Window w/ CSS and jQuery.
OK gak perlu panjang lebar lagi masi kita ke pokok pembahasaan kita tentang Simpel Jquery shoutbok melayang..
Secenario HTML
Untuk langkah pertama kita membuat wadah atau tempat dimana script shoutbook agan, penempatan kode ini di antara tag dan cari kode berikut ini dengan menekan Ctrl+F</body>Agan bisa meletakan di atas tag untuk cara mudahnya karena tag ini ada di paling bawah script template. Maka perhatikan kode dibawah ini :
<---- code script shoutbook disini ---->
Secenario Css
Cari kode berikut ini dengan menekan Ctrl+F]]></b:skin>Kemudian masukan kode Css brikut di atas kode tadi.
Silahkan reparasi atau edit code CSS di bawah sesuai selera agan dan perhatikan script CSS dibawah ini:
#fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none;
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#shoutbook {
bottom:15px;
position:fixed;
right:15px
}
Secenario Jquerynya
Sekarang cari</head>dan masukan script jquery berikut di atas kode tadi
Penerapan Shoutbook
Untuk pemanggilan script diatas agar bisa bekerja atau bisa tampil membutuhkan code script berikut ini yang bisa di tempatkan di elemen gadjed HTML/javascript atau juga bisa di sertakan di atas langkah pertama, atau juga bisa di letakan di tab menu agan, untuk lebih jelasnya lihat langkah berikut.
Agan bisa mengganti link gambar dengan gambar punya agan, dan perlu di ingat script ini tak sepenuhnya bekerja pada semua model template, karena mungkin sudah di modifikasi sedemikian rupa oleh author disainer itu sendiri, jadi kalaupun pemasangan script ini tak berhasil jangan menyerah untuk berkreasi karena kegagalan adalah guru yang paling berharga.
Cukup sekian penjelasan aku ini, mungkin bisa menjawab dari pertanyaan para sobat sekalian. Dan mungkin dari cara aku menjelaskan kurang di mengerti dimohon harap maklum karena aku sendiri masih taraf belajar... hehehehehe
Sepesial Thanks To
www.sohtanaka.com dan fancybox
