[New Blogger Must See] আপনার ব্লগে Sitemap page navigation সেট করুন খুব সহজেই ,বিস্তারিত পোস্টে

হেলো বন্ধুরা কেমন আছেন সবাই ?

আশাকরি সবাই ভালো আছেন।চলে এলাম আরও একটা পোস্ট নিয়ে । পোস্ট এর টাইটেল দেখেই তো বুঝে গেছেন যে আজকে আমরা ব্লগারে একটা HTML SITEMAP কিভাবে অ্যাড করবেন সে বিষয়ে কথা বলবো।আশাকরি আপনাদের কাজে লাগবে ।বিশেষ করে নতুন ব্লগারদের জন্য এটা খুব কাজে লাগবে।

আসলে HTML SITEMAP কিঃ

এক কথায় HTML SITEMAP আসলে হচ্ছে আপনার সাইট এর ন্যাভিগেশন ম্যাপ যেখানে আপনি একজায়গাতেই আপনার সাইট এর সকল পোস্ট আপনার সাইট এর লেবেল অনুসারে পেয়ে যাবেন ।যেখান থেকে আপনি আপনার সাইট এর সকল পোস্ট ব্রাউজিং করতে পারবেন।এটা সাধারনত বড় বড় সাইট গুলোতে করা হয়ে থাকে ,কিন্তু এখন প্রায় এটা সব সাইট এই অ্যাড করা হয়ে থাকে।

শুরু করার আগে কিছু কথাঃ

পোস্ট টা সাধারনত নতুনদের জন্য করা ।যারা যানেন তারা ইগনোর করতে পারেন।প্রতিনিয়ত সবাই নিজের ক্যারিয়ার হিসেবে ব্লগার কে বেছে নিচ্ছে তাই পোস্ট টা করা

তারপরও এ বিষয়ে আমি ট্রিকবিডি তে পোস্ট খুজে দেখলাম । কিছু পোস্ট পেয়েছি ।তারমধ্যে SHAKIB ভাই এর পোস্ট ছিলো ।কিন্তু আমার যে প্রসেস সেটা আলাদা ,তাই এটাও সবার জানা দরকার ।

সাকিব ভাই এর পোস্ট দেখতে পারেনঃ- Click Here

স্ক্রিনশটঃ

 

চলুন এবার শুরু করিঃ

প্রথমে ব্লগার Dashboard এ যান এবং Theme এ ক্লিক করুন

এবার কাস্টমাইজ এর পাশের Down-Arrow বাটন এ ক্লিক করুন

এবার প্রথমে আপনারা আপনাদের থিম টা ব্যাকআপ করে নিন ।কারন কোনো সমস্যা হলে যেনো Restore করতে পারেন।তারপর Edit Html এ ক্লিক করুন

 

এবার CTRL+F চেপে Search বাটন এ ]]></b:skin> এইটা Search করুন

এইবার ]]></b:skin> এই কোড টার উপরে নিচের  কোড গুলো PASTE করে দিন

CODE 1:

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ .mapasite { margin-bottom: 10px; background-color: #F8F8F8 } .mapasite.active .mapa { display: block } .mapasite .mapa { display: none } .mapasite h2 { background-color: #EEE; color: #000; font-size: 15px; padding: 10px 20px; border-radius: 2px; margin-bottom: 0; cursor: pointer; font-weight: 700 } .mapasite h2 .botao { font-size: 18px; line-height: 1.2em } .botao .fa-minus-circle { color: #f30 } .mapapost { overflow: hidden; margin-bottom: 20px; height: 70px; background-color: #FFF } .mapa { padding: 40px } .map-thumb { background-color: #F0F0F0; padding: 10px; display: block; width: 65px; height: 50px; float: left } .map-img { width: 65px; height: 50px; overflow: hidden; border-radius: 2px } .map-thumb a { width: 100%; height: 100%; display: block; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .map-thumb a:hover { -webkit-transform: scale(1.1) rotate(-1.5deg)!important; -moz-transform: scale(1.1) rotate(-1.5deg)!important; transform: scale(1.1) rotate(-1.5deg)!important; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .mapapost .wrp-titulo { padding-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.3em; padding-left: 25px; padding-right: 10px; display: block; overflow: hidden; margin-bottom: 5px } .mapapost .wrp-titulo a { } .mapapost .wrp-titulo a:hover { color: #f30; text-decoration: underline } .map-meta { display: block; float: left; overflow: hidden; padding-left: 25px; } .mapasite h2 .botao { float: right }

Code 1 Download : Drive

এইবার CTRL চেপে </body> ট্যাগ Search করুন এবং </body> ট্যাগ এর উপরে নিচের কোড গুলো Paste করে দিন

CODE:2

<script type='text/javascript'> //<![CDATA[ var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZnymtL-0OzguSoT-X4Z7-NTENK6GXdbpg4nQS8WKH-zOKjCvIN_VXhNpjLt4EBvM0fQ90ZYvmdXP7k8JeeVcv2iM7Db3lz6q9KjvxuC8phPwZ3tc-TYHBG7N5SCLHYPR5qU03bAGCTdE/s1600-r/nth.png"; var static_page_text = $.trim($('.static_page .post-body').text()); if (static_page_text === "[sitemap]") { var postbody = $('.static_page .post-body'); $.ajax({ url: "/feeds/posts/default?alt=json-in-script", type: 'get', dataType: "jsonp", success: function(dataZ) { var blogLabels = []; for (var t = 0; t < dataZ.feed.category.length; t++) { blogLabels.push(dataZ.feed.category[t].term) } var blogLabels = blogLabels.join('/'); postbody.html('<div class="siteLabel"></div>'); $('.static_page .post-body .siteLabel').text(blogLabels); var splabel = $(".siteLabel").text().split("/"); var splabels = ""; for (get = 0; get < splabel.length; ++get) { splabels += "<span>" + splabel[get] + "</span>" } $(".siteLabel").html(splabels); $('.siteLabel span').each(function() { var mapLabel = $(this); var mapLabel_text = $(this).text(); $.ajax({ url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script", type: 'get', dataType: "jsonp", success: function(data) { var posturl = ""; var htmlcode = '<div class="mapa">'; for (var i = 0; i < data.feed.entry.length; i++) { for (var j = 0; j < data.feed.entry[i].link.length; j++) { if (data.feed.entry[i].link[j].rel == "alternate") { posturl = data.feed.entry[i].link[j].href; break } } var posttitle = data.feed.entry[i].title.$t; var author = data.feed.entry[i].author[0].name.$t; var get_date = data.feed.entry[i].published.$t, year = get_date.substring(0, 4), month = get_date.substring(5, 7), day = get_date.substring(8, 10), date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year; var tag = data.feed.entry[i].category[0].term; var content = data.feed.entry[i].content.$t; var $content = $('<div>').html(content); var src2 = data.feed.entry[i].media$thumbnail.url; htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>' } htmlcode += '</div>'; mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>'); $(document).on('click', '.mapasite h2', function() { $(this).parent('.mapasite').addClass('active'); $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle'); }); $(document).on('click', '.mapasite.active h2', function() { $(this).parent('.mapasite').removeClass('active'); $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle'); }); } }); }); } }); } //]]> </script>

Code 2 Download : DRIVE

দেখুন আমি করে দিয়েছি ।এখন থিম টা Save করে বেরিয়ে যান

 

এবার পেজ এ এসে একটা নতুন পেজ Create করুন

 

এবার নতুন পেজে যথাক্রমে Title দিন Sitemap এবং Content এ শুধু sitemap লেখে Publish করে দিন

 

এখন পেজ টা ভিউ করে দেখুন আপনার ব্লগার সাইট এ HTML SITEMAP NAVIGATION সেট হয়ে গেছে ।এবং দেখুন এই পেজ থেকে আমার ব্লগের সকল পোস্ট ক্যাটেগরি সহ শো করছে

এখন আপনারা এই Sitemap পেজ টি আপনার ব্লগার সাইট এর যেকোন যায়গায় লাগাতে পারেন।

আশাকরি আপনারা সবাই এই পোস্ট টি বুঝতে পেরেছেন ।আমি সব বুঝিয়ে বলেছি।তারপরও কেউ যদি বুঝতে না পারেন তাহলে পোস্ট টি আরেকবার মন দিয়ে পড়তে পারেন আর নাহলে কমেন্ট করতে পারেন ।

চাইলে আমার সাইট থেকে ঘুরে আসতে পারেনঃ Click Here

আমার সাথে যোগাযোগ করতে চাইলেঃ Facebook

[বিঃদ্রঃ আমার পোস্ট টা আমার অনুমতি ছাড়া Trickbd.com এবং আমার নিজের সাইট এর বাইরে পোস্ট করা সম্পূর্ণ নিষেধ]

ধন্যবাদ পোস্ট টি পড়ার জন্য। আজ এ পর্যন্তই, সবাই ভালো থাকুন সুস্থ থাকুন আল্লাহ হাফেজ।

The post [New Blogger Must See] আপনার ব্লগে Sitemap page navigation সেট করুন খুব সহজেই ,বিস্তারিত পোস্টে appeared first on Trickbd.com.

from Trickbd.com https://ift.tt/KwMc2Bq
via IFTTT