হ্যালো বন্ধুরা আজকে আমরা এই আর্টিকেল থেকে জানব কিভাবে একটি স্টাইলিশ সাইট ম্যাপ পেজ তৈরি করতে হয় এটি যে কোন ব্লগারের টেমপ্লেটের জন্য প্রযোজ্য হবে ।
 |
| ব্লগার সাইটের জন্য সাইট ম্যাপ পেজ তৈরি |
সাইট ম্যাপ কি?
একটি ওয়েবসাইট বা ব্লগার সাইটের জন্য একটি সাইট ম্যাপ বিশেষ ভূমিকা পালন করে । এইজন্য এই সাইট ম্যাথ পেজটি তৈরি করা অতিজরুরী বলে আমি মনে করি ।
নিচে এই সাইট ম্যাপের একটি ডেমো দেওয়া হল আপনি চাইলে সাইট ম্যাপটি তৈরি করার আগে সাইট ম্যাপটি দেখতে কি রকম হবে তা ডেমু বাটনে ক্লিক করে দেখতে পারেন অবশ্যই এটা আপনার সুবিধার জন্য দেওয়া হয়েছে ।
সাইট ম্যাপ পেজটির বৈশিষ্ট্য :
এখন আমরা সাইট ম্যাপটির বৈশিষ্ট্য সমূহ জানবো । মিসেস সাইট ম্যাপ পেজটির বৈশিষ্ট্য সমূহ ছক আকারে উল্লেখ করা হলো ।
ফিচার
- ডার্ক মুড ফিচার
- ট্যাগ লিস্ট
- মোবাইল ফ্রেন্ডলি
- স্টাইলিশ ডিজাইন
- বাংলা ভাষা সাপোর্ট
কিভাবে সাইটম্যাপ পেজটি আপনার সাইটে যুক্ত করবেন :
এই স্টাইলিশ সাইট ম্যাপ পেজটি আপনার ব্লগেরে এড করতে হলে অবশ্যই নিচের দেওয়া ধাপ গুলো আপনাকে অনুসরণ করতে হবে ।
- প্রথমে আপনি আপনার ব্লগারের ড্যাশবোর্ড যান ।
- ড্যাশবোর্ড থেকে পেজ অপশনে গিয়ে একটি নতুন পেজ তৈরি করুন এবং পেজটির নাম দিন সাইট ম্যাপ ।
- এখন আপনি আপনার পেজটিকে কম্পোজ ভিউ থেকে এইচটিএমএল ভিউয়ে আনুন ।
- এখন নিচে দেওয়া কোড গুলো কপি করুন এবং আপনার পেজে গিয়ে পেস্ট করুন ।
<div class='postSection sitemaps' id='sitemaps'>
<div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown: change i.src="..." with your url */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemapBox\"><h4 class=\"sitemapTitle\">'+n[g]+'</h4>',l+='<div class=\"sitemapContent\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l }; var i=o.createElement("script");i.src="https://yourdomain.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>
<style>
.sitemaps{font-size:14px}
.sitemapBox{padding:15px;border:1px solid var(--content-border);border-radius:5px}
.sitemapBox:not(:last-child){margin-bottom:20px}
.postEntry .sitemapTitle{margin-top:0; font-size:14px;font-weight:400;font-family:var(--body-font)}
.sitemapTitle:before{content:'Label: '; font-size:90%;opacity:.8}
.sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:sitemap-count}
.sitemaps li{display:flex;align-items:baseline}
.sitemaps li:not(:last-child){margin-bottom:0}
.sitemaps li:before{content:counter(sitemap-count) '.';counter-increment:sitemap-count;flex-shrink:0;width:25px;font-size:13px;font-family:var(--font-body);line-height:normal; opacity:.7}
.darkMode .sitemapBox{border-color:rgba(255,255,255,.1)}
</style>
- যে জায়গায় কালারিং করে লেখা আছে yourdomain.com ওখানে আপনার সাইটের ইউআরএল বসান ।
- এখন আপনি আপনার পেজটিকে পাবলিশ বাটনে ক্লিক করে পাবলিশ করুন ।