Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
  • Support
  • Licenses
  • Advertise
Subscribe
Joecalih
Joecalih
  • Blogging
    • WordPress
    • Blogger
      • Blogger Widgets
    • Marketing
      • Content Marketing
      • Social Media Marketing
      • Email Marketing
      • Affiliate Marketing
    • Tips & Tricks
  • SEO
    • What is SEO
      • White Hat SEO
      • Black Hat SEO
    • SEO Tutorials
      • Local SEO
      • Video SEO
      • Image SEO
    • Beginners SEO
    • On-Page-SEO
    • SEO ToolsFree
    • Link Building
    • PPC
  • Graphics
    • Photoshop
      • Photoshop Actions
      • Photoshop Brushes
      • Photoshop Overlays
      • Photoshop Textures
      • Photoshop Tutorials
    • Lightroom
      • Lightroom Presets
      • Lightroom Mobile Presets
      • Lightroom Tutorials
    • Premuire Pro
    • Design
      • Posters
      • Mockups
      • Vectors
  • Photography
  • Shop$69
  • Offers
Joecalih Freebies
  • Landscape Lightroom Presets Landscape Lightroom Presets
    Rated 5.00 out of 5
    $30.00 $0.00
  • Food Lightrrom Presets Food Photography Lightroom Presets $50.00 $0.00
  • Architecture Lightroom Presets Architecture Lightroom Presets $80.00 $0.00
  • petermckinnon presets Peter Mckinnon Lightroom Presets $30.00 $0.00
0
  • Blogger Widgets

Add Sitemap Page Widgets For Blogger Websites

  • Joecalih
  • November 4, 2020
  • No comments
  • 67 views
  • 11 minute read

A sitemap is a navigation view of website functions that make a user-friendly view of many web posts at one point. Blogger supports sitemaps and its a requirement for Adsense and other posts on the web. Today, we have different blogger sitemap widgets that you can implement in a sitemap blogger page which we will learn how to make in this tutorial.
There are different kinds of sitemaps in which we are going to implement one which is the most paramount to set up on a blogger page.

Types Of Blogger Sitemaps.

1. Website Planning Sitemaps.

When starting up your blogger blog, before considering any other exercise hosting it or buying a domain, then you will need to write the topics that you are going to tackle and in which you will make tags for. Planning is a cornerstone for your blogger blog.

2. Structured Blogger Listing.

Its a crawler necessity that we must implement in blogger for search engine bots use to go through your website pages. This is the one we are going to implement. Just from the word structured, the blogger sitemap arranges the blogger posts in a way that crawlers will know every page and index them for ranking in search results. Without the structured blogger website listing, it will be so hard for your blogger posts and pages to rank in search results.

Blogger Sitemap Widgets.

1. Clean Grid View Sitemap For Blogger Websites.

This widget gives the blogger posts in grid columns with the date, label, and author which will bring about a clear view of your sitemap page. The below representation gives a responsive view of how the widget will look like in your blogger blog sitemap page.

Clean Grid View Sitemap For Blogger Websites.

The sitemap looks responsive to every website. Follow the below steps to implement it into
Steps To Add SitemP To Blogger Sitemap Page.
1. Log in to your Blogger website profile.
2. Click on pages on the left side of the blogger platform options.
3. Click on Create New Page and at the title add the name Sitemap.
4. Click on the content area and don’t type a thing.
5. Next to compose, click on the HTML option where you will paste the below code.

<style type=”text/css”>
.grid-sitemap {
 overflow: hidden;
 position: relative;
 height: 565px;
 margin: 20px 0 40px 0;
}
.grid-sitemap iframe {
    display: block;
    width: 100%;
    height: 680px;
    margin-top: -115px;
    margin-left: -5px;
}
</style>
<div class=”grid-sitemap”>
 <iframe src=”https://joecalih.com/view/flipcard”></iframe>
</div>

After pasting the Above code at the HTML writing part, Then change the URL joecalih.com to your own website URL.

2.  Label List Blogger Sitemap Page Widget.

Label List Blogger Sitemap Page Widget.

This kind of sitemap widget looks so responsive as it expands post links from the clicked label. To add it to your blogger blog, you will need to have the CSS code placed in the template and the HTML placed in the sitemap page.
Copy The CSS Below and add it before ]]></b:skin>

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

After adding the CSS code above and saving the template theme, then make a page called sitemap and click on the HTML next to compose button and paste the below HTML code and save.

Copy and paste the HTML code below and paste it in the HTML view of your new sitemap page.

<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 === “[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>

That’s all with adding sitemaps to blogger with responsive widgets to style up the sitemap page. You may also be interested with the below posts.

How To Add Sitemap Widget To Blogspot Blogger Blogs.  

1. Go to your blogger website dashboard in blogger.
2. Click on pages.
3. Create New Page and name it Sitemap-page.
4. Click on HTML compose view.
5. Copy and Paste the preferred blogger sitemap widget code.

Total
0
Shares
Share
Tweet
Pin it

Leave a Reply Cancel reply

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

Lattest
  • Joecalih photography 2021 Breakdown
  • Google Translate Widget For Blogger Website
  • Responsive Digital Clock Widget For Blogger Website
  • Page Views Stats Widget For Blogger
  • Facebook Like Box Popup Blogger Widget

Subscribe now to our newsletter

  • Blogger Themes
  • After Effects Templates
  • MockupsNew
  • Blogger Widgets
  • Photoshop Tutorials
  • Blogger TutorialsFree
  • Search Engine Optimization
  • WordPress Tutorials
  • Lightroom Presets$5
  • Camera Raw Presets
  • Premuire Pro Presets
  • Graphic designFree
Joecalih
  • About Us
  • Contact Us
  • Support
  • Cookies
  • © 2020 Joecalih Media inc.

Input your search keywords and press Enter.