New Blog Online

Home » All posts

How To Add Twittley Retweet Counter Buttons to Blogger

Twittley is a social network for users to find and share links on Twitter.Harness the power of social networks and viral marketing with the Twittley button. Millions of users use Twitter as a social network so it only makes sense to get your link out to those users.

When a Twitter user arrives at your site, they'll quickly see the distinctive Twittley button. When they click on the button your link will automatically be posted onto their Twitter status so all of their followers can then see the link. Your link will also appear on the Twittley web site where the community can then retweet and comment. All of this is done without the user leaving your site, Twittley does everything behind the scenes.

In this post I explain how to add a Twittley Retweet Counter Button to your blogger blog.If you like to add this Twittley retweet button to your blog then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

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

4.Now Copy your "Twittley Retweet" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "Twittley Retweet" bookmarking buttons code just before <data:post.body/> .

Code 1:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 2:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 3:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 4:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 5:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 6:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

Code 7:

<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>

Result:

5.Now save your template and you are done.

How To Add JQuery Lazy Load Plugin to Blogger

This post will explain to you how to add JQuery Lazy Load Plugin to your blogger blog or any other website easily.If you have a blog or website containing many images, this tricks will be very helpful to you.It can reduce the page loading time of your site.You can see more details about this JQuery Lazy Load Plugin from here: http://www.appelsiini.net/projects/lazyload.Look at the DEMO page to see the result.

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

To add JQuery Lazy Load Plugin to your blogger blog or any other website follow the steps given below:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://bnote.googlecode.com/files/jquery.lazyload.js' type='text/javascript'/>

<script charset='utf-8' type='text/javascript'>

$(function() {

   $(&quot;img&quot;).lazyload({placeholder : &quot;http://bnote.googlecode.com/files/grey.gif&quot;,threshold : 200});

});

</script>

Note : You can download javascript files from here if you want to host above files yourself.

4.Now save your template and you are done.Refresh your site to see the result.

How To Add Flickr Photostream to Blogger

This tutorials will show you how to add a Flickr photostream to your blogger blog.If you like to add this widget to your blogger blog,then follow the steps given below.

1.First login to your Flickr account.

2.Now click on "Your Photostream".

3.Now you are in the your flickr Photostream page.

4.Look at the address of the address bar of your browser.It will look like this:

5.Now can see your Flickr ID.It will be something like this:

38647261@N03

6.Now copy your Flickr ID.

7.Login to your blogger dashboard-->Layout > Page Elements

8.Click on 'Add a Gadget'.

9.Select 'HTML/Javascript' and add the code given below and click save.

<style type="text/css">
.flickr_badge_image { float: left; }
#flickr_badge_wrapper { width: auto; border: 1px; }
#flickr_badge_uber_wrapper { width: auto; }
</style>

<script src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=8&display=random&size=s&layout=y&source=user&user=YOUR-FLICKR-ID" type="text/javascript"></script>

Note : Replace YOUR-FLICKR-ID with your Flickr ID.

How To Add Facebook Like/Recommend Button For Blogger

This tutorial will explains how to add facebook like/Recommend button to your blogger blog and how configure it as you like.To add this facebook like button to your blog follow steps given below.

The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

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

4.Now Copy your "StumbleUpon" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste your "StumbleUpon" bookmarking buttons code just before <data:post.body/> .

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

You can customize above facebook like button changing its values:

You can change,

layout=standard to layout=button_count .

show_faces=false to show_faces=true.

action=like to action=recommend.

font=arial to font=lucida+grande or font=segoe+ui or font=tahoma or font=trebuchet+ms or font=verdana.

colorscheme=light to colorscheme=dark.

5.Now save your template and you are done.

Smooth Jquery Featured Post Slideshow For Blogger

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

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

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Kari�ik -> http://www.serie3.info/
CSS Help: M�sz�ros R�bert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
     long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current     = null;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

   $(items[i]).mouseover(function() {
      mOver = true;
   });

   $(items[i]).mouseout(function() {
       mOver   = false;
       fadeElement(true);
   });

});

var fadeElement = function(isMouseOut) {
   var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
   thisTimeOut = (faderStat) ? 10 : thisTimeOut;
   if(items.length > 0) {
       timeOutFn = setTimeout(makeSlider, thisTimeOut);
   } else {
       console.log("Poof..");
   }
}

var makeSlider = function() {
   current = (current != null) ? current : items[(items.length-1)];
   var currNo      = jQuery.inArray(current, items) + 1
   currNo = (currNo == items.length) ? 0 : (currNo - 1);
   var newMargin   = $(element).width() * currNo;
   if(faderStat == true) {
       if(!mOver) {
           $(items[currNo]).fadeIn((timeOut/6), function() {
               if($(itemsSpan[currNo]).css('bottom') == 0) {
                   $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               } else {
                   $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                       faderStat = false;
                       current = items[currNo];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               }
           });
       }
   } else {
       if(!mOver) {
           if($(itemsSpan[currNo]).css('bottom') == 0) {
               $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                   $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           } else {
               $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
               $(items[currNo]).fadeOut((timeOut/6), function() {
                       faderStat = true;
                       current = items[(currNo+1)];
                       if(!mOver) {
                           fadeElement(false);
                       }
                   });
               });
           }
       }
   }
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXPI9K6A7Xmz-RDQK5u4X3CDKH0AI71MVZ62jkgq3XGZY9q9un-r7RZK2GjsW-nsjvGzymUb4ZgP8uv8NZ18Vd6uj_CGWYtICSktVsvr0ZW6X8ETN9TDTHTSZcinQWHe1XvTTyniSGa3T/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92pLOJCsf-Qddj9Ug0hGCTwVoLujISupC8j-lwlNILWNmOEWspsB2PQfHDvuRm5GczhN6lg5MRMtDB7Z41QfowiS79m_cwKvHfzptloWbZDqDdZ7kKPUkyb3WTd_zt_kMCwy6-DjgREaE/" />
<span>Halo 3 : Play Game Online</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfwIlI2pSfsi4gZLOj0qrYSl6i3Y-adZbYKANp1JIa13Mk5TQZ_51bMaaJTNNGuinPaQ_V71fapfl6DQiiCUp_lIt1Ze3VhDAVDy4JBrOy4x6Btkm3NBzERy-7gMy956vaUgHKunhDbbk/" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYroO7rLhi-P9BKqDfuukOYKMOl5FFC1oDikmBqiL8UsepC44fqaYl8DGSYZTfMTOgd07A_Bwgge2f4805YKaAoaVImHs-Ae1Ep_SWR2bDuXwGxtdcM8vnf_NOBIvuCDaQaKb89pQrHZpX/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.

How To Add Official Google Buzz Button+Counter to Blogger

Now Google has introduced their Official Google Buzz Buttons.Buzz Buttons help people share stuff from your website in Google Buzz. You can add this buzz button to your blogger blog or website easily.Below I explain how to add this official Google buzz button to blogger with or without share count.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Now copy one of the below codes and paste it just before the above line.

Button 1 : Button + counter : Post count - On the top

Code:

<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Result:

Button 2 : Button + counter : Post count - On the side

Code:

<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Result:

Button 3 : Button only : Size - Normal

Code:

<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Result:

Button 4 : Button only : Size - Small

Code:

<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-button"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Result:

Button 5 : Link

Code:

<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="link"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

Result:

5.Now save your template and you are done.

How To Hidden Deleted Comments in Blogger

When you delete the comments in blogger, still you'll see an message like the picture below.This messages add a ugly appearance to your blogspot site.But doing this little trick,you can hidden deleted comments easily.If you like to hidden deleted comments in your blogspot blog,then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

<data:comment.author/>

<data:commentPostedByMsg/>
</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</b:loop>

4.Copy below code and paste it just after <b:loop values='data:post.comments' var='comment'>.

<b:if cond='data:comment.isDeleted'>

<b:else/>

5.Copy below code and paste it just before </b:loop>.

</b:if>

6.Save your template and you are done.

Now your deleted comments will not appear.

New Blog Online

Blog Archive

How To Add Twittley Retweet Counter Buttons to Blogger

How To Add JQuery Lazy Load Plugin to Blogger

How To Add Flickr Photostream to Blogger

How To Add Facebook Like/Recommend Button For Blogger

Smooth Jquery Featured Post Slideshow For Blogger

How To Add Official Google Buzz Button+Counter to Blogger

How To Hidden Deleted Comments in Blogger

Popular Posts