কেমন করে ব্লগ বা ওয়েব সাইট এর সাইট ম্যাপ(Site Map) পেজ তৈরি করতে হয়?

আজ আমরা ব্লগারের জন্য কিভাবে সাইট ম্যাপ তৈরি করতে হয় তা জানবো।আমাদের ভেতর যারা জানেন না কেন ব্লগ বা সাইট এর জন্য সাইট ম্যাপ( Site Map) পেজ তৈরি করতে হবে? তাদের জন্য “সাইট ম্যাপ( Site Map)হচ্ছে ব্লগের সব গুলো পোষ্টকে লিষ্ট আকারে প্রকাশ করার মাধ্যম এটিকে ব্লগের দর্পন ও বলা যায় কারন সব গুলো পোষ্ট কোনটা কোন ক্যটাগরিতে প্রকাশিত তা একটি টেবিল বা লিষ্ট আকারে প্রকাশিত হয় । আর এটিকে গুগল ওয়েব মাষ্টার টুল ( Google Webmaster Tool )ও বলা যায়। তাহলে বুঝতে পারছেন এটি কতটা জরুরি ।

আজ আমরা দুইটি ভিন্ন ভিন্ন সাইট ম্যাপ এর কোড নিয়ে আলোজনা করবো।

প্রথমে আপনাকে যা করতে হবে

ব্লগার একাউন্ট এ লগিন করুন,যে ব্লগ এ সাইট ম্যাপ লাগতে চান সেটিতে প্রবেশ করুন।

এখন পেজ অপসনে গিয়ে একটি নতুন পেজ তৈরি করুন এবং নতুন পেজ এর HTML অংশে গিয়ে নিম্নের তিনটি কোড এর যে কোন একটি ব্যবহার করতে পারেন যেটি আপনার ভালো লাগে সেই কোডটি কপি করুন এবং প্রয়োজনীয় কাজ গুলো সম্পন্ন করুন।

Go to Blog Title → Page → New Page → Blank Page /Sitemap→ HTML

১ম সাইট ম্যাপ( Site Map)কোড

<script src="http://trickiezone.googlecode.com/svn/trunk/sitemaptable.js">

</script>

<script src="http://abbtips.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">

</script>

এখানের http://abbtips.blogspot.com এর পরিবর্তে আপনার সাইট বা ব্লগ এর নাম দিন এটি খুবই সাধারণ একটি সাইট ম্যাপ।তবে এটিই বেশি কাজের কোড কম কিন্তু কাজ বেশি।এটি লিষ্ট আকারে আপনার ব্লগ এর ক্যাটাগরি গুলোকে প্রকাশ করে থাকে।

Live Demo Click Here

২য় সাইট ম্যাপ( Site Map)কোড

<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/sitemap.js" type='text/javascript'></script>

<script src="http://www.abbtips.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<p style="display:none;"><a href="http://www.abbtips.blogspot.com/">All Bengali Blogging Trick</a></p>

<style type="text/css">

.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }

.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }

.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}

.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }

.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }

.ct-columns-3 p a:hover { background: #555; color: #fff; }

@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }

</style>

এখানের http://abbtips.blogspot.com এর পরিবর্তে আপনার সাইট বা ব্লগ এর নাম দিন।

Live Demo  Click Here

কারো কোন প্রশ্ন বা মতামত থfকলে করতে পারেন।