Articles by "Widget"
Showing posts with label Widget. Show all posts
Most times some visitor visit your site most of them may not really carryout some necessary action, but RSS feeds is one of the means to get visit to your site but most time you hardly get subscribers to your RSS feeds due to wrong placement of the widget. To some they may add it to the sidebar but after scrolling down the site, it will no longer be visible to the visitors but today am going to show you how to add beautiful email subscription box for blogger site to get more subscribers to your feeds and to also increase your traffic.



The platform that provides us with this stylish subscription box for blogger is Feedburner in case you do not have an account you can create one with them to be able to follow this tutorial effectively. Feedburner pop up JQuery subscription widget we will add in this tutorial has a beautiful look and with that you get your visitors attention.

Read Also:- How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting

The essence of creating this feedburner email subscription popup widget is to increase subscribers to your blog’s daily via RSS FEED.

Procedure to install email popup subscription box to your bloggers blog


Note: Before proceeding to this tutorial, make sure you back up your template in case there is any error you can equally reverse it back.

1. Simply go to your Blogger Dashboard>>Template>>Edit Html
2. Search for </head> tag by pressing CTRL + F  and paste </head>  to find the tag in your blogger template
3. Proceed by copying and pasting the code below before/above </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script src="http://yourjavascript.com/69231961363/jquery-colorbox-min.js" type="text/javascript">
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
//set timeout for closing the popup
setTimeout(function () { $.fn.colorbox.close(); }, 20000);
//color box width, height and popup id
$.colorbox({width:&quot;autopx&quot;, height:&quot;autopx&quot;, inline:true, href:&quot;#email-popup&quot;});
}});</script>

How to troubleshoot cookies and set timeout for popup box


1. *7 Setting this value will cause an effect to your cookie refreshment. In this tutorial the subscription box has been set in such a way that it will appear once to the visitor and the subscription box will appear to the visitor again after the time interval of 1 week but if you wish to display it to the visitor after 1 day then change 7 to 1.
2. Simply set up the popup timeout highlighted in Green color, in this post the default timeout is 20 second (20000  millisecond). For instance, Setting up popup time out to 2 minute you need replace 20000 to 120000.

Note:- Making the popup to appear more than one time to the visitor or readers may annoy them, so leaving it to the default settings is recommended and move the next step

4. Proceed by searching for </b:skin>.  Simply paste the below code before </b:skin>.

/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */#colorbox, #cboxOverlay, #cboxWrapper { 
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 20px;
background: #000;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
border: 5px solid #e9e9e9;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;

background: #fff;
box-shadow: 3px 3px 3px #fff;
}
#cboxTitle {
position: absolute;
top: -20px;
left: 0;
color: #ccc;
}
#cboxCurrent {
position: absolute;
top: -20px;
right: 0px;
color: #ccc;
}
#cboxLoadingGraphic {
background: url(http://2.bp.blogspot.com/-jcn46y_t6D0/Uc8cG9q6ExI/AAAAAAAAC1k/K63u_2VkemM/s32/loading.gif) no-repeat center center;
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
width: auto;
background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: none;
}
#cboxSlideshow {
position: absolute;
top: -20px;
right: 90px;
color: #fff;
}
#cboxPrevious {
position: absolute;
top: 50%;
left: 5px;
margin-top: -32px;
background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top left;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxPrevious:hover {
background-position: bottom left;
}
#cboxNext {
position: absolute;
top: 50%;
right: 5px;
margin-top: -32px;
background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top right;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxNext:hover {
background-position: bottom right;
}
#cboxClose {
position: absolute;
top: 5px;
right: 5px;
display: block;
background: url(http://2.bp.blogspot.com/-F2Kb9fiqmnI/UlVbabCkxBI/AAAAAAAADoc/RjbydjK0j-I/s1600/controls.png) no-repeat top center;
width: 38px;
height: 19px;
text-indent: -9999px;
}
#cboxClose:hover {
background-position: bottom center;
}
#subscriptionwrap {
width: 600px; height: 190px;
background: #e9e9e9;
padding: 15px;
margin: 14px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.subscriptionbox h4 {
font-size: 30px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow: 1px 1px 5px #333;
text-decoration: none !important;
}
.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}
.emailbutton1 {
background: #f7f8f9;
background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
top: 0px;
margin: 10px 0 0 -15px;
cursor: pointer;
padding: 18px 15px 15px 15px !important;
font-size: 14px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton1:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
text-decoration: none !important;
}
.emailinput1 {
width: 490px;height: 37px; padding-right: 30px !important;
float: left;
margin: 10px 0 0 0px;
padding: 8px 40px 8px 10px;
border: 1px solid #d2d2d2;
background: #fff;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #949494;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none!important;
}

5. Proceed to Save your template to see the effect of the code. If the code worked, then Follow this final step below.

6. Now, find  </body> tag.

7. and paste the below code before closing </body> tag.

<div style="display: none;">
<div id="email-popup" style="position: scroll; z-index: 99999;">
<div id="subscriptionwrap">
<div class="subscriptionbox">
<h4>
Do you want to get all tech and blogging tips from <strong>Dbencotech.com?</strong></h4>
Subscribe to Dbencotech to get all the latest blogging tips free!<br />
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform1" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=dbencotech&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true" target="popupwindow">
<input name="uri" type="hidden" value="dbencotech" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailinput1" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input class="emailbutton1" title="" type="submit" value="SignUp" />
</form>
</div>
</div>
</div>
</div>

How to Troubleshoot Popup


Proceed by making below changes in the above CSS and HTML codes.

• Simply edit the highlighted yellow text to whatsoever you like. This will appear at the top of the input box of the popup box.
• Also edit the highlighted code in green color for width and height adjustment as you wish for your current blog/website layout.
• Replace dbencotech with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

• Replace dbencotech with your feed title. This will appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='dbencotech />

Read Also:- How to generate your own favicon using your favourite image

Note: The popup will appear only once in week. For the popup box to appear again you need to delete your browser cookie and also refresh the page for it to take effect.

Search Tags:- beautiful email subscription box for blogger,stylish email subscription widget for blogger,feedburner email subscription popup,feedburner popup blogger,stylish subscription box for blogger,blogger popup widget,pop up newsletter blogger,subscribe box for blogger.
Have been wondering on how to display all your blog post on a static page just like a like a hosted site.It so obvious that this option is not available on blogger.But today we are going to see how you can generate all your post and display them on a particular page as an index/sitemap for easy navigation.
As we all know the essence index page in any web page is to enable the users navigate easily and that is why am presenting you with this tutorials today,just follow the steps careful within shortest time your index page will be ready for easy access in your blog/website.

Steps To Add Index/Sitemap On Blogger Blog

1.    Quickly login into your blogger and go to your Dashboard

2.    Next click on theme and search for </b:skin> copy and paste the below code just above </b:skin>


/* ######## 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: $(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
}


3.    Still on your theme edit search for </body> tag and paste the below code above </body> tag


<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>


4.    Click on save to save your Theme/Template

5.    Next go to pages and add a new page as shown on the image



Note: Enter the name of the page eg sitemap,then click on options and then click on allow

6.    Finally enter this code at the content page
[sitemap]
and then click on publish

With all these followed currently you are done with creation of  your sitemap page.This is  demo of the sitemap,Please do not forget to share with friends.


In this tutorial we are going to be looking at how to generate table of content automatically on your blogger blog.But before we do this let first of all understand what table of content is all about.



DEMO:Below is the demo of Table of Content generated with this procedures.

    What is Table Of Contents(TOC)?

    In websites, a table of contents abbreviated as TOC or ToC, is a link list, usually found on a web page placed right after the first paragraph. Each anchor link inside a TOC takes you to a specific section of the web page.

    An HTML TOC provides a quick way to jump to the desired section of a page. It usually includes the titles of the first-level headers (headings) or second level headers(subheadings).

    In printable work, a TOC refers to the index page of the book which contains the page number to each chapter. TOC for books are more in-depth and comprehensive, containing not only section titles but descriptions, author names, and subheadings.

    Today we are going to be using a Plugin to generate our table of content which was developed by MBT . It auto-generates a user-friendly TOC for your lengthy blog articles. It is coded in pure JavaScript and loads lightening fast.

    Features of TOC Plugin:


    It is the first JavaScript plugin of its kind that is unique in several ways as mentioned below:
    •    Coded in pure JavaScript
    •    Lightweight and fast.
    •    SEO Friendly
    •    Adds unique ID to each section automatically.
    •    Creates both ordered or unordered list
    •    Contains a Toggle button
    •    Show on any location you choose
    •    Easily Customized
    •    Mobile responsive
    •    Executes only when invoked!

    Procedure To Install TOC Plugin in Your Blogger Blogs


    •    Before you start make sure that you backup your template
    •    Login into your Blogger Dashboard
    •    Click on Theme
    •    Proceed by Clicking Edit HTML
    •    Press CTRL+F to search for </head> and then press enter
    •    Just before </head> copy and paste the below code

    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

           
    <script type='text/javascript'>              

    //<![CDATA[          
    //*************TOC plugin by MBT          
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;          
    headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)          
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}          
    //]]>             
    </script>

    •    Search for in your template ]]></b:skin> and just above it paste the following CSS code:
         
    /*####Automatic TOC Plugin by MBT####*/          
    .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}          
    .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}          
    .mbtTOC ul {list-style:none;}          
    .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}          
    .mbtTOC a{color:#0080ff;text-decoration:none;}          
    .mbtTOC a:hover{text-decoration:underline; }
           
    .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}          
    .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

        
    To modify some of the features to your taste do the following:
    o    Change the background color of TOC box by editing #FFFFE0 to your desired colour
    o    Change the border color of TOC box by editing  #f7f0b8 to suite your taste
    o    Change the font color of TOC headline text by editing  #707037
    o    Change the anchor link color by editing  #0080ff to your preferred colour
    o    Change the font size of anchor links by editing 15px
    o    Change the font size of TOC headline text by editing 20px
    o   
    o    Still in your theme edit search for <data:post.body/> and replace it with the code below:

    <div id="post-toc"><data:post.body/></div>


    o    Then you can now save your template and that all on how to install the Automatic Table of Content
    How To Use Table Of Contents Automatically in Blog Posts
    To display table of content in any of your blog post,follow the following steps.

    Note: It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
    o    Whenever your writing a blog post and you want to input table of content automatically,just switch to your HTML edit and add the below code.
    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Contents</button>
        <ol id="mbtTOC"></ol>
        </div>

    Note:
    o    You may replace the text "Contents" with any other text you want.
    o    If in case your headings already contain numbers in beginning then replace ol with ul.
    o    Finally still in your HTML edit paste the following JS code at the bottom of your blogger editor where your post ends:
    <script>mbtTOC();</script>

    After this step then you have generated an automatic table of content on your bolg post.