Posted by: KNK GO / Category:
Cara membuat Back to Top pada blog
Jika pengunjung membaca artikel di blog kita sampai jauh ke bawah sehingga saat mau kembali ke bagian atas atau top blog harus memutar roll mouse-nya sampai beberapa putaran, akan tetapi jika anda memasang button Back to Top ini sangat membantu sekali bagi pembaca, hanya dengan satu kali klik saja pembaca akan langsung di bawa ke bagian top blog anda.
Sebagai contoh saya perlihatkan di blog tips dan triks ada button Back to Top yang ada di kanan bagian bottom seperti yang ada di pojok bawah kanan blog saya ini :D.
Silahkan copypaste code widget di bawah ini dan ganti URL image yang berwarna merah dengan URL image punya anda :
<a style="display:scroll;position:fixed;bottom:5px;right:5px;"href="#" title="Back to Top"><img src="http://i34.tinypic.com/35lyjrb.gif" /></a>
Jika belum punya image anda bisa cari di google search dengan keyword ‘Icon Back to Top’ atau anda bisa membuat sendiri baca caranya disini.
Cara menempatkan widget Back to Top di blogspot
Silahkan masuk ke blogger dengan akun anda, Dashboard/Dasbor►Lay Out/Rancangan►Add Gadget/Tambah gadget - Java Script►Paste
LayOut/Rancangan klik 'Add Gadget/tambah gadget'
Pilih Gadget 'HTML /Java Script' dan klik icon + :
Copypaste widget dan klik 'Save/Simpan' :
Catatan : Dimanapun anda menempatkannya mau di sidebar kanan atau kiri atau di footer, akan tetap berada di posisi kanan dan widget ini adalah type scroll. Selesai
Dengan tips dan triks Cara mudah membuat Back to Top pada blog ini semoga dapat membantu anda. Sumber widget dari : BloggerStop.Net
Baca selengkapnya »
Posted by: KNK GO / Category:
BERITA PENTING
Untuk beberapa hari kedepan, jangan minum produk-produk dari perusahaan coca-cola seperti pepsi, tropicana juice, slice, 7up, coca cola, sprite dan teman"nya yang satu perusahaan.
Karena seorang pekerja dari perusahaan tersebut telah menambahkan darahnya yang terkontaminisasi HIV.
Acara di TransTv jam 16.00 wib tanggal 6 Desember 2011 kemarin.
sekian info dari saya, bila ada kesalahan kata mohon di maafkan terima kasih..
Baca selengkapnya »
Posted by: KNK GO / Category:
Kali ini saya akan membagi tips dan trik "Cara Membuat Chat Box Muncul Dari Atas". Gak Pake Lama langsung aja Dach...
- Login blogger
- Rancangan, Tambah Gadget, Html/java script
- 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/AVvXsEgV_i5T3PK69t3qhPUjrep2bypIc12_15yKfCCC5MhMHwSnD3OC19s7ky3aRi_G35Kx3d6tTryuxrD1tjtJVHyHYDGh53Qb_dxyOG8ZJRwuFPNDSbqXG_52gRqG8G6qrMSkcI7R4tod8kE_/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cV-1Hys_KcV0GrWoUsGLRkzN_rlIvhweP7uzqh4lLNtWJ16L5nHQWlKLuTwA7UjK8r8zQfbfXd_L-8s_rJfBTfo21vJrwj_APqU1iSMDhHH_wHObxo1EJGQZmlgJV9hw_W9Mcskgwmrw/s1600/Chatbox.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cV-1Hys_KcV0GrWoUsGLRkzN_rlIvhweP7uzqh4lLNtWJ16L5nHQWlKLuTwA7UjK8r8zQfbfXd_L-8s_rJfBTfo21vJrwj_APqU1iSMDhHH_wHObxo1EJGQZmlgJV9hw_W9Mcskgwmrw/s1600/Chatbox.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cV-1Hys_KcV0GrWoUsGLRkzN_rlIvhweP7uzqh4lLNtWJ16L5nHQWlKLuTwA7UjK8r8zQfbfXd_L-8s_rJfBTfo21vJrwj_APqU1iSMDhHH_wHObxo1EJGQZmlgJV9hw_W9Mcskgwmrw/s1600/Chatbox.png" /></a>
</div>
Semoga Berhasil.....
Baca selengkapnya »
