Sitemap কি তা আশা করি সবাই জানেন। কারন ট্রিকবিডিতে যারা প্রতিদিন ভিজিট তাদের এসব বিষয় অজানা থাকার কথা নয়, তবুও যারা নতুন আছেন তাদের জন্য আমি সংক্ষেপে বলে দিচ্ছিঃ
XML Sitemap হলো এমন একটা ফাইল যা Search Engine কে বলে দেয় যে ঐ সাইটের কেথায় কি আছে। এককথায় Sitemap হলো একটা মানচিত্র।
এটাতো বললাম XML Sitemap এর কথা, তবে আজকে আমি ব্লগারের জন্য যে সাইটম্যাপটা বানাবো এটা XML না এটা HTML.

XML Sitemap আর HTML Sitemap এর মধ্যে পার্থক্য কি?

XML Sitemap হলো Search Engine এর জন্য একটা মানচিত্র আর HTML Sitemap সাইটের ভিজিটরদের জন্য একটা মানচিত্র।

আপনার সাইটের কোথায় কি আছে তা সহজে বের করার জন্য সাইট ম্যাপ খুবই গুরুত্বপূর্ণ। তাহলে আর কথা না বাড়িয়ে চলুন দেখে আসি কিভাবে আপনার ব্লগার সাইটের জন্য একটা HTML Sitemap তৈরি করবেন।
DEMO

Step 1:
প্রথমে আপনার সাইটে Login করুন

Step 2:
তারপর Pages >> New Page এ ক্লিক করুন।

Step 3:
Page এর Title দিবেন Sitemap, এর নিচের কোডগুলো কপি করে নিয়ে বসিয়ে দিন।
Main Script Code

 <div id="bp_toc">
</div>
<script src='https://sajidblue.xtgem.com/sitemap.js'  type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> 

Css Style Code

 /* Sitemap plugin By Sajid Ch */
#bp_toc {
    color: #666;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #d2d2d2;
    float: left;
    width: 100%;
}
span.toc-note {
    display: none;
}
#bp_toc tr:nth-child(2n) {
    background: #f5f5f5;
}
td.toc-entry-col1 a {
    font-weight: bold;
    font-size: 14px;
}
.toc-header-col1,
.toc-header-col2, .toc-header-col3 { background:#9E9E9E; } .toc-header-col1 { padding: 10px; width: 250px; } .toc-header-col2 { padding: 10px; width: 75px; } .toc-header-col3 { padding: 10px; width: 125px; } .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size: 13px; text-decoration: none; color: #fff; font-weight: 700; letter-spacing: 0.5px; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration: none; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding: 5px; padding-left: 5px; font-size: 12px; } .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a { color: #666; font-size: 13px; text-decoration: none
} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover { text-decoration:underline; } #bp_toc table { width: 100%; margin: 0 auto; counter-reset: rowNumber; } .toc-entry-col1 { counter-increment: rowNumber; } #bp_toc table tr td.toc-entry-col1:first-child::before { content: counter(rowNumber); min-width: 1em; min-height: 3em; float: left; border-right: 1px solid #fff; text-align: center; padding: 0px 11px 1px 6px; margin-right: 15px; } td.toc-entry-col2 { text-align: center; }

Note: যাদের কোড কপি করতে সমস্যা হচ্ছে তারা নিচের লিংক থেকে ডাউনলোড করে নিন।

  • Google Drive
  • Step 4:
    এবার নিচের ছবির মতো Settings গুলো করে Publish এ ক্লিক করুন।

    ব্যাস আমাদের কাজ শেষ। এবার আপনার তৈরি করা Sitemap Page টা ভিজিট করে দেখুন।
    আশা করি বুঝতে পরেছেন, তবুও বুঝতে কোন সমস্যা হলে কমেন্ট করুন অথবা আমার সাথে Facebook এ যোগাযোগ করুন।

    ভালো লাগলে আমার সাইট থেকে ঘুরে আসবেন।

  • Blogger Sitemap কিভাবে Google এ সাবমিট করবেন
  • 16 thoughts on "Blogger সাইটের জন্য তৈরি করে নিন সুন্দর একটা HTML Sitemap"

    1. Nur Md Nirob Nur Md Nirob Author says:
      error আসতেছে ভাাই ৷ জীপ ফাাাইলে দিন ৷


      1. Bear Grylls Bear Grylls Author Post Creator says:
        post updated
      1. Bear Grylls Bear Grylls Author Post Creator says:
        ধন্যবাদ
    2. Tubelight Tubelight Contributor says:
      use txt file please..
      gdrive a upload kore link den
      1. Bear Grylls Bear Grylls Author Post Creator says:
        post updated
      1. Bear Grylls Bear Grylls Author Post Creator says:
        thank you
      1. Bear Grylls Bear Grylls Author Post Creator says:
        thanks
    3. Fnc+Faruk Contributor says:
      xml file uploade hoy na keno


      1. Bear Grylls Bear Grylls Author Post Creator says:
        bujhlam na
    4. Fnc+Faruk Contributor says:
      blogspot.com site theme uploade korote parina?
      1. Bear Grylls Bear Grylls Author Post Creator says:
        আমি তো কোড শেয়ার করলাম, আপনি থিম পেলেন কই
    5. Main Script code আর
      Css Style Code কি একসাথে বসাব?

      বি.দ্র:ভাই আমি নতুন।

      1. Bear Grylls Bear Grylls Author Post Creator says:
        css টা আপনি ইচ্ছা করলে theme edit করে theme এর css এর সাথে বসাতে পারেন বা html কোডের সাথেই style tag এর ভিতরও বসাতে পারেন

    Leave a Reply