Home » code » 10 important things to do immediately after starting a BlogSpot blog Newer Post

10 important things to do immediately after starting a BlogSpot blog


10 things that will supercharge your blog. Immediately, after starting your blogspot blog, you require some customization, which gives it professional look and also helps it perform well on search engines.
  1. Remove/Hide the Top Blogger bar.

    Add the Following line of code by going to Edit HTML (Expand Widget):       
    #navbar-iframe{height:0px; visibility:hidden; display:none}
    body{ margin-top:0px;  position:relative;  top:2px}
    which should look like this after adding the code:
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Simple
        
    ----------------------------------------------- */
    #navbar-iframe{height:0px; visibility:hidden; display:none}
    body{ margin-top:0px;  position:relative;  top:2px}
  2. Split the Header into two columns

    . Although, blogger has launched many designer templates, none till date, has split header by default. So, you need to insert extra section in Header to get two column headers. Two column header helps you insert extra widget in that area. Find the following code, by going to edit HTML in your blogger control panel, leaving Expand option unticked:                                                                                                  <b:section class='header' id='header' maxwidgets='1'showaddelement='no'>.                      Just after </b:section>, insert the following code:         
    <b:section id='header-right' showaddelement='yes'/>
    <div style='clear: both;'/>                                                 


    Now Find the    ]]></b:skin>    and add the following line of code just before it:
    #header {width:20%;display:inline-block;float:left;}
    #header-right {width:80%;display:inline-block;float:right;padding:0px;}
    #header-right .widget {margin:0;}


    After saving the template, go to add page element, choose the image only option, and insert Logo in Header Left, and description or Adsense in header right column.  Here, for those who have opted for image only option in Header, need to tweak the template again. So, go back to edit HTML, and, find below code: 



    <!--Show the image only-->
          <div id='header-inner'>
            <a expr:href='data:blog.homepageUrl' style='display: block'>
              <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
            </a>      Replace this code with one given below:

    <!--Show the image only-->
          <div id='header-inner'>
            <a expr:href='data:blog.homepageUrl' style='display: block'>
              <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
            </a><div class='titlewrapper' style='display:none'>
            <h1 class='title'>
              <b:include name='title'/>
            </h1>
          </div> 
  3. Change Post Title tag to write search engine friendly headlines

    .
    Blogger, by default has Blog Title, into header description. it reduces the real estate of first 150 characters, which are of so importance these days. Your important, headlines goes with blog title to all important services updates, including your posts’ Search engine description.  Just go to Edit HTML, and find <data:blog.pageTitle/>. Replace it with the following line of code: <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>
  4. Show more posts on home page. SEO the archives


    Read this/Expand the post feature also, indexes your archived pages by April, May, June… Which helps Search engines to index it in this way. To automatically get the post thumbnails on your home page, copy & paste the following code, just after the </head> tag in your template:                                                                                                          <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
    summary_noimg = 430; //summary length when no image
    summary_img = 340; //summary length when with image
    img_thumb_height = 125;
    img_thumb_width = 150;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
        if(strx.indexOf("<")!=-1)
        {
            var s = strx.split("<");
            for(var i=0;i<s.length;i++){
                if(s[i].indexOf(">")!=-1){
                    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
                }
            }
            strx =  s.join("");
        }
        chop = (chop < strx.length-1) ? chop : strx.length-2;
        while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
        strx = strx.substring(0,chop-1);
        return strx+'...';
    } function createSummaryAndThumb(pID){
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");
        var summ = summary_noimg;
            if(thumbnail_mode == "yes") {
        if(img.length>=1) {   
            imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
            summ = summary_img;
        }
        }
        var summary = imgtag + '<div align=justify>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
    }
    //]]>
    </script>                                                                                                     After this save the template, tick the expand widget option and find <data:post.body/>, in your template. Replace this line with the following code:                               <!—Netargument.com Read This code Start --><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/><b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div><script type='text/javascript'>
    createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <div style='clear: both;'/>
    <span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'><b>Read This &gt;&gt;</b></a></span></b:if></b:if>                                                 <!—Netargument.com Read This code End –>                                                                                                          Now, Preview and Save the template. This will create thumbnail of posts on home page, labels and archives. This also helps search engines index your archives by months like March, April…
  5. Insert Meta tags for home page and other pages.


    Use of conditional tags to help the search engines, index the pages, and prevent content duplicate listings. To help search engines index your blog by proper keywords and descriptions, you should write meta tags for home page. Just copy the meta tags from below, alter it suitably and paste after <head> in your template:                                                                                                   <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content=' DESCRIBE YOUR BLOG HERE AS YOU WANT TO APPEAR ON SEARCH PAGES ' name='description'/></b:if>
    <meta content='WRITE 8-10 KEYWORDS HERE RELEVANT TO YOUR BLOG' name='keywords'/>                                                                                       If you want to write Description for other pages too, simply add this code:                                                                                                           <b:if cond='data:blog.url == &quot;WRITE YOUR POST/PAGE URL HEREquot;'><meta content='DESCRIBE THE CONTENT OF THE PAGE' name='description'/></b:if>
  6. Change default comment permalink.


    Blogger default comment permalink adds “?’ attribute to the page url with comment id in post url. Google will then see as an issue of duplicate title tag. To avoid this, you need to change the ‘?’ attribute to “#”. This can be achieved by replacing the default code which is like this: <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'> <data:comment.timestamp/>                                                                                                                                               to this one:             <b:if cond='data:post.commentPagingRequired'>


      <a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>


    <b:else/>


      <a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>


    </b:if>
  7. Bottom Page number for posts, archives and labels.


    Insert the code  just before </b:skin> in your template:                                                                                                         .showpageNum a {
    text-decoration:none;
    border: 1px solid #ccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #ccc;
    background-color:#ccc;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #ccc;
    background: #ccc;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #ccc;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333;
    }                                                                                                                 Save the template, return again to Edit HTML, and leave the Expand widget unticked. Press ctrlF and find Blog1. This should take you to following line of code:                                                                   <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
    <b:widget id='HTML12' locked='false' title='' type='HTML'/>
    <b:widget id='HTML2' locked='false' title='' type='HTML'/>
    </b:section>                                                                                                                  Immediately after </b:section>, add the following line of code:                                                                                                            &lt;script type=&quot;text/javascript&quot;&gt;  function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= &#39;&#39;;
    var upPageHtml =&#39;&#39;;
    var downPageHtml =&#39;&#39;; var pageCount = 14;
    var displayPageNum = 10;
    var upPageWord = &#39;Previous&#39;;
    var downPageWord = &#39;Next&#39;;var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=&#39;&#39;){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }postNum++;
    htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    }
    }//end if(post.category){itemCount++;
    }}else{
    if(title!=&#39;&#39;){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }if(title!=&#39;&#39;) postNum++;
    htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    itemCount++;
    }
    } for(var p =0;p&lt; htmlMap.length;p++){
    if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    if(fFlag ==0 &amp;&amp; p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }fFlag++;
    }if(p==(thisNum-1)){
    html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }if(eFlag ==0 &amp;&amp; p == thisNum){
    downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    eFlag++;
    }
    }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    }//end for(var p =0;p&lt; htmlMap.length;p++){if(thisNum&gt;1){
    if(!isLablePage){
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }else{
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }
    }html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;if(thisNum&lt;(postNum-1)){
    html += downPageHtml;}if(postNum==1) postNum++;
    html += &#39;&lt;/div&gt;&#39;;if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);if(postNum &lt;= 2){
    html =&#39;&#39;;
    }for(var p =0;p&lt; pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }if(pageArea&amp;&amp;pageArea.length&gt;0){
    html =&#39;&#39;;
    }if(blogPager){
    blogPager.innerHTML = html;
    }
    }}
    &lt;/script&gt;&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;                                    Preview the template. This won’t show you any impact, but it’s a safety against any code error. Save it, and you would find the page numbers on home page.
  8. Style/Remove Older Post, Newer Post link


    Following code will add style to the below post older/newer/home link. Just go to Designer>Advanced>Add CSS, and paste this:                                                                                                           #blog-pager-older-link, #blog-pager-newer-link, .home-link{background:#FFF0B7; padding: 5px 5px 5px 5px; }                                                                                                         If you want to completely remove them use this code instead:                                                                                               #blog-pager-older-link, #blog-pager-newer-link, .home-link{background:#FFF0B7; padding: 5px 5px 5px 5px; display:none;} 
  9. Remove Subscribe link below the post body.


    Subscribe link below the post looks ugly and should be removed. Just find the following code:        <b:include name=’feedLinks’/>    in your template, delete and save. It is gone.
  10. Add Favicon:


    Choose a favicon, host it on web preferably in ico/png format(check favicongenerator.com), and paste the following code just before </head> in your template:     <link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
    <link href='YOUR-FAVICON-URL' rel='icon'/>

In addition to all the above I also recommend using an offline Blog Editing software. I myself use and recommend windows live Writer for windows and Blogilo for ubuntu.


Top Resources:
  1. Bloggerbuster.com
  2. Boggersentral.com

17 comments :

Arun Kumar said...

Thanks for this information. I am having few more problems though. I need to remove the whitespace under the header and just below the post. In some cases, I was able to do it by cleaning up the HTML but I could not find a permanent fix for it. Can you help?
Regards,
Arun

Arun Kumar said...

Also, regarding the fourth point, if I choose to use only one article on the main page, will it not index the archives?
Regards

ramesh said...

It has nothing to do with How many pages you have on Index page or home page,
till your Blog Archive lists multiple pages on a single page, which is the purpose of "fourth point". Try this link, it
should answer your query, and atleast what I mean by SEO, the archive. https://www.google.com/#sclient=psy-ab&hl=en&biw=1280&bih=697&source=hp&q=netargument+april&pbx=1&oq=netargument+april&aq=f&aqi=&aql=&gs_sm=e&gs_upl=2301l7349l0l7796l17l14l0l1l1l0l606l4340l2-9.3.0.2l15l0&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=88c6adbd63c1314c

Arun Kumar said...

Thanks for that. I understood your point. I'll have to rethink entire thing now. The purpose of these blogs is to generate organic traffic. Thanks again. And also for the code.

Arun Kumar said...

I am working on the templates today. I would not post rather not post the urls here as you might think I am trying to take advantage of your site.
The thing is: are meta keyword tags necessary? I mean, each post would have one or more different keywords in my case. For example, if I write on how to speed up IE9, the keywords would be speed up IE9, how to speed up Internet and so on. So these will vary per post.
However, I am using the code for static pages that you gave as they are publish and forget for a while. :)
Please tell me if I am missing anything. 
This is a much awaited and planned project (powercutmedia dot in) and needs to get into top SERPs.
Thanks for your help
Arun

ramesh said...

Despite all the noise against Meta Keywords and Google's categorical statement that they overlook them, my experience, which are backed by observation of some very good SEOs, it still matters, and are ignored only when they are found to be irrelevant. 

Search Engines have started seeing the page very much as we ourselves see them, so, you must not try to befool them through meta. One more dimension to SEO is now Social Signal, which means what Twitter and Facebook trackback says about the page. So, if everything is not in sync then there are chances of things rather backfiring. 

Arun Kumar said...

Thanks a lot. That clears everything.

Arun Kumar said...

Just to thank you. I applied your suggestions on one of my sites (internetshots dot net) and it now looks professional. Will do the same for other websites as well.

Arun Kumar said...

Hi... I used that code you wrote for removing page titles in search engines. Seems I did something wrong. It is still showing the Title first in the SERPs, whihch is a huge disadvantage. Can u help?

Ramesh Kumar said...

You should wait. To check if things are correct, try to tweet. If tweet goes well, then everything is fine. Google takes time to change it.

Arun Kumar said...

They are showing just fine in the tweets. Thanks a lot. This is really a great deal help. :)

Arun Kumar said...

Hi Ramesh,
I am sorry to disturb you time and again. But I don't have much knowledge about tweaking XML and similar stuff.
The recent problem I came across is as follows:
The Blogger is set to send email notifications per comment. No moderation tho.
I added Disqus for engaging with my readers/visitors. However, I am not being notified about the comments. Though possible now, it won't be feasible later to check each and every post for comments.
How to go about receiving emails for comments. I wrote to Disqus but they seem to enjoying the long weekend. Please see if you can help.
Regards,
Arun

ramesh said...

Check your blog's notification setting. More important! You should also check if it is your custom domain email id,  that is causing this problem, because both disqus and blogger should be sending you mails and still you failed to receive from any of them. Shift to gmail, if that is the case. I suspect it is the email which is the root cause because I have seen it in many cases.

Arun Kumar said...

Thanks. I fixed it by using gmail ID. I am receiving notifications now.
Regards

Arun Kumar said...

I forgot I shouldnt use HTML in Disqus. My prev comment (some doubts on HTML formatting) should have reached your spam folder. 

Arun Kumar said...

Hi Ramesh,
I am trying to use the recommendations from schema dot org in my blogs. However, using h1 tag is showing up two different titles in the posts. For example, I used "Internet Explorer".. What happens is that the text in h1 appears right below the post title. One way could be to turn off the post title. Other method would be using the comment tag. But if I use comment tag, will search engines read my keywords in h1 tag? Also, if I turn off the post titles, my posts be negatively affected in search engines? Please let me know your views
Thanks

Ramesh said...

Many new templates have schema.org recommendations already implemented. Always avoid unnecessary changes in your template and try to make the most of default settings before touching anything inside.

Thanks for Reading Netargument. You may also Say Something about Yourself,HERE! http://www.netargument.com/p/about-you.html