Hai bro! Selamat Datang di Blog Herdamedia.com
Pada kesempatan kali ini saya akan membagikan tutorial cara membuat widget bookmark di blog dengan menggunakan jquery.
Seperti yang kita ketahui, fungsi bookmark sangat berguna bagi pembaca, terkadang untuk menyimpan artikel yang belum sempat dibaca bisa melalui fitur bookmark yang ada pada aplikasi bawaan browser namun kebanyakan fitur bawaan ini jarang digunakan karena ribet, maka dari itu dengan adanya widget bookmark blogger ini dapat mempermudah pembaca membookmark salah satu artikel di blog kamu secara mudah dan langsung bisa membacanya kembali kapan saja.
Script pada widget ini sudah dilengkapi dengan localStorage yang artinya, jika artikel yang sudah kamu bookmark tidak akan menghilang, kecuali jika pengunjung menghapus riwayat cookie pada browser, maka otomatis akan terhapus.
Lalu bagaimana cara memasang widget bookmark ini? Langsung saja kamu simak langkah-langkahnya berikut ini.
Tutorial Memasang Widget Bookmark Blog
Sebelum memulai, pastikan kamu telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa dipulihkan.
Langkah 1: Pertama kamu Login dengan akun blogger kamu di www.blogger.com
Langkah 2: Pada Dashboard Blogger, kamu klik Tema.
Langkah 3: Kemudian klik ikon panah ke bawah disamping menu 'Sesuaikan'
Langkah 4: Klik Edit HTML, kamu akan diarahkan ke halaman pengeditan.
Langkah 5: Pasang script jQuery dengan cara, salin kode script di bawah ini dan letakkan di Atas kode </head> untuk memudahkan pencarian tekan CTRL F
Namun jika template kamu sudah terpasang script jQuery lewati langkah ini.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Langkah 6: Temukan kode ]]></b:skin> dan masukan kode css dibawah ini tepat diatas kode tersebut.
/* bookmark */
svg.line{width:22px;height:22px;fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round; stroke-width:1}
.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-area .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}
.pop-area .head-pop:after{content:"Bookmark";color:#fefefe;font-weight:bold}
.pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#f89000}
.pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
.pop-area .body-content{padding:10px}
.pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
.pop-area .text-center svg{margin:0 auto}
.pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
.pop-area .table:hover{border-color:#f89000}
.pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
.pop-area .table img{border-radius:4px;width:auto}
.pop-area .table a:hover,.drK .pop-area .table a:hover{color:#f89000}
.pop-area .table a{text-decoration:none;color:#08102b}
.pop-area .img-left{width:150px}
.pop-area .item-left{padding-right:10px}
.pop-area .btn-remove{cursor:pointer}
.show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
.pop-area .counterStat{color:white;font-size:16px}
/* css darkmode sesuaikan */
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}
Ganti nama class darkmode .drK dengan nama class darkmode sesuai template masing-masing, jika tidak ada, biarkan saja.
Langkah 7: Selanjutnya memasang tombol buka tutup dengan icon, biasanya diletakkan di atas header atau bisa juga bagian lain yang kamu inginkan.
/* icon bookmark */ <div class='buka-tutup'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path></g></svg> <span class='show-bookmark'></span> </div>
Langkah 8: Tambahkan juga tombol icon bookmark, ini berfungsi untuk add to bookmark atau lebih tepatnya menambahkan artikel ke bookmark, letakkan kode ini tepat di atas kode <data:post.body/> biasanya kode ini lebih dari satu, jadi letakkan pada kode yang pertama ditemukan.
/* icon add bookmark */ <div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg> </div>
Langkah 9: Langkah terakhir letakkan javascript di bawah ini tepat di atas kode </body> jika tidak ada temukan kode body yang sudah diparse seperti ini <!--</body>--></body>
Khusus Pengguna Median UI v1.6
Tutorial untuk pemasangan widget bookmark pada template median ui ini dikhususkan karena memerlukan pengetahuan coding dasar, karena setiap template memiliki source kode yang berbeda tentu harus ada penyesuaian agar widget bookmark ini berfungsi dengan sempurna.
Sebelum memulai, pastikan kamu telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa dipulihkan.
Langkah 1: Pastikan script jQuery sudah terpasang terlebih dahulu, jika belum ada bisa pasang dengan menyalin kode dibawah ini dan letakkan di Atas kode </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Langkah 2: Temukan kode ]]></b:skin> dan masukan kode css dibawah ini tepat diatas kode tersebut.
/* bookmark */
.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-area .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}
.pop-area .head-pop:after{content:"Bookmark";color:#fefefe;font-weight:bold}
.pop-area .head-pop{width:-webkit-fill-available;padding:12px 30px;overflow:hidden;background:#f89000}
.pop-area .close-btn{float:right;cursor:pointer;fill:#7e7e7e;color:#fefefe;font-weight:bold}
.pop-area .body-content{padding:10px}
.pop-area .text-center{display:grid;text-align:center;grid-gap:15px}
.pop-area .text-center svg{margin:0 auto}
.pop-area .btn.btn-outline-info{width:fit-content;margin:0 auto;text-decoration:none}
.pop-area .table:hover{border-color:#f89000}
.pop-area .table{transition:all .3s;width:100%;border:1px solid rgba(155,155,155,0.15);border-radius:7px;margin:5px 0;padding:5px}
.pop-area .table img{border-radius:4px;width:auto}
.pop-area .table a:hover,.drK .pop-area .table a:hover{color:#f89000}
.pop-area .table a{text-decoration:none;color:#08102b}
.pop-area .img-left{width:150px}
.pop-area .item-left{padding-right:10px}
.pop-area .btn-remove{cursor:pointer}
.show-bookmark{font-size:11px;line-height:18px;padding:0 5px;border-radius:10px;background:#e6e6e6;color:var(--bodyC);position:absolute;top:-5px;right:0;z-index:2}
.pop-area .counterStat{color:white;font-size:16px}
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}
/* css tambahan untuk tombol bookmark muncul di beranda pada template median ui 1.6 */
.iFxd .hartomy-bookmark-btn:hover::before{content:'add to bookmark';right:15px;display:block}
.iFxd .hartomy-bookmark-btn:before{content:'';font-size:12px;color:#767676;width:150px;padding-left:30px;padding:5px 0 5px 30px;background-color:var(--bodyB);border-radius:5px;position:absolute;right:0;display:none}
.iFxd .hartomy-bookmark-btn{position:relative;transition:var(--trans-4)}
Langkah 3: Selanjutnya menambahkan tombol buka tutup bookmark, temukan kode seperti dibawah ini.
<!-- cari kode seperti ini --> <b:elseif cond='data:item == "Dark"'/> <li> <b:class cond='data:item == "Dark"' name='isDrk'/> <!--[ Dark mode button ]--> <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='darkMode()' role='button'><b:include name='moon-sun-icon'/></span> </li>
Langkah 4: Lalu ubah kode diatas menjadi seperti kode dibawah ini.
<!-- ubah menjadi --> <b:elseif cond='data:item == "Dark"'/> <li class='buka-tutup'> <b:class cond='data:item == "Bookmark"' name='isBxm'/> <!--[ Bookmark ]--> <a class='tIc bIc' expr:aria-label='data:item' href='javascript:;'><b:include name='bookmark-icon'/></a> <span class='show-bookmark'/> </li> <li> <b:class cond='data:item == "Dark"' name='isDrk'/> <!--[ Dark mode button ]--> <span class='tDark tIc tDL bIc' expr:aria-label='data:item' onclick='darkMode()' role='button'><b:include name='moon-sun-icon'/></span> </li>
Langkah 5: Untuk tombol add bookmark saya mengantikan icon share yang berada tepat di bawah judul artikel menjadi icon add bookmark, selanjutnya temukan kode seperti dibawah ini.
<!-- cari kode seperti ini --> <div class='pIc'> <b:include cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments' name='postCommentsLabel'/> <b:if cond='data:post.shareUrl and data:widgets.Blog.first.allBylineItems.share'> <label class='sh tIc' for='forShare'><b:include name='share-icon'/></label>
Langkah 6: Jika sudah ketemu, ganti semuanya dengan kode yang baru dibawah ini.
<!-- Ganti dengan kode ini --> <div class='pIc'> <label class='tIc hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'><svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg> </label> <b:include cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments' name='postCommentsLabel'/> <b:if cond='data:post.shareUrl and data:widgets.Blog.first.allBylineItems.share'> <!--<label class='sh tIc' for='forShare'><b:include name='share-icon'/></label>-->
Supaya tombol add to bookmark juga muncul di halaman beranda atau tepatnya diatas thumbnail, kamu bisa ikuti langkah selanjutnya.
Langkah 7: Cari kode <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'> tampak keseluruhan kodenya seperti dibawah ini. Silahkan kamu ganti sesuai petunjuk dibawah.
<!-- Cari kode seperti ini --> <!--[ Comments count ]--> <b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments > 0 or data:post.labels any (label => label.name in [ "Sponsored" , "Product" ])' name='div'> <b:if cond='data:post.labels any (label => label.name in [ "Sponsored" ])'> <b:include name='postSponsored'/> <b:elseif cond='data:post.labels any (label => label.name in [ "Product" ])'/> <b:include name='postProduct'/> </b:if> <b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:post.labels none (label => label.name in [ "Product" ])'> <b:include name='postCommentsLinks'/> </b:if> </b:tag> </div> </b:if> <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'> <!-- Ubah menjadi --> <!--[ Comments count ]--> <b:tag class='iFxd' cond='data:post.allowComments and data:post.numberOfComments > 0 or data:post.labels any (label => label.name in [ "Sponsored" , "Product" ])' name='div'> <b:if cond='data:post.labels any (label => label.name in [ "Sponsored" ])'> <b:include name='postSponsored'/> <b:elseif cond='data:post.labels any (label => label.name in [ "Product" ])'/> <b:include name='postProduct'/> </b:if> <b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:post.labels none (label => label.name in [ "Product" ])'> <b:include name='postCommentsLinks'/> </b:if> <div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, "16:9")' expr:data-id='data:post.id' expr:data-link='data:post.url' expr:data-title='data:post.title'> <svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'></path><line transform='translate(-4.500000, -2.500000)' x1='12' x2='12' y1='6' y2='12'></line><line transform='translate(-4.500000, -2.500000)' x1='15' x2='9' y1='9' y2='9'></line></g></svg></div> </b:tag> </div> </b:if> <b:tag class='pCntn' cond='data:view.isMultipleItems' name='div'>
Langkah 8: Letakkan javascript di bawah ini tepat di atas kode </body> jika tidak ada, temukan kode body yang sudah diparse seperti ini <!--</body>--></body>
Langkah 9: Terakhir klik icon Simpan/Save sampai disini tahap pemasangan kode sudah selesai dan cek hasilnya.
Demikianlah artikel cara memasang widget bookmark di blogger yang bisa saya bagikan semoga bermanfaat, jika ada yang ingin ditanyakan silahkan berkomentar terimakasih.