Sunday 10 March 2013

Cara Membuat Memasang Tombol Kembali Ke Atas - Icon atau tombol kembali ke atas biasa disebut Back To Top tapi berhubung saya indo tulen ea kang Zain kasih judul Cara Membuat - Memasang Tombol Kembali Ke Atas . tips dan trik ini berguna untuk memudahkan kembali ke atas dengan mudah dan cepat hal ini tentunya menjadi daya tarik yang sangat efisien bagi pengunjung, kemarin saya juga share Trik Cara Membuat Link di Kolom Komentar itu juga ga' kalah menariknya sob,,, kita bisa pasang link pada kotak atau kolom komentar. kembali kebahasan sesuai dengan judulnya Cara Membuat - Memasang Tombol Kembali Ke Atas kita langsung ketutorialnya dibawah ini :

1. sobat masuk template kemudian klik edit HTML jangan lupa centang Expand Template Widge.
2. Sobat Pasang kode dibawah sebelum kode </body>
<!-- Strat scroll -->
<style type='text/css'>
#OW-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:120px;background-color: #696969;background-color: #A9A9A9;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;
,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:10px;right:15px;cursor:pointer;color:#000000;text-decoration:none;border:1px solid #C9C9C9;}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {$.fn.scrollToTop = function() {$(this).hide().removeAttr(&quot;href&quot;);
if ($(window).scrollTop() != &quot;0&quot;) {
$(this).fadeIn(&quot;slow&quot;)}var scrollDiv = $(this);$(window).scroll(function() {if ($(window).scrollTop() == &quot;0&quot;) {
$(scrollDiv).fadeOut(&quot;slow&quot;)} else {
$(scrollDiv).fadeIn(&quot;slow&quot;)}});
$(this).click(function() {
$(&quot;html, body&quot;).animate({scrollTop: 0}, &quot;slow&quot;)})}
});$(function() {
$(&quot;#OW-StoTop&quot;).scrollToTop();
});</script>
<b><a href='#' id='OW-StoTop' style='display:none;'>Kembali Ke Atas </a></b>
<!-- End scroll -->


Dengan Kode script diatas hasilnya seperti pada blog ini atau seperti gambar dibawah ini :


Keterangan !!!!

width:120px : Ini merupakan kode sebagai perintah lebar Kotak Tulisan atau baground
#A9A9A9 : kode warna untuk baground
10px : adalah jarak dari bawah
15px : untuk jarak dari kanan
#C9C9C9 : kode warna untuk tulisan atau teks
Kembali Ke Atas : tulisan atau teks tombol, bisa sobat ganti dengan Back To Top

 
3. eitz,,,, jangan diSave dulu siapa tau scripnya g sesuai,
4. sobat pratinjau terlebih dahulu, jika berhasil maka langsung Di SAVE. Ok
5. Jangan lupa Tinggalkan Pesan.
6. Jika berhasil bersyukurlah dapat ilmu baru. hehehe

Demikian Cara Membuat - Memasang Tombol Kembali Ke Atas di Blog , semoga bermanfaat dan tunggu Kang Zain Update tutorial. Hehehe

0 comments:

Post a Comment