Anak Rantau Inspired by Tim Vand Damme

About Me

Foto Saya
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
                 
My name Anak Rantau™
I Blogger from Indonesia. I hope all my post was useful to you all. Thank you for visiting here. Every post that I fit on my blog lets not my original work or personal, but all based on the license or permission from the author's own.

    <div style='background-color: none transparent;'></div>

My Notes

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

20 Mar 2011

Home » » » Shoutbook Melayang Dengan jQuery

Shoutbook Melayang Dengan jQuery

Sebenernya aku tak terbiasa buat postingan yang memuat tutorial blog, sedangkan ane sendiri masih taraf belajar n bisanya cuma kopas alias copy paste.
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 Script plugin 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 contoh yang asli, klik aja 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

1. LOG IN di akun blog agan.
2. Pilih rancangan HTML ( Jangan lupa klik Expand Template Widget )
3. 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 :

Secenario Css

4. 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

5. Sekarang cari
</head> 
dan masukan script jquery berikut di atas kode tadi


Penerapan Shoutbook

6. 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.

Contoh untuk gadjed HTML
Contoh untuk di tab menu
  • Shout

  • NOTE : 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

    19 komentar:

    sinalkogame mengatakan...

    terima kasih agan,,atas artikelnya,, saya coba ah,, langsung mnuju tkp..^_^

    Anak Rantau mengatakan...

    @sinalkogame.. SAMA SAMA GAN, KLO KURANG JELAS DIHARAP MAKLUM, COS ANE GA TERBIASA BUAT ARTIKEL MENYANGKUT TUTORIAL BLOG, BTW PERTANYAAN DI BLOG PUTRI TEGAL itu maksdnya apa gan.....??????

    aime mengatakan...

    blogwalking, please visit me back dear ;-) thanks..

    fffffffffff mengatakan...

    Pak admin ;;bisa gak kode itu saya terapkan di wapsite saya?? karena blog saya adalah sebuah wap yg di modifikasi mirip sebuah web?

    Anak Rantau mengatakan...

    @aime.. thnks 4 visit my home,your blog is very nice, do not be bored to visit here

    @ffffffff.. kalau di liat dari web agan kayanya sudah tak bisa tuh sebab terlalu banyak script coba az gan di pasang di blog agan siapa tau suport jika editan itu di edit oleh agan sendiri.

    ffff mengatakan...

    @Anak Rantau

    ia bang akan saya coba;;mohon bimbingannya kalau saya mengalami kesulitan :"> maklum masih new bie.

    LADIT_14CELL mengatakan...

    wah mantab ne tuutorialx..boleh di coba ne,,,

    sinalkogame mengatakan...

    mas, fb saya ada di halaman depan blog saya mas,, add ja itu... saya tiap hari ol,, tapi lewat hp mas.. kadang juga chating..

    Anak Rantau mengatakan...

    @ffff.. hehehehe sama ane jg masin new bie gan.. ni jg hasil edited n copas sana sini kok.

    @ladit_14cell.. makasih gan.. silahkan az di kopas..

    @sinalkogame.. ok nt ane add gan, klo mau agan add ini aj anak_rantau55@ymail.com (Ardhan)

    Anisayu mengatakan...

    wihhhh bagus nih, jadi ingin mencoba....

    Anak Rantau mengatakan...

    @anisayu.. silahkan sedot az aj gan.

    sinalkogame mengatakan...

    kunjungan mlm.. Saya blum sempat2 nge add fb sobat.. Nanti insya allah pasti saya add.. Krna saya ngomentari hari ni pake hp gan.. Komentar kmbali sobat..

    Klopototolia-TJ mengatakan...

    Wah keren nih, izin coba dulu mas,...

    Anak Rantau mengatakan...

    @sinalkogame.. makasih gan dah berkunjung ters di blog ane gan, tetap semangat ea gan, klo fb kmrn ane dah add nu tinggal nunggu konfir dari agan.

    @Klopototolia-TJ.. silahkan az gan jgn sungkan-sungkan..

    sinalkogame mengatakan...

    udh saya confirmasi mas.. Ia saya sng brkunjung dsini krna blognya saya suka themesny, trus yg punya blog juga ramah..
    Maaf mas cuma lwat komentar g diisi daftar chatnya, krna ol lwat hp..

    Anak Rantau mengatakan...

    @sinalkogame.. semangat gan.. n makasih dah singgah terus di home ane yg jelek lan sederhana ni.

    Kumpulan Puisi mengatakan...

    wah,, mantab ne sob artikelnya,, ane mau simpen aja deh dlu,,, mungkin di pasang di laen blog,, hehehe,, thank's sob sharenya,,

    btw, tiang pundi nggih koq jawi? whwhwhwhw,,

    Anak Rantau mengatakan...

    @Kumpulanpuisi.. makasih gan dah comen di blog ane.. moga aja artikel ini juga bermanfaat bagi siapa aj..
    btw ane gan asli pekalongan perbatasan pemalang n sory aja klo bahasa jawi ane rodo ngapak jeh..

    Belajar Komputer mengatakan...

    mnatap gan. slam kanal ya...

    Silahkan Utarakan Saran Dan Kritik Agan Di Foam Comment Di Bawah ini, Sebelumnya Ane Ucapin Terimakasih Atas Kunjunganya Di Home Ane Yang Sederhana Ini. Untuk Comment Ane Saranin Menggunakan Open ID Atau Nama/URL Alamat Blog Agan.

    Posting Komentar

    My Friends


    © 2010 Anak Rantau Comunitas - Design By : Insight - Modifed By : ( DuCthMen )