Tempatnya Belajar dan Berbagi

Written By Unknown on Rabu, 21 Agustus 2013 | Rabu, Agustus 21, 2013

Tempatnya Belajar dan Berbagi


Membuat Tombol Back To Top Di Blogger

Posted: 19 Aug 2013 05:53 PM PDT


Membuat tombol Back to top kira-kira seperti itu judul tutorial blog kali ini. Tapi ngomong-ngomong temen-temen sudah tahu belum seperti apa sih tombol back to top itu? Kalau diuraikan dengan kalimat tombol back to top itu adalah tombol yang digunakan untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah. Kalau temen-temen mau lihat contohnya disini
Di samping itu tombol Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tombol itu. Dalam tutorial pembuatan back to top kali ini saya menggunakan jquery. Perbedaan dengan yang biasa adalah ketika kita berada di halaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada.  

Nah, jika anda tertarik untuk membuat tombol itu, di bawah ini akan saya uraikan langkah-langkah pembuatannya.
1.  Pertama login ke blogger dengan akun anda
2.  Pilih Rancangan >> EDIT HTML (centang expand template widget)
3.  Simpan kode berikut sebelum kode ]]></b:skin>
#top-link{display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:#000; color:#fff; text-shadow:1px 1px 1px #666; font-size:11px; position:fixed; right:-20px; bottom:150px; padding:5px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}
Keterangan :
  • background:#000; ---> Latar belakang/background berwarna hitam 
  • color:#fff; ---> tulisan back to top berwarna putih 
  • right:-20px; bottom:150px; ---> Posisi berada dibawah sebelah kanan 
  • -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px ---> sudut Tombol melengkung
Untuk melihat kode HTML warna silahkan lihat disini

4.  Sekarang simpan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script src='http://z33s.googlecode.com/files/kaluhur.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1, fadeSpeed: 200 }, settings); return this.each(function() { var el = $(this); el.hide(); $(window).scroll(function() { if($(window).scrollTop() &gt;= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(document).ready(function() { $(&#39;#top-link&#39;).topLink({ min: 300, fadeSpeed: 500 }); $(&#39;#top-link&#39;).click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); </script>
5.  Tahap selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Anda simpan kode berikut tepat diatas kode </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
Catatan :
Jika ketika di-klik tombol back top tidak bekerja (tidak mau kembali ke atas) anda ganti kode #top dengan # sehingga hasilnya seperti ini :
<a class="no-click no-print" href="#" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
6.  Simpan template anda, dan bisa dilihat hasilnya

Bagaimana, sulit atau gampang? Kalau sulit tanya saja sama kotak komentar di bawah. Kalau gampang tanya sama rumput yang bergoyang. Selamat mencoba dan semoga bermanfaat.

Memasang Tooltip Pada Link di Blog

Posted: 19 Aug 2013 05:54 PM PDT


Pada postingan sebelumnya saya sudah menjelaskan bagaimana kita memasang baloon tooltip pada kata atau kalimat tertentu. Bagaimana untuk memasangnya pada setiap link? Nah, itu pembahasan kali ini yaitu cara memasang tooltip pada link di blog. Jadi setiap link yang ada di dalam postingan jika cursor kita arahkan ke link tersebut akan muncul tooltip di bawahnya. Untuk pengertian tooltip sendiri sudah saya jelaskan pada postingan sebelumnya, jadi saya tidak perlu mengulangi lagi, bagi temen-temen yang belum membaca bisa dibuka dulu itu artikelnya.


Untuk membuat tooltip ini anda bisa ikuti langkah-langkah berikut :

1.  Login ke Blogger anda
2.  Pilih Rancangan
3.  Pilih EDIT HTML (centang Expand template widget)
4.  Sekarang simpan CSS berikut diatas kode ]]></b:skin>
/* start Tooltip blogger maskolis*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000000;
border:2px double #E80101;
text-align:left;
padding:5px;
min-height:1em;
-moz-border-radius:5px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px trebuchet MS,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#fff;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
/* End Tooltip blogger maskolis*/
4.  Sekarang simpan script berikut diatas kode </head>
<script src='http://milikazis.googlecode.com/files/tooltipURL.js' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/Tooltipz33s.js' type='text/javascript'/>
5.  Simpan template dan anda bisa lihat hasilnya.

Cukup itu dulu penjelasannya, jika ada yang kesulitan temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

0 komentar:

Posting Komentar