Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

6:12 PM
Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

Demo shows in bottom right side  →
Features of this Widget
Flat UI colors used (it will attract users attention)
Automatic Post Numbering
CSS3 Hover Animation  
First Add Popular post Widget to Blogger
Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
Copy the following code and Paste just above it
    <!-- Popular posts multi colored UI theme -->
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding:4px;
    border:1px solid #fff !important;
    }
    #PopularPosts1 img:hover {
    border-radius: 0 0 0 0;
    -moz-transform: scale(1.2) rotate(-711deg) ;
    -webkit-transform: scale(1.2) rotate(-711deg) ;
    -o-transform: scale(1.2) rotate(-711deg) ;
    -ms-transform: scale(1.2) rotate(-711deg) ;
    transform: scale(1.2) rotate(-711deg) ;
    }
    <!-- popular posts multicolored UI theme -->

     Click on Preview Template (You can see the template without saving)
    Save the Template.
    View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
    If any problems with this trick don't hesitate to ask, do comment here...
    Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

    Demo shows in bottom right side  →
    Features of this Widget
    Flat UI colors used (it will attract users attention)
    Automatic Post Numbering
    CSS3 Hover Animation  
    First Add Popular post Widget to Blogger
    Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
    Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
    Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
    Copy the following code and Paste just above it
      <!-- Popular posts multi colored UI theme -->
      #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
      #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
      #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
      #PopularPosts1 ul li:first-child:after{content:"1"}
      #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
      #PopularPosts1 ul li:first-child + li:after{content:"2"}
      #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
      #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
      #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
      #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
      #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
      #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
      #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
      #PopularPosts1 ul li:first-child:after,
      #PopularPosts1 ul li:first-child + li:after,
      #PopularPosts1 ul li:first-child + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
      #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
      #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
      #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
      #PopularPosts1 img{
      -moz-border-radius: 130px;
      -webkit-border-radius: 130px;
      border-radius: 130px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
      padding:4px;
      border:1px solid #fff !important;
      }
      #PopularPosts1 img:hover {
      border-radius: 0 0 0 0;
      -moz-transform: scale(1.2) rotate(-711deg) ;
      -webkit-transform: scale(1.2) rotate(-711deg) ;
      -o-transform: scale(1.2) rotate(-711deg) ;
      -ms-transform: scale(1.2) rotate(-711deg) ;
      transform: scale(1.2) rotate(-711deg) ;
      }
      <!-- popular posts multicolored UI theme -->

       Click on Preview Template (You can see the template without saving)
      Save the Template.
      View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
      If any problems with this trick don't hesitate to ask, do comment here...

      Numbered Page Nagivation hack for Blogger

      10:21 PM
      What is Numbered Page Navigation ?In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.


       So, how to add this to your Blogger blog ?

       (first backup your blog template before editing anything)

       1. Sign into your Blogger account » Settings » Formatting
      Choose the number of posts you want to display on homepage

       set the amount of posts to be displayed on the homepage


       2. Go to Design » Edit html » tick the expand widget templates

       Scroll down to the bottom of the template code and find this
      </body>
      PASTE this code above that line


      <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
      <script type='text/javascript'>
      var pageCount=5;
      var displayPageNum=5;
      var upPageWord ='Previous';
      var downPageWord ='Next';
      </script>

      <script type='text/javascript'>

      //<![CDATA[

      function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

      //]]>

      </script>
      </b:if>
      </b:if>
      In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)

      3. Control + F and search for all the occurrences of this code


      'data:label.url'

      and replace it with this

      'data:label.url + &quot;?&amp;max-results=5&quot;'
      Again, the number in the above line depends on the number you set in the STEP 1.

      4. Now, the styling part.. I've made x styles.. you can choose the one you wish..


      (i) Default


      Code


      .showpageArea a {
      text-decoration:underline;
      background: #ffffff;
      padding: 10px 10px 10px 10px;

      }
      .showpageNum a {
      text-decoration:none;
      border: 1px solid #cccccc;
      border-top: 1px solid #cccccc;
      margin:0 3px;
      padding:3px;
      }
      .showpageNum a:hover {
      border: 1px solid #cccccc;
      background-color:#cccccc;
      }
      .showpagePoint {
      color:#333;
      text-decoration:none;
      border: 1px solid #cccccc;
      background: #cccccc;
      margin:0 3px;
      padding:3px;
      }
      .showpageOf {
      text-decoration:none;
      padding:3px;
      margin: 0 3px 0 0;
      }
      .showpage a {
      text-decoration:none;
      border: 1px solid #cccccc;
      padding:3px;
      }
      .showpage a:hover {
      text-decoration:none;
      }
      .showpageNum a:link,.showpage a:link {
      text-decoration:none;
      color:#333333;
      }
      Copy the above code. Find this line and paste that code ABOVE IT.



      ]]></b:skin>

      Save the changes.

      I've made a few more navigation styles.. I'll post them in a few min.. look for it.
      What is Numbered Page Navigation ?In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.


       So, how to add this to your Blogger blog ?

       (first backup your blog template before editing anything)

       1. Sign into your Blogger account » Settings » Formatting
      Choose the number of posts you want to display on homepage

       set the amount of posts to be displayed on the homepage


       2. Go to Design » Edit html » tick the expand widget templates

       Scroll down to the bottom of the template code and find this
      </body>
      PASTE this code above that line


      <b:if cond='data:blog.pageType != "item"'>
      <b:if cond='data:blog.pageType != "static_page"'>
      <script type='text/javascript'>
      var pageCount=5;
      var displayPageNum=5;
      var upPageWord ='Previous';
      var downPageWord ='Next';
      </script>

      <script type='text/javascript'>

      //<![CDATA[

      function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}

      //]]>

      </script>
      </b:if>
      </b:if>
      In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)

      3. Control + F and search for all the occurrences of this code


      'data:label.url'

      and replace it with this

      'data:label.url + &quot;?&amp;max-results=5&quot;'
      Again, the number in the above line depends on the number you set in the STEP 1.

      4. Now, the styling part.. I've made x styles.. you can choose the one you wish..


      (i) Default


      Code


      .showpageArea a {
      text-decoration:underline;
      background: #ffffff;
      padding: 10px 10px 10px 10px;

      }
      .showpageNum a {
      text-decoration:none;
      border: 1px solid #cccccc;
      border-top: 1px solid #cccccc;
      margin:0 3px;
      padding:3px;
      }
      .showpageNum a:hover {
      border: 1px solid #cccccc;
      background-color:#cccccc;
      }
      .showpagePoint {
      color:#333;
      text-decoration:none;
      border: 1px solid #cccccc;
      background: #cccccc;
      margin:0 3px;
      padding:3px;
      }
      .showpageOf {
      text-decoration:none;
      padding:3px;
      margin: 0 3px 0 0;
      }
      .showpage a {
      text-decoration:none;
      border: 1px solid #cccccc;
      padding:3px;
      }
      .showpage a:hover {
      text-decoration:none;
      }
      .showpageNum a:link,.showpage a:link {
      text-decoration:none;
      color:#333333;
      }
      Copy the above code. Find this line and paste that code ABOVE IT.



      ]]></b:skin>

      Save the changes.

      I've made a few more navigation styles.. I'll post them in a few min.. look for it.

      CSS – Style 3(for Black and dark backgrounds)

      8:06 PM
      In this post I’ll give you three awesome styled related post widget for blogger. Actually, related posts widget increase your blog’s bounce rate. Also many related posts widget for blogger look boring and ugly. So, hope you like all of the three.
      The JavaScript
      Paste the below JavaScript code above </head>
      <script type='text/javascript'>
      var relatedpoststitle="Related Posts";
      </script>
      <script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js'
        type='text/javascript'/>
      The HTML

      Now find the below line 
      <div class='post-footer-line post-footer-line-1'> 
      or
      <p class='post-footer-line post-footer-line-1'>
      Now paste this code below it
      <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;
      callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>


      The CSS(Style 1) 


      Paste the below CSS code just above </b:skin>


       #related-posts {

      clear: both;

      }

      #related-posts ul{

      margin: 20px 0; padding: 0;

      list-style: none;

      }

      #related-posts ul li {

      border-top: 1px solid #333;

      border-bottom: 1px solid #111;

      }

      #related-posts  ul li:first-child {border-top: none;}

      #related-posts  ul li:last-child {border-bottom: none;}

      #related-posts  ul li a {

      padding: 10px;

      display: block;

      color: #222;

      text-decoration: none;

      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms

        ease-out;  /* trans pattern: property duration timingMethod delay */

      }

      #related-posts  ul li a:hover {

      padding-left: 20px;

      }


      CSS – Style 2 

       


      Paste the below code just above </b:skin>
       /* Related Posts - By www.tricks-4-blogger.blogspot.com
      ----------------------------------------------- */

      #related-posts {
      clear: both;
      }
      #related-posts ul{
      margin: 20px 0; padding: 0;
      list-style: none;
      }
      #related-posts ul li {
      border-top: 1px solid #333;
      border-bottom: 1px solid #111;
      background: #222;
      }
      #related-posts  ul li:first-child {border-top: none;}
      #related-posts  ul li:last-child {border-bottom: none;}
      #related-posts  ul li a {
      padding: 10px;
      display: block;
      color: #fff;
      text-decoration: none;
      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms 
       ease-out;  /* trans pattern: property duration timingMethod delay */
      }
      #related-posts  ul li a:hover {
      padding-left: 20px;
      background: #111;
      }


      CSS – Style 3(for Black and dark backgrounds)
      Add the below code just above </b:skin>
       /* Related Posts by www.tricks-4-blogger.blogspot.com
      ----------------------------------------------- */
      #related-posts {
      clear: both;
      }
      #related-posts h2{
      color: #fff;
      }
      #related-posts ul{
      margin: 20px 0; padding: 0;
      list-style: none;
      }
      #related-posts ul li {
      border-top: 1px solid #333;
      border-bottom: 1px solid #111;
      background: #222;
      }
      #related-posts  ul li:first-child {border-top: none;}
      #related-posts  ul li:last-child {border-bottom: none;}
      #related-posts  ul li a {
      padding: 10px;
      display: block;
      color: #fff;
      text-decoration: none;
      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms
        ease-out;  /* trans pattern: property duration timingMethod delay */
      }
      #related-posts  ul li a:hover {
      padding-left: 20px;
      background: #111;
      } 

      Save Template NOW !! 
      In this post I’ll give you three awesome styled related post widget for blogger. Actually, related posts widget increase your blog’s bounce rate. Also many related posts widget for blogger look boring and ugly. So, hope you like all of the three.
      The JavaScript
      Paste the below JavaScript code above </head>
      <script type='text/javascript'>
      var relatedpoststitle="Related Posts";
      </script>
      <script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js'
        type='text/javascript'/>
      The HTML

      Now find the below line 
      <div class='post-footer-line post-footer-line-1'> 
      or
      <p class='post-footer-line post-footer-line-1'>
      Now paste this code below it
      <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;
      callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>


      The CSS(Style 1) 


      Paste the below CSS code just above </b:skin>


       #related-posts {

      clear: both;

      }

      #related-posts ul{

      margin: 20px 0; padding: 0;

      list-style: none;

      }

      #related-posts ul li {

      border-top: 1px solid #333;

      border-bottom: 1px solid #111;

      }

      #related-posts  ul li:first-child {border-top: none;}

      #related-posts  ul li:last-child {border-bottom: none;}

      #related-posts  ul li a {

      padding: 10px;

      display: block;

      color: #222;

      text-decoration: none;

      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms

        ease-out;  /* trans pattern: property duration timingMethod delay */

      }

      #related-posts  ul li a:hover {

      padding-left: 20px;

      }


      CSS – Style 2 

       


      Paste the below code just above </b:skin>
       /* Related Posts - By www.tricks-4-blogger.blogspot.com
      ----------------------------------------------- */

      #related-posts {
      clear: both;
      }
      #related-posts ul{
      margin: 20px 0; padding: 0;
      list-style: none;
      }
      #related-posts ul li {
      border-top: 1px solid #333;
      border-bottom: 1px solid #111;
      background: #222;
      }
      #related-posts  ul li:first-child {border-top: none;}
      #related-posts  ul li:last-child {border-bottom: none;}
      #related-posts  ul li a {
      padding: 10px;
      display: block;
      color: #fff;
      text-decoration: none;
      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms 
       ease-out;  /* trans pattern: property duration timingMethod delay */
      }
      #related-posts  ul li a:hover {
      padding-left: 20px;
      background: #111;
      }


      CSS – Style 3(for Black and dark backgrounds)
      Add the below code just above </b:skin>
       /* Related Posts by www.tricks-4-blogger.blogspot.com
      ----------------------------------------------- */
      #related-posts {
      clear: both;
      }
      #related-posts h2{
      color: #fff;
      }
      #related-posts ul{
      margin: 20px 0; padding: 0;
      list-style: none;
      }
      #related-posts ul li {
      border-top: 1px solid #333;
      border-bottom: 1px solid #111;
      background: #222;
      }
      #related-posts  ul li:first-child {border-top: none;}
      #related-posts  ul li:last-child {border-bottom: none;}
      #related-posts  ul li a {
      padding: 10px;
      display: block;
      color: #fff;
      text-decoration: none;
      cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms
        ease-out;  /* trans pattern: property duration timingMethod delay */
      }
      #related-posts  ul li a:hover {
      padding-left: 20px;
      background: #111;
      } 

      Save Template NOW !! 

      Add Scrollbars to Blog Widgets

      9:09 PM

      This tutorial shows you how to create widgets or boxes with scrollbars. When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

       The “overflow” style property

       Let us first explain what the code is about. We use the “overflow” property to create the scrollbars in CSS or the stylesheet. There are several values that can be assigned to it, although not all are useful for our purposes.

       1. overflow:visible

       This is the default value. The extra content is either rendered outside the box or the length of the box is extended to include the extra content. Don't bother to use this in Blogger blogs because you will see the contents of the widgets overlapped like this:-

      Add Scrollbars to Blog Widgets

      2. overflow:hiddenThis will cut off the extra content that overflows and there will be no scrollbar to the box. It doesn't serve our purpose as well.



      Add Scrollbars to Blog Widgets

      3. overflow:scrollThe content is clipped but there will be scrollbars at the sides.      Add Scrollbars to Blog Widgets

      4. overflow:autoWe like this attribute. Basically, it tells the browser to display a scrollbar only when necessary i.e., when the content overflows the width and height settings.
      Add Scrollbars to Blog Widgets

      Scrollbar in All Widgets

      Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

      Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */ :-
      /* Sidebar Content */
      .sidebar .widget{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      In our example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

      Scrollbar in Widgets of One Sidebar

      Let us assume for our discussion that you have modified your template to include an additional sidebar using our Three Column Template guides. We may have all the AdSense Ads in one sidebar and we want to add the scrollbars into the widgets of the other sidebar. The style that can be inserted into the template will be this:-
      /* Sidebar Content */
      #newsidebar .widget{
      height:200px;
      overflow:auto;
      }


      Or this:-
      /* Sidebar Content */
      #sidebar .widget{
      height:200px;
      overflow:auto;
      }


      depending on which sidebar your widgets are at. Preview the template and if it is what you want, save the Template and refresh your Blog.

      Scrollbar in One Widget only

      We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-
      <div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
      <b:widget id='HTML1' locked='false' title='' type='HTML'/>
      <b:widget id='Label1' locked='false' title='Label' type='Label'/>
      </b:section>
      </div>


      In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of thewidget ID.

      With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-
      /* Sidebar Content */
      #Label1{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in red.

      Scrollbar in All Widgets except One

      A further variation is to add scrollbars to all the Widgets except one or two. As mentioned earlier, AdSense widgets should not have scrollbars and it might be your intention to have scrollbars in the rest of the widgets.

      Follow the guide above to insert scrollbars into all the widgets. After that for the ones that you do not want scrollbars to appear, specify a bigger value for the height:-
      /* Sidebar Content */
      #AdSense1{
      height:600px;
      }


      For example, if your AdSense unit is a 160x600 Vertical Wide Banner, put the height of the widget as 600px. Since the contents fit nicely into this size, the scrollbars should not appear. Change the widget ID accordingly to point to the widget that you want to exclude and adjust the height value.

      Scrollbar for Links and Labels

      We need scrollbars usually for Label lists and Blogrolls created using Link lists because these are usually lengthy. You may have noticed that using the above codes, the entire widget is included in the scroll. Supposing we want the title to remain static and have a scrollbar only for the links or labels, we can insert a code as follows (remember to enter the relevant ID into the part shown in red):-
      /* Sidebar Content */
      #LinkList1 ul{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      Scrollbar for Blog Posts

      Should you want the scrollbars for each of your blog posts, scroll to where you see this code and add the portion (shown in red):-
      .post {
      height:200px;
      overflow:auto;
      }


      Scrollbar for text within Blog Posts

      Perhaps you might not want to have scrollbars for all the Blog Posts, but only for a piece of text within a Blog Post. You can follow the steps in this guide to insert scrollbars to text within the post.

      Scrollbar for Long Text

      If you have a long piece of text like those found in the usual Terms of Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will be very useful in minimizing the text area and yet allowing readers to view the full contents.

      Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-
      .scrollingtext {
      height:200px;
      width:200px;
      border:0;
      overflow:auto;
      }


      What we have done is to specify that the text will be contained in a box with scrollbars automatically added if the text overflows the 200px x 200px area. The values of the border, height and width can be changed to suit your needs.

      We can now type the text. This text can either appear in a Blog Post, or as an element in the Template. If it is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit HTML” mode and insert these tags (shown inblue):-

      <div class="scrollingtext">TEXT</div>


      The TEXT can be inserted directly into the template via Template -> Page Elements -> Text. Similarly, if you have typed it in the rich editor mode, you can click the “Edit HTML” link at the top right corner and insert the above tags.

      After publishing the post or saving the page element, you will be able to see theTEXT within a box and the scrollbars automatically inserted.
      Add Scrollbars to Blog Widgets

      This tutorial shows you how to create widgets or boxes with scrollbars. When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

       The “overflow” style property

       Let us first explain what the code is about. We use the “overflow” property to create the scrollbars in CSS or the stylesheet. There are several values that can be assigned to it, although not all are useful for our purposes.

       1. overflow:visible

       This is the default value. The extra content is either rendered outside the box or the length of the box is extended to include the extra content. Don't bother to use this in Blogger blogs because you will see the contents of the widgets overlapped like this:-

      Add Scrollbars to Blog Widgets

      2. overflow:hiddenThis will cut off the extra content that overflows and there will be no scrollbar to the box. It doesn't serve our purpose as well.



      Add Scrollbars to Blog Widgets

      3. overflow:scrollThe content is clipped but there will be scrollbars at the sides.      Add Scrollbars to Blog Widgets

      4. overflow:autoWe like this attribute. Basically, it tells the browser to display a scrollbar only when necessary i.e., when the content overflows the width and height settings.
      Add Scrollbars to Blog Widgets

      Scrollbar in All Widgets

      Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

      Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */ :-
      /* Sidebar Content */
      .sidebar .widget{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      In our example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

      Scrollbar in Widgets of One Sidebar

      Let us assume for our discussion that you have modified your template to include an additional sidebar using our Three Column Template guides. We may have all the AdSense Ads in one sidebar and we want to add the scrollbars into the widgets of the other sidebar. The style that can be inserted into the template will be this:-
      /* Sidebar Content */
      #newsidebar .widget{
      height:200px;
      overflow:auto;
      }


      Or this:-
      /* Sidebar Content */
      #sidebar .widget{
      height:200px;
      overflow:auto;
      }


      depending on which sidebar your widgets are at. Preview the template and if it is what you want, save the Template and refresh your Blog.

      Scrollbar in One Widget only

      We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-
      <div id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
      <b:widget id='HTML1' locked='false' title='' type='HTML'/>
      <b:widget id='Label1' locked='false' title='Label' type='Label'/>
      </b:section>
      </div>


      In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of thewidget ID.

      With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-
      /* Sidebar Content */
      #Label1{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in red.

      Scrollbar in All Widgets except One

      A further variation is to add scrollbars to all the Widgets except one or two. As mentioned earlier, AdSense widgets should not have scrollbars and it might be your intention to have scrollbars in the rest of the widgets.

      Follow the guide above to insert scrollbars into all the widgets. After that for the ones that you do not want scrollbars to appear, specify a bigger value for the height:-
      /* Sidebar Content */
      #AdSense1{
      height:600px;
      }


      For example, if your AdSense unit is a 160x600 Vertical Wide Banner, put the height of the widget as 600px. Since the contents fit nicely into this size, the scrollbars should not appear. Change the widget ID accordingly to point to the widget that you want to exclude and adjust the height value.

      Scrollbar for Links and Labels

      We need scrollbars usually for Label lists and Blogrolls created using Link lists because these are usually lengthy. You may have noticed that using the above codes, the entire widget is included in the scroll. Supposing we want the title to remain static and have a scrollbar only for the links or labels, we can insert a code as follows (remember to enter the relevant ID into the part shown in red):-
      /* Sidebar Content */
      #LinkList1 ul{
      height:200px;
      overflow:auto;
      }


      Add Scrollbars to Blog Widgets

      Scrollbar for Blog Posts

      Should you want the scrollbars for each of your blog posts, scroll to where you see this code and add the portion (shown in red):-
      .post {
      height:200px;
      overflow:auto;
      }


      Scrollbar for text within Blog Posts

      Perhaps you might not want to have scrollbars for all the Blog Posts, but only for a piece of text within a Blog Post. You can follow the steps in this guide to insert scrollbars to text within the post.

      Scrollbar for Long Text

      If you have a long piece of text like those found in the usual Terms of Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will be very useful in minimizing the text area and yet allowing readers to view the full contents.

      Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-
      .scrollingtext {
      height:200px;
      width:200px;
      border:0;
      overflow:auto;
      }


      What we have done is to specify that the text will be contained in a box with scrollbars automatically added if the text overflows the 200px x 200px area. The values of the border, height and width can be changed to suit your needs.

      We can now type the text. This text can either appear in a Blog Post, or as an element in the Template. If it is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit HTML” mode and insert these tags (shown inblue):-

      <div class="scrollingtext">TEXT</div>


      The TEXT can be inserted directly into the template via Template -> Page Elements -> Text. Similarly, if you have typed it in the rich editor mode, you can click the “Edit HTML” link at the top right corner and insert the above tags.

      After publishing the post or saving the page element, you will be able to see theTEXT within a box and the scrollbars automatically inserted.
      Add Scrollbars to Blog Widgets

      Links, Labels open in New Window

      8:48 PM

      In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

      Text Links and Image Links

      To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-
      <a href="URL" target="_blank"title="TITLE">Text</a>


      The HTML code of a picture or image link looks like this:-
      <a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>


      The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

      Link List and Link Widget

      The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

      (By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

      To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

       



      Scroll to these lines and add the code in red.
      <b:widget id='LinkList1' locked='false' title='Links'type='LinkList'>
      <b:includable id='main'>

      <b:if cond='data:title'>
      <h2><data:title/></h2></b:if>
      <div class='widget-content'>
      <ul>
      <b:loop values='data:links' var='link'>
      <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
      </b:loop>


      Please Note:

      You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

      Save and refresh your page to see the change.

      Label List and Label Widget

      If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

      Scroll to these lines and add the code in red.
      <b:widget id='Label1' locked='false' title='Labels'type='Label'>
      <b:includable id='main'>
      <b:if cond='data:title'>
      <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <ul>
      <b:loop values='data:labels' var='label'>
      <li>
      <b:if cond='data:blog.url == data:label.url'>
      <data:label.name/>
      <b:else/>
      <a expr:href='data:label.url' target='_blank'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
      </li>
      </b:loop>

      In our previous articles, we discussed the code for making the text and image links in your Posts open in new windows or tabs when clicked. However, to have the links in a Link List and Labels that are normally in the sidebar widgets open in new browser windows or tabs, you would need to change the HTML code in your template. Here, we shall talk about the hack that you can put into your template.

      Text Links and Image Links

      To recapitulate what we mentioned in our guides at Hyperlinks and Image Links (I) and Hyperlinks and Image Links (II), a typical hypertext or text link code looks like this:-
      <a href="URL" target="_blank"title="TITLE">Text</a>


      The HTML code of a picture or image link looks like this:-
      <a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>


      The part of the code that tells the browser to open the link in a new browser window or new tab is the target attribute (in blue). If you want the readers to view the link in the same browser window, simply remove target="_blank" from the code.

      Link List and Link Widget

      The Link List that you create in your sidebar, using Template -> Page Elements -> Add a Page Element, will open links in the same window. Sometimes, these may not be what you want. For instance, we have configured our template such that the links for “My Blogs” open in new windows but the links in “Articles” open in the same window.

      (By the way, many people have asked whether the Articles list is an archive hack. The answer is no. The list you see is created using a Link List. We think that it is better than Archive because it allows us flexibility in displaying and grouping the Articles regardless of date of post.)

      To have the Link List open in new windows when clicked, we first go to Template -> Edit HTML. Check the “Expand Widget Templates” box. Backup your template by copying the template and saving it in an MS Notepad text file. You can also click the “Download Full Template” link that appears right after the words “Before editing your template, you may want to save a copy of it.”

       



      Scroll to these lines and add the code in red.
      <b:widget id='LinkList1' locked='false' title='Links'type='LinkList'>
      <b:includable id='main'>

      <b:if cond='data:title'>
      <h2><data:title/></h2></b:if>
      <div class='widget-content'>
      <ul>
      <b:loop values='data:links' var='link'>
      <li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
      </b:loop>


      Please Note:

      You have to locate the correct Link List. Check against the Title if you have inserted a title for the List. If you have several Link Lists in your Blog, they will be numbered LinkList1, LinkList2, and so on. In case you did not insert titles into your Link Lists and you are not sure which Link widget is the right one, look at what is before or after the codes, and compare against what you see on your Blog. They are usually arranged in the order that they appear in your Blog.

      Save and refresh your page to see the change.

      Label List and Label Widget

      If you have created a list of Labels through Template -> Page Elements -> Add a Page Element, you can also have your Labels open in new browser windows or tabs.

      Scroll to these lines and add the code in red.
      <b:widget id='Label1' locked='false' title='Labels'type='Label'>
      <b:includable id='main'>
      <b:if cond='data:title'>
      <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
      <ul>
      <b:loop values='data:labels' var='label'>
      <li>
      <b:if cond='data:blog.url == data:label.url'>
      <data:label.name/>
      <b:else/>
      <a expr:href='data:label.url' target='_blank'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
      </li>
      </b:loop>

      Hyperlinks and Image Links (II)

      8:46 PM

      We continue from where we left off in Hyperlinks and Image Links (I). We have looked at how we can create text links and discussed the HTML code and common attributes. In this part of the article, we shall focus on adding Images and Image Links into your Blog. We will talk about the “title” and “alt” tags in image links which supposedly help in search engine optimization (SEO). We shall end off with the code you can put on your Blog to allow your readers to link to you from their Blogs.

      Image Tag

      I assume you have a ready picture, image, photo, or banner. Edit it and resize it using an image editing software. Other than Google's Picasa, there are other free image editing software offered on the net that you can try. As explained inHyperlinks and Image Links (I), the image has to be uploaded onto an image server which allows direct link to the image. Copy the image URL.

      The HTML code for a picture or image is this:-
      <img src="Image URL" border="0" width="80" height="15" alt="Description" />


      A couple of things to note:-

      1. Unlike the anchor tag, the <img> (image) tag has no closing tag.

      2. In the code, src means “source” and this is where you will insert the Image URL of the picture that you wish to display on your Blog.

      3. Depending on your Blog's configuration, any picture you upload may automatically have a border surrounding it. In the above example, the border is removed. If you want a border, you can change the “0” to “1” pixel or any other value.

      4. When your Blog page is downloaded, the browser normally allocates a space for the images contained in your page. Sometimes, the allocated space may be bigger than the image size and when the images are finally downloaded, the contents are adjusted to cater to the images. This adjustment may sometimes be the cause of a slower download. To resolve this, it is usually preferable to insert the width and height of the image (in pixels) to let the browser reserve the exact space for the image.

      5. The width and height settings can also be used to resize the image, although the better way to resize any image is to use an image editing software to adjust the image to the size that you want before uploading it.

      6. The alt attribute displays the alternative text that readers will see if the images are not successfully downloaded. Some people may disable image downloads to improve the speed of internet access. For the blind readers, this alternate text is what will be read out to them by their computers. Also, search engine spiders are said to read this alternate text and it is all the more advisable to include it for SEO purposes. As a matter of practice, it is good to enter a short Description into the code.

      Alignment of image

      There are times when you want an image to appear on the left or right of your header or body. You can do this by inserting the alignment tags. In the following example, the image will float to the right:-
      <img src="Image URL" border="0" width="80" height="15" alt="Description" align="right" />


      Margin around image

      The image can appear in the midst of some text and you may want to set a margin or a space around the image where the text will not intrude. The attribute “hspace” sets the horizontal space and the “vspace” sets the vertical space between the image and the surrounding text. Adding on to the above example, the final code after inserting the margin settings (in pixels) will look like this:-

      <img src="Image URL" border="0" width="80" height="15" alt="Description" hspace="20" vspace="20" align="right" />


      Image Links

      We have discussed the image tag and its common attributes. We shall now look at how to turn the image into a hyperlink, so that when people click on the image, they will be brought to a webpage, image, sound file, video file, or document. You can also have a clickable image in your Header that will bring your readers to your Home page. The details are in the article Add Picture Banner Link to Blogger Header.

      If you have followed Part I of this article and understood how text links are created, image links are formed in similar manner, except that instead of Text, we insert the image tag.

      To recall, the HTML code for a text link is this:-
      <a href="URL" target="_blank" title="TITLE">Text</a>


      The HTML code for an image hyperlink is this:-
      <a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>


      See the similarities? I shall briefly explain what these attributes mean and why they matter. If you wish to have a clearer idea, please refer to Hyperlinks and Image Links (I).

      1. The URL is the location that you want your readers to go to when they click the image. This could point to a webpage, file or document. To test whether the URL is correct, copy the URL, paste it into your web browser and press Enter. You should be able to see the webpage, image, or document, listen to the sound file or view the video file.

      2. By inserting the target="_blank" attribute, the link will open in a new browser window or tab. If you want the link to open in the same window or tab, delete it. Should you have difficulty understanding this attribute, I have an example below for you to try out.

      3. The TITLE is what you see as a pop-up when you hover your mouse over the link. Similar to the “alt” attribute discussed above, this is supposedly read by search engines and will enhance your SEO. It is good practice to insert the TITLE and the Description.

      4. As for the image tag code, this has been fully explained above and I shall not elaborate further. Remember that the hyperlink code has to be closed with the </a> tag as shown in the example.

      Putting it together, this code:-

      <a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank" title="Business Fables and Management Lessons"><img src= "http://i154.photobucket.com/albums/s255/ownlblog/fablesbanner80x15.gif" border="0" width="80" height="15" alt="Business Fables and Management Lessons" /></a>



      Hover your mouse over it and you will see the pop-up Title. If you click this link, it will open in a new window or tab because of the target attribute. At this link, you will notice the image that has been inserted as a background to the Header. If you would like to have your own image in your Header, you may read this article.

      How to insert image link HTML code

      You can insert the HTML code in your posts. See that you are in the “Edit HTML” mode and not “Compose” mode when you insert the image link code.




      If you want the image link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

      “Link to Your Blog” HTML code

      Would you like visitors to be able to create a link from their blogs to yours? Putting a code for visitors to copy and paste, akin to what you see on the left sidebar of this Blog requires additional HTML tags. Briefly explained, whatever HTML code you insert into your Blog post or template will be interpreted as a code rather than just lines of text. To tell Blogger not to act on this code, you will need to put the code in a text box or a form field. This is what you can use:-

      <textarea rows="4" cols="25" name="NAME" readonly="true">LINK CODE</textarea>


      The rows attribute defines how tall the text input box will be and the cols attribute defines how wide, based on the number of characters. You can change the values depending on how much space you want to allocate for the text. The name attribute is more for scripting purposes and you can insert any NAME that you want. Readonly attribute locks the field and while people can block and copy the text, they cannot change it. The LINK CODE in this case is the entire hyperlink code that will link to your Blog. This hyperlink can be either a text link or an image link.

      If this still sounds confusing, don't fret. What I did on my left sidebar is to go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. You can use the code I have for this Blog but change the relevant particulars to yours:-

      Link to Us
      <p></p>
      <textarea rows="3" cols="18" name="Link to Us" readonly="readonly"><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank" title="Tips for New Bloggers"><img border="0" alt="Tips for New Bloggers" src="http://i154.photobucket.com/albums/s255/ownlblog/tipsbanner80x15.gif" width="80" height="15" /></a></textarea>
      We have a more detailed discussion of the textarea code in our Add Text Box and Textarea article.

      Further reading:

      If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window.

      We continue from where we left off in Hyperlinks and Image Links (I). We have looked at how we can create text links and discussed the HTML code and common attributes. In this part of the article, we shall focus on adding Images and Image Links into your Blog. We will talk about the “title” and “alt” tags in image links which supposedly help in search engine optimization (SEO). We shall end off with the code you can put on your Blog to allow your readers to link to you from their Blogs.

      Image Tag

      I assume you have a ready picture, image, photo, or banner. Edit it and resize it using an image editing software. Other than Google's Picasa, there are other free image editing software offered on the net that you can try. As explained inHyperlinks and Image Links (I), the image has to be uploaded onto an image server which allows direct link to the image. Copy the image URL.

      The HTML code for a picture or image is this:-
      <img src="Image URL" border="0" width="80" height="15" alt="Description" />


      A couple of things to note:-

      1. Unlike the anchor tag, the <img> (image) tag has no closing tag.

      2. In the code, src means “source” and this is where you will insert the Image URL of the picture that you wish to display on your Blog.

      3. Depending on your Blog's configuration, any picture you upload may automatically have a border surrounding it. In the above example, the border is removed. If you want a border, you can change the “0” to “1” pixel or any other value.

      4. When your Blog page is downloaded, the browser normally allocates a space for the images contained in your page. Sometimes, the allocated space may be bigger than the image size and when the images are finally downloaded, the contents are adjusted to cater to the images. This adjustment may sometimes be the cause of a slower download. To resolve this, it is usually preferable to insert the width and height of the image (in pixels) to let the browser reserve the exact space for the image.

      5. The width and height settings can also be used to resize the image, although the better way to resize any image is to use an image editing software to adjust the image to the size that you want before uploading it.

      6. The alt attribute displays the alternative text that readers will see if the images are not successfully downloaded. Some people may disable image downloads to improve the speed of internet access. For the blind readers, this alternate text is what will be read out to them by their computers. Also, search engine spiders are said to read this alternate text and it is all the more advisable to include it for SEO purposes. As a matter of practice, it is good to enter a short Description into the code.

      Alignment of image

      There are times when you want an image to appear on the left or right of your header or body. You can do this by inserting the alignment tags. In the following example, the image will float to the right:-
      <img src="Image URL" border="0" width="80" height="15" alt="Description" align="right" />


      Margin around image

      The image can appear in the midst of some text and you may want to set a margin or a space around the image where the text will not intrude. The attribute “hspace” sets the horizontal space and the “vspace” sets the vertical space between the image and the surrounding text. Adding on to the above example, the final code after inserting the margin settings (in pixels) will look like this:-

      <img src="Image URL" border="0" width="80" height="15" alt="Description" hspace="20" vspace="20" align="right" />


      Image Links

      We have discussed the image tag and its common attributes. We shall now look at how to turn the image into a hyperlink, so that when people click on the image, they will be brought to a webpage, image, sound file, video file, or document. You can also have a clickable image in your Header that will bring your readers to your Home page. The details are in the article Add Picture Banner Link to Blogger Header.

      If you have followed Part I of this article and understood how text links are created, image links are formed in similar manner, except that instead of Text, we insert the image tag.

      To recall, the HTML code for a text link is this:-
      <a href="URL" target="_blank" title="TITLE">Text</a>


      The HTML code for an image hyperlink is this:-
      <a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>


      See the similarities? I shall briefly explain what these attributes mean and why they matter. If you wish to have a clearer idea, please refer to Hyperlinks and Image Links (I).

      1. The URL is the location that you want your readers to go to when they click the image. This could point to a webpage, file or document. To test whether the URL is correct, copy the URL, paste it into your web browser and press Enter. You should be able to see the webpage, image, or document, listen to the sound file or view the video file.

      2. By inserting the target="_blank" attribute, the link will open in a new browser window or tab. If you want the link to open in the same window or tab, delete it. Should you have difficulty understanding this attribute, I have an example below for you to try out.

      3. The TITLE is what you see as a pop-up when you hover your mouse over the link. Similar to the “alt” attribute discussed above, this is supposedly read by search engines and will enhance your SEO. It is good practice to insert the TITLE and the Description.

      4. As for the image tag code, this has been fully explained above and I shall not elaborate further. Remember that the hyperlink code has to be closed with the </a> tag as shown in the example.

      Putting it together, this code:-

      <a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank" title="Business Fables and Management Lessons"><img src= "http://i154.photobucket.com/albums/s255/ownlblog/fablesbanner80x15.gif" border="0" width="80" height="15" alt="Business Fables and Management Lessons" /></a>



      Hover your mouse over it and you will see the pop-up Title. If you click this link, it will open in a new window or tab because of the target attribute. At this link, you will notice the image that has been inserted as a background to the Header. If you would like to have your own image in your Header, you may read this article.

      How to insert image link HTML code

      You can insert the HTML code in your posts. See that you are in the “Edit HTML” mode and not “Compose” mode when you insert the image link code.




      If you want the image link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

      “Link to Your Blog” HTML code

      Would you like visitors to be able to create a link from their blogs to yours? Putting a code for visitors to copy and paste, akin to what you see on the left sidebar of this Blog requires additional HTML tags. Briefly explained, whatever HTML code you insert into your Blog post or template will be interpreted as a code rather than just lines of text. To tell Blogger not to act on this code, you will need to put the code in a text box or a form field. This is what you can use:-

      <textarea rows="4" cols="25" name="NAME" readonly="true">LINK CODE</textarea>


      The rows attribute defines how tall the text input box will be and the cols attribute defines how wide, based on the number of characters. You can change the values depending on how much space you want to allocate for the text. The name attribute is more for scripting purposes and you can insert any NAME that you want. Readonly attribute locks the field and while people can block and copy the text, they cannot change it. The LINK CODE in this case is the entire hyperlink code that will link to your Blog. This hyperlink can be either a text link or an image link.

      If this still sounds confusing, don't fret. What I did on my left sidebar is to go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. You can use the code I have for this Blog but change the relevant particulars to yours:-

      Link to Us
      <p></p>
      <textarea rows="3" cols="18" name="Link to Us" readonly="readonly"><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank" title="Tips for New Bloggers"><img border="0" alt="Tips for New Bloggers" src="http://i154.photobucket.com/albums/s255/ownlblog/tipsbanner80x15.gif" width="80" height="15" /></a></textarea>
      We have a more detailed discussion of the textarea code in our Add Text Box and Textarea article.

      Further reading:

      If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window.

      Hyperlinks and Image Links (I)

      8:41 PM

      In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

      A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

      Text Links

      To create a hypertext or text link, the HTML code is this:-
      <a href="URL" target="_blank"title="TITLE">Text</a>


      Allow me to explain:-

      1. In HTML, the <a> (anchor) tag is used to create an anchor to link from. It should always be closed with the </a> tag.

      2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

      3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the file, take note of theURL of the file and insert that into the above code.

      4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

      5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

      6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

      To see how it is put together, this code:-

      <a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes</a>


      will give you this line:-

      Famous Motivational and Inspirational Quotes

      Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

      Link to Section

      If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

      This is best explained through an example. I have inserted this tag in the later part of this article:-
      <a name="demo">Email Links</a>


      The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

      Next, I create a hyperlink for you to click to go straight to that section.

      The HTML code for the hyperlink is this:-
      <a href="URL#demo">Click here to go to Email Links</a>


      You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

      To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

      <a name="top"><a href="URL#bottom">Click here to go to bottom</a>


      <a name="bottom"><a href="URL#top">Click here to go to top</a>


      You can now click this to go to the bottom of this page and click that link again to come back to this segment.

      Email Links

      If you would like to have a link for people to click and send you an email, you can use the following code:-
      <a href="mailto:EMAIL ADDRESS">Email Author</a>


      Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

      How to insert text link HTML code

      You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.



      If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.




      Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

      If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

      This article continues at Hyperlinks and Image Links (II)

      Further reading:

      If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window. To have numbered or bulleted links, you may check out the articleNumbered List and Bulleted List.

      In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

      A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

      Text Links

      To create a hypertext or text link, the HTML code is this:-
      <a href="URL" target="_blank"title="TITLE">Text</a>


      Allow me to explain:-

      1. In HTML, the <a> (anchor) tag is used to create an anchor to link from. It should always be closed with the </a> tag.

      2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

      3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the file, take note of theURL of the file and insert that into the above code.

      4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

      5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

      6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

      To see how it is put together, this code:-

      <a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes</a>


      will give you this line:-

      Famous Motivational and Inspirational Quotes

      Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

      Link to Section

      If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

      This is best explained through an example. I have inserted this tag in the later part of this article:-
      <a name="demo">Email Links</a>


      The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

      Next, I create a hyperlink for you to click to go straight to that section.

      The HTML code for the hyperlink is this:-
      <a href="URL#demo">Click here to go to Email Links</a>


      You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

      To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

      <a name="top"><a href="URL#bottom">Click here to go to bottom</a>


      <a name="bottom"><a href="URL#top">Click here to go to top</a>


      You can now click this to go to the bottom of this page and click that link again to come back to this segment.

      Email Links

      If you would like to have a link for people to click and send you an email, you can use the following code:-
      <a href="mailto:EMAIL ADDRESS">Email Author</a>


      Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

      How to insert text link HTML code

      You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.



      If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.




      Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

      If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

      This article continues at Hyperlinks and Image Links (II)

      Further reading:

      If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window. To have numbered or bulleted links, you may check out the articleNumbered List and Bulleted List.
      Subscribe to: Posts (Atom)