আপনার ব্লগে যুক্ত করুন রেসপনসিভ সাইটম্যাপ Blogger এর জন্য

কি খবর ব্লগার বন্ধুরা সবাই কেমন আছেন ? নিশ্চই ভাল । আমাদের বেশির ভাগ সবারই ব্লগারে ব্লগ আছে । আমরা সবাই চাই ওয়ার্ডপ্রেসের মত করে আমাদের ব্লগের সাইটম্যাপ তৈরি করতে । কিন্তু ওয়ার্ডপ্রেসের মত সুন্দর সাইটম্যাপ পাই না । তাই আজ আমি আপনারদের জন্য নিয়ে এলাম ৩ কলাম বিশিষ্ট্য দারুন একটা রেসপনসিভ স্টাইল সাইটম্যাপ গেজেট ।গেজেটটা দেখতেও দারুন ।

ডেমো দেখুন 

কিভাবে আপনার ব্লগে যুক্ত করবেন ?

১ । আপনার ব্লগার ড্যাশবোর্ডে যান

২ । ড্যাশবোর্ড থেকে বাম পাশে পেজ ট্যাবে ক্লিক করুন

 

৩ । New Page থেকে Blank Page এ ক্লিক করুন

৪ । তারপর HTML এ ক্লিক করুন

৫ । তারপর নিচের কোড গুলো পেস্ট করে দিন


<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type="text/javascript"></script> <script src="http://www.projuktirmela.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> <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>

পরিবর্তন করুন

উপরের কোডে  Projuktirmela.blogspot.com এর জায়গায় আপরনার ব্লগের লিঙ্ক দিন ।


৬ ।  এবার Publish এ ক্লিক করুন কাজ শেষ ।

আশা করি আপনাদের ভাল লেগেছে । ভাল লাগলে আপনার মতামত জানাবেন কমেন্ট করে ।
নিয়মিত আপডেট পেতে আমাদের ফেসবুক ফ্যান পেজে লাইক দিয়ে একটিভ থাকুন ।

ফেসবুকে আমি                   আমাদের ফ্যানপেজ