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

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

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

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

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 <!-- You can add more n more images as link above --> 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

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

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&amp;fg=444444&amp;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

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

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 :

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

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

<div class='post-footer'>

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[&quot;search-pt&quot;].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

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 !

<div class="codeview">
Đặt code vào tại đây
</div>

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

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 == &quot;item&quot;'>
    <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='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' 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

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

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

Designed by o-om.com

Online Demo |  Download

10 sure ways to boost up traffic on blogger platform

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.

1. 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
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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.
9. 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.
10. 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

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

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.