HTML Sitemap Kaise Banaye Blogger Blog Ke Liye - Tutorial

Sitemap किसी भी blog के लिए most important चीज है जिसे हर blogger को अपने blog में add करना चाहिए यह सिर्फ एक page नहीं है, यह label specific post के लिए direct navigation देता है जिससे immediately bounce rate कम करने में और SEO Optimization के लिए भी बहुत help मिलती है.

• Blogger Blogs Ke Liye 7 Basic On Page SEO Tips

आज हम जिस HTML Sitemap Widget को add करने जा रहे हैं, वो एक list की तरह latest published order पर articles की list बनाकर दिखता है.

Add HTML Sitemap

यह sitemap ajax based है, जिससे यह blazing fast तरीके से load हो जाएगा और इससे blog के performance में को भी प्रभावित नहीं करेगा. "Website Blog Ke Liye Google HTML Sitemap widget Kaise Banaye?" के बारे में जानने से पहले, Sitemap को अच्छे से समझ लेते हैं.

Sitemap Page Kya Hai? (What is a Sitemap page?)

Sitemap हमारे blog posts की एक simple list होती है, जो की आमतौर पर crawlers और bots (Google bots) को हमारे blog को properly crawl करने में help करता है. यह हमारे blog के crawl rate को increase करता है और हमारी latest posts को fast indexing करने में भी मदद करता है. हाल ही में मैंने खुद अपने blog के sitemap को modified किया है जिसे आप यहाँ click करके देख सकते हैं.

हमारे new sitemap page  में हमारे blog posts को label categorized तरीके से listed किया गया है.

So in this post, मैं आपके blogger blog के लिए इस तरह का HTML sitemap  page बनाने के लिए Code को share कर रहा हु.

Website or Blog Ke Liye Sitemap Kaise Banaye

मैं इस method को short and simple ही रखूँगा, बस आप इसे implement करे और अपना खुद का sitemap सिर्फ 2 minute में प्राप्त करें. तो यहाँ आपके blogger blog के लिए contents page बनाने के लिय step by step full guide in Hindi दे रहा हूँ.

Editing करने से पहले मैं आपको अपने Template का backup लेने के लिए recommend करूँगा, ताकि कुछ भी गलत हो जाए, तो फिर भी आपका blog design safe बना रहे है.

Let's Start Step-1 ( Adding CSS )

सबसे पहले आपको अपने blogger account में sign in करना होगा और फिर Templates>> Edit HTML पर जाकर ]]></b:skin> tag को search करें और इसके बाद नीचे दिए गए code को copy करके उसके उस tag के अन्दर paste कर दीजिये.

/* ######## Navigation Menu Css by AnyInfo.tk ######################### */
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: $(primary.color);
    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
}

Step-2 ( Adding HTML Script )

अब यह इस tutorial का most essential part है और आपको इसे बहुत ही carefully करना होगा. Template में, </body> tag को search करिए और इसके बाद नीचे गए HTML Coading को उस टैग के पहले paste  कर दीजिये.

 <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/AVvXsEiPZKl3SfhxUqW6EPRDB0YJAec_LU5EgnesNPOSRM6y1rLS8kmavHEg3iXDHfoMgHOCDXXAOGrT1JcsMogGlxgmygpVSa63Q9m4g-TpClc3RjOidoISXXUeEIg0fmST0-NM-Idb7MY4Rp0/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>

अब अपने Template को Save कर दीजिये और Sitemap add करने के लिए Pages section पर जाइए.

अगर आपके ब्लॉग में jquery widget सही से काम नहीं करता है तो आपको jquery plugin install करना होगा यदि आपने अभी तक insatall नहीं किया है तो कर लीजिये...

Step-3 ( Adding Sitemap In Pages ) - Most Important !!

अब ये इस Tutorial guide का most important part है और आपको इसे बहुत ही carefully करना होगा. Blogger Dashboard>> Pages>> Add New Page पर जाइए. 

Page Title डालें और Option का इस्तेमाल करके comments को hidden कर दीजिये, अब नीचे दिए गए code को page content area में add कर दीजिये.

[sitemap]

और भी better understanding के लिए मैं यहाँ एक image दे रहा हु जिसमे मैंने सभी settings को highlight किया हुआ है, जिन्हें आपको भी करना होगा.

Blogger Sitemap Widget Add Karen

अब सिर्फ Publish button पर click करिए और बनाये गए Sitemap widget को एक बार देख लीजिये. :)

Conclusion

Congrats!! आपने Blogger Blog Me Sitemap Kaise Banaye? बनाना सीख लिए है. अपने BlogSpot Blogs में Sitemap widget add करके अपने blog में visit करिए और awesome sitemap widget को live check करिए, I hope आपको ये tutorial पसंद आया होगा, यदि हाँ तो इस पोस्ट को अपने friends के साथ share करिए.

मैं इस तरह के awesome widgets develop कने में hard work कर रहा हु इसलिए आप मेरे साथ जुड़े रहिये और अभी subscribe करिए. Goodbye!! (English में Goodbye ha ha ha).