Tips Membuat Navigasi "Back To Top" Blogspot

Tips membuat navigasi "Back To Top" Blogspot dengan mudah dan works tenan. Navigasi atau tombol back to top sangat berguna untuk kemudahan pengunjung dalam explorasi konten website atau blog kita, dimana jika terdapat konten yang terlalu panjang, pengunjung tidak perlu capek untuk menscroll berulang-ulang hanya untuk sampai ke header website atau blog.

Biasanya ketika pengunjung sudah sampai di akhir sebuah artikel, jika tidak ada related artikel atau social media share atau ads, pengunjung malah akan kebingungan ingin melakukan apa, dan akhirnya pengunjung lebih memilih untuk move on menekan tombol exit. Jadi dengan adanya kombinasi fitur yang tepat, ini akan jadi sumber dollar yang tepat dimana ada ads, ada related artikel, dan tombol back to top.

Related Article - Tips Anti Plagiat, Menonaktifkan CTRL+U Blogspot

Ok, Langsung saja ke tahap implementasi :

1. Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
2. Pilih menu "Template"
3. Pilih "Edit HTML"
4. Gunakan CTRL+F, Cari kode ]]></b:skin>
5. Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>
   
   
   #scrolltop{
       padding:5px;
       position:fixed;
       bottom: 5px;
       right: 5px;
       cursor:pointer;
   }


6. Kemudian gunakan CTRL+F, Cari kode </head>
7. Kalo sudah ketemu, monggo copy kode Javascript dibawah ini, dan paste tepat diatas kode </head> 
   
   
   <script src='https://googledrive.com/host/0By-e_j-W4HZ1S0dwRTJLOHhyOE0' type='text/javascript'></script>
   <script language="javascript"> $(window).ready(function(){ $('#scrolltop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>


8. Gunakan CTRL+F, Cari kode </body>
9. Kalo sudah ketemu, monggo copy kode Javascript dibawah ini, dan paste tepat diatas kode </body> 
   
   
   <a href="#" id="scrolltop"><img src="URL Icon Agan" alt="Back To Top" title="Back To Top" /></a>

Related Article - Tips Membuat Animasi Images Artikel Blogspot

Trakhir agan tinggal ganti text yang merah dengan url icon back to top agan kemudian klik Save untuk menyimpan perubahan. So, demikian artikel tentang tips membuat navigasi "Back To Top" Blogspot kali ini, semoga bermanfaat. :)

› Read More

Tips Membuat Related Posts Thumbnail Blogspot

Tips Membuat Related Articles / Posts dengan image atau thumbail Blogspot dengan mudah, simple, tanpa repot, dan works tenan. :) Sebelum lanjut kita kupas dulu sebentar definisi dan fungsi related post itu, Related Posts / Articles adalah sebuah komponen atau widget yang digunakan untuk menampilkan artikel-artikel secara acak yang ada dalam sebuah blog. fungsi dari related artikel sendiri adalah memudahkan pengunjung blog untuk melihat-lihat artikel kita yang lain, dan menjaga agar berlama-lama berada di blog kita. Itulah sebabnya mengapa related post selalu ditempatkan di akhir sebuah artikel, secara psikologi ketika pengunjung selesai membaca sebua artikel sampai akhir, biasanya si pengunjung kebingungan ingin melakukan apa, sedang untuk mengklik home dan mencari-cari artikel lain kemungkinannya sangat kecil, malah seringkali pengunjung lebih memilih move on ke web lain. :'(

Related Article - Tips Membuat Social Media Share Artikel Blogspot

Kali ini membuatnya dengan bantuan linkwithin, widget related post yang diberikan cukup bagus, dan menarik, jadi agan tidak perlu repot lagi mikirin masalah codingan, tinggal copy paste aja.

Ok, Jika sudah paham, kita lanjut ke tahap instalasi, berikut langkah-langkahnya:

1. Kunjungi web www.linkwithin.com
2. Jika tampilannya seperti ini, maka isilah form sesuai data agan



3. Jika muncul tampilan seperti ini, klik link Install Widget





4. Langkah terakhir, cek dulu apakah sesuai dengan data agan. Jika textarea Edit Content: dan atau Edit Template: kosong, ulangi lagi langkah 2 jika belum diclose/klik back di browser. Jika tidak memungkinkan monggo ulangi lagi dari awal. :p





5. Tekan Add Widget, dan lihatlah hasilnya

Apakah ada yang aneh, belum puas sampai disini. Jika related postnya muncul di Hompage / halaman utama, mungkin agan bisa mencoba solusi ini jika ingin menampilkannya hanya di akhir artikel saja.

1. Copy script yang di Edit Content saja. Kalo sudah klik add widget tadi, berarti cari di bagian Layout sidebar.
2. Masuk ke menu Template, klik Edit HTML
3. Gunakan CTRL+F, cari kode <data:post.body/> , 
4. Jika terdapat 2 atau 3 <data:post.body/>, maka PASTE script linkwithin yang agan copy tadi ke yang nomor 2 atau nomor 3, coba-coba saja mana yang cocok.
5. Ini step tambahan saja: Jika menggunakan template blogger yang Simple biasanya kodenya yang ketiga itu seperti <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
6. Jika demikian, sisipkan saja script linkwithin agan setelah <data:post.body/> tapi masih didalam kode yang merah.
7. Kemudian klik  Save, (terus yang di sidabar tadi hapus saja).

Related Article - Tips Membuat Animasi Image Artikel Blogspot

Demikian artikel tentang Tips Membuat Related Posts Thumbnail Blogspot kali ini, semoga bermanfaat. :)

› Read More