Cara Mudah Membuat Tombol Back to Top Keren

40

Hari-hari ini semakin banyak yang menambahkan tombol back to top pada blog atau websitenya.

Tombol ini biasanya diletakkan di bagian bawah sebelah kanan dan juga diberi efek fadein - fadeout.

Tombol ini dibuat tidak terlihat dan baru akan muncul ketika halaman di-scroll ke bawah. Tapi semuanya bisa diubah sesuai selera masing-masing.

Nah, jika sebelumnya Xceria menulis tutorial singkat mengenai cara menghapus blog blogspot, kali ini Xceria akan menulis tutorial mengenai cara membuat tombol back to top.

Sekilas Tentang Tombol Back to Top

Tombol ini berguna bagi pengunjung untuk dapat pindah ke bagian paling atas dengan cepat dan smooth atau lembut. Dengan menampilkan tombol ini, pengunjung akan lebih mudah dalam menavigasi halaman blog Anda.

Selain itu blog atau website akan terlihat lebih profesional di mata pengunjung. Langsung saja simak langkah-langkah berikut jika ingin memasangnya.

Memasang Script "Back to Top Button"

Cari kode </head>, letakkan kode berikut di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});
$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false})});
</script>

Anda bisa mengubah angka (100) berwarna merah di atas untuk menentukan kapan tombol akan muncul. Misalnya diubah menjadi 1000, maka halaman harus di-scroll lebih ke bawah agar tombol muncul.

Menambahkan Kode CSS dan HTML "Scroll to Top"

Tambahkan kode berikut di atas kode </body>

<style type='text/css' scoped='scoped'>
#ScrollToTop {z-index: 10; text-align: center; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none;}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFlaQtGzyyhmvPj2RNx0i3A6BOIhynPUPH8Ndy7z2L2YdIrE3hTeJuX5yVcokRZ_PCW-lY1FfV9Oz9G9ec1R4fr-iwgpC5IoHp2mvjoEFcnaBzMvw6eW7n5oIR2_2dHfPj8KEU0w8R1yDL/s1600/tombol-back-to-top-1.png'/></div>

Posisi Tombol Back to Top

Ubah angka (20px) berwarna merah untuk mengatur posisi tombol.

Gambar Tombol Back to Top

Untuk mengganti gambar tombol, ubah tulisan warna biru di atas dengan url tombol yang Anda inginkan.

Di bawah ini ada 6 pilihan tombol kembali ke atas yang bisa digunakan dengan gratis.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpCTQ6J2SLHnBl52ieoTw_mIxCPxh145mvZLU75dK6lTTyKlQnZfkmEQl4H8rKMQ1JJWmj8SmIMENRdH4Avm_jz82WXJuSet-GRkHJSHIEni6gNLesg3cM2T5Z_bhIQZZnKRq_kyXDDLb/s1600/tombol-back-to-top-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqfxnN6uP5RyL8u6aKaEdKSbo0WJE0bK6-qTEISMKBFCR2GiOGRuZjeMZKpDvWxUgQFo7oUlXTErfqWJa_Pmts-uEruSTQ5vBa3jZ5zMAmdIvTLoEonIb7E9Yy2MuaCAUtOWJA1Xb3hGL/s1600/tombol-back-to-top-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxo86Wrv0cj6ShYuEf4ZKrN2w3wOknn9cLr-IBEMFmpweKzXVF4ud9eKwUq_y8TNpZXTyQvNUhM_DrHcCETPhywP4w5ys5bsuuHUgN_tSR1FN5i6ze0QYtHJQOvDAn4iezpPf9cYpmHH2/s1600/tombol-back-to-top-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYbZRyJrvaz3VfQ0AiRpcZCT1HXiQu6dU4c81irO3s_vEyl-eqGtoGCP9ny_g_n5zF-S_LzXviygMUQrhZRjnPTzDGF2qPgbcaBRBdQGXfChdkbDJwDTX3wfkNkXPLoqJtbFEh5VrpFD4A/s1600/tombol-back-to-top-5.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUrOyWreiQ-p3SBqhxPG6kZPzxfSSjiiSRRIU9oVWfhGI85hjJv_t-borldWQNGRjXAUuj2Uf9r6RI6ZO-0OL3VTR46SwoxMvnqclLTUHk8PNr9GkifaCZaqhamHBuP-8vHBIV1-4ozCF_/s1600/tombol-back-to-top-6.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwLYLYd-5sIBAhS3Q29BlhQSIdIFCqc98016Szg49sxs8yJ9JutfLCo0BsW_bgrk1n5AN_pMtEDkOpDB4lKHkxik96SiWte6kFp_UiNGXw4u_x_UbNPkZu7cUX_OA-0MkE9Qfy7F5eVOR/s1600/tombol-back-to-top-7.png

Anda juga bisa menambahkan efek transparan pada scroll to top button saat hovering. Untuk melakukannya, pertama cari kode </b:skin>, lalu tambahkan kode CSS berikut di atasnya.

#ScrollToTop img {filter: alpha(50); opacity: 0.50;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}

Untuk membuat tombol dengan kreasi Anda sendiri lihat artikel tentang cara membuat kreasi tombol back to top dengan CSS.

Sekian tutorial tentang cara memasang tombol sroll to top. Semoga berguna.

Cara Mudah Potong Snippet Popular Post di Blogger

26

Sekarang Xceria akan membagikan tips seputar tutorial blogspot. Kali ini mengenai widget popular post, yaitu cara memotong snippet atau menyingkat cuplikan paragraf pada widget popular post.

Jika kita menambahkan widget popular post, pada kondisi default, deskripsi atau snippet yang ditampilkan mungkin terlalu panjang. Apalagi jika ukuran sidebar blog Anda (atau tempat di mana Anda meletakkan widget popular post) terlalu kecil.

Jika seperti itu, widget popular post Anda mungkin akan terlihat kurang rapi dan banyak memakan tempat. Apalagi jika Anda ingin menampilkan banyak posting pada widget popular posts.

Pada pengaturan widget popular post, Anda dapat mengatur apakah akan menampilkan snippet atau tidak. Tapi bloger tidak memberikan pengaturan untuk mengatur atau menentukan jumlah karakter pada snippet tersebut.

Cara Memotong Cuplikan Deskripsi Popular Post di Blogger

Untuk dapat memotong cuplikan atau snippet digunakan JavaScript. Dengan script ini Anda dapat menentukan jumlah karakter pada snippet atau deskripsi popular post di blog Anda.

Menambahkan Widget Popular Post

1. Log in ke akun blogger.
2. Pilih tab Layout (Tata Letak).
3. Klik Add a Gadget (Tambahkan Gadget).
4. Pilih Popular Posts.

Menambahkan Java Script untuk Memotong Snippet

1. Pilih Template » Edit HTML.
2. Cari kode </body>, letakkan kode berikut di atasnya.
3. 
   
   <script type='text/javascript'>
   //<![CDATA[
   $('.popular-posts ul li .item-snippet').each(function(){
   var txt=$(this).text().substr(0,70);
   var j=txt.lastIndexOf(' ');
   if(j>42)
   $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
   });
   //]]>
   </script>
   
   
4. Simpan template.

Ubah angka 70 sesuai keinginan dan lihat hasilnya pada blog Anda.

Pada widget popular post, tampilkan snippet (cuplikan).

Sekian posting kali ini mengenai cara memotong snippet popular post di blogger. Semoga membantu.

Cara Membuat Kotak Chatting Tersembunyi

25

Cara membuat kotak chatting tersembunyi. Sebelumnya sudah pernah membahas mengenai alternatif chatting bagi pengguna shoutmix. Kali ini saya akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul setelah diklik. Script yang digunakan pada kotak chatting tersebut adalah javascript. Javascript memang bisa menciptakan script-script yang hebat dan kreatif.

Di posting ini anda akan mendapatkan tutorial blog mengenai cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.

1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bagian konten.
   
   
   <script type="text/javascript">
   function showHidechat(){
   var chat = document.getElementById("chat");
   var w = chat.offsetWidth;
   chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
   chat.opened = !chat.opened;
   }
   function movechat(x0, xf){
   var chat = document.getElementById("chat");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   chat.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="chat">
   <div class="chat-click" onclick="showHidechat()"> </div>
   <div class="chatbox">
   <center>
   
   
   SCRIPT CHATTING DI SINI
   
   
   </iframe></center>
   [+]
   <span style="float:right">
   <a href="javascript:showHidechat()">
   [x]
   </a></span>
   </div></div>
   
   <script>
   var chat = document.getElementById("chat");
   chat.style.right = (30-chat.offsetWidth).toString() + "px";
   </script>
   
   
6. Simpan gadget.

CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.

1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]></b:skin> kemudian copy-paste kode css berikut di atasnya.
   
   
   #chat{position:fixed; top:25px; z-index:+1000}
   * html #chat{position:relative}
   .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
   .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
   .chatbox a {text-decoration: none;}
   
   
3. Simpan template.

Anda bisa mengubah gambar atau warna yang ada pada tulisan berwarna biru di atas sesuai dengan keinginan.

Sekarang lihat hasilnya. Semoga membantu!

Cara Menampilkan Tulisan Acak (Kata-kata Mutiara)

23

Bagaimana cara menampilkan tulisan acak? Di sini akan saya jelaskan cara menampilkan tulisan acak (random text) dengan menggunakan JavaScript.

Script ini bisa digunakan misalnya untuk menampilkan kata-kata mutiara atau kata-kata bijak untuk menghiasi blog Anda.

Langsung saja lihat kode di bawah ini!

<script language="JavaScript">
var Quotation=new Array() // jangan ubah kode ini

Quotation[0] = "Tutorial Blog";
Quotation[1] = "Bisnis Internet";
Quotation[2] = "Tips & Trik";
Quotation[3] = "Tips SEO";
Quotation[4] = "Template Gratis";
Quotation[5] = "Panduan Dasar";

var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>

Tulisan berwarna merah adalah kata-kata yang akan ditampilkan secara acak. Ubah tulisan ini sesuai keinginan Anda.

Script ini bisa diletakkan di halaman depan ataupun di setiap halaman/posting Anda. Misalkan Anda refresh halaman ini, maka tulisan di bawah akan berubah secara acak.

Sekian tutorial menampilkan tulisan acak. Selamat mencoba!