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...
Tampilkan postingan dengan label Guest Book. Tampilkan semua postingan
Tampilkan postingan dengan label Guest Book. Tampilkan semua postingan

Buku Tamu Dengan Efek Fade Out

Posted by Galang 22 April 2011

Kemarin baru saja memposting Cara Membuat Buku Tamu Show/Hide dari Atas. Dan tutorial kali ini saya akan membahas tentang Buku Tamu dengan Efek Fade Out. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP
  1. Seperti biasa, masuk ke akun blogger anda
  2. Setelah Log In, masuk ke Rancangan
  3. Kemudian Tambah Gadget
  4. Selanjutnya pilih HTML/Javascript
  5. Tidak perlu diberi judul, langsung saja copy kode di bawah ini dan letakkan pada kotak kontent
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red"><right>Close [X]</right></b></a></div>

<!-- KODE BUKU TAMU -->

</td></tr></table>
</div>
<script src="http://dl.dropbox.com/u/24368183/buku%20tamu%20fade%20out.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://dl.dropbox.com/u/24368183/CHATBOX.png" />
</a>
</div>


  1. Klik Simpan

Anda bisa mengganti gambar dengan sesuka hati anda
Pilih yang menarik 

http://i278.photobucket.com/albums/kk82/yudispa/buku-tamu.png


http://i890.photobucket.com/albums/ac103/triwardhana/buku.png


http://i890.photobucket.com/albums/ac110/arary/buku-tamu_03-1.gif


http://i387.photobucket.com/albums/oo318/cem_ply/tabs2.gif


http://i761.photobucket.com/albums/xx253/edoute/Bukutamufedoce.png


http://i581.photobucket.com/albums/ss252/muhibfaisal/tabs.gif

7 comments
Read More

Cara Membuat Buku Tamu Show/Hide dari Atas

Posted by Galang 7 April 2011


Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas".  Gak Pake Lama langsung aja Dach...

  1. Login blogger
  2. Rancangan, Tambah Gadget,  Html/java script
  3. Dan Simpan kode berikut  : 
Kode Script
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">


<!-- Simpan Kode cbox atau shoutmix nya disini -->


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-E5AN1cLbhLVaHac_YYlYrCs9pbMZlZ0oykPODIomp5tPh624XfMx-xlZX-WPpDI_hbFejQKONoCrNFolpwVoj2i-6JpB6YN-2tbF-33_pN7LN5tPdLlaWy27ZXXYdjxSSWE0hEY9PWrm/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Catatan:
Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini
<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png"  /></a>
</div>

Sekian Terima Kasih...

20 comments
Read More

Cara Membuat Shoutbox Melayang Dengan Light Effect jQuery

Posted by Galang 26 Maret 2011

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

20 comments
Read More

close