ব্লগার সাইটে কিভাবে অ্যানিমেটেড রেসপন্সিভ সাইটম্যাপ যোগ করবেন?
ব্লগার সাইটে কিভাবে অ্যানিমেটেড রেসপন্সিভ সাইটম্যাপ যোগ করবেন?
How to Add Animated Responsive Sitemap in Blogger Site- ব্লগার সাইটে কিভাবে অ্যানিমেটেড রেসপন্সিভ এবং স্টাইলিশ HTML সাইটম্যাপ সাইটম্যাপ তৈরি করবেন? ব্লগার ব্লগের জন্য কুল রেসপন্সিভ সাইটম্যাপ উইজেট কিভাবে যোগ করবেন? ভিজিটর এবং সার্চ ইঞ্জিনের জন্য ব্লগার ব্লগে কিভাবে HTML সাইট ম্যাপ যোগ করবেন তা শিখুন?
আপনি কি আপনার ব্লগের দর্শকদের এক নজরে আপনার ব্লগের সমস্ত বিষয়বস্তু দেখাতে চান?
তাহলে সাইটম্যাপ বা কন্টেন্ট উইজেট টেবিল আপনার ব্লগে ম্যাজিকের মতো কাজ করবে। আপনি যদি একটি প্রতিক্রিয়াশীল থিম ব্যবহার করেন, তাহলে স্বাভাবিক অ-প্রতিক্রিয়াশীল সাইটম্যাপ আপনার ব্লগ সাইটের সাথে সঠিকভাবে কাজ করবে না বরং আমি আপনাকে একটি প্রতিক্রিয়াশীল সাইটম্যাপ ব্যবহার করার পরামর্শ দিচ্ছি।
প্রতিক্রিয়াশীল সাইটম্যাপ বা সামগ্রীর সারণী আপনার প্রতিক্রিয়াশীল ব্লগার থিমের জন্য একটি ভাল বিকল্প হবে। আপনার ব্লগের দর্শকরা প্রতিক্রিয়াশীল সাইটম্যাপ উইজেট বা গ্যাজেটের সাথে ব্যবহারকারী-বান্ধব অভিজ্ঞতা পাবেন।
সাইটম্যাপ বা বিষয়বস্তুর সারণী আপনার কাছে থাকা সমস্ত সামগ্রী একবারে দেখানোর জন্য যেকোনো ওয়েবসাইটের জন্য অত্যন্ত সুপারিশ করা হয়। সুতরাং, দর্শকরা সহজেই আপনার নতুন এবং পুরানো সামগ্রী সহজেই দেখতে পারেন। এটি আপনাকে আপনার ব্লগ পৃষ্ঠার ভিউ বাড়াতে এবং আরও লিড তৈরি করতে সহায়তা করবে।
তার আগে আপনার জানা উচিত, একটি সাইটম্যাপ কি।
সাইটম্যাপ বা বিষয়বস্তুর সারণী কি?
সাধারণত, একটি সাইটম্যাপ একটি ব্লগ বা ওয়েবসাইটের সমস্ত সামগ্রীর একটি তালিকা। ব্লগারে ডিফল্টরূপে এই বৈশিষ্ট্যটি নেই, তাই আপনাকে বিকাশকারীর যেকোনো তৃতীয় পক্ষের উইজেটের উপর নির্ভর করতে হবে। সাইটম্যাপ "ট্যাবল অফ কনটেন্ট" নামেও পরিচিত, কারণ দর্শকরা একটি টেবিল বা বাক্সের মধ্যে সমস্ত সামগ্রী দেখতে সক্ষম হবে।
সাইটম্যাপ উইজেট ব্যবহারের সুবিধা।
আপনার ব্লগে সাইটম্যাপ ব্যবহার করে আপনি অনেক সুবিধা পাবেন। তাদের মধ্যে এগুলি সবচেয়ে কার্যকর।
- আপনার ব্লগের দর্শকরা একবারে সব কন্টেন্ট দেখতে পারেন।
- পাঠকরা বিষয়বস্তু বিভাগ দ্বারা পরিদর্শন করতে পারেন.
- এই উইজেটটি আপনাকে সাইটম্যাপ থেকে সরাসরি ব্লগ পোস্টে সহজেই নেভিগেট করতে সাহায্য করবে।
- সাইটম্যাপ বা বিষয়বস্তুর টেবিল পেজভিউ বাড়াতে সাহায্য করে।
- এতে বাউন্স রেট কমে যাবে।
- আপনার ব্লগ পেজ র্যাঙ্ক বেশি হবে।
- আপনি সাইটম্যাপের মাধ্যমে আরও লিড তৈরি করতে পারেন
- সামগ্রিকভাবে আপনার ব্লগ আয় বৃদ্ধি পাবে।
ব্লগারে কীভাবে একটি অ্যানিমেটেড রেসপন্সিভ সাইটম্যাপ পেজ তৈরি করবেন?
এটা বলার অপেক্ষা রাখে না যে সাইটম্যাপের অনেক সুবিধা রয়েছে। তাই এখন আমি আপনাদের দেখাবো কিভাবে আপনার ব্লগ সাইটে একটি রেসপন্সিভ অ্যানিমেটেড সাইটম্যাপ যোগ করবেন। আমি বললাম এটি অ্যানিমেটেড কারণ সাইটম্যাপের ব্যাকগ্রাউন্ড কালার এলোমেলোভাবে পরিবর্তিত হবে। সুতরাং, এটি সত্যিই আপনার দর্শকদের আকর্ষণ করবে।
চলুন দেখি কিভাবে আপনার ব্লগে এই সুন্দর সাইটম্যাপ যোগ করবেন।
১ম ধাপঃ আপনার ব্লগার অ্যাকাউন্টে লগইন করুন এবং ড্যাশবোর্ড দেখুন
২য় ধাপঃ ব্লগার ড্যাশবোর্ড থেকে আপনাকে অবশ্যই একটি নতুন পেজ তৈরি করতে হবে। কারণ আপনার সাইটম্যাপ একটি আলাদা পেজে দৃশ্যমান হবে। ব্লগার ড্যাশবোর্ডের বাম মেনু থেকে Pages ট্যাবে ক্লিক করুন এবং একটি নতুন স্ট্যাটিক পৃষ্ঠা তৈরি করতে New page ক্লিক করুন।
৩য় ধাপঃ ডিফল্টরূপে, আপনি আপনার নতুন তৈরি স্ট্যাটিক পৃষ্ঠার রচনা ভিউ মোডে অবতরণ করবেন, তাই সাইটম্যাপ উইজেট স্ক্রিপ্ট যোগ করতে HTML ভিউতে ক্লিক করুন।
মনে রাখবেন আপনি যদি CSS, HTML এবং jQuery কোড কম্পোজ ভিউতে রাখেন তাহলে আপনার উইজেট স্ক্রিপ্ট কাজ করবে না। সুতরাং, আপনাকে অবশ্যই HTML ভিউতে স্যুইচ করতে হবে।
শুধু আপনার ব্লগ URL দিয়ে সেভ করুন
৬ নাং ধাপঃ অবশেষে পাবলিশ বোতাম টিপুন। সাইটম্যাপ পরীক্ষা করতে, আপনার নতুন তৈরি পৃষ্ঠা দেখুন।
সাইট্ম্যাপের জন্য কোড গুলো কপি করুন ঃ
---
<div class="spicetab" id="spicetab"></div> <script> var tabbedTAB={blogUrl:"https://amarbangla.top/",containerId:"spicetab",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:#ff0000;">New</em>'}; !function(a,b){var c=(new Date).getTime(),d={blogUrl:"https://bloggerspice.com",containerId:"spicetab",activeTab:1,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:!1,newText:' – <em style="color:#ff0000;">New!</em>'};if("undefined"==typeof tabbedTAB)tabbedTAB=d;else for(var e in d)d[e]="undefined"!=typeof tabbedTAB[e]?tabbedTAB[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b.getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g)c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f=parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g.showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!==!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="tab-line"></span><ul class="tab-tabs">';for(var m=0,n=i.length;n>m;++m)j+='<li class="tab-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false;" onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="tab-content">';for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"',j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t.replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.numChars)+"…":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'"/>'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10)+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0,A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g.showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries?'<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li>")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId).innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g.src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function(){f.appendChild(g)}}(window,document); </script> <style scoped="" type="text/css"> .spicetab{border-radius:15px;margin:0 auto;position:relative;opacity: .9;background:linear-gradient(90deg, rgb(169, 108, 232), rgb(0, 115, 183));background-size:400% 400%;animation:Gradient 15s ease infinite} .spicetab .loading{display:block;padding:2px 12px;color:#fff} .spicetab ul,.spicetab ol,.spicetab li{list-style:none;color: #fff; margin:0;padding:0} .spicetab .tab-tabs{width:20%;float:left} .spicetab .tab-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s} .spicetab .tab-tabs li a:hover{background-color:rgba(0,0,0,0.05)} .spicetab .tab-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0} .spicetab .tab-content,.spicetab .tab-line{width:80%;float:right;background-color:#fff;box-sizing:border-box} .spicetab .tab-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0} .spicetab .panel{position:relative;z-index:5} .spicetab .panel li a{text-decoration: none;color:#737373;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden} .spicetab .panel li time{display:block;font-weight:bold;font-size:11px;color:#4285f4;float:right} .spicetab .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px} .spicetab .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa} .spicetab .panel li{background-color:#f9f9f9;margin:0} .spicetab .panel li:nth-child(even){background-color:#fff} .spicetab .panel li a:hover,.spicetab .panel li a:focus,.spicetab .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none} .spicetab .panel li a em{background:#0998ce;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px} .spicetab .panel li:before{display:none} @-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @media (max-width:768px){.spicetab .tab-tabs,.spicetab .tab-content{overflow:hidden;width:auto;float:none;display:block}.spicetab .tab-tabs li{display:inline;float:left}.spicetab .tab-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.spicetab .tab-content{border:none}.spicetab .tab-line,.spicetab .panel li time{display:none}} </style>
আপনি একটি সুন্দর অ্যানিমেটেড সাইটম্যাপ দেখতে পাবেন।
শুধুমাত্র নির্দিষ্ট ব্লগ লেবেল বা বিভাগ দ্বারা বিষয়বস্তু পরিদর্শন করতে বিভিন্ন ট্যাবে ক্লিক করুন. এটি মসৃণভাবে কাজ করবে।
আপনার সাইটম্যাপ চালাতে যোগ করার জন্য ঐচ্ছিক বৈশিষ্ট্য
আপনি যদি দেখেন যে আপনার সাইট ম্যাপ চলছে না, তাহলে jQuery লাইব্রেরি হারিয়ে যাওয়ার সম্ভাবনা রয়েছে বা আপনি jQuery ফাইলের পুরানো সংস্করণ ব্যবহার করছেন। সুতরাং, আপনাকে অবশ্যই আপনার ব্লগার থিমে jQuery ফাইল যোগ করতে হবে।
যাইহোক, বেশিরভাগ ব্লগার বিভিন্ন জাভাস্ক্রিপ্ট ভিত্তিক উইজেট চালানোর জন্য jQuery লাইব্রেরি অন্তর্ভুক্ত করে।
আপনার ব্লগে জাভাস্ক্রিপ্ট লাইব্রেরি যোগ করতে নিচের ধাপগুলো অনুসরণ করুন।
ধাপ #1: আপনার ব্লগার অ্যাকাউন্টে লগইন করুন এবং ড্যাশবোর্ডে যান
ধাপ #2: বাম উল্লম্ব মেনু থেকে থিম ট্যাবে ক্লিক করুন এবং HTML সম্পাদনা করুন ক্লিক করুন
ধাপ #3: এখন জাভাস্ক্রিপ্ট ফাইলের নিচে <head> এবং <head/> এর মধ্যে রাখুন
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
ধাপ #4: অবশেষে উপরের থেকে থিম সংরক্ষণ করুন বোতামে ক্লিক করুন।
এখন আপনার ব্লগার সাইটম্যাপ পরীক্ষা করুন যে এটি নির্বিঘ্নে কাজ করবে।
আমি আশা করি এই সাইটম্যাপটি আপনার ব্লগের জন্য আপনার সুবিধা সর্বাধিক করবে। আপনি যদি কোন সমস্যার সম্মুখীন হন তবে নীচে মন্তব্য করুন, আমি আপনাকে সাহায্য করার চেষ্টা করব।
আমার বাংলা নীতিমালা মেনে কমেন্ট করুন। প্রতিটি কমেন্ট রিভিউ করা হয়।
comment url