Celoteh Sang Galang

Blog Tempat Berbagi Tips dan Trik Dunia Blogger
English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Celoteh Sang Galang
Hanya Sebuah Catatan...
Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING

Hari ini ada sahabat Blogger yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti saya?Kali ini saya akan share bagamana cara membuat Shoutbox Melayang Dengan Light Effect jQuery yang ilmunya saya dapat dari teman saya yaitu Aziz Lamayuda. Buku Tamu kali ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini :







Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya



<!-- Start Shoutbox light effect by azis -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
$(document).ready(function() {
//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();



//Get the A tag

var id = $(this).attr('href');



//Get the screen height and width

var semahHeight = $(document).height();

var semahWidth = $(window).width();



//Set heigth and width to semah to fill up the whole screen

$('#semah').css({'width':semahWidth,'height':semahHeight});



//transition effect

$('#semah').fadeIn(1000);

$('#semah').fadeTo("slow",0.8);



//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();



//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);



//transition effect

$(id).fadeIn(2000);



});



//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#semah').hide();

$('.window').hide();

});



//if semah is clicked

$('#semah').click(function () {

$(this).hide();

$('.window').hide();

});



});
</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#wadah .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}
#wadah #azisshoutbox {

background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:56px 0 20px 5px;

}
#tutupan {

padding:2px 0 0 0;

}

</style>


<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">

<!-- Start Shoutbox -->

<div id="azisshoutbox" class="window">

SIMPAN SCRIPT SHOUTBOX KALIAN DISINI

<div id="tutupan"><input type="button" value="Close" class="close" />

</div></div><!-- End Shoutbox -->

<div id="semah"></div></div>

<!-- End of Shoutbox light effect by azis -->
</div>

5. Jangan lupa disimpan
Catatan
  • Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
  • Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
  • Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
  • untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.


untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :

http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png

http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png

http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png

http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png

TAMBAHAN :

Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,

gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)

Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<ul><center> <a href="#azisshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>


dengan kode ini :

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#azisshoutbox" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>


Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.



Semoga bisa membantu dan Semoga bermanfaat....


sumber : http://www.z33s.co.cc/2010/09/shoutbox-melayang-dengan-light-effect.html

GET UPDATE ARTIKEL MENARIK CELOTEH GALANG
Dapatkan kiriman artikel terbaru langsung ke email anda!

Artikel Terkait:

  1. Unknown Says:
  2. Mantap bos buku tamunya,makasih ya!

     
  3. Galang Says:
  4. @Er'end:ok sama2 kawan...

     
  5. YUDI SETIADI Says:
  6. mantap gan..

     
  7. Galang Says:
  8. @aneh92:thanks ya kawan dah berkunjung dan komen...

     
  9. Anonim Says:
  10. Mantap :)
    thanks ya dah di share...

    semoga sukses selalu...

     
  11. Galang Says:
  12. @berbagidisini.com:ok sob sama2...

     
  13. Wes .. makasih kk !

     
  14. Clara Lana Says:
  15. Rada ribet ya bikin shout box melayang... :(

     
  16. Galang Says:
  17. @Hanaru:ok sama2....

     
  18. Galang Says:
  19. @Clara Lana:memang rada susah sih,tpi gak salahnya kok utk dicoba...

     
  20. Anonim Says:
  21. thanks sob...

     
  22. Jeal Says:
  23. thanks.. sangat membantu ^^

     
  24. Anonim Says:
  25. Thanks gan...!
    mantap gan artikelnya

     
  26. abakrs Says:
  27. keren gan chatboxnya, mau nanya neh...button chatbox yang melayang di kanan atas kayak punya gan gimana bikinya. edit di photobucket atau ada kode yang harus dirubah lagi??? tengqiyu gan inponya

     
  28. van_rame Says:
  29. aku juga pengin tuh yang seperti di kanan atas tapi tulisannya Shoutmix dan warna biru.... aku engga bisa buat hikz :'(.
    bisa di buatin kah? hikz :'(

     
  30. Unknown Says:
  31. @Galang: ko gak fungsi za gan...

     
  32. Unknown Says:
  33. klo memasangnya melayang dikiri gmna yh gan?

     
  34. Unknown Says:
  35. wow nice info gan, terima kasih. sangat berguna bagi newbie blogger seperti saya :) nitip blog ah.. http://dp4update.blogspot.com/ divisit agan-agan semuanya hehe :D

     
  36. makasih banyak gan atas infonya,sangat bermanfaat nh
    :)

     
  37. Anonim Says:
  38. izin make sob :D

     
  39. Unknown Says:
  40. Keren Sob :D

     

Posting Komentar


close