Menu

How to Add Sitemap Widget In Blogspot Blogs, ब्लॉगस्पॉट ब्लॉग्स में साइटमैप विजेट कैसे जोड़ें।

How to Add Sitemap Widget In Blogspot Blogs – साइटमैप सबसे जरुरी  है जो हर ब्लॉगर को अपने ब्लॉग में जोड़ना चाहिए यह सिर्फ एक पेज  नहीं है, बल्कि यह आपके यूजर को आपके ब्लॉग को सही तरीके से नेविगेट करता है।  जिससे आपके ब्लॉग के bounce rate में कमी आती है। अपने ब्लॉग में  जिस साइटमैप विजेट ( Sitemap Widge)आप जोड़ना चाहते हैं, वह सही तरीके से आपके लेखो की सूचि दर्शाता हो इसका ख्याल रखना चाहिए। साथ ही , जिससे यह widget   तेज़ी से लोड हो  और आपके ब्लॉग के प्रदर्शन को प्रभावित नहीं करे। आगे बढ़ें और देखें कि (How to Add Sitemap Widget In Blogspot Blogs) ब्लॉगस्पॉट ब्लॉग्स में साइटमैप विजेट कैसे जोड़ें।

SEO Ready Best Templates Download

How to Add Sitemap Widget In Blogspot Blogs

स्टेप  -1 फॉलो  करें (Adding CSS)

संपादन करने से पहले आपको अपने टेम्पलेट का बैकअप जरूर ले लेना चाहिए, ताकि कुछ भी गलत हो जाने पर , फिर से भी आपका ब्लॉग डिज़ाइन सुरक्षित रहे।  पढ़े :  ब्लागस्पाट ब्लॉग के डिज़ाइन का बैकअप कैसे ले।

सबसे पहले आपको अपने ब्लॉगर खाते में लॉग इन करे फिर GO to >> Templates >> Edit HTML  इसके बाद  ]]> </ b: skin> सर्च करे  और निचे दिए गए कोड को कॉपी करके इसके ऊपर पेस्ट करे ।

/* ######## Navigation Menu Css   ######################### */
.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
}

 

स्टेप  -2 (एचटीएमएल स्क्रिप्ट जोड़ना) ( Adding HTML Script )

अब यह इस ट्यूटोरियल का सबसे जरुरी  हिस्सा है और आपको इसे बहुत सावधानी से करना होगा। टेम्पलेट में, </ body> टैग को  सर्च करे  और इसके बाद के  नीचे दिए गए HTML कोड को कॉपी करके इस टैग के ऊपर  पेस्ट करें।

 <script type=’text/javascript’>
//<![CDATA[
var text_month = [, “Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sept”, “Oct”, “Nov”, “Dec”];
var no_image_url = “http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png”;
var static_page_text = $.trim($(‘.static_page .post-body’).text());
if (static_page_text === “

“) {
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>

अब अपना टेम्पलेट को सेव करदे  और साइटमैप जोड़ने के लिए पेज  पर जाएं।

नोट: – यह विजेट jquery पर काम करता है इसलिए  आपको jquery प्लगइन इंस्टॉल करना होगा यदि आपने इसे अभी तक इंस्टॉल नहीं किया है तो .. वैसे SORA TEMPLATES पहले से ही इनस्टॉल रहता है।

The 57 best responsive templates for Blogger

स्टेप  3 (पेजों में साइटमैप जोड़ना) – सबसे महत्वपूर्ण !!

अब इस यह ट्यूटोरियल का सबसे अनिवार्य हिस्सा है और आपको इसे बहुत सावधानी से करना होगा। अपने ब्लॉगर डैशबोर्ड पर जाएं> PAGES > नया पेज जोड़ें। 
PAGE का शीर्षक जोड़ने और विकल्पों का उपयोग कर टिप्पणियों को हाईड करने  के बाद, पृष्ठ सामग्री क्षेत्र में निम्न कोड जोड़ें।

सही तरीके से आपको समझ में आये इसके लिए नीचे  चित्र को देखे :

How to Add Sitemap Widget In Blogspot Blogs
अब PUBLISH बटन पर क्लिक करें और नए जोड़े गए साइटमैप विजेट को देखने के लिए प्रकाशित पृष्ठ देखें। 😉

 

निष्कर्ष

 बस आपने कर लिया।  अब आप जानते हैं कि (How to Add Sitemap Widget In Blogspot Blogs) ब्लॉगस्पॉट ब्लॉग्स में साइटमैप विजेट कैसे जोड़ें। अपने ब्लॉग पर जाएं और कार्यविस्तार में अद्भुत विजेट की जांच करें, अगर आपको मज़ा आया तो आप इस ट्यूटोरियल को पसंद करें , तो कृपया इसे अपने दोस्तों के साथ साझा करें।
 
blogger index page, how to add xml sitemap in blogger, sitemap page for blogger, blogger sitemap, https www blogger com preview loading ,xml creator, website map webmaster blogs
पढ़े – Blogger में HTML/Javascript को कैसे जोड़े
 
One Response
  1. Eshwerdeen Singh March 3, 2018 / Reply

Leave a Reply

Your email address will not be published. Required fields are marked *