ব্লগার সাইটের জন্য স্টাইলিশ এবং প্রফেশনাল HTML সাইটম্যাপ তৈরির নিয়ম
১. HTML সাইটম্যাপ কেন প্রয়োজন?
XML সাইটম্যাপ মূলত সার্চ ইঞ্জিনের জন্য কাজ করে, কিন্তু HTML সাইটম্যাপ তৈরি করা হয় আপনার পাঠকদের জন্য। এটি আপনার ব্লগের ক্যাটাগরি অনুযায়ী সকল পোস্টকে এক জায়গায় প্রদর্শন করে। আমি আমার TechSohag.com সাইটে এটি ব্যবহার করে দেখেছি যে, এটি বাউন্স রেট কমাতে এবং এসইও স্কোর বাড়াতে চমৎকার কাজ করে।
২. প্রফেশনাল ডিজাইনের গুরুত্ব
৩. যেভাবে সেটআপ করবেন (ধাপে ধাপে)
নিচের পদ্ধতিটি অনুসরণ করে আপনি সহজেই আপনার ব্লগে একটি স্টাইলিশ সাইটম্যাপ পেজ যুক্ত করতে পারেন:
৪. এসইও এবং ইউজার ফ্রেন্ডলিনেস
আমি যখন নিজে এই স্টাইলিশ সাইটম্যাপটি ব্যবহার করা শুরু করি, তখন লক্ষ্য করেছি যে গুগলের ক্রলারও এর মাধ্যমে ইন্টারনাল লিঙ্কগুলো সহজে স্ক্যান করতে পারে। এটি আপনার সাইটের ইন্টারনাল লিঙ্কিং শক্তিশালী করে এবং সব ডিভাইস থেকে (মোবাইল ও পিসি) খুব সুন্দরভাবে দেখা যায়।
Stylish Pro-looking HTML Sitemap Code
<!-- Sitemap page for blogger by EdutechBD.xyz -->
<style type="text/css">
#twistblogg{
width:99%;
margin:5px auto;
border:1px solid #05a0ff;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz- box-shadow: 4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow :4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl {
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#c2eafe 0%,#05a0ff 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#05a0ff),color-stop(1,#c2eafe));
border:1px solid #37c2dd;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #a0a0a0;
-moz-box-shadow:3px 3px 1px #a0a0a0;-webkit-box-shadow:3px 3px 1px #a0a0a0;display:block;
}
.labl a{color:#ff;
}
.labl:first-letter{text-transform:uppercase;
}
.new{color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#ff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.50,#fff),color-stop(1,#C2EAFE));
}
.postname li{border-bottom: #ddd 1px dotted;
margin-right:5px
}
/*This is optional - For full width Sitemap*/
.sidebar, #bottom, #blog-pager, h2.post-title, .comments {
display: none !important;
}
#content { width: 100% !Important; }
@media only screen and (max-width: 1089px) and (min-width: 980px) { #content { width: 100% !Important; } } @media only screen and (max-width: 979px) and (min-width: 768px) { #content { width: 100% !Important; } } @media only screen and (max-width: 767px) and (min-width: 480px) { #content { width: 100% !Important; } } @media only screen and (max-width: 479px) { #content { width: 100% !Important; } }
</style>
<div id="twistblogg">
<script src="https://amanbhattarai4400.github.io/csshosting/sitemap.js" type="text/javascript"></script>
<script src="https://www.DjSohagRana.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
প্রযুক্তি এবং ওয়েব কাস্টমাইজেশন সম্পর্কিত আরও টিউটোরিয়াল পেতে নিয়মিত চোখ রাখুন TechSohag.com-এ।