Cara membuat Tombol Bookmark This Page pada setiap artikel di blog

Assalamu alaikum wr wb ?

Tombol Bookmark ini, tujuan nya adalah untuk mempermudah para pengunjung blog kita agar secara cepat untuk menyimpan halaman yang baru saja dia baca, hanya dengan sekali Klick saja, tanpa harus membuka Menu Browser dan menyimpanya sebagai Bookmark Halaman, itu kadang-kadang bagi sebagian pembaca malas untuk melakukan nya, padahal artikel tersebut sangat lah berarti bagi nya. Jadi, ini adalah salah satu usaha untuk membuat para pembaca dapat mengunjungi blog kita kembali sewaktu-waktu.

IKLAN:


Untuk cara pembuatan nya, kita akan membuat sebuah Fungsi bookmark() dengan menggunakan kode JavaScript, kemudian untuk memanggil Fungsi tersebut, cukup menggunakan perintah bookmark(); Silahkan Anda lihat Fungsi kode nya di bawah ini :

<script type="text/javascript">
function bookmark() {
title = "Blog Tutorial Desain Website - Ujang's Blog";
url = "http://www.ujang-rohidin.blogspot.com";
if (window.sidebar) {
// Mozilla Firefox Bookmark
window.sidebar.addPanel(title, url,"");
}
else if( window.external ) {
// IE Favorite
window.external.AddFavorite( url, title);
}
else if(window.opera && window.print) {
// Opera Hotlist
return true; }
}
</script>

Untuk penerapan nya, silahkan tempelkan kode di atas pada blog anda, dengan menambahkan Widget baru HTML/JavaScript, atau jika anda menggunakan Blog lain, seperti Wordpress, dll. Bisa di terapkan pada bagian <head>Disini...</head>

Kemudian, untuk memanggil Fungsi bookmark() tersebut, cukup menggunakan perintah bookmark(); pada penggunaan kode JavaScript, terserah kita mau dimana, apakah mau di buat kan Link seperti ini : <a href="javascript:bookmark();">Bookmark Now ?</a> atau bisa juga kita menerapkan nya saat memuat halaman pertama kali, dengan memasang nya pada bagian <body> seperti ini : <body onload="bookmark();">



Lalu, bagaimana cara nya agar Fungsi bookmark ini di buatkan untuk menandai halaman Postingan Blog saja, khusus nya di blogger ?

Jika anda ingin menerapkan Fungsi bookmark ini untuk menandai sebuah halaman blog atau hanya untuk Postingan blog saja, Anda perlu memasang kode nya dengan menggunakan Editor HTML, dengan merubah beberapa baris kode dan menambahkan data Post URL dan data Title URL, silahkan ikuti langkah-langkah nya di bawah ini :

Pertama-tama, silahkan anda login terlebih dahulu ke Blogger kemudian,
>> Pilih blog yang akan di edit
>> Kemudian Pilih Menu Template
>> Kemudian tekan tombol Edit HTML
>> Kemudian tekan tombol Next/Lanjut 
>> Lalu centang bagian Check Box Expand Template Widget yang ada di bagian atas Form kode sebelah kiri.

Setelah berhasil membuka Editor Template HTML, silahkan cari baris kode yang seperti ini <div class='post-body entry-content'>, dengan menekan CTRL + F pada keyboard, kemudian setelah ketemu silahkan masukan kode di bawah ini, tepat di bawah nya,  tapi sebelum nya Anda harus sudah mem Backup terlebih dahulu Template Blog Anda untuk berjaga-jaga :

&lt;script type=&quot;text/javascript&quot;&gt;
function bookmark() {
// Buat variable title dengan Judul Blog
title = &quot;<data:blog.pageTitle/>&quot;;
// Buat variable url dengan alamat Blog Post anda
url = &quot;<data:post.url/>&quot;;
if (window.sidebar) {
// Bookmark untuk Mozilla Firefox
window.sidebar.addPanel(title, url,&quot;&quot;);
} else if( window.external ) {
// Favorite untuk IE
window.external.AddFavorite( url, title);
}
else if(window.opera &amp;&amp; window.print) {
// Hotlist untuk Opera
return true; }
}
&lt;/script&gt;

Karena di dalam nya terdapat data blog yang di sisipkan pada kode JavaScript di atas maka, karakter HTML nya di ganti dengan kode ASCII, untuk menghindari Error pada template, dan jika anda ingin menggunakan Fungsi tersebut di bagian bawah Postingan maka ikut sertakan juga kode di bawah ini : .

&lt;a href=&quot;javascript:bookmark();&quot;&gt;Bookmark Artikel Ini pada Browser Anda?&lt;/a&gt;
&lt;br /&gt;

IKLAN:


Semoga tutorial ini dapat berguna bagi yang membaca nya, dan jika Anda adalah termasuk orang yang bijak, silahkan untuk memberikan LIKE pada postingan ini, atau berikan tanggapan Anda pada form komentar di bawah ini. Thank's

Posting Komentar

8 Komentar

  1. makasih sob tutorialnya, kunjungi juga blog saya di http://lintas-tutor.blogspot.com/

    BalasHapus
  2. THANKS TUTORIALNYA...
    http://kamikalakkarok-3.blogspot.com/

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. mantab bro jangan lupa kunjungin www.postkomik.blogspot.com

    BalasHapus
  5. Ga bisa ya, saya cob di blog custom di sini kak ? Mohon bantuannya. Terimakasih.

    BalasHapus
    Balasan
    1. Itu scrip ny sdh lama gan, itu brfungsi hny di browser lama untuk firefox, ie explorer, dan opera,, klo mau silahkn di update dlu kode javascript nya, disesuaikan dngan perintah yg baru2 agar brfungsi di semua browser versi yg baru,, tks

      Hapus