New | Kiến thức -Thủ thuật - Giải pháp công nghệ

Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot

2011-12-29T22:08:00.000-08:00

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag
c. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Scroll to Top Script

a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag
c. Add below section of code Before </head> tag and Save your Template.

<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); });</script>

You Are Successfully Done!

Add Social Sharing/Bookmarking Widget with Cool Hover Effect

2011-12-29T22:05:00.000-08:00

Social sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with css/jquery. This widget is used by me in way2blogging.blogspot.com with CSS. After moving to .Org domain name, i change the Template.

Here i am giving that widget and added a cool hover effect with CSS3 for you. If you like it then you can use in your blog :)

Live Demo:-

How to Install Social Sharing/Bookmarking Widget?

Step 1: Adding Css code
1. Login to Blogger Dashboard > Design tab > Edit Html
2. Click on Expand Template widgets ckeckbox
3. Search for ]]></b:skin> tag and put below code above it!

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVVeQHTvaag56DFVpA1vAmnGxmgyllyL9LiAGJwD2wab8d5Ds6GMKparF9glNptVm0wvJ3Awc32_uCh5-oHsVLAsJaOSHPKaePfy8kI-gzRpZqNAFaPeJiFnQE98WYVfZjWw4cCfWZzw-/') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2: Adding Widget Code
1. Search for <data:post.body/> tag
2. And Put Below Code immediately after it! & Save your Template

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='w2b-share'>
  <ul>
   <li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
   <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
   <li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
   <li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
   <li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
   <li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
   <li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
   <li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
   <li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
   <li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
   <li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
   <li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
  </ul>
 </div>
</b:if>

Solution For Finding Code In Step 2

here i received a comment While finding the <data:post.body/> code is coming three time
This Problem comes when we install Auto Read Hack in our Blogs

For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Thank you for All your Info & Support

How To Create Your Own Clock and Add in Blogger

2011-12-29T21:57:00.000-08:00

You wanna add some widget like clock. You can do it so. It is good to have a clock in your blog. Time is always important. You can create your own clock and add it into your blog. Let's know how yo.

Let's get started

• Just go this site - click here

• Then, just select between listbox options.

• Customize colors with color pickers.

• Set your clock size with zoom slide.

• Hit the Download button.

• Copy the code and paste in HTML/Javascript

• Finish!

How to Add Simple Image Slider With Jquery to Blogger Blogs

2011-12-29T21:54:00.000-08:00

Jquery Simple Image Slider with semi transparent Title and Caption. Jquery_{write less. do more.} Jquery is great plugin witch allows to create flash like slick effects in ease and very less weight. this slider is very easy to Install/Integrate on blogger blog. so let's see...

Before Going to Tutorial Take a Demo of this Slider

How to Integrate Simple Image Slider with Jquery ?

There are 4 Steps
a. Adding CSS code and customization !
b. Adding Jquery Plugin
c. Adding Javascript
d. Finally Adding Slider Widget

Adding CSS code and customization !

1. Go to Blogger Dashboard > Design tab > Edit HTML
2. Find this ]]></b:skin> tag and put below code of section, Just before it!

#gallery {
    position:relative;
    height:320px; /* Set Height   */
    width:540px;  /* Set Width    */
    overflow:hidden;
}
#gallery a {
    float:left;
    position:absolute;
}
#gallery a img {
    border:none;
}
#gallery a.show {
    z-index:500;
}
#gallery .caption {
    z-index:600;
    background-color:#000;
    color:#ffffff;
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
}
#gallery .caption .content {
    margin:5px;
}
#gallery .caption .content h3 {
    margin:0;
    padding:0;
    color:#1DCCEF;
}

3. Save your Template

Adding Jquery Plugin

If you have already have Jquery plugin in your blog, then Ignore this step
Add this code before </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Adding Javascript

Add this code before </head> tag

<script type="text/javascript">
//<!--
$(document).ready(function() {  
 slideShow();
});
function slideShow() {
    var dur= 5000;
 $('#gallery a').css({opacity: 0.0});
 $('#gallery a:first').css({opacity: 1.0});
 $('#gallery .caption').css({opacity: 0.7});
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);
 setInterval('gallery()', dur);
}
function gallery() {
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
 var caption = next.find('img').attr('rel'); 
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
 $('#gallery .content').html(caption);
}
//--></script>

Adding Slider Widget

1. Go to Blogger Dashboard > Design tab > Page Elements tab
2. Add HTML/JavaScript Gadget any where
3. Put Title Field as Blank
4. Add bellow Html Widget Code in Body of the widget and Customize it

<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
 <a href="Link url" class="show">
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- Image Slide 2 -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- You can add more n more images as link above  -->

 <div class="caption"><div class="content"></div></div>
 <div style='clear:both;'/>
</div>

Customization:-
Replace Link Url with link that you want
Replace Image url here with Your Image and set it's width and Height
Replace This is Title with your Title
Replace This is Description with with a small Description

You can Add more Image slides by Adding following code just after this  tag and Customize it as Like above

<!-- Image Slide -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

5. Finally Save your Widget!

Tạo khung loan tin trên Y!M cho blogger

2011-12-29T06:28:00.001-08:00

Dưới mỗi bài viết của Blogger của một số Blog có hiển thị khung gửi link bài viết qua Yahooo! Mesenger để giúp bạn hoặc khách truy cập dễ dàng copy link bài viết để chia sẻ cho bạn bè.
Đây chỉ là thủ thuật đơn giả tạo 1 vùng text hiển thị sẵn tiêu đề và link URL của bài viết, bạn để bạn copy và gửi cho bạn bè qua Y!M.

Cách thực hiện như sau:
1. Truy cập vào Blogger:
- Truy cập vào Blogger: Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML) >> click chọn ô check Mở rộng mẫu tiện ích (Expand widget templates).
- Tìm (Nhấn Ctrl + F ) đoạn code
<div class='post-footer-line post-footer-line-3'>
Bằng cách nhấn Ctrl + F và nhập từ khóa line-3 để tìm dễ hơn!
- Nếu không có bạn có thể tìm theo từ khóa line-2 hoặc line-1 để chèn dưới nó
- Thậm chí bạn có thể chèn nó ngay dưới đoạn code:
<data:post.body/>
2. Chèn code hiển thị Link bài viết
- Chèn đoan code dưới:

<b:if cond='data:blog.pageType == "item"'>
<b>Gửi bài viết này cho bạn bè qua Y!M:</b>
<textarea cols='45' id='embedhtml' name='embedhtml' onclick='this.select()' readonly='readonly' rows='2'>
<b:if cond='data:post.title'> » <data:post.title/> : </b:if>
<b:if cond='data:post.url'><data:post.url/></b:if>
</textarea>
</b:if>

vào ngay phía dưới đoạn code vừa tìm được.
- Lưu lại mẫu (Save Templates).

Trang trí cho tab RSS Feed cho blogspot

2011-12-29T02:05:00.000-08:00

Xem hình minh họa kết quả:

- Vài điều về hình minh họa:
+ Feed (Post) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/posts/default, hoặc http://feeds2.feedburner.com/YOURBLOG-Feed (link này có được khi bạn đăng kí từ trang chủ http://feedburner.google.com/))
+ Feed (comments) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/comments/default)
+ Feed (Email) : là mục đăng kí nhận bài viết qua email. (đây là 1 tiện ích của Feedburner)
+ Counter readers: là công cụ đếm số người đọc bài viết qua email.(cũng là 1 tiện ích của Feedburner).

- Để thực hiện 1 bảng RSS link hòan chỉnh như trong hình minh họa thì bạn phải đăng kí chi mình một địa chỉ link RSS bên feedburner rồi sự dụng 2 tiện ích của feedburner là đăng kí nhận bài qua email, và tiện ích đếm người đọc bài viết.

☼ Bây giờ ta bắt đầu:
1. Vào bố cục (Layout)
2. Vào phần tử trang (page element)
3. Tạo một widget HTML/Javascript ở sidebar.
4. Và dán code bên dưới vào:

<table border="1" style="text-align: left; width: 240px; height: 100px; font-weight:bold; background:#fff;" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><a href="http://YOURBLOG.blogspot.com/feeds/posts/default"><span style="text-decoration: underline;"><img alt="Feeds" style="border: 0px solid ; width: 110px; height: 110px; float: left;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SLSjKZSO6uI/AAAAAAAAEHs/1_Vb9U5gx88/s320-R/rss128pw8.png" title="¡Suscribe Feed!"/></span></a><br/>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default">Feed (Post)</a><br/>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=YOURBLOG-Feed" title="Recive my post by email">Feed
(email)<br/>

</a><a href="http://YOURBLOG.blogspot.com/feeds/comments/default" title="Suscribe my comments">Feed
(Comments)<br/>
</a><a href="http://feeds2.feedburner.com/YOURBLOG-Feed"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/YOURBLOG-Feed?bg=99CCFF&fg=444444&anim=0" height="26"/></a>
<br/>
</td>
</tr>
</tbody>
</table>

- Các dòng code màu xanh có được khi bạn đăng kí từ Feedburner, và đọan code màu xanh dưới cùng là code của bộ đếm readers mà Feedburner cung cấp cho bạn.

[Thủ Thuật] Bài viết liên Quan gồm danh sách ảnh và bài viết cho blogger

2011-12-29T00:27:00.000-08:00

Demo:

- Cách thực hiện như sau:
Bước 1: Các bạn vào Thiết Kế, Chỉnh sửa HTML, sau đó dán đoạn Code bên dưới lên trên thẻ </head>

<style type='text/css'>
.baivietlienquan {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #adc7de url(http://www.vn520.org/@forum/gif/ok/201112182141001.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
font-weight: bold;
}
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcoi0vf2t1DqOdRIx69xIuAw__bMxjA9JxY1mY8BIL-DB7qpIKqBl1Kq6SUkcso7EIggHDUh45PQ1AEPxXl-ku6Jj8-atdFpMa4IIcPQXb4nLwLibKTsvVSUWfF41s-OPlXPEAHOGljI/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JUyeTC700L5Pak5g2KxnQ5HxNyJbc1QFB9YNoOKrLqEqE5FLudvQts6l9jSBJZsiWvsuG9yUXl631dmnC0yL31k8XSYzaSu4E-WRXHRQKxOvbDbhgatnCMBqLJQ5K_Ugg_alNYXmCUb0/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>

<!-- Start Related posts  -->
<script src='http://datacafe82.googlecode.com/files/related_posted_img.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>

</script>
</b:if>
<!-- End Related posts  -->

Lưu Template lại.
Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

<div class='post-footer-line post-footer-line-2'/>

hoặc code sau:

<div class='post-footer-line post-footer-line-1'/>

<!-- Related posts  --> 
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/>

</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvYFDYzQJsU04UJFXsQ8QfibhiDXdu7pPM8Bs1IterXDWI4olK7K33JtAMQHXbMEt6O4ESFjHbXkTaIEEwj_kdDiKRfVSewTPhDa3KkDhyphenhyphendPW-LzBXWJdZmEIBLOiqWt0aFP033YfDRI/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>
<div class='clear'/>
<!-- Related posts  -->

Trong đó các bạn chú ý:

- max-results=9&quot là số bài ở dạng thumbnail

- var maxresults=12 là số bài ở dạng list.

Chèn link Google Search vào footer của bài viếtChèn link Google Search vào footer của bài viết

2011-12-29T00:22:00.000-08:00

1. Vào thiết kế
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới :

- nếu không tìm thấy đoạn mã này, bạn có thể tìm các đoạn mã bên dưới :

hoặc :

<data:post.body/>

5. Sau khi tìm được 1 trong các đoạn code trên, các bạn dán đoạn code bên dưới vào ngay sau nó :

<div class='google-search-link' style='text-align:center;'>
<form action='http://www.google.com.vn/search' method='get' name='search-pt' target='_blank'>
<input autocomplete='off' expr:value='data:post.title' id='search-text' name='q' style='display:none;' tabindex='7' type='text'/>
<a href='#' onclick='document["search-pt"].submit()'>=== click search google ===</a>
</form>
</div>

- các bạn có thể thay dòng === click search google === thành đoạn text khác mà các bạn thích.

6. Save template.

Đặt CODE trong khung khi bài viết giới thiệu code trong blogspot

2011-12-29T00:13:00.001-08:00

Bạn viết blog thường có kèm theo code HTML để giới thiệu. Bạn muốn bài đăng của mình được đẹp hơn trong mắt người đọc.
Xem demo:

Vậy thì hôm nay tôi xin hướng các bạn cách làm đó. Hãy làm theo các bước sau:
B1: Login vào bảng điều khiển -> Thiết kế -> Sửa HTML.
B2: Nhấn CTRL + F để tìm dòng sau: ]]></b:skin> , sau đó hãy thêm đoạn code dưới ngay trên dòng vừa tìm được.

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat-3.jpg) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Vậy là bạn đã chỉnh sửa HTML thành công rồi ! Bây giờ khi viết bài đăng, hãy dùng code sau chèn vào bài viết và dán code cần hiển thị vào giữa. Chúc thành công !

Chèn 1 box nhỏ hiển thị các bài liên quan vào bài viết cho blogspot

2011-12-29T00:10:00.000-08:00

Bài viết sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc (giống như trang vietnamnet.vn). Để tránh trùng lặp với tiện ích các bài liên quan ở phía dưới của bài viết, thủ thuật này mình sẽ dùng tiện ích các bài ngẫu nhiên từ nhãn để truy xuất cho box này.
Thủ thuật này chỉ hiện thị tốt nhất cho các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.

Hình ảnh minh họa

Và đây là hình ảnh mình thực hiện cho blog test

* Bắt đầu thực hiện thủ thuật:
1. Vào Thiết kế
2. Vào Chỉnh sửa HTML
3. Chọn Mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

    <script src='http://datacafe82.googlecode.com/files/rp-posts.js' type='text/javascript'/>
    <script type='text/javascript'>
    var maxEntries = 4;
    </script>
    <style type='text/css'>
    #rp-pre {
    float:right;
    width:150px;
    padding-left:10px;
    }
    #rp-content {
    border:1px solid #bbb;
    background:#eee;
    }
    #rp-title {
    text-align: center;
    background:#bbb;
    font-weight:bold;
    color:#F95107;
    margin:3px;
    padding-bottom:2px;
    }
    #rp-posts {
    position:relative;
    left:-20px;
    }
    #rp-posts a {
    background: url(http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif) no-repeat left;
    padding-left:13px;
    }
    #rp-posts ul li {
    list-style :none;
    }
    </style>

- Code : var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
- Trong hình minh họa, box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;

5. Tiếp tục di chuyển xuống phía dưới trong code template, tìm đoạn code bên dưới:

    <data:post.body/>

6. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:

    <b:if cond='data:blog.pageType == "item"'>
    <div id='rp-pre'>
    <div id='rp-content'><div id='rp-title'>Bài liên quan</div>
    <div id='rp-posts'/></div></div>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=getRandomPosts&max-results=999"' type='text/javascript'/>
    </b:loop>
    </b:if>7. Save template.

* 1 lời khuyên nhỏ:
- Khi chèn box vào bài viết (nằm bên phải) ta sẽ thấy các chữ sẽ không đều (nếu ta chưa chỉnh), như hình minh họa bên dưới:

- Để khắc phục điều này bạn chỉ cần căn đều 2 bên cho khối văn bản này là được, và ta sẽ được kết quả như hình bên dưới:

Tiện ích bài viết được xem nhiều nhất có ảnh thumbnail

2011-12-26T02:56:00.001-08:00

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

.popular-posts {font-size:12px;}
.itemthumb {min-height:46px;border-bottom: 1px dotted #fff;}
.popular-posts a{font-weight:bold; color:#0000ff;}
.popular-posts a:hover {color:#ff0033; }
.item-snippet {color:#000;}
.thumbnailimg {float: left;
height: 40px; /* chiều cao của ảnh thumb*/
width: 40px; /* độ rộng của ảnh thumb*/
margin: 3px 0px 0px 3px; }

6. Tìm đến code bên dưới hoặc tương tự

<b:section class='sidebar' id='sidebar' preferred='yes'>

7. Thêm code bên dưới vào ngay sau code vừa tìm được

<b:widget id='PopularPosts1' locked='false' title='Bài viết xem nhiều nhất' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='popular-posts'>
<b:loop values='data:posts' var='post'>
<div class='itemthumb'>
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' target='_blank'><img alt='' class='thumbnailimg' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' target='_blank'><img class='thumbnailimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpsL9WU4PerhCu9d2iBjvzt-BDAEi9EM3aVq87b_K9MUfclAx-L4nQseCtJxPT_7ik8W29A3E3cqUPI3KpVHDQgG0c_Q74-SqV_TYdfXONQTpU6XPUmFbUlArDru1GpnN8f3LG0PHADkY/'/></a> </b:if><a expr:href='data:post.href'><data:post.title/></a>
<div class='item-snippet'>
<data:post.snippet/></div></div>
<div style='clear: both;'/>
</b:loop>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Tiện ích “Bài viết ngẫu nhiên – Random Post” cho Blogger

2011-12-26T02:52:00.000-08:00

widget “Bài viết ngẫu nhiên – Random Post”

Xin nói trước là cách thực hiện cực kỳ đơn giản, bất cứ ai cũng có thể tạo được chỉ bằng vài click. Trước tiên bạn vào Dashboard - “Bảng điều khiển” I Layout I Page Elements và Add a Gadget Chọn Tiện ích HTML/JavaScript (như hình vẽ)

và copy và paste đoạn mã sau vào:

<div id="random-posts"></div> <script type="text/javascript"> function getRandomPosts(json) { var maxEntries = 10; var numPosts = json.feed.openSearch$totalResults.$t; var indexPosts = new Array(); for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; } indexPosts.sort(function() {return 0.5 - Math.random()}); if (maxEntries > numPosts) { maxEntries = numPosts; } var container = document.getElementById('random-posts'); var ul = document.createElement('ul'); for (i = 0; i < maxEntries; ++i) { var entry = json.feed.entry[indexPosts[i]]; var li = document.createElement('li'); var a = document.createElement('a'); a.title = entry.title.$t; for (var j = 0; j < entry.link.length; ++j) { if (entry.link[j].rel == 'alternate') { a.href = entry.link[j].href; break; } } a.appendChild(document.createTextNode(entry.title.$t)); li.appendChild(a); ul.appendChild(li); } container.appendChild(ul); } </script> <script src="/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Elegant Style Blogger Template

2011-12-17T18:27:00.001-08:00

10 sure ways to boost up traffic on blogger platform

2011-12-17T18:19:00.001-08:00

Blogger is from the Google stable, still blogspot users or their blogs does not have any preference in Google SERPS over other blogs or platforms. Yes, it has some cool pre-built inventories but considering that you have great content and information, only great Search Engine optimization can bring it up the SERPS(or if you have been doing it unknowingly.)
So today let’s look at 10 sure shot ways to boost your traffic on blogger/blogspot using search engine optimization.

Your blog name and url
When you create a blog on blogger, you get a name of the syntax – http://yourname.blogspot.com. You can name it in which ever way you need including numbers and hyphens. The main point to note here is – Select a short name with your primary keywords in it. Make sure that the name is not too long and is appealing to your visitors and also easy to remember.
An ideal one would be http://seo-tips.blogspot.com rather than http://searchengineoptimizationtipsforbloggers.blogspot.com
Your blog template layout
On blogger it’s very tempting to change to a new layout every time because there are so many out there. But i would recommend that you stick to one – a real quality one. By quality i mean one that follows the perfect layout so that you can easily show off what you really want to the search engines without any hassle meanwhile hiding off what you don’t want them to see. See detailed report here.
Meta Tags
Meta tags are extremely important. Make sure in your Dashboard>Settings you enter the same Title and Description as you give in the Template.There is no known harm in having different title in settings and the template but it’s always safe to make them same.Also, include your primary keywords in the description without repeating them or it may look like spam.
Heading and Post Titles
Your post titles are a great resource to bring traffic – did you know that? It counts more than what you’ve written in the content.Make sure that you use a Keyword research tool like the Google Adwords External tool and frame your titles in such a away that it includes the most searched keyword(relevant to your article) and it appears first in the line. Read more about writing traffic generating titles here.
H1 and H2 tags
When you write articles, make sure that you split up the articles with appropriate headings which are included in the H1 and H2 tags. H1 tags carry more weightage so the best headings should be placed in the H1 tags, but make sure that your blogger template uses no special CSS values to it and it appears normal.Google crawlers see H1 tags irrespective of their actual visual appearance on the blog so all you have to do is check with the CSS styling if any.
Blogroll Links
Normally bloggers are left with the Edit-me and Google News link by default. But some users manage to add lots of friends links to it. Fine. Just make sure that all those links are valid, and that there are no broken links. More over, ensure that all of those links are pointing to valid sites and not spams link link farms and poor directories. It’s best if they are all from the same category as your blog is. This will help google tag your site as authentic or not.
Footer text
I’ve discussed the importance of footer text earlier here. A well drafted footer text will help you get that extra push over your competition in the SERPs.
Categories
As you know blogger does not handle categories as wordpress does. But blogger beta handles labels, which you can convert to your advantage in making categories. Label posts based on their content, and arrange these label links(see my right hand panel) as right hand side.This will help google to categorize your blog based on the topics you suggested in the categories.Very neat and tidy tip to get hold of top places in your niche market.
Traffic boosters
Traffic boosters are basically carefully drafted steroid posts that will help you get traffic. Although i don’t suggest this method much, it’s a great way to get some cool traffic if done in the right way. For this, use the keyword research tools and get the best related keywords for your blog(and most popular in searches), then write a well drafted post with adequate keyword density and post it once in a while within your posting cycle.Make sure that these posts are not about totally unrelated stuff(because you got them from the mostly searched keywords list), but somehow related to your blog, otherwise it will bore your readers.
Submit to directories/Forums
As a final step, submit your blog to quality directories. Yeah i know what everyone says, submit to Yahoo directory and DMOZ, but hey, have you ever tried it? Do you know how much time it would take to get listed on DMOZ? Seriously i don’t know. It remains almost impossible for a new blogspot user as they review blogs on basis of authenticity and age.
So find other quality directories – by quality i mean directories that has remained there for years(say more than 3 years) and has a good listing of sites. You can find lot of directories that has no PR, has few websites listed and has come up overnight – stay away from them.
Also, join the best forums around – like the Dp forums and the Webmasterworld forums – you can get lot of genuine traffic from there if you participate actively in the topics.

Wanted: Bloggers for Hire

2011-12-17T18:16:00.001-08:00

Blogging is more than just a hobby, it is now considered as an income generator.
Aside from having blogs which has high traffic, one could be a “blogger for hire”. It means that you could be hired as bloggers for different topics provided that you would meet the requirement needed by the client. Being a successful blogger for hire requires hard work and a lot of patience.
Before you embark on this journey, there are some things which you need to know and if you are currently establishing yourself as such, the points which I am going to share with you could help in your goal.
Bloggers for Hire 101
a. Establish yourself as a blogger – Do not apply to blogger jobs saying that you are knowledgeable about it even though you are not familiar with blogging or even using wordpress. Remember that credibility is also important in blogging.
b. Know your niche – Writing about different subjects could not be the work for you hence you have to find a way to know which topics you consider as your “specialty”. Writing topics which you find interesting would be much easier for you than writing a topic that you don’t know about because it takes a lot of time and effort to be knowledgeable about certain things.
c. Determine your working hours and pay rate – Know the time length which you have when blogging so that you would be able to gauge how long you would be able to finish your blogging gigs. This is extremely important if you are doing blogging as your part-time job. Aside from that, estimate your price (either per post or per hour) so that the client/company would know your range.
I hope these simple tips would help you in your quest for being a blogger for hire. Good luck!

40+ essential resources for Google Blogger

2011-12-17T18:15:00.001-08:00

While Blogger may not be seen as the most powerful blog management system, it certainly has a loyal following. Beginners and advanced users alike appreciate the simplicity of Blogger, the free hosting and ease of customization.
So for those of you who choose Blogger as your publishing platform, here is a selection of essential templates, tools and resources to help you build a better blog.

Free Blogger templates

There are two systems available for Blogger templates: the “Classic” HTML based templates, and the newer XML based “Layouts” templates.
Don’t know which style of template you are using? There’s a simple way to find out: if you have a layouts section in your Blogger dashboard where you can move widgets around, you’re using the XML based layouts templates. In cases where you have to edit the HTML to change the content of your sidebar, you’ll be using a “Classic” template.
For either template system, there are loads of great, free templates available to use. Here is a selection of some of the best resources, organized by template type:

XML/Layouts Templates

Blogger-Templates: A resource point for some of the best Blogger templates around, which also includes some tutorials for template modifications.
Blog and Web: A great resource for decorative templates which have been converted from popular WordPress themes.
SuckMyLolly: looking for some unique, feminine templates? The free selection from this site are as candy sweet as the name suggests!
Better in Pink: A stylish selection of feminine designs.
Final Sense: A huge selection of free templates available here, though these are often simpler and image based variations.
Jackbook: Features a good selection of WordPress conversions. Jacky is also on a mission to showcase 365 templates from various authors over the next year.
Zona Cerebral: this site features some of the most beautiful Blogger templates I have ever seen!
Blogger Buster Designs: A selection of unique two and three column templates designed for Blogger.

Classic Blogger templates

Isnaini: A huge selection of two column templates and unique designs
BloggerTemplates.org: A small but great selection, including some which have ajax-powered menus
Gecko and Fly: Original and highly functional templates with a professional appeal
Blogger Templates by Caz: here you will find some useful and utterly beautiful templates!
Templates for Blogger: Another useful selection of classic templates, featuring both professional layouts and zany designs.
Pannasmontata Templates: Stylish and unique templates for free download.
PsycHo: A free layout generator to create compliant classic templates with ease.

Blogger Tools

Looking for useful tools to enhance your blogging experience? Then look no further! Here is a selection of useful tools you could use for posting, publishing and customizing with Blogger:

Blogger Mobile: Start a MoBlog, or post directly from your mobile phone
Mail-to-Blogger: You can also post to your Blogger blog via email (great for iPhone users too)
BlogThis! Bookmarklet: Have you ever found a post or site which you wanted to write about straight away? Install this nifty bookmarklet in your browser, and you can post with just one click.
Blogger in Draft: Test the latest widgets and developments of Blogger before they are released to the public.
Redirect your feeds through Feedburner: Now there’s no need to use auto-discovery tags to help visitors find your blog feeds. Simply redirect them through Feedburner with the one-click installation!
Blog via Flickr: You can post your Flickr photos directly to your blog, and can even post directly from your camera phone (great for those whose mobile phone network is not covered by Blogger Mobile)
Haloscan: By default, Blogger doesn’t allow you to send trackbacks when you post. By using the free service from Haloscan, you can send trackbacks to other blogs, and also display the trackbacks which have been sent to you. Other free features for Blogger users include external commenting and ratings systems for your blog posts.
w.Bloggar: a free Windows based application which you can integrate with your Blogger blog to post remotely. One version allows you to install on a pen drive to post while you are away from home.
Blogger for Word: Using this free download, you can publish to your blog, save drafts and edit posts from within Microsoft Word.
Blogger Developers Network: Information for developers interested in creating applications, templates and widgets for the Blogger framework.
Blogger Javascript Client Library: Create Blogger applications and mashups that can read and write data from your Blogger blogs with no server-side programming required!

Useful widgets for Blogger layouts

Those who use the Blogger layouts system can now add widgets to their template with ease. Here are some of the most useful widgets for Blogger blogs:

Recent comments: this widget is so easy to configure and install. Simply enter your the details for your blog, choose how many comments and the excerpt length to display, then click the button to add this widget to your blog!
Recent posts: Display extracts of your most recent posts in your sidebar.
Tag Cloud: now Blogger users can feature their categories in “Tag Cloud” form. Slightly more complicated than your average widget, but a great display once installed.
Archive calendar widget: Fancy having a WordPress-style calendar in your sidebar which readers can click to read your post for the day? Phydeaux shows us how this is possible to achieve in Blogger too!
Random post: Adds a link to your sidebar which, when clicked, will take your reader to a random post from your archives
Table of contents: Use this widget to list all of your posts in an expandable widget above your content.
Tab View widget: I love the widgets in some WordPress templates which allow you to view posts by category. Here Hoctro shows us a method which could be used to display your Blogger category posts in the same way.
Simple search widget: add a search box to your sidebar for readers to easily find the content they need.
Flickr Badge: Using this generator, you can easily create a photostream of your latest Flickr photos to display anywhere in your blog.
Widgetbox: find a whole host of widgets here which can be quickly added to your blog layout.
RockYou!: Social widgets, including noteboards, slideshows and talking avatars which can be used in Blogger blogs.

Yet more resources for Blogger!

For more general information about Blogger, you may want to take a look at some of these resources:

Blogger Help: The official site for Blogger-related assistance
Blogger Help Group: Ask questions and get help from other members of the Blogger community.
Blogger Buzz: The official blog about Blogger, featuring news, recent features and noteworthy information for those using this platform.
Blogger Status: Stay informed about developments, upgrades, outages and related issues.
Known issues for Blogger: The latest news about Blogger problems, what’s getting fixed, and what’s been taken care of, direct from the Blogger team.
Blogger Hacks Wiki: Want to find out if a particular hack is possible in Blogger? If it is, then most likely you’ll find it listed here.

15 Useful Widgets and Scripts for Blogger

2011-12-17T18:13:00.001-08:00

There are many useful widgets and scripts which you could use to add interactivity to your Blogger powered blog. Ranging from lists of your most popular posts to a table of contents which loads above your posts, this article contains 20 of the most useful widgets and scripts you could install own blogs.

Easy Install Widgets

All of the widgets int his section can be added easily to your blog using widget installers.

Top Commentators

Reward your regular contributors by adding this widget which displays a list of the ten most active commentators. You can filter your own name from the list and add this easily using the widget installer.
Add Top Commentators widget to your blog (Originally constructed by GoogleSystem and widgetized by Blogger Buster)

Random Posts

Phydeaux3′s widget allows to to create a link to a random post from your sidebar (or wherever you decide to add this widget in your blog). This is another easy widget to install using the one-click installer on Phydeaux’s site.
Add a random post link to your blog (by Phydeaux3)

Picasa Web Albums

This widget allows you to display recent images from your Picasa web albums account in your sidebar. All you need to do is insert your Picasa username into the input box and click submit to add this to your blog.
Install Picasa web albums widget in your blog

Simple Search Widget

This is a simple search widget which uses the same functions as the search box in the Blogger nav-bar. Unlike Google searches, this is a simple widget which will display all posts matching the queried term in the main posts section of your blog, and can be installed using the one-click widget installer.
Install a simple search form in your blog

Random Messages

Ramani of Hackosphere created this widget which can be used to display one of ten random messages in your Blogger blog. One possible use for this would be to display random testimonials in a business blog, while another would be as a display of random quotes.
There is no need to edit your blog’s template when adding this widget: you can add your own quotes and install this easily in your sidebar using Ramani’s widget installer.
Install a random message widget in your Blogger blog

Useful Scripts (Require Editing of your Blogger Template)

The scripts and customizations referenced in this section will require you to edit your blog’s HTML code. Although they are a little more complicated than the previous set, they are all undoubtedly useful additions to your Blogger powered blog.

This highly useful widget will load a table of your blog’s contents above the main posts section. You can then rearrange this list to sort posts by category, posting date or post title.
It is a little more complicated to install than other widgets as it requires editing some aspects of your template, but Hans offers full and detailed instructions for you to add this easily to your blog.
Read more and install Table of Contents widget

Tab View Widget

This widget allows you to display your recent posts/comments or posts from specified categories using a “tab-view” widget, like this:

This widget will allow you to save space in your sidebar by adding these important elements in one place and is now becoming a popular feature of WordPress powered blog designs.
You will need to edit your Blogger template to install this widget, but it’s certainly a useful and functional addition for your Blogger blog. Hoctro offers full instructions for installation and customization in hos explanatory posts.
Learn more and install a tab-view widget in your blog (Created by Hoctro)

Random Rotating Banner/Header Image

Have you ever wanted to add a random banner to your blog’s header? If so, this script will be undoubtedly useful for you!
Unlike other random banner techniques, this technique does not require you to host Javascript files externally. Instead you can achieve this by adding some JavaScript code to your Blogger template and simply link to your banner images (hosted on Flickr or Picassa for example).
Read more and install random banner images (by Freeyasoul Adventure)

This script will display a list of related articles (organized by category) below your posts on item pages. I’ve found this to be a really useful script in my own Blogger blogs as this directs readers to other articles of interest once they have read the current post.
There are two versions of this widget: the first was created by Hoctro but most people find Jackbook’s updated version much easier to use and install.
Read more and install related posts for your Blogger blog (Jackbook version)

Display your Post Dates as a Calendar Page

This customization allows you to use a calendar page instead of your regular post date, like this:

This is quite a simple customization to install using JavaScript and some minor changes to your template.
Read more and install a post-date calendar in your blog

Archive Calendar

Here is another feature commonly found in WordPress blogs which has been customized for Blogger. Phydeaux3 has created a useful archive calendar widget which readers can use to skip to posts made on a certain date. Dates where posts have been made are highlighted in the calendar, and readers can skip to different months using the easy drop-down selector.
Read more and install the Blogger Archive Calendar in your blog (by Phydeaux3)
I hope you have found this list of Blogger widgets and scripts to be useful for customizing your own Blogger templates. If you have found other widgets which are particularly useful for Blogger users, please let us know by leaving your comments below.

Display More Than 5 Recent Posts in Blogger Sidebar

2011-12-17T18:12:00.001-08:00

One method of helping new readers read more content from your blog is to add a “recent posts” widget to the sidebar. Blogger users can do this easily by adding a “feed widget” using the default feed URL (eg: http://yourblog.blogspot.com/feeds/posts/default). However, this will only return the 5 most recent posts at most; Blogger doesn’t (yet) support the ability to display a greater number of entries.
Many Blogger users would prefer to display more than 5 recent posts in their sidebar, and indeed there have been requests for an article explaining how to do this on Blogging Tips and my own Blogger site.
So in this post I’ll outline three different methods you could use to display more than 5 recent posts in your Blogger sidebar, so you can choose the method which seems most suitable for you.

Use Feedburner’s BuzzBoost

If you burn your blog feeds through Feedburner, you can easily republish entries from your blog feed as HTML which can be displayed in a widget in your sidebar, like this:

Using BuzzBoost, you can choose to add any number of recent posts to your widget, include the favicon of your blog, a snippet of each post (a post summary), and also alter the date format.
To use BuzzBoost to add a recent posts widget to your Blogger sidebar, you must already use Feedburner to syndicate your Blogger feeds (here are four great reasons why Blogger users should do this). Then log into your Feedburner dashboard and select the blog for which you would like to activate BuzzBoost.
On this page, click on the “Publicize” tab which is near the top of the page, then look in the left sidebar to find the BuzzBoost link:

On the BuzzBoost page, you will see the many options you can use to configure your recent posts widget. These options are pretty self-explanatory, but the most important thing for you to do is activate your BuzzBoost widget by clicking on the appropriate button at the bottom of the page.
Once you have activated (or saved) the settings for your widget, you will notice a new code box appears which contains the JavaScript code used to display your recent posts; to use this, simply copy the code and paste this into an HTML/JavaScript widget in your Blogger layout page.
You could also choose to add this as a new widget in Blogger, which generates a simple widget installer and adds this automatically to your Blogger layout. This is by far the simplest method: simply choose Blogger from the options in the drop-down menu, and follow the prompts to add this to your layout.
In either case, the widget will display your recent posts widget to match any other list elements in your sidebar.
For example, if you use a dark background and pale text, your BuzzBoost widget will be styled accordingly.

Use Beautiful Beta’s Recent Posts Widget

Hans of Beautiful Beta has developed “recent posts” widget which is easy to both configure and set-up.
Using this method, you can add a recent posts widget which features a short summary of your post, and can choose how many entries you would like to display.
To install the Beautiful Beta recent posts widget, head over to the widget installation page and click on the “Add Recent Posts” button.

A pop-up page will appear which includes all of the options you can choose to configure for your widget.
Alter the widget title and add your blog URL in the appropriate boxes. Then choose of you would prefer to display a summary of your posts (if so, the length in characters of the summary you wish to display).
Once you have finished setting your options, click on the “Customize” button (which saves your settings) then the “Add to my blog” button will be highlighted, which takes you to the widget installation page for your Blogger blog.
From here it’s simply a matter of following the prompts, which will install this widget to your Blogger sidebar in literally seconds!

Make a Widgetbox Blidget

While “Blidget” may seem a rather silly name for a blog feature, this is actually a very useful tool!
A “Blidget” is similar to the above two methods as it republishes your Blogger feed as HTML and allows you to display recent entries within a sidebar widget, like this:
Of course, not many of you will choose to use a funky leopard-print background for your Blidget, but you can choose to add your blog’s logo, customize the appearance and also include a summary of you choose…
To create your free Blidget, simply visit the Blidget creation page over at Widgetbox and enter your blog’s URL (this doesn’t need to be your feed URL). Then press “continue”.
On the following page, Widgetbox will have parsed your blog page to discover the feed URL automatically. Then you can choose how you would like your widget to display, including the size, number of posts, and even whether to display the first image of each post inside the entry (which is craftily scaled to fit the width of your Blidget).
Once all the settings are to your preference, click on the Continue link near the bottom of the page. If you are already a member of Widgetbox, you will be prompted for your username and password. If you are not a member, here you can sign up for a free account there and then.
Once you’re signed in, you will be able to click on the “Get Widget” link in the left sidebar. This will open up a pop-up page which contains JavaScript code you could add to an HTML/JavaScript widget in your Blogger layout.
Even simpler, you could simply click on the Blogger button on this page, which will take you through Blogger’s simple widget installation system to add your Blidget automatically to your sidebar:

Using any of these three different methods you can add more than 5 recent posts to your Blogger sidebar, which may encourage new readers to read other articles you have written.
There are many other methods you could use to add a list of recent posts to your Blogger sidebar, but for me these are the most useful three. Do you use a different service to display a list of your most recent posts? If so, please let us know about this by leaving your comments below.

Blogger’s Dashboard Makeover and other Upcoming Features

2011-12-17T18:10:00.001-08:00

Blogger have been busy working on some new features and updates to the system. Most notably, those logging in to Blogger in Draft (the testing area for new features) will notice a whole new look to the Blogger dashboard:
Using this dashboard allows us to see most of the features we need at a glance, including any news of scheduled outages and other service announcements.
The two blogs we have posted to most recently have their links displayed beside our profile images, offering easy access to post, layout and settings pages for these individual blogs.
In the center, you can see the “My Reading List” section, which currently displays recent posts from the Blogger Buzz blog. More likely than not, we will soon be able to add more feeds to this area and have access to read our favorite blogs all in one place. If this is a feature you would like to see rolled in to Blogger soon, you can vote for this (and other suggestions too) using Blogger’s Wishlist.
Towards the bottom of the new dashboard, there is a section for “Other Stuff”: useful links and tools which are helpful to have at hand when working on our blogs.
In the bottom left section, for example, you can see your settings for posting to your blog by mobile phone (or choose to set this up if you haven’t already done so). The center column links to other useful tools, while the right hooks us up with resources for using Blogger to it’s full potential.

Star Ratings for your Blogger Posts

Another feature which should soon be available to Blogger users is the “Star Ratings” system. This optional feature will enable authors to add a star ratings widget beneath their Blogger posts which readers can use to vote for the content they like (or dislike) the most.
The Blogger team have suggested this will become available in Blogger in Draft over the next few weeks (though I suspect there may be some embarrassment over the recent accident which caused this to be displayed in blogs which hadn’t opted in!).
I would hope that the Blogger team may build upon this idea further to create a “Popular Posts” widget based on the star ratings for each Blogger post. This is a feature which many Blogger users have requested, and while it is currently possible to achieve based on the number of comments a post receives (top commenters widget), this is hardly an ideal solution.

What Features would You Like to Use?

Bloggers wishlist allows us to vote for the features we would most like to see, or suggest a new feature which isn’t already on the list.
If you could choose a new feature (or update an existing feature) for Blogger, what would this be?
Please share your thoughts on this by leaving a comment below.

Make Blogger Comments Reader Friendly!

2011-12-17T18:07:00.001-08:00

Blogger’s comment system is quite different to that of other blogging services, and is not so “friendly” to regular readers who may not understand how this system works.
When faced with a default comment form, visitors to Blogger blogs may feel rather daunted and unwilling to participate in the conversation. However, there are many settings which Blogger authors can change which makes commenting more enticing for readers who are unfamiliar with the way Blogger comments work.
In this post, I’ll explain how you can alter your comment settings in Blogger to make it easier (and more enticing) for readers to comment on your posts, along with a few tips to present comments in a more favorable style.

The main problems with Blogger’s comment system

Many bloggers would agree that, in contrast to other blog comment systems, that employed by Blogger is extremely lacking in functionality!
There are many things about the Blogger comment system which we can’t control, including:

The comment form, which must always be presented on a separate page
The lack of moderation settings: we can either moderate ALL comments, or moderate none. There are no language filters or other mechanisms for ensuring unwanted comments don’t appear unless we choose to moderate each and every one!
No WYSIWYG editor: as Jeremy Martin points out, “WYSIWYG editors are now a consumer expectation”. Sure readers can use basic HTML tags in their comments, but nothing beats the ability to click a button and achieve the same thing!
The irregular “login” settings: rather than offer commenters the simple function of leaving their name, email address and optional URL when leaving a comment, we are faced with choices of Google Login, OpenID details, Anonymous commenting and finally Name/URL. It seems like overkill to me…

So why does Blogger force us to use this system?
As I’m not a Google employee, I can’t offer an official explanation; however, I can offer some insight based on my perception of the system.
Each comment made to a Blogger blog is hosted separately from the blog post it refers to (perhaps even on a different server). When comments are displayed on posts (and on the comment form page), each is referenced according to it’s unique ID number and the ID of the post to which it was posted.
Separating comments from blog posts closes some security flaws which could otherwise endanger the integrity of a Blogger hosted blog. And as I’m sure those who use Blogger will agree, we receive very little comment spam in contrast to those using WordPress!
Unfortunately, increased security does come at a price: most notably for our blog readers. So let’s explore the possibilities of making commenting on Blogger blogs more friendly and enticing for our readers.

Friendly Comment Settings

In our Blogger dashboards, we have a whole page of settings which we can change to make commenting more appealing for our readers. Here I’ll go through some of the best ways you can alter these settings to invite more comments from your readers.

Who can comment?

Unless you run a private blog, you’ll probably want all of your readers to be able to leave a comment on your posts.
By default, this setting is limited to “users with Google accounts”, which (in my opinion) is the most unfriendly setting of all! It’s unlikely that all of your blog’s readers will be using Blogger themselves; many may not have a Google account (or even know what one is!). Forcing readers to log in or create a Google account simply to leave a comment adds extra steps to actually writing a comment and puts most people off altogether.
Choosing “registered users” is a slightly better alternative, but again this forces readers to need an account of some sort in order to leave a comment. If your readers do not use WordPress, TypePad or OpenID, they will likely be unfamiliar with the login required and again be unwilling (or unable) to comment.
My preferred setting is to allow “Anyone” to comment. This allows readers to sign their comments using their own name (or nickname) and add their blog URL if appropriate.
Using “Anyone” as the setting for who can comment ensures no readers are excluded from the conversation in your blog.
The only downside of this setting is that anonymous comments are allowed too, providing an opening for spammers to attempt comments on your posts. However, as I mentioned earlier, comment spam is rare with Blogger and those which do seep through the security barriers can be deleted with just a few clicks (even faster if you choose to moderate all comments on your blog).

Comment form message

While we cannot access the code used to display the comment form, we are able to add a message which can be read by any reader leaving a comment.
This message could simply be an invitation to comment, or you may like to add some “rules” for the type of comments you allow (for example, asking readers to leave comments which are relevant to the post).
A personal message on the comment form adds a sense of interaction between you and your blog readers, and could assist in generating more comments for your posts.

Show comments in a pop-up window

This setting defines whether the comment form will appear in a small pop-up window or direct readers to a separate page.
Most blog readers would prefer the “pop-up window” option. This is because it’s much easier to access the original post (by closing the pop-up) once a comment has been made.
When the comment form is displayed in the same page, there is no clear link to go back to the original post and continue reading:

As such, the full page comment form provides readers with little incentive to remain on the blog any longer!

Enable comment moderation

This is a tricky one, and only you can decide the setting which will work best for you.
In my own blogs, I choose not to moderate all comments before they are displayed. I have had very few problems with comment spam, and prefer my readers to see comments as soon as they have been made.
However, in cases where you are concerned about any of the following issues, you may prefer to moderate comments before they appear on your blog:

If your posts are controversial in any way
If you have suffered from comment spam (or malicious commenters)
If you have any concerns about the validity of comments in regard to the actual content
If you prefer to have complete control over all content posted in your blog!

If you do choose to moderate comments, I would strongly advise you to check your dashboard often for notifications. If comments are left unmoderated for long periods of time, readers can become frustrated that their contributions are not valued, and feel less welcomed as a visitor to your blog.

Show word verification for comments

Word verification (or CATCHPA as it is often called) presents a set of letters displayed as an image which readers need to type before leaving a comment on your blog.
This is used by many different blog comment systems, and is intended to thwart spam-bots since it requires human verification.
Personally, I prefer this setting to be activated for my Blogger blogs, which may account for the minimal amount of comment spam I receive. Unfortunately, the CATCHPAs provided by Blogger can at times be difficult to interpret (generally I discover this when my posts attract fewer comments than normal).
If you decide to moderate comments before they are posted, I would suggest there is no need to use the word verification setting (since you can prevent any spammers simply by deleting their comments).
If moderation seems unnecessary to you, perhaps the word verification can add that extra layer of security to reassure you about the validity of comments posted to your blog

More tips for ensuring a friendly comment system

There are also methods available which can make commenting a more inviting prospect for your blog readers. These tips do require you to modify your blog’s HTML code in some way, though the overall changes can be beneficial to reader interaction with your blog:

Change the comment link

Many blog readers will be unaware of the significance of the “0 comments” or “n comments” links (where n is the number of comments attributed to a post) which provides a link to the comments section.
Vin of Dummies Guide to Google Blogger Beta has written a useful post explaining how to change this link to a more familiar phrase.

Highlight author comments

Using a different color or style for comments you have posted in reply to those left by readers can help visitors understand when you have responded. You can read a full tutorial of how to highlight author comments at Blogger Buster.

Add Avatars to Comments

Using MyBlogLog, you can add a useful script to the comments section of your blog which posts an avatar of the commenter beside their comment. This is similar to the Gravatars available to WordPress bloggers. You can read full instructions to add comment avatars in my post on Blogger Buster.
I hope this post will have provided useful information to make your Blogger comments section more appealing for your readers! Please feel free to add your own suggestions by leaving a comment below.

How to change or remove the “Subscribe to Atom” links in Blogger

2011-12-17T18:04:00.001-08:00

Blogger blogs publish a site feed in Atom format. Atom feeds work in a very similar way to RSS, and there is very little difference for either publishers or those who choose to subscribe.
Default Blogger templates (and indeed, many third party templates), each page will feature a link to subscribe to the Atom feed. On the main pages, this will link to the main site feed, whereas on post pages, this will link to the comments feed for a particular post, like this:

Most blog readers are familiar with feeds in RSS format, though not with Atom feeds. Therefore this link can be confusing, and may well discourage readers from subscribing!
In this post, I’ll explain how you can change the wording of this link which ensures a more appealing link to potential subscribers, and even how to remove this altogether!

How the “Subscribe to (Atom)” links are formed

The “feed links” which appear in your Blogger template are constructed in three parts:

The <b:includable if=’feedlinks’ > section, which includes the dynamic code used to generate links to the appropriate feed.
The <b:includable id=’feedlinksbody’ var=’links’> section, which generates the text and link code for the appropriate feed link.
The <b:include id=’feedlinks’/> line, which tells Blogger the position in the template where these dynamic links should be displayed

We can change these sections of code to ensure these links are friendlier, and encourage readers to subscribe to our blogs, and can even remove the links altogether!

How to change the feed links message

There are many ways you could alter the message used for links to your feeds. Here are the main things you may prefer to change:

Remove “(Atom)” from the link text

As I mentioned earlier, many readers may be confused if a blog feed is offered in Atom (rather than RSS) format.
We can easily remove the “Atom” part of the feed link, so the message will read “Subscribe to: Posts” on the main page and “Subscribe to: Post Comments” on post pages.
Here is how this can be achieved:

Go to the Layout>Edit HTML page in your blog’s dashboard, and check the “expand widget templates” box.
Using the search function of your web browser, locate this phrase: (<data:f.feedType/>)
Delete this phrase! Then preview your template. You should now see on the home page that the (Atom) text is removed from the feed link, and can proceed to save your template.

To alter or remove the “Subscribe to” text

The “Subscribe to” text is generated by this line of code:

<data:feedLinksMsg/>

You can replace this line with a message of your own choosing, or simply delete it if you prefer this text not to be displayed at all.

How to remove the feed links altogether

If you display a link to your blog feeds elsewhere in your template, you may prefer to remove the feed links beneath your posts entirely.
This is very easy to achieve! Simply find this line of code in your Blogger template (make sure you have checked the “Expand widget templates” box:

<b:include name=’feedLinks’/>

And delete it!
To be sure this has worked, you can preview your blog template before saving it: the “Subscribe to: Posts (Atom)” link should now be removed from your layout, on post pages as well as the main page.
I hope this tutorial has helped you understand how to change or remove the subscription links from your Blogger template. Please feel free to share your thoughts on this method by leaving your comments and opinions below.

Add Subscriber-Only Content in Blogger

2011-12-17T18:01:00.001-08:00

One sure-fire way to attract new subscribers to your blog is to offer an incentive: a download, PDF or other content which only subscribers can access.
Those using WordPress to publish their blogs may be familiar with the RSS Footer plugin. For those using Blogger, it’s even easier to add subscriber-only content by simply changing a few settings in your Blogger dashboard.
In this post, I’ll explain how you can add subscriber-only content to appear beneath each post in your feed to promote your latest eBook, downloads or other incentive as encouragement to new subscribers and a reward for your existing readers.

Add your post feed footer

Blogger’s site feed settings include a little known feature: the “post feed footer”. This enables you to add some text or simple HTML code which will appear beneath every post published in your blog feed.
To access the settings for your post feed footer, log in to your Blogger dashboard, choose the blog you want to work with, and go to the Settings>Site Feed page.
To use the post feed footer function, you should ensure that your blog feeds are set to “full” (otherwise the setting will not work!). Change the “Allow Blog Feeds” setting to “Full” before going on to the next step:

Next, you will need to look near the bottom of the Site Feed page, you will see a large text box where you can add some content or simple HTML code. This is where you will add your subscriber-only content.

If you want to add a link to your free PDF or a page containing subscriber tips, you can add this using basic anchor tags, like this:

<a href=”http://your-site.com/link-to-content-page.html”>Subscriber Content Link</a>

You can also add image tags, and style text using bold, italic or inline CSS:

<img src=”lhttp://image-host.com/your-image.jpg” align=”left” alt=”Alt Text” />
<h3>Subscriber Content</h3>
Download your free eBook/content/report: <a href=”http://your-site.com/link-to-content-page.html”>Subscriber Content Link</a>
<strong>Thank you for subscribing!</strong>

Blogger does limit you to using 500 characters or less, but this should be sufficient for most requirements.
Once you have added your subscriber content to the post feed footer, you should save your settings.
If you redirect your Blogger feeds through Feedburner, you may need to wait for a few hours for this change to take effect, though those choosing not to redirect will see the effects immediately.
For Blogger Buster, I use the post feed footer to add a link to my latest eBook, which appears like this beneath posts in my blog’s feed:

Publicize your subscriber-only content!

Once you have created your subscriber only content, it would be a good idea to publicize it. This way you can inform existing readers and encourage new readers to subscribe to your blog feed.
I’ve found the most effective method is a two part process:

Highlight your subscriber content in your sidebar, along with your subscription links This way, you draw attention to the benefits of subscribing, while offering an easily accessible link to your blog feeds.
Write an explanatory post about your subscriber content, with instructions for how this may be accessed This is for the benefit of those unfamiliar with RSS subscriptions, and may also explain how to access this content from email subscriptions if you offer this service from your blog.

I hope this post has provided ample information for how you can add subscriber-only content in Blogger with ease. Please let me know if you have any thoughts or further suggestions by leaving your comments below.

Blogger Label Functions (The Basics)

2011-12-17T18:00:00.001-08:00

When publishing with Blogger, we can categorize our posts using “Labels”. Published posts which have labels attached produce a link to each label in the post-footer section which links to a page displaying all posts categorized under this label. We can also add a “Labels” widget which generates a list of all labels currently in use linking to posts in the appropriate category.
Aside from the basic categorization of blog posts, there are some other useful functions we can add to our blogs when using Blogger labels. In this post, I’ll explain some simple yet useful customizations which could be useful to enhance the organization and display of your Blogger posts.

Create a Label Cloud

“Tag Clouds” are a popular design feature often used in blogs. This enables you to display links to your labels (categories) in a cloud style, where prominent labels feature more prominently and offer readers an understanding of your blog’s subject matter.
More recently, Blogger users have been able to add a flash-based, animated tag cloud to their layout which is based on the popular WP Cumulus plugin by Roy Tanck. This stylish version can be included in a regular Labels widget to parse and display labels automatically.
Further reading for label clouds:

Limit the number of posts displayed on label pages

By default, label pages display 25 posts assigned to that particular category (if there are enough posts filed under that label).
For those who write long posts or use many images, this can result in long page-load times for label-based blog pages.
Here is an easy way to limit the number of posts displayed on label pages:

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box.
Using the search function of your browser, find every instance of this phrase:
```
data:label.url
```
and replace this with the following instead:
```
data:label.url + "?max-results=n"
```
where n is the number of posts you would like to display on labels pages. This can be any number between 1 and 100.

This customization offers more control over the number of posts displayed, and can help ensure your Blogger design looks and feels the way you want it to.

Use a drop-down menu for your labels

If you have a long list of labels in use, a simple labels widget would appear as a big long list.
To free up some space in your sidebar, you may want to consider using a drop-down menu instead.
This is another simple customization for your blog which can be achieved in just a few short steps:

Go to Layout>Edit HTML in your Blogger dashboard. This time, do not check the “expand widget templates box!
Using your browser’s search function, locate the following line of code:
```
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
```
Replace this line with the following code instead:

<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’>
<br />
<select onchange=’location=this.options[this.selectedIndex].value;’>
<option>Select a label</option>
<b:loop values=’data:labels’ var=’label’>
<option expr:value=’data:label.url’><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
Finally, save your template.

Once you have installed this hack, you will see that your label list has been replaced with a simple drop-down menu instead, which readers can use to access label pages with ease.

Access and display posts from label feeds

A lesser known feature of Blogger is that each blog produces label feeds in addition to the regular post and comment feeds.
If a particular category of posts is of interest for your readers, it may be useful to promote certain label feeds or add a recent posts widget to display articles categorized under this label.
Label feeds can be accessed using the following format:

http://your-blog.blogspot.com/feeds/posts/default/-/LabelName

where “your-blog.blogspot.com” should be replaced with your own blog URL, and “LabelName” should be the name of the label you wish to publicize (case sensitive).
If there are spaces between words in your label names, replace these spaces with %20 instead.
For example, the label feed for “Labels Categories and Tags” in my blog, Blogger Buster, is located at the following URL:
http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags
Once you have located the URL for your label feed, you could burn this through FeedBurner and offer subscriptions or add as a recent posts widget to filter posts from this category. It is also a useful method of displaying a “sideblog” with Blogger.

More Label Hacks Coming Soon…

In this post, I’ve discussed only the basic methods of manipulating labels in Blogger blogs. There are also advanced techniques which we can use to filter posts depending on their label (ideal for magazine style layouts, side-blogs and similar functions), and also to generate interesting functions for label pages and particular categories of posts.
So in next week’s post, I’ll continue with the theme of Blogger labels by explaining some of the more advanced label-based functions which offer even greater control over your posts and layouts.

Change the “Subscribe to posts/comments” link in your Blogger template

2011-12-17T17:56:00.001-08:00

In most Blogger templates, you will see a link beneath the main posts section which says “Subscribe to posts (Atom)” or “Subscribe to post comments (Atom)”, depending on the type of page you are viewing.
This basic link is intended to encourage visitors to subscribe to one of your blog’s feeds after reading your blog posts. However, with a little manipulation we can make this link become a much more useful and valuable tool for encouraging subscribers (or even remove this altogether!).
In this post, I’ll explain exactly how the “Subscribe to…” link works in Blogger templates, and offer some suggestions for how it may be improved.

Explaining the “Feed-links” includable

The “Subscribe to posts/comments” link which appears in your Blogger template is a part of the main Posts widget and is formed using a b:includable section of code.
In Blogger templates, “includables” are snippets of code which perform a certain function when live blog pages are displayed. They are similar to PHP includes, which many of you may be familiar with if you have dabbled with WordPress templates before, though rather than be included on a separate server, Blogger includables are contained within a single blog template.
The includable section which is used to display feed links beneath your blog posts uses the following code by default:

<b:includable id=’feedLinksBody’ var=’links’>
<div class=’feed-links’>
<data:feedLinksMsg/>
<b:loop values=’data:links’ var=’f'>
<a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

To make the contents of this “includable” appear at the appropriate place in the Blogger template, this line is used:

<b:include data=’feedLinks’ name=’feedLinksBody’/>

By default, this will appear just beneath the main posts section, and below the comments/backlinks sections on item pages.
When viewing your blog pages, the feed-links appear like this on non-item pages:

And like this on individual post pages:

As you can see in these different screenshots, the general “posts” feed is used on non-item pages, while the feed for an individual post’s comments is linked to on item pages. These links are generated automatically by a code tag in the includable section for the feed-links.

Altering the appearance and wording of feed-links in your Blogger template

As the “includable” for Blogger’s feed links is comprised of numerous tags, we can easily alter these to suit our preferences.
In order to edit your blog’s “feed-links”, you should go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box.
Here are some of the possibilities we can adapt to suit the needs and preferences for our individual blogs:

Change the “Subscribe to” phrase (or remove it altogether)

The “Subscribe to” phrase seen in the feed-links generated by our Blogger template comes from the following code tag:

<data:feedLinksMsg/>

If you prefer to substitute this for your own phrase, you can simply replace this tag with your own phrase. To do this, search for the tag above in your blog’s HTML code and replace the entire tag (including the < and >) with the phrase you prefer to use.
For example, in the code below I have substituted <data:feedLinksMsg/> with “Subscribe now!”:

<b:includable id=’feedLinksBody’ var=’links’>
<div class=’feed-links’>
Subscribe Now!
<b:loop values=’data:links’ var=’f'>
<a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

Remove the “(Atom)” from the end of the feed-link

The default feed type generated by our Blogger blogs is “Atom” (XML). Far fewer people are as familiar with Atom feeds than with RSS feeds (which have seemingly become the standard feed type). Generally speaking, Atom feeds work in much the same manner as RSS feeds when viewed in a feed reader. However, the mention of “Atom” beside the feed link may prove confusing for some visitors, so you may want to change this or remove it altogether.
The “(Atom)” part fo the feed-link is generated by the following snippet of code:
<a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
To remove the “(Atom)”, simply delete the code highlighted in bold. Alternatively you could replace <data:f.feedType/> with RSS, though this wouldn’t be strictly honest!

Add an RSS icon to your feed-link

My favorite way to “dress up” the feed-links in Blogger templates is to add a familiar RSS icon to the left of the link.
This visual anchor quickly informs the casual visitor that this link will enable them to subscribe to your blog posts or comment feeds.
Rather than add any code to the feed-links includable, this can be achieved using a little CSS styling. Remember that I mentioned the entire “feed-links” section was wrapped in a DIV with the class of “feed-links”? This is how we can alter that class quickly to add a little RSS icon
In the <b:skin> section of your Blogger template, search for the following section:

.feed-links {
clear: both;
line-height: 2.5em;
}

Then add the code in bold to this style declaration:

.feed-links {
clear: both;
line-height: 2.5em;
padding-left: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Ks4Cxy4ExBmVmhoJ24F9KQm_imHrB_cQoAt_jmRVxGJqwc-AeyUGUiE0fzLt6nGzdN7MDHnfX8KZvSxkm2k0OaZ0KWgT8s9USqfaQAm-xsgOsdUv04mQ9BiRtUC1BJ0c-BsPtvK2KEMI/s144/feed.gif) left no-repeat;
}

Now if you preview your blog, you will notice the feed-links section has a small RSS icon to the left of the actual link, like this:

Then you can proceed to save your template.
Of course you could replace this feed icon with one of your own choosing if you prefer: simply upload your icon to an online web album or image hosting service, then replace the URL in the code above with that of your own icon instead.

Removing the feed-links altogether

If you have a link to your blog feed elsewhere in your template, you may prefer to do away with the feed-links below your posts altogether!
This is a very simple task to complete. All you will need to do is remove the single line which references the placement of the feed-links includable.
To do this, locate the following line in your blog’s HTML code:

<b:include data=’feedLinks’ name=’feedLinksBody’/>

And delete this entire line. Preview your template before saving to ensure you have successfully removed this line, and if all is well you can proceed to save your template.

Final words

I hope this article has helped you to understand how feed-links work in the posts section of your Blogger template and offered some useful hints for how these links can be altered. Please feel free to add your own suggestions and comments by leaving your messages below.

* $79.95PureNews PureNews PureNews is an amazingly sleek and powerful news theme with unlimited color variations. View full feature list Check out the live demo Buy this theme today Blogger Tip: How to Display Only Post Titles on Main, Search and Aensure the serchive Pages

2011-12-17T17:54:00.001-08:00

$79.95

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.
View full feature list Check out the live demo Buy this theme today

Blogger Tip: How to Display Only Post Titles on Main, Search and Aensure the serchive Pages

Posted by Amanda Fazani on 13th Apr 2009 Blogger, Design & Coding 9 comments

Many bloggers choose to clean up the layout of their non-item pages by choosing to display only the post titles. This has the effect of teasing readers with a catchy title, encouraging them to link through and read the main article, while ensuring the main pages feature a clean and organized layout.
Blogger blogs do not have the function of displaying excerpts on the home, archive and search pages in the same manner as WordPress blogs. While there are various techniques you could use to display archives, most of these are complicated and require HTML editing for each post. Choosing instead to display post titles is much simpler and requires no further editing of the HTML when installed.
In this post, I’ll explain how you can easily edit your Blogger template to display only the post titles for your blog posts on the home, archive and search pages of your blog.

Step 1: Back up your Blogger Template

Before making any changes to the HTML code of your blogger template, it is essential that you first perform a complate back-up of your existing template. Then if you happen to make a mistake, you can easily restore this working template to your blog.
To make a full back-up of your Blogger template, go to Layout>Edit HTML in your Blogger dashboard and click on the “Download full template” link near the top of the page.

This will prompt you to save your template as an XML file to your computer. You can change the file-name to something you will remember more easily. Be sure to save in a location you can easily find if you need your back-up template!

Step 2: Check you have enabled the setting for post pages

“Post Pages” are unique pages in your blog which are used to display individual posts. Most Blogger blogs have this setting activated by default, but it’s worth checking to be sure this hack will work once installed.
To check this, go to Settings>Archiving in your Blogger dashboard and ensure the setting for “Enable post pages” is set to “Yes”. Be sure to save any changes before you leave this page.

Step 3: Add conditional tags to your Blogger template

This is the most complicated part of editing your template to display only the post titles on non-item pages.
Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box. This enables us to find the section of code we need to edit.

Now using your browser’s search function, locate the following tag:
<data:post.body/>
You may find this tag is surrounded by other tags, such as <p> or <div> tags. You must leave these in place when we add the conditional tags. The lines we will add to the template need to wrap around the line in your template which contains the <data:post.body/> tag.
Add the following line just above that which contains the <data:post.body/> tag:
<b:if cond='data:blog.pageType != "item"'>
Then just after the <data:post.body/> line, add this tag:
</b:if>
Once you have made these edits, the section in your template should look something like this:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<p><data:post.body/></p>

</b:if>

Now preview your template. If you have added the code correctly, you should now see that only the post titles display on the home page of your blog. If all is well, proceed to save your template. Then visit your blog in your browser. When you view the home, archive or search pages, only the titles of your posts will appear. By clicking on a post title, you will be taken to the item page, in which case the entire post will appear.
The conditional code we have added to the template means that the post content is not merely hidden (as in the case of post summary hacks), it does not appear at all in the source code. This also means that non-item pages can load more quickly as there is less content to load and no post images – both of which can cause blog pages to load more slowly, particularly for those not using a Broadband connection for their internet browsing.
That’s all there is to it! It’s far simpler to display only post titles in your Blogger powered blog than you would think.
I hope this tutorial has proved useful for you! Please feel free to add your comments or suggestions below.

New | Kiến thức -Thủ thuật - Giải pháp công nghệ

Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot

Add Social Sharing/Bookmarking Widget with Cool Hover Effect

How to Install Social Sharing/Bookmarking Widget?

Solution For Finding Code In Step 2

How To Create Your Own Clock and Add in Blogger

How to Add Simple Image Slider With Jquery to Blogger Blogs

How to Integrate Simple Image Slider with Jquery ?

Adding CSS code and customization !

Adding Jquery Plugin

Adding Javascript

Adding Slider Widget

Tạo khung loan tin trên Y!M cho blogger

Trang trí cho tab RSS Feed cho blogspot

[Thủ Thuật] Bài viết liên Quan gồm danh sách ảnh và bài viết cho blogger

Chèn link Google Search vào footer của bài viếtChèn link Google Search vào footer của bài viết

Đặt CODE trong khung khi bài viết giới thiệu code trong blogspot

Chèn 1 box nhỏ hiển thị các bài liên quan vào bài viết cho blogspot

Tiện ích bài viết được xem nhiều nhất có ảnh thumbnail

Tiện ích “Bài viết ngẫu nhiên – Random Post” cho Blogger

Elegant Style Blogger Template

10 sure ways to boost up traffic on blogger platform

Wanted: Bloggers for Hire

40+ essential resources for Google Blogger

Free Blogger templates

XML/Layouts Templates

Classic Blogger templates

Blogger Tools

Useful widgets for Blogger layouts

Yet more resources for Blogger!

15 Useful Widgets and Scripts for Blogger

Easy Install Widgets

Recent Posts

Recent Comments

Top Commentators

Popular Posts/Most Commented

Random Posts

Picasa Web Albums

Simple Search Widget

Random Messages

Useful Scripts (Require Editing of your Blogger Template)

Table of Contents

Tab View Widget

Tag Cloud (Based on Blogger Labels)

Random Rotating Banner/Header Image

Related Posts

Display your Post Dates as a Calendar Page

Archive Calendar

Display More Than 5 Recent Posts in Blogger Sidebar

Use Feedburner’s BuzzBoost

Use Beautiful Beta’s Recent Posts Widget

Make a Widgetbox Blidget

Blogger’s Dashboard Makeover and other Upcoming Features

Star Ratings for your Blogger Posts

What Features would You Like to Use?

Make Blogger Comments Reader Friendly!

The main problems with Blogger’s comment system

Friendly Comment Settings

Who can comment?

Comment form message

Show comments in a pop-up window

Enable comment moderation

Show word verification for comments

More tips for ensuring a friendly comment system

Change the comment link

Highlight author comments

Add Avatars to Comments

How to change or remove the “Subscribe to Atom” links in Blogger

How the “Subscribe to (Atom)” links are formed

How to change the feed links message

Remove “(Atom)” from the link text

To alter or remove the “Subscribe to” text

How to remove the feed links altogether

Add Subscriber-Only Content in Blogger

Add your post feed footer

Publicize your subscriber-only content!

Blogger Label Functions (The Basics)

Create a Label Cloud

Limit the number of posts displayed on label pages

Use a drop-down menu for your labels