হেলো বন্ধুরা কেমন আছেন সবাই ?
আশাকরি সবাই ভালো আছেন।চলে এলাম আরও একটা পোস্ট নিয়ে । পোস্ট এর টাইটেল দেখেই তো বুঝে গেছেন যে আজকে আমরা ব্লগারে একটা 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/AVvXsEjIw3CHFZrqv3J1LbP6f5freITYoz2F7q4l1wRsedOsuJjb56Z6Y0TZDttGvg1Ii5wvnFx4enYYfvTRt4qIX9rFKyE8ZbRJjz1G_Bcfct-6jOYUm6cyo9GIfAgl5NvM_1_4PnlzbiZ1eA4/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.
প্লাগিন ব্যাবহার করে।
