×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Tombol Bookmark di Blogger

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.

Cara Membuat Tombol Bookmark di Blogger
(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.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

1 Response to "Cara Membuat Tombol Bookmark di Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With