Cara Membuat Tombol Bookmark di Blogger

Anirocksite.com - Pada tutorial blogger kali ini saya akan membagikan bagaimana caranya membuat tombol bookmark di Blogger.

Tombol bookmark merupakan satu hal yang sangat penting yang harus dimiliki setiap website, karna dapat memudahkan pengunjung dalam membuka kembali web tersebut tanpa harus melihat history penelusuran mereka. Sebenarnya fitur bookmark itu sudah tersedia di berbagai browser, seperti Chrome, Mozilla, Opera, IE, dan browser lainnya, namun terkadang orang tidak mengetahui apa sebenarnya fungsi Bookmark. Fungsi bookmark merupakan yang memungkinkan pengguna browser untuk menyimpan Link atau Halaman web di Browser mereka. Jika kamu menggunakan Chrome mungkin seperti gambar dibawah ini hasil bookmarknya, tepatnya dibawah kotak URL google penelusuran.

(Yang Dibawah Kotak Penelusuran itu merupakan Web yang sudah saya Bookmark)

Fitur bookmark merupakan fitur yang sangat penting yang harus kamu memiliki sebagai pemilik web atau blog. Karena dapat memudahkan pengunjung untuk menyimpan link web kamu dibrowser mereka, terutama untuk kamu yang webnya berisikan tentang Pendidikan, Teknologi, Kesehatan dan berbagai niche lainnya.

Nah itu saja yang bisa saya jelaskan sedikit mengenai bookmark, dan sekarang kita langsung saja ke Tutorial bagaimana cara membuat tombol bookmark untuk web atau blog kita.

Cara Membuat Tombol Bookmark di Blogger

Sebelum mengikuti tutor dibawah ini, pastikan template Blog kamu sudah terpasang JQuery, jika belum copy JQuery yang telah saya sediakan dibawah ini.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas </b:skin> atau </style>,

/* Button Bookmark By Anirocksite */
.bookmarkstyle{
background:#ff69b4; /* WARNA BACKGROUND */
padding:5px 10px;
border-radius:100px;
box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12);
}
.bookmarkstyle a {
color:#fff! important; /* WARNA TEKS */
text-transform:uppercase;
font:500 .875rem Roboto, sans-serif
}
.bookmarkstyle a:before{
-webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z' ></path></svg>");
margin-right: 5px; 
background-repeat: no-repeat!important; 
content: ''; 
background:#fff;
display:inline-block; 
width: 20px; 
height: 20px; 
vertical-align:-5px;
}

4. Lalu letakkan Javascript dibawah ini tepat diatas kode </body>,

<script language='javascript' type='text/javascript'>
//<![CDATA[
// Button Bookmark
$(function() {
  $('#bookmarkbutton').click(function() {
    if (window.sidebar && window.sidebar.addPanel) {
      window.sidebar.addPanel(document.title, window.location.href, '');
    } else if (window.external && ('AddFavorite' in window.external)) {
      window.external.AddFavorite(location.href, document.title);
    } else if (window.opera && window.print) {
      this.title = document.title;
      return true;
    } else {
      alert('Tekan ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D Untuk Melakukan Bookmark Website Ini.');
    }
  });
});
//]]>
</script>

5. Setelah itu copy kode tombol HTML dibawah ini dan letakkan ditempat yang kamu inginkan asalkan tombol tersebut terlihat dengan jelas,

<span class='bookmarkstyle'><a href='#' id='bookmarkbutton' rel='sidebar' title='Bookmark Website Ini'>Bookmark</a></span>

6. Terakhir simpan atau save template.

Sedikit penjelasan mengenai cara kerja tombol bookmark ini, apabila tombol nya ditekan akan menampilkan notifikasi yang berisi pesan bagaimana cara melakukan bookmark, Jadi tombol bookmark ini bukan mem bookmark secara otomatis web kamu.

Untuk lebih jelasnya silakan tekan kamu tekan tombol bookmark dibawah ini.

Bookmark
Tombol bookmark yang saya bagikan ini udah support ke beberapa browser, seperti IE, Chrome, Mozilla, Opera.

Sekian tutorial bagaimana cara membuat tombol Bookmark di Blogger yang dapat saya bagikan, dan sekali lagi untuk penempatan kode Tombol HTMLnya silahkan letak dimana saja asalkan tombol tersebut terlihat dengan jelas, dan semoga bermanfaat :D.