Sama halnya dengan hidden Chatbox, Tutor kali ini menggunakan Jquery Effect dimana tampilan yang dibuat akan lebih menarik. Dan ditambah lagi, tombol untuk membuka Chatboxnya bisa di letakkan di sidebar blog sobat. Untuk lebih jelas kita bisa lihat Previewnya. Silahkan Klik Tombol ChatBox di bawah ini dan lihat apa yang akan terjadi...
Jika sobat tertarik, maka lakukan langkah dibawah :
1. Pertama-tama Copy kode dibawah ini (Dan edit keterangannya) :
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>Note : : Silahkan ganti dengan icon gambar Chatbox yang kamu suka
<style>
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:auto;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
.simple_overlay .close {
background-image:url(http://flowplayer.org/tools/img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
#triggers img {
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
</style>
<div id="triggers">
<img src="http://nicki-maraj.com/chatbox.png" rel="#mies1"/>
</div>
<div class="simple_overlay" id="mies1">
YOU FRAME HERE</div>
<script>
/basics.html#document_ready
$(document).ready(function() {
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
});
</script>
<script>
// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
// use Overlay API to gain access to crucial elements
var conf = this.getConf(),
overlay = this.getOverlay();
// determine initial position for the overlay
if (conf.fixed) {
css.position = 'fixed';
} else {
css.top += $(window).scrollTop();
css.left += $(window).scrollLeft();
css.position = 'absolute';
}
// position the overlay and show it
overlay.css(css).show();
// begin animating with our custom easing
overlay.animate({ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done);
/* closing animation */
}, function(done) {
this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
$(this).hide();
done.call();
});
}
);
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
</script>
: Masukkan Kode Chatbox yang bisa didapat di Cbox.ws , Shoutmix.com, dll (Bisa juga diisi dengan kode item / Objek lain selain chatbox seperti Iklan, Animasi Jam, dll)
2. Setelah selesai di edit, dari Dashboard blogger, pilih Tata Letak - Elemen Halaman.
3. Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
4. Paste script yang telah sobat edit tersebut di form HTML/Javascript Lalu Simpan.
Dan lihat hasilnya ...
Nah, sudah berhasil ?, Alhamdulillah .... Itu effectnya benar-benar cool banget dah sob, keren banget tampilan saat munculnya. Dan jika tutorial ini bermanfaat bagi sobat jangan lupa kasih +1 nya ya sob, ehehehhehee ....
.:: HAPPY BLOGGING SOBAT ::.
4 comments:
Bagus, klo saya sedang berburu code floating ads, tapi dengan jquery, bentuknya sudah hampir mirip dengan yang di atas, cuma klo di atas muncul klo di klik, yang saya butuhkan muncul sendiri tanpa di klik.
mantap mas bro... saya mau coba juga di blog-blog saya yg lainnya, hehhee
Keren brow// :D
keren2 gan tutorial nya,, kalo untuk merubah ukuran comentar ada ga ya
:: Komentar Anda ::
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!
:) :( :X =(( :-o :-/ :-* :|
8-} ~x( :-t b-( :-L x( =))
[[ Form Komentar Klasik ]]