How To Add Bookmark Hyperlink To Blog In Blogger

Bookmark biasanya digunakan oleh pembaca untuk menandai situs yang disukai atau di favoritkan untuk dibaca. Seperti yang kita ketahui bookmark merupaka fasilitas yang ada pada sebuah browser seperti google chrome, mozilla, internet explorer, opera dan aplikasi browser lainnya untuk menyimpan alamat atau nama sebuah website dan mengelompokkan alamat url sesuai dengan topik atau tema yang ditentukan sehingga pembaca tidak perlu lagi menghapal url artikel website yang begitu Panjang.

Untuk menggunakan fasilitas bookmark dengan cepat didalm berowser biasanya menekan Ctr + D untuk menambahkan url website kedalam daftar favorit yang terdapat didalam bookmark.

Langsung saja.!

Pada kesempatan kali ini saya akan memberikan sebuah tutorial yang mungkin sangat di cari-cari oleh orag-orang terutama para designer dan cloner template blogger. Saya terfikirkan membuat fitur ini karena saya melihat beberapa template blogger yang sudah banyak beredar dimana-mana, mreka menggunakan icon bookmark disetiap entry-post mereka tetapi icon tersebut bukan tombol bookmark melainkan hanya direct link yang mengarah langsung ke dalam artikel dan sangat disayangkan iconnya merupak gimik layaknya tombol bookmark.

Untuk merealisasikan gimik tersebut agar bisa menjadi tombol bookmark yang sesungguhnya silahkan ikuti cara dibawah ini dengan cara seksama agar tidak terjadi kesalahan maupun error saaat pemasangan.

Sedikit penjelasan, seperti judul postingan di atas pada fitur bookmark ini saya menggunakan system localStorage sebagai penyimpan aktifitas pengguna yang dimana sistem ini dapat menyimpan data pembaca seperti coockies ( data disimpan dalam browser ) sehingga daftar artikel favorit yang ditambah oleh pengguna tidak akan hilang meskipun di refresh atau berpindah halaman dalam satu domain.

Langkah pertama, buka blogger > Klik menu Tema > Edit HTML, Kemudan ikuti Langkah-langkah dibawh ini.

~~$ads={1}~~

Karena saya membuat fitur bookmark ini menggunakan jQuery maka saya pastikan anda sudah memasang kode jQuery di bawah tepat di atas kode </head> atau </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> {codeBox}

Langkah selanjutnya adalah salin kode css dibawah ini kemudian letakkan di atas kode ]]></b:skin> atau </style>

.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba;position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;width:100%} .pop-area::-webkit-scrollbar{display:none} .pop-area{display:flex!important;width:100%;height:100%;position:fixed;top:0;left:0;background:rgb(0 0 0 / 51%);visibility:hidden;opacity:0;transition:all 0.25s ease-in-out;z-index:999999;overflow-y:scroll} .pop-area.open{opacity:1;visibility:visible} .pop-html{background:#fff;padding-bottom:10px;display:block;margin:auto auto;width:calc(100% - 20px);max-width:500px;visibility:hidden;opacity:0;overflow:hidden;transition:all 0.5s ease-in-out;transform:scale(.5);border-radius:7px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)} .pop-area.open .pop-html{opacity:1;transform:scale(1);visibility:visible} .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#d3f6f3} .close-btn{float:right;cursor:pointer;fill:#7e7e7e} .body-content{padding:10px} .text-center{display:grid;text-align:center;grid-gap:15px} .text-center svg{margin:0 auto} .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none} .table{width:100%;border:1px solid #acdcd8;border-radius:7px;margin:5px 0;padding:5px} .table img{border-radius:4px;width:auto} .table a{text-decoration:none} .img-left{width:1px} .item-left{vertical-align:-webkit-baseline-middle;padding-right:10px} .btn-remove{cursor:pointer} .show-bookmark{color:#fff;background-color:#007bff;position:relative;top:-20px;right:10px;font-size:50%;padding:.15em .3em;display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:50%;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out} .hartomy-bookmark-btn,.btn-outline-info{position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;text-transform:uppercase;color:rgb(var(--pure-material-onprimary-rgb,255,255,255));background-color:rgb(var(--pure-material-primary-rgb,33,150,243));box-shadow:0 3px 1px -2px rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;overflow:hidden;outline:none;cursor:pointer;transition:box-shadow 0.2s} .hartomy-bookmark-btn::-moz-focus-inner{border:none} .hartomy-bookmark-btn svg{vertical-align:middle}{codeBox}

{related} $title={Related Post}

Kemudian scroll ke paling bawah cari kode </body> lalu pastekan kode javascript di bawah ini diatas kode tersebut.

<script> //<![CDATA[ /* * hartomy Bookmark * Copyright (c) 2020 https://www.hartomy.com * No Licensed & Open source Code * jQuery library */ // variable empty konten var massgEmpty = ('Daftar Artikel Favorit Belum Ada'), articleLabel = ('Semua konten'), link_articleLabel = ('https://www.hartomy.com/'); (function ($) { "use strict"; var OptionManager = (function () { var objToReturn = {}; var defaultOptions = { bookmarkIcon: 'bookmarkIcon', bookmarkBadge: 'show-bookmark', articleQuantity: 'article-quantity', affixBookmarkIcon: true, showBookmarkModal: true, clickOnAddToBookmark: function($addTobookmark) { }, clickOnbookmarkIcon: function($bookmarkIcon, konten ) { }, }; var getOptions = function (customOptions) { var options = $.extend({}, defaultOptions); if (typeof customOptions === 'object') { $.extend(options, customOptions); } return options; } objToReturn.getOptions = getOptions; return objToReturn; }()); var articleManager = (function(){ var objToReturn = {}; localStorage.konten = localStorage.konten ? localStorage.konten : ""; var getIndexOfarticle = function(id){ var articleIndex = -1; var konten = getAllkonten(); $.each(konten, function(index, value){ if(value.id == id){ articleIndex = index; return; } }); return articleIndex; } var setAllkonten = function(konten){ localStorage.konten = JSON.stringify(konten); } var addarticle = function(id, title, link, summary, quantity, borkimage) { var konten = getAllkonten(); konten.push({ id: id, title: title, link: link, summary: summary, quantity: quantity, borkimage: borkimage }); setAllkonten(konten); } var getAllkonten = function(){ try { var konten = JSON.parse(localStorage.konten); return konten; } catch (e) { return []; } } var updatePoduct = function(id, quantity) { var articleIndex = getIndexOfarticle(id); if(articleIndex < 0){ return false; } var konten = getAllkonten(); konten[articleIndex].quantity = typeof quantity === "undefined" ? konten[articleIndex].quantity : quantity; setAllkonten(konten); return true; } var setarticle = function(id, title, link, summary, quantity, borkimage) { if(typeof id === "undefined"){ console.error("id required") return false; } if(typeof title === "undefined"){ console.error("title required") return false; } if(typeof link === "undefined"){ console.error("link required") return false; } if(typeof borkimage === "undefined"){ console.error("borkimage required") return false; } summary = typeof summary === "undefined" ? "" : summary; if(!updatePoduct(id)){ addarticle(id, title, link, summary, quantity, borkimage); } } var cleararticle = function(){ setAllkonten([]); } var removearticle = function(id){ var konten = getAllkonten(); konten = $.grep(konten, function(value, index) { return value.id != id; }); setAllkonten(konten); } var getTotalQuantity = function(){ var total = 0; var konten = getAllkonten(); $.each(konten, function(index, value){ total += value.quantity; }); return total; } objToReturn.getAllkonten = getAllkonten; objToReturn.updatePoduct = updatePoduct; objToReturn.setarticle = setarticle; objToReturn.cleararticle = cleararticle; objToReturn.removearticle = removearticle; objToReturn.getTotalQuantity = getTotalQuantity; return objToReturn; }()); var loadBookmarkEvent = function(userOptions){ var options = OptionManager.getOptions(userOptions); var $bookmarkIcon = $("." + options.bookmarkIcon); var $bookmarkBadge = $("." + options.bookmarkBadge); var articleQuantity = options.articleQuantity; var idBookmarkModal = 'cart-modal'; var idbookmarkTable = 'cart-table'; var idEmptyBookmarkMessage = 'cart-empty-message'; var AffixMybookmarkIcon = 'bookmarkIcon-affix'; $bookmarkBadge.text(articleManager.getTotalQuantity()); if(!$("#" + idBookmarkModal).length) { $('body').append( '<div class="pop-area" id="' + idBookmarkModal + '">' + '<div class="pop-html">' + '<div class="head-pop"><a class="close-btn buka-tutup">X</a></div>' + '<div class="body-content">' + '<span class="table-responsive" id="' + idbookmarkTable + '"></span>' + '</div>' + '</div>' + '</div>' ); } var drawTable = function(){ var $bookmarkTable = $("#" + idbookmarkTable); $bookmarkTable.empty(); var konten = articleManager.getAllkonten(); $.each(konten, function(){ $bookmarkTable.append( '<table class="table">' + '<tbody>' + '<tr title="' + this.summary + '" data-id="' + this.id + '">' + '<td class="item-left img-left"><img width="60px" height="60px" src="' + this.borkimage + '"/></td>' + '<td class="item-left"><a href="' + this.link + '" class="btn-remove">' + this.title + '</a></td>' + '<td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-trash-fill text-danger" fill="currentColor"><path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/></svg></a></td>' + '</tr>' + '</tbody>' + '</table>' ); }); $bookmarkTable.append(konten.length ? '': '<div role="alert" id="' + idEmptyBookmarkMessage + '"><div class="text-center"><svg width="80" height="80" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" fill="#007bff"/></svg><center>' + massgEmpty + '</center><a class="btn btn-outline-info m-2" href="' + link_articleLabel + '">' + articleLabel + '</a></div></div>' ); } var showModal = function(){ drawTable(); } /* EVENT ADD TO BOOKMARK LIST */ if(options.affixBookmarkIcon) { var bookmarkIconBottom = $bookmarkIcon.offset().top * 1 + $bookmarkIcon.css("height").match(/\d+/) * 1; $(window).scroll(function () { $(window).scrollTop() >= bookmarkIconBottom ? $bookmarkIcon.addClass(AffixMybookmarkIcon) : $bookmarkIcon.removeClass(AffixMybookmarkIcon); }); } $bookmarkIcon.click(function(){ options.showBookmarkModal ? showModal() : options.clickOnbookmarkIcon($bookmarkIcon, articleManager.getAllkonten()); }); $(document).on('keypress', "." + articleQuantity, function(evt){ if(evt.keyCode == 38 || evt.keyCode == 40){ return ; } evt.preventDefault(); }); $(document).on({ click: function() { var $tr = $(this).closest("tr"); var id = $tr.data("id"); $tr.hide(500, function(){ articleManager.removearticle(id); drawTable(); $bookmarkBadge.text(articleManager.getTotalQuantity()); }); }}, '.btn-remove'); } $(document).on({ click: function() { $('.pop-area').toggleClass('open'); return false; }}, '.buka-tutup'); $(function () { var goTohartomyBookmark = function($addTobookmarkBtn){ } eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('q h=["\\B\\e\\M","\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f","\\x\\y\\f\\g\\C\\k\\y\\k\\y\\F","\\N\\z\\g\\i\\k\\e\\j\\G\\C\\x\\e\\e\\f\\j\\g\\i\\f\\C\\x\\k\\m","\\H\\z\\A\\r\\k","\\F\\y\\H\\z","\\s\\t\\s","\\s\\t\\O","\\s\\t\\P","\\z\\g\\i\\k\\e\\j\\G\\n\\e\\e\\f\\j\\g\\i\\f","\\s\\t\\Q"];q D=[h[0],h[1],h[2],h[3]];(o(b,c){q d=o(a){R(--a){b[h[5]](b[h[4]]())}};d(++c)}(D,S));q u=o(a,b){a=a-I;q c=D[a];T c};$(u(h[U]))[h[9]]({\'\\x\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':u(h[6]),\'\\g\\r\\r\\A\\t\\n\\e\\e\\f\\j\\g\\i\\f\\J\\p\\e\\m\':!I,\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)},\'\\g\\r\\k\\E\\i\\v\\l\\l\\w\\m\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){V[u(h[8])](u(h[7]),a)},\'\\p\\B\\A\\p\\f\\w\\m\\v\\l\\l\\K\\e\\n\\e\\e\\f\\j\\g\\i\\f\':o(a){L(a)}})',58,58,'||||||||||||||x6F|x6B|x61|_0x6a0a|x72|x6D|x74|x64|x6E|x42|function|x63|var|x66|x30|x78|_0x3889|x41|x4F|x62|x75|x68|x69|x6C|x2D|_0x4117|x65|x70|x79|x73|0x0|x49|x54|goTohartomyBookmark|x67|x2E|x33|x32|x31|while|0xd6|return|10|console'.split('|'),0,{})) }); var MyBookmark = function (target, userOptions) { /* PRIVATE */ var $target = $(target); var options = OptionManager.getOptions(userOptions); var $bookmarkBadge = $("." + options.bookmarkBadge); /* EVENT TARGET ADD TO BOOKMARK */ $target.click(function(){ options.clickOnAddToBookmark($target); var id = $target.data('id'); var title = $target.data('title'); var link = $target.data('link'); var summary = $target.data('summary'); var quantity = $target.data('quantity'); var borkimage = $target.data('borkimage'); articleManager.setarticle(id, title, link, summary, quantity, borkimage); $bookmarkBadge.text(articleManager.getTotalQuantity()); }); } $.fn.hartomyBookmark = function (userOptions) { loadBookmarkEvent(userOptions); return $.each(this, function () { new MyBookmark(this, userOptions); }); } })(jQuery); //]]> </script> {codeBox}

~~$ads={2}~~

Selanjutnya salin kode HTML dibawah ini bebas dimana saja, tapi untuk mencobanya silahkan taruh di dalam kode header atau wrapper blog kalian. HTML di bawah ini berfungsi untuk menampilkan jumlah post yang dimasukkan kedalam bookmark

<div class="alert-warning"> <h1>Percobaan Membuat Bookmark Artikel <div style="float: right; cursor: pointer;margin-top: 20px;"> <span class="buka-tutup"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" /></svg><small><span class="show-bookmark"></span></small></span> </div> </h1> </div> {codeBox}

Langkah terahir pada tutorial ini adalah meletakkan tombol untuk menambahkan daftar kedalam bookmark, sebenarnya kode dibawah ini bebas ditaruh dimana saja seperti post entry maupun popular post, untuk peletakan kode HTML ini disemua template tidak sama tergantung dari struktur penulisan kode HTMLnya. Namun pastikan kode HTML dibawah ini harus berada didalam kode post-content yang dimana kode ini berada didalam elmen <article tujuannya agar id-post, title-post dan data image bisa terbaca dengan benar.

<button class="hartomy-bookmark-btn" expr:data-link="data:post.url" expr:data-id='data:post.id' expr:data-title='data:post.title' data-quantity="1" expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")'>boorkmark <svg width="24" height="24" viewBox="0 0 24 24"><path d="M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#fff" /></svg></button>{codeBox}

Demo/button

Mungkin itu saja yang dapat saya sampaikan menganai cara pembuatan bookmark ataupun daftar favorit didalam blogger, jika ada yang kurang jelas bisa ditanyakan melalui kolom komentar dibawah ini. Jika artikel ini bermanfaat silahkan dibagikan ke grup maupun komunitas kalian. Salam terakhair dari saya terimkasih sudah mengunjung.