ইদানিং বুকমার্ক ফিচারটি নতুন কিছু ব্লগার টেমপ্লেটে দেখা যাচ্ছে।বুকমার্ক ফিচার কি?কিভাবে বুকমার্ক উইজেট ব্লগার ব্লগে যুক্ত করা যায় এই নিয়ে আজকের পোস্ট।
বুকমার্ক কি?
বুকমার্ক উইজেটটি ব্লগার টেমপ্লেটে নতুন।এর মাধ্যমে আপনি যেকোনো পোস্ট সাময়িক ভাবে বুকমার্ক করে রাখতে পারবেন।অর্থাৎ, আপনার ওয়েবসাইটের কোনো ভিজিটর পোস্ট পড়ছেন এবং যদি চান পরবর্তীতে সেই পোস্ট পড়তে তবে তিনি আপনার ওয়েবসাইটে সেই পোস্টটি বুকমার্ক করে রাখতে পারবেন ঠিক যেমন ভাবে আমরা আমাদের মোবাইল/কম্পিউটারের ব্রাউজারে বিভিন্ন ট্যাব বুকমার্ক করে রাখি।
কীভাবে ব্লগারে বুকমার্ক ফিচার যুক্ত করবেন?
নিচে দেখানো পদ্ধতিগুলো ফলো করলে আপনি সহজেই ব্লগার ব্লগে বুকমার্ক উইজেট বানাতে পারবেন।এগুলো যেহুতু html,css,js কোড। তাই বলবো একটু সতর্কতার সাথে এগুলো থিমের ভিতর যুক্ত করতে।নাহয় বুকমার্ক ফিচারটি কাজ নাও করতে পারে।
আপনার টেমপ্লেটে jQuery ইনস্টল করা আছে কি না চেক করুন।যদি না থাকে,তবে নিচে দেয়া কোডগুলো আপনার ব্লগের থিমের ভিতর ট্যাগ এর উপরে পেস্ট করে দিন।
এখন নিচে দেয়া সিএসএস কোডগুলো ]]> ট্যাগ এর উপরে পেস্ট করে দিন।
/* 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 class (.drK) dengan templatemu agar dapat berfungsi */
.drK .pop-area.open .pop-html,.drK .pop-area .body-content,.drK .pop-area .table a{background-color:#1e1e1e;color:#fefefe}
এবার নিচে দেয়া বুকমার্ক আইকন এর কোডগুলো যেখানে ইচ্ছে সেখানে পেস্ট করে দিন।আপনি চাইলে হেডার এর আইকন গুলোর পাশে বুকমার্ক আইকনটি যুক্ত করতে পারেন।এজন্য প্রথমে হেডার মেনু গুলো খুঁজে বের করুন।তারপর তার মাঝে পেস্ট করে দিন।আমি median ui তে অ্যাড করবো,তাই কোডটি খুঁজে বের করে প্রথম কোডটি স্কিপ করে এর পরেই নিচে দেয়া কোডগুলো পেস্ট করে দিবো।
এখন কোডটি সার্চ করুন,এই কোডটি মাত্র একটা থাকে থিমের ভিতর।পেয়ে গেলে নিচে দেয়া কোডগুলো এর উপরে পেস্ট করে দিন।এতে করে আর্টিকেলের শুরুতে বুকমার্ক আইকন থাকবে যেখানে ক্লিক করে বুকমার্ক অ্যাড করা যাবে।
সর্বশেষ নিচে দেয়া জাভাস্ক্রিপ্ট কোডগুলো ট্যাগ এর উপরে পেস্ট করে দিন।
//<![CDATA[
// source code
var massgEmpty="Daftar Artikel Favorit Belum Ada",articleLabel="Semua konten",link_articleLabel="https://www.blogpen.xyz/search";!function($){"use strict";var OptionManager=(objToReturn={},defaultOptions={bookmarkIcon:"bookmarkIcon",bookmarkBadge:"show-bookmark",articleQuantity:"article-quantity",affixBookmarkIcon:!0,showBookmarkModal:!0,clickOnAddToBookmark:function(t){},clickOnbookmarkIcon:function(t,e){}},objToReturn.getOptions=function(t){var e=$.extend({},defaultOptions);return"object"==typeof t&&$.extend(e,t),e},objToReturn),objToReturn,defaultOptions,articleManager=function(){var t={};localStorage.konten=localStorage.konten?localStorage.konten:"";var e=function(t){localStorage.konten=JSON.stringify(t)},a=function(){try{return JSON.parse(localStorage.konten)}catch(t){return[]}},o=function(t,o){var n=function(t){var e=-1,o=a();return $.each(o,function(a,o){o.id!=t||(e=a)}),e}(t);if(n<0)return!1;var r=a();return r[n].quantity=void 0===o?r[n].quantity:o,e(r),!0};return t.getAllkonten=a,t.updatePoduct=o,t.setarticle=function(t,n,r,i,c,l){return void 0===t?(console.error("id required"),!1):void 0===n?(console.error("title required"),!1):void 0===r?(console.error("link required"),!1):void 0===l?(console.error("borkimage required"),!1):(i=void 0===i?"":i,void(o(t)||function(t,o,n,r,i,c){var l=a();l.push({id:t,title:o,link:n,summary:r,quantity:i,borkimage:c}),e(l)}(t,n,r,i,c,l)))},t.cleararticle=function(){e([])},t.removearticle=function(t){var o=a();o=$.grep(o,function(e,a){return e.id!=t}),e(o)},t.getTotalQuantity=function(){var t=0,e=a();return $.each(e,function(e,a){t+=a.quantity}),t},t}(),loadBookmarkEvent=function(t){var e=OptionManager.getOptions(t),a=$("."+e.bookmarkIcon),o=$("."+e.bookmarkBadge),n=e.articleQuantity;o.text(articleManager.getTotalQuantity()),$("#cart-modal").length||$("body").append('
‘);var r=function(){var t=$(“#cart-table”);t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.append(‘
| ‘+this.title+’ |
‘)}),t.append(e.length?””:’
“)};if(e.affixBookmarkIcon){var i=1*a.offset().top+1*a.css(“height”).match(/\d+/);$(window).scroll(function(){$(window).scrollTop()>=i?a.addClass(“bookmarkIcon-affix”):a.removeClass(“bookmarkIcon-affix”)})}a.click(function(){e.showBookmarkModal?r():e.clickOnbookmarkIcon(a,articleManager.getAllkonten())}),$(document).on(“keypress”,”.”+n,function(t){38!=t.keyCode&&40!=t.keyCode&&t.preventDefault()}),$(document).on({click:function(){var t=$(this).closest(“tr”),e=t.data(“id”);t.hide(500,function(){articleManager.removearticle(e),r(),o.text(articleManager.getTotalQuantity())})}},”.btn-remove”)};$(document).on({click:function(){return $(“.pop-area”).toggleClass(“open”),!1}},”.buka-tutup”),$(function(){var goTohartomyBookmark=function(t){};eval(function(t,e,a,o,n,r){if(n=function(t){return(t35?String.fromCharCode(t+29):t.toString(36))},!””.replace(/^/,String)){for(;a–;)r[n(a)]=o[a]||n(a);o=[function(t){return r[t]}],n=function(){return”\\w+”},a=1}for(;a–;)o[a]&&(t=t.replace(new RegExp(“\\b”+n(a)+”\\b”,”g”),o[a]));return t}(‘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)}})’,0,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(t,e){var a=$(t),o=OptionManager.getOptions(e),n=$(“.”+o.bookmarkBadge);a.click(function(){o.clickOnAddToBookmark(a);var t=a.data(“id”),e=a.data(“title”),r=a.data(“link”),i=a.data(“summary”),c=a.data(“quantity”),l=a.data(“borkimage”);articleManager.setarticle(t,e,r,i,c,l),n.text(articleManager.getTotalQuantity())})};$.fn.hartomyBookmark=function(t){return loadBookmarkEvent(t),$.each(this,function(){new MyBookmark(this,t)})}}(jQuery); //]]>
বিশেষ দ্রষ্টব্য : উপরে দেয়া জাভাস্ক্রিপ্ট কোডের ভিতর দেয়া https://www.blogpen.xyz/search কোডটি আপনার ব্লগের কোডের সাথে রিপ্লেস করে দিন।(শুধু ডোমেইন নামটি পরিবর্তন করলেই হবে।)
কৃষি ব্যাংক লোন নেওয়ার নিয়ম ২০২৩
আপনার ব্লগার ওয়েবসাইটে বুকমার্ক ফিচার রেডী।আশা করি সবকিছু সঠিক ভাবে করেছেন।
উপসংহার
আজকের এই পোস্টে আমি শেয়ার করেছি কিভাবে ব্লগারে বুকমার্ক উইজেট যুক্ত করা যায়।আপনি যদি ব্লগার থিমের ভিতর বুকমার্ক উইজেট যুক্ত করতে কোনো সমস্যার সম্মুখীন হন,তবে অবশ্যই কমেন্ট করে জানাবেন।আর যারা Jagodesain এর থিম ব্যবহার করেন,তাদের জন্যও এই ফিচারটি কাজ করবে।তবে আরেকটা আপডেট ফিচার আছে,ব্লগ পোস্টের থাম্বনেইল এ বুকমার্ক বাটন।পরবর্তীতে এটা নিয়ে পোস্ট করার চেষ্টা করবো যদি সাড়া পাই।