ইদানিং বুকমার্ক ফিচারটি নতুন কিছু ব্লগার টেমপ্লেটে দেখা যাচ্ছে।বুকমার্ক ফিচার কি?কিভাবে বুকমার্ক উইজেট ব্লগার ব্লগে যুক্ত করা যায় এই নিয়ে আজকের পোস্ট।

বুকমার্ক কি?

বুকমার্ক উইজেটটি ব্লগার টেমপ্লেটে নতুন।এর মাধ্যমে আপনি যেকোনো পোস্ট সাময়িক ভাবে বুকমার্ক করে রাখতে পারবেন।অর্থাৎ, আপনার ওয়েবসাইটের কোনো ভিজিটর পোস্ট পড়ছেন এবং যদি চান পরবর্তীতে সেই পোস্ট পড়তে তবে তিনি আপনার ওয়েবসাইটে সেই পোস্টটি বুকমার্ক করে রাখতে পারবেন ঠিক যেমন ভাবে আমরা আমাদের মোবাইল/কম্পিউটারের ব্রাউজারে বিভিন্ন ট্যাব বুকমার্ক করে রাখি।

কীভাবে ব্লগারে বুকমার্ক ফিচার যুক্ত করবেন?

নিচে দেখানো পদ্ধতিগুলো ফলো করলে আপনি সহজেই ব্লগার ব্লগে বুকমার্ক উইজেট বানাতে পারবেন।এগুলো যেহুতু html,css,js কোড। তাই বলবো একটু সতর্কতার সাথে এগুলো থিমের ভিতর যুক্ত করতে।নাহয় বুকমার্ক ফিচারটি কাজ নাও করতে পারে।

আপনার টেমপ্লেটে jQuery ইনস্টল করা আছে কি না চেক করুন।যদি না থাকে,তবে নিচে দেয়া কোডগুলো আপনার ব্লগের থিমের ভিতর </head> ট্যাগ এর উপরে পেস্ট করে দিন।

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

এখন নিচে দেয়া সিএসএস কোডগুলো ]]></b:skin> ট্যাগ এর উপরে পেস্ট করে দিন।

/* 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 তে অ্যাড করবো,তাই <!–[ Profile button ]–> কোডটি খুঁজে বের করে প্রথম </b:if> কোডটি স্কিপ করে এর পরেই নিচে দেয়া কোডগুলো পেস্ট করে দিবো।

<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>

এখন <data:post.body/> কোডটি সার্চ করুন,এই কোডটি মাত্র একটা থাকে থিমের ভিতর।পেয়ে গেলে নিচে দেয়া কোডগুলো <data:post.body/> এর উপরে পেস্ট করে দিন।এতে করে আর্টিকেলের শুরুতে বুকমার্ক আইকন থাকবে যেখানে ক্লিক করে বুকমার্ক অ্যাড করা যাবে।

<div class='hartomy-bookmark-btn' data-quantity='1' expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)' 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>

সর্বশেষ নিচে দেয়া জাভাস্ক্রিপ্ট কোডগুলো </head> ট্যাগ এর উপরে পেস্ট করে দিন।

<script>//<![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('<div class="pop-area" id="cart-modal"><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="cart-table"></span></div></div></div>');var r=function(){var t=$("#cart-table");t.empty();var e=articleManager.getAllkonten();$.each(e,function(){t.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+'">'+this.title+'</a></td><td class="item-left" title="Remove favorit" class="text-center" style="width: 30px;"><a class="btn-remove"><svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3.500000, 2.000000)"><path d="M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524"></path><line x1="16.8651429" y1="4.47980952" x2="0.714666667" y2="4.47980952"></line><path d="M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952"></path></g></svg></a></td></tr></tbody></table>')}),t.append(e.length?"":'<div role="alert" id="cart-empty-message"><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="#f89000"/></svg><center>'+massgEmpty+'</center><a class="btn btn-outline-info m-2" href="'+link_articleLabel+'">'+articleLabel+"</a></div></div>")};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(t<58?"":n(parseInt(t/58)))+((t%=58)>35?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);
//]]></script>

বিশেষ দ্রষ্টব্য : উপরে দেয়া জাভাস্ক্রিপ্ট কোডের ভিতর দেয়া https://www.blogpen.xyz/search কোডটি আপনার ব্লগের কোডের সাথে রিপ্লেস করে দিন।(শুধু ডোমেইন নামটি পরিবর্তন করলেই হবে।)

আপনার ব্লগার ওয়েবসাইটে বুকমার্ক ফিচার রেডী।আশা করি সবকিছু সঠিক ভাবে করেছেন।

উপসংহার

আজকের এই পোস্টে আমি শেয়ার করেছি কিভাবে ব্লগারে বুকমার্ক উইজেট যুক্ত করা যায়।আপনি যদি ব্লগার থিমের ভিতর বুকমার্ক উইজেট যুক্ত করতে কোনো সমস্যার সম্মুখীন হন,তবে অবশ্যই কমেন্ট করে জানাবেন।আর যারা Jagodesain এর থিম ব্যবহার করেন,তাদের জন্যও এই ফিচারটি কাজ করবে।তবে আরেকটা আপডেট ফিচার আছে,ব্লগ পোস্টের থাম্বনেইল এ বুকমার্ক বাটন।পরবর্তীতে এটা নিয়ে পোস্ট করার চেষ্টা করবো যদি সাড়া পাই।

এসইও কি?কিভাবে এসইও করবেন?

প্রিমিয়াম ব্লগার টেমপ্লেট , ব্লগিং টিপস , ব্লগার উইজেট স্ক্রিপ্ট , এসইও টিপস পেতে ভিজিট করুন আমার Blogen ব্লগ।আল্লাহ হাফেজ।

24 thoughts on "ব্লগার ব্লগে বুকমার্ক উইজেট যুক্ত করুন অনেক সহজেই | Bookmark widget for Blogger"

  1. Ashraful Author says:
    Vai blogger niye post apatoto bondho rekhe onno topic e post koren.
    1. Levi Author Post Creator says:
      কেনো?আপনার কি সমস্যা?এডমিন তো আমাকে এই বিষয়ে কিছু বলেননি।আপনার সমস্যা কোন জায়গায়?
    2. Ashraful Author says:
      Nah. Ek bishoi niye beshi post hoye jacche tai bollam. Rag korar to kichu dekhchi nah.
    3. Levi Author Post Creator says:
      Admin যদি মানা করে,তবে বন্ধ করে দিবো।
    4. Ashraful Author says:
      Ok vai.
    5. Levi Author Post Creator says:
      ঠিক আছে।
  2. Nayan Contributor says:
    Ami jodi adsense pin chiti nah pai tahole ditiobar resend pin nah kore direct nid card diya verify korthey parbo nah.
    1. Levi Author Post Creator says:
      Nid দিয়ে ভেরিফাই করা যাবে।
  3. Nayan Contributor says:
    প্রথমবার না পেলে দ্বিতীয়বার এনআইডি দিয়ে ভেরিফাই করলে হবে না?
    1. Levi Author Post Creator says:
      যতদূর জানি, লেটার না পেলে nid দিয়ে ভেরিফাই করা যায়।তবে আপনি পোস্ট মাস্টারের সাথে যোগাযোগ রাখলে লেটার পেতে সমস্যা হবে না। অ্যাড্রেস ঠিক ভাবে দিবেন।
  4. Nayan Contributor says:
    City tha zilar naam dibo naki upozilar karon ami tho grame taki
    1. Levi Author Post Creator says:
      ফুল অ্যাড্রেস।গ্রাম,পোস্ট অফিস,থানা,উপজেলা,জেলা,বিভাগ,নাম্বার।
    2. city= bivag den. post code thik dite hobe. r jodi nid thake tahole, nid er pisone address deya ase. seta just English e likhe diben. pin letter send howar 15/20 din pore giye post office e kotha bollei hobe. amio grame thaki, 17 din pore peyecilam. majhe moddhe postmaster er sathe kotha bolben.
    3. Levi Author Post Creator says:
      সঠিক উপদেশ দিয়েছেন ভাই।পোস্টমাস্টারের সাথে যোগাযোগ রাখলে দ্রুত পাওয়া যায়।
  5. Nayan Contributor says:
    Adress line 1 gramer naam adressline 2 tha post office upozilla zillar naam ar city tha bivager naam
    1. Levi Author Post Creator says:
      জ্বী।এভাবেই।
  6. MD Musabbir Kabir Ovi Author says:
    আবারো ব্লগিং নিয়ে পোস্ট এর জন্য ধন্যবাদ
    1. Levi Author Post Creator says:
      স্বাগত।
    2. Levi Author Post Creator says:
      হুম।
  7. MD Shakib Hasan Author says:
    ভাই এসব বাদ দিয়ে Blogging এ Google AdSense Approval কিভাবে পাওয়া যাবে সেটা নিয়ে পোস্ট করেন।
    1. Levi Author Post Creator says:
      এসব বাদ দিবো কেনো?কারণ দেখান।কোনো সমস্যা হচ্ছে?অথবা আমার পোস্টে কোনো ভুল? আর আপনি অ্যাডসেন্স পেতে চাইলে অ্যাডসেন্সের নীতিমালা মেনে চলুন।তাহলেই তো হচ্ছে।
  8. Saikat Islam Contributor says:
    Bhai apnr website er blogger template ta deoya jbe?
    1. Levi Author Post Creator says:
      ঐটা তো আমি নিজের জন্য কাস্টোমাইজ করেছি।নতুন একটা শেয়ার করেছি,ঐটা ব্যবহার করতে পারেন।

Leave a Reply