How to Add Facebook Like Button to Blogger

Via Facebook like button to your blog fans can easily with your Facebook page to your blog. As we know that social sharing is the most important for all bloggers increase traffic to your blog. Here I give a tutorial image without coding and it is totally the official. Let see how to add the blogger.

How To Add Official Facebook Like Button ?

1. Go to Facebook.com 
2. Go to your page. 
3. Click on edit page (See the image below)

3.Click on resources. 

4.Click on Social Plugin.

5.Click on Like Button.

6.Put your Facebook Page URL Correctly.

7.Copy the Code properly....

8.Now go to your blog & Click on Design.

9.Clock on Add Gadget.

10. Now select HTML/Javascript.

11.Now paste the code.

You Done It ! Check out your blog.

If you likes my post then share it :)

How to Add Facebook Like Button to Blogger

Posted by Unknown No comments

Via Facebook like button to your blog fans can easily with your Facebook page to your blog. As we know that social sharing is the most important for all bloggers increase traffic to your blog. Here I give a tutorial image without coding and it is totally the official. Let see how to add the blogger.

How To Add Official Facebook Like Button ?

1. Go to Facebook.com 
2. Go to your page. 
3. Click on edit page (See the image below)

3.Click on resources. 

4.Click on Social Plugin.

5.Click on Like Button.

6.Put your Facebook Page URL Correctly.

7.Copy the Code properly....

8.Now go to your blog & Click on Design.

9.Clock on Add Gadget.

10. Now select HTML/Javascript.

11.Now paste the code.

You Done It ! Check out your blog.

If you likes my post then share it :)

Fancy CSS3 & Jquery Lavalamp Menu For Blogger

I Have Shared two jQuery Menus on ProBlogger so Far First one was Smooth jQuery Drop Down Menu Version 1 and Second one was Version 2. This time I Am Sharing an amazing CSS3 & jQuery Lavalamp menu and as mentioned in title it works with CSS3 And jQuery. You can use this menu in 6 colors by just Changing a word in the HTML Code.This Menu is designed by and i have bloggerized it to works perfectly with any blogger.

How To Add This Menu To Blogger

For Easy Understanding I am Dividing the toturial in three parts They are s below .

* Adding Scripts .

* Adding Styles .

* Adding The Menu .

1. Adding Scripts .

* Go To Blogger Dashboard . Template .

* Click On Edit HTML .

* Hit Proceed .

* Find Below Code In Your Template

</head>

Add Below Code just above it. If You Have Already Added a jQuery Library Your Blog Then Delete the Highlighted  Code .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" typ

e="text/javascript"></script>

 2 Adding Styles .

Now Find Below Code .

]]></b:skin>

Add Below CSS Code Immediately Before it .

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/

. Now Save Your Template .

 3. Adding The Menu .

Now Come To Page Layout .

* Now Come To Page Layout .

* Click Add a Gadget Below Header .

* Choose HTML/JavaScript .

* Copy And Past Below Code And Save It .

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

 Replace # With The Links

Replace Home,about,Blog. etc  with link text which you want to appear on the Menu .

If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .

<div class="lavalamp">

<div class="lavalamp magenta">

<div class="lavalamp cyan">

<div class="lavalamp yellow">

<div class="lavalamp orange">

<div class="lavalamp dark"?

Finally Save Your Widget And Your Done .

I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it  bellow via comments .

Fancy CSS3 & Jquery Lavalamp Menu For Blogger

Posted by Unknown No comments

I Have Shared two jQuery Menus on ProBlogger so Far First one was Smooth jQuery Drop Down Menu Version 1 and Second one was Version 2. This time I Am Sharing an amazing CSS3 & jQuery Lavalamp menu and as mentioned in title it works with CSS3 And jQuery. You can use this menu in 6 colors by just Changing a word in the HTML Code.This Menu is designed by and i have bloggerized it to works perfectly with any blogger.

How To Add This Menu To Blogger

For Easy Understanding I am Dividing the toturial in three parts They are s below .

* Adding Scripts .

* Adding Styles .

* Adding The Menu .

1. Adding Scripts .

* Go To Blogger Dashboard . Template .

* Click On Edit HTML .

* Hit Proceed .

* Find Below Code In Your Template

</head>

Add Below Code just above it. If You Have Already Added a jQuery Library Your Blog Then Delete the Highlighted  Code .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" typ

e="text/javascript"></script>

 2 Adding Styles .

Now Find Below Code .

]]></b:skin>

Add Below CSS Code Immediately Before it .

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/

. Now Save Your Template .

 3. Adding The Menu .

Now Come To Page Layout .

* Now Come To Page Layout .

* Click Add a Gadget Below Header .

* Choose HTML/JavaScript .

* Copy And Past Below Code And Save It .

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

 Replace # With The Links

Replace Home,about,Blog. etc  with link text which you want to appear on the Menu .

If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .

<div class="lavalamp">

<div class="lavalamp magenta">

<div class="lavalamp cyan">

<div class="lavalamp yellow">

<div class="lavalamp orange">

<div class="lavalamp dark"?

Finally Save Your Widget And Your Done .

I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it  bellow via comments .

How To Add Related Posts Widget To Blogger With Thumbnails

Now Here is a wonDerfull Hack For displaying relate Posts Beneth each of your Blog Post, along with thumbnails. The Related article are Chosen from other posts in That same Categories/Lable/tag. With This Hack Many Of Your Readers Will Remain on your Site for Longer Periods of time When Thay See Related Posts Of Interest .

Steps Adding The Related Posts Widget To Blogger Blog.

Step 1. Go To Blogger Dashboard >> Template >> Edit HTML .

Step 2 . Check The " Expand Widgets Template " Box .

Step 3 . Search CTRL + F - For This Piece Of Code .

</head>

Steps 4 . Copy And Paste The Below Code Just Before/above </head> .

 <!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type='text/css'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3YljKflWgmjIFm6u0QmD9uuPIIT35MTMLhoBiebv6VY_pjtIDFr6njqVmTCF-SO1GGFSlSNnxhFqzahsgzXzZVJmpxGITHqjjSg8niENYmYcxnl8P95jJpq2r1NQJa6-CENiemg51Wnc/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Note !! To Change The Default Picturw, Replace The URL in Blue With Your Own .

For Displaying More Than 5 Posts, Replace 5 Value From :var maxresult=5;"

Remove the Code in Violet if You Want The Related Posts to Be Displayed in Home Page To .

Step 5 . Now Find The Following Code : .

<dive class='post-footer'>

Step 6 . And Just Above it, Copy And Paste The Below Code .

 <!-- Related Posts with Thumbnails Code Start-->

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

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<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=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://helplogger.blogspot.com'><img alt='Blogger 
Tricks' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW0YrLq8B2qhXcI5SsF15aNTYse5Zxwd9-cW_Lfqj21-tUaIRnDsMr6WzqGJxo-PC6zwgyCqZjNtu75GIIPvrLcoJNCH1LecCYjWzxVVd3RVK2mRk_QtFKwsU5uWPJ6iwAp1wFHwrb1aI/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Note !! Change the 6 Value From max-result=6 With The Number of posts You Want to be displayed .

If You Want The Related Posts To be Displayed On Homepage Too , remove The Code in Violet .

Step 7 . Save The Template .

How To Add Related Posts Widget To Blogger With Thumbnails

Posted by Unknown No comments

Now Here is a wonDerfull Hack For displaying relate Posts Beneth each of your Blog Post, along with thumbnails. The Related article are Chosen from other posts in That same Categories/Lable/tag. With This Hack Many Of Your Readers Will Remain on your Site for Longer Periods of time When Thay See Related Posts Of Interest .

Steps Adding The Related Posts Widget To Blogger Blog.

Step 1. Go To Blogger Dashboard >> Template >> Edit HTML .

Step 2 . Check The " Expand Widgets Template " Box .

Step 3 . Search CTRL + F - For This Piece Of Code .

</head>

Steps 4 . Copy And Paste The Below Code Just Before/above </head> .

 <!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type='text/css'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3YljKflWgmjIFm6u0QmD9uuPIIT35MTMLhoBiebv6VY_pjtIDFr6njqVmTCF-SO1GGFSlSNnxhFqzahsgzXzZVJmpxGITHqjjSg8niENYmYcxnl8P95jJpq2r1NQJa6-CENiemg51Wnc/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Note !! To Change The Default Picturw, Replace The URL in Blue With Your Own .

For Displaying More Than 5 Posts, Replace 5 Value From :var maxresult=5;"

Remove the Code in Violet if You Want The Related Posts to Be Displayed in Home Page To .

Step 5 . Now Find The Following Code : .

<dive class='post-footer'>

Step 6 . And Just Above it, Copy And Paste The Below Code .

 <!-- Related Posts with Thumbnails Code Start-->

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

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<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=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://helplogger.blogspot.com'><img alt='Blogger 
Tricks' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW0YrLq8B2qhXcI5SsF15aNTYse5Zxwd9-cW_Lfqj21-tUaIRnDsMr6WzqGJxo-PC6zwgyCqZjNtu75GIIPvrLcoJNCH1LecCYjWzxVVd3RVK2mRk_QtFKwsU5uWPJ6iwAp1wFHwrb1aI/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Note !! Change the 6 Value From max-result=6 With The Number of posts You Want to be displayed .

If You Want The Related Posts To be Displayed On Homepage Too , remove The Code in Violet .

Step 7 . Save The Template .

How To Add Social Media Icons To Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likehood that readers can follow through the various social network. There are several ways to do this like adding a new widget section to the blog header but now we'll do it using an unordered list that used of facebook, Twitter, Google+ and blog feed and as a bonus the icon will rotate when you hover over them.

Adding Social Media Icons To Blogger Header

Step 1 From Your Blogger Dashboard go to Template and click on the Edit HTML Buuton .

Step 2. To expand the style, Click on the small arrow on the left of <b:skin>  -  <b:skin>  Then Click anywhere inside the code area to search ( Using CTRL + F ) For the ]]></b:skin> tag and add this code just above it .

 /* Social icons for Blogger

----------------------------------------------- */



#social-icons {

margin-bottom:-30px;

height:50px;

width:100%;

display:block;

clear:both;

z-index: 2;

position: relative;

}

.social-media-icons {

display:table

}

.social-media-icons ul {

text-align:right;

padding:5px 5px 0 0

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

.social-media-icons ul {

margin-bottom:0;

padding:0;

float:right;

}

.social-media-icons li.media_icon {

margin-left:6px;

padding-left:0 !important;

background:none !important;

display:inline;

float:left;

}

.social-media-icons li:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(-360deg);

-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

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

 ScreenShots 1

ScreenShots 2

Step 3 . Now Search For This Line .

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

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

Step 4 . And justt above it, add this Code !!

<div class='social-media-icons' id='social-icons'>

<ul>



<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXb1bke-qG4GePi_MR4rR3ezQdiF6VwEkMddEB-R2Fiz4YCE-7qq6TESoWPqHs4Q9q01HPDowjewVn46AaeHOt1ro8vL5HdwuuR2YFd7lEl4q7Pa5kBQQCYuarUl5bpf54DneVYxFoA2g/s1600/Facebook.png'/></a></li>



<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAtSut5BUC68FIYPrQKhUhVeB1oZOTTeOj_YN-7mynGeICLuL_W6-tuBgeEjiwo23yp0amfPN9OcsQMe3fq5N_-G5epbXq3auN_jrV_q4sbPHj62DPWyaisk-hC9RUCEOuciYmf2IUdsw/s1600/Twitter.png'/></a></li>



<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrEm7p00n-0a8JoGdRoRK1BMODuXl3qnou78HHlD7xFTrSSy-ANzaRlz4Mouh3XyJYc5qMgvQ0Y_3Qpjzwqm-C5McQVYhptUKDu3eoRBd3tqtAmUaMifTW-BCg6v_2IKYY3dXqP3VdR7Q/s1600/googleplus.png'/></a></li>



<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBcZ_D9w4vad2yy0OyhtQyBveOrDXVeVsGQKWy6tiUOp5p3G6IuqFP-jtuddgeG2nArh6dIAzXw-vAtUKjNjFwhWHC1g1AcAJxM0g6pKegPNlBdABzMjpNUmTMVpDcXYXj6321wIGm40/s1600/RSS.png'/></a></li>



</ul></div>

Customization !!

* Change what 's in red with your username and id: the first is your facebook username the second is that of twitter in the third you shouls change the X by the ID Of YourGoogle+Profile and in the fourth you wil put the name of your blog .

* To change the icons , just replace the url with one of your images .

* You can add more icons if you want you just have to add before </ul></div> a line like this for each extra icon you want !!!

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5 . Fimally Save The Template To Apply The Changes .

How To Add Social Media Icons To Blogger Header

Posted by Unknown 2 comments

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likehood that readers can follow through the various social network. There are several ways to do this like adding a new widget section to the blog header but now we'll do it using an unordered list that used of facebook, Twitter, Google+ and blog feed and as a bonus the icon will rotate when you hover over them.

Adding Social Media Icons To Blogger Header

Step 1 From Your Blogger Dashboard go to Template and click on the Edit HTML Buuton .

Step 2. To expand the style, Click on the small arrow on the left of <b:skin>  -  <b:skin>  Then Click anywhere inside the code area to search ( Using CTRL + F ) For the ]]></b:skin> tag and add this code just above it .

 /* Social icons for Blogger

----------------------------------------------- */



#social-icons {

margin-bottom:-30px;

height:50px;

width:100%;

display:block;

clear:both;

z-index: 2;

position: relative;

}

.social-media-icons {

display:table

}

.social-media-icons ul {

text-align:right;

padding:5px 5px 0 0

list-style-image:none;

list-style-position:outside;

list-style-type:none;

}

.social-media-icons ul {

margin-bottom:0;

padding:0;

float:right;

}

.social-media-icons li.media_icon {

margin-left:6px;

padding-left:0 !important;

background:none !important;

display:inline;

float:left;

}

.social-media-icons li:hover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(-360deg);

-moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

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

 ScreenShots 1

ScreenShots 2

Step 3 . Now Search For This Line .

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

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

Step 4 . And justt above it, add this Code !!

<div class='social-media-icons' id='social-icons'>

<ul>



<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXb1bke-qG4GePi_MR4rR3ezQdiF6VwEkMddEB-R2Fiz4YCE-7qq6TESoWPqHs4Q9q01HPDowjewVn46AaeHOt1ro8vL5HdwuuR2YFd7lEl4q7Pa5kBQQCYuarUl5bpf54DneVYxFoA2g/s1600/Facebook.png'/></a></li>



<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAtSut5BUC68FIYPrQKhUhVeB1oZOTTeOj_YN-7mynGeICLuL_W6-tuBgeEjiwo23yp0amfPN9OcsQMe3fq5N_-G5epbXq3auN_jrV_q4sbPHj62DPWyaisk-hC9RUCEOuciYmf2IUdsw/s1600/Twitter.png'/></a></li>



<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrEm7p00n-0a8JoGdRoRK1BMODuXl3qnou78HHlD7xFTrSSy-ANzaRlz4Mouh3XyJYc5qMgvQ0Y_3Qpjzwqm-C5McQVYhptUKDu3eoRBd3tqtAmUaMifTW-BCg6v_2IKYY3dXqP3VdR7Q/s1600/googleplus.png'/></a></li>



<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioBcZ_D9w4vad2yy0OyhtQyBveOrDXVeVsGQKWy6tiUOp5p3G6IuqFP-jtuddgeG2nArh6dIAzXw-vAtUKjNjFwhWHC1g1AcAJxM0g6pKegPNlBdABzMjpNUmTMVpDcXYXj6321wIGm40/s1600/RSS.png'/></a></li>



</ul></div>

Customization !!

* Change what 's in red with your username and id: the first is your facebook username the second is that of twitter in the third you shouls change the X by the ID Of YourGoogle+Profile and in the fourth you wil put the name of your blog .

* To change the icons , just replace the url with one of your images .

* You can add more icons if you want you just have to add before </ul></div> a line like this for each extra icon you want !!!

<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li>

Step 5 . Fimally Save The Template To Apply The Changes .

How To Add Scrolling Posts Widget For Blogger

Scrolling Recents Posts gadget is a best widget to show off recent posts your blog with a jQuery Scroll effect which grabs attension of visitors very quickly . Previousily I Shared a Scrolling/ Ticker recent posts widget but some of you faced  problams while installing it that's why here i am sharing a new scrolling recent posts widget which works a with a  jQuery spy effect this is the best features of this widget. Each snipes of this widget contains title of post thumbnail of post date when post was published and number of comments on that post also all of the above option are fuly customized so that you can easily customized this widget as you wish.Above are the some features of this widget now let's see how to add it into your blogger Blog .

Live Widget Demo

-->

How To Add Scrolling Recent Posts Widget To Blogger?

Step 1 !!

This Widget works with jQuery spy effect so that we have to jQuery library to our blog first ( Note - Ignore This step if you have already added jQuery library to your blog. )

1. Go To Blogger Dashboard > Template .

2. Click On Edit HTML .

3. Hit Proceed Button .

4. Find Below Code In Your Template .

</head>

add beloe code just above it .

<script src='http://ajax.googleapis.com/ajax/libs/jq

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

Now You Have implemented jQuery library into your blog. Now Lets see how to add scrolling recent posts widget to blogger .

Step 2 !!

1. Go To Blogger Dashboard > Layout .

* Click On Add A Gadget .

* Select HTML/JabaScript .

Past Below Code Inside It .

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVABr-crOtAW_b76aXUgfpDe9JiIbfwFxSnaM5qFU7cGEpPv_UQMsotwKMok4j3_5PUIq-YHFVgezpHIYW5bMlI9P_yZFmJjQVLxDhd53PI4rW-S7Sd_NYlNxP3AVgpfm532g_vVt7VrU/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://prohelpers.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Now Replace http://Www.Prohelpers.blogspot.com/ With Your Blog URL .

Widget Customizations .

As I Mentioned above this widget is fully customizable you can it at your own just by reading the properties of the valvues such as numposts means Number Of Posts. In Above code i am highlighting some valvues which you can simply edit them. Also I Highly Recomended you that done all the changes in our HTML Editor With using the html editor you can simply customize this widget as you wish with  watching prewie of your changes .

 Below I Am describing some imprtant values , 

* Numposts = 10; Total Of posts which you wants scroll by this widget .

* limitspy=4 ; number of the posts to apear on the widget .

* intervalspy=4000; Scrolling speed of the widget, if you decreased thw value speed of widget will increases .

Finaly Save Your All Changes and visit you blog to see the working widget .

How To Add Scrolling Posts Widget For Blogger

Posted by Unknown 1 comment

Scrolling Recents Posts gadget is a best widget to show off recent posts your blog with a jQuery Scroll effect which grabs attension of visitors very quickly . Previousily I Shared a Scrolling/ Ticker recent posts widget but some of you faced  problams while installing it that's why here i am sharing a new scrolling recent posts widget which works a with a  jQuery spy effect this is the best features of this widget. Each snipes of this widget contains title of post thumbnail of post date when post was published and number of comments on that post also all of the above option are fuly customized so that you can easily customized this widget as you wish.Above are the some features of this widget now let's see how to add it into your blogger Blog .

Live Widget Demo

-->

How To Add Scrolling Recent Posts Widget To Blogger?

Step 1 !!

This Widget works with jQuery spy effect so that we have to jQuery library to our blog first ( Note - Ignore This step if you have already added jQuery library to your blog. )

1. Go To Blogger Dashboard > Template .

2. Click On Edit HTML .

3. Hit Proceed Button .

4. Find Below Code In Your Template .

</head>

add beloe code just above it .

<script src='http://ajax.googleapis.com/ajax/libs/jq

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

Now You Have implemented jQuery library into your blog. Now Lets see how to add scrolling recent posts widget to blogger .

Step 2 !!

1. Go To Blogger Dashboard > Layout .

* Click On Add A Gadget .

* Select HTML/JabaScript .

Past Below Code Inside It .

<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVABr-crOtAW_b76aXUgfpDe9JiIbfwFxSnaM5qFU7cGEpPv_UQMsotwKMok4j3_5PUIq-YHFVgezpHIYW5bMlI9P_yZFmJjQVLxDhd53PI4rW-S7Sd_NYlNxP3AVgpfm532g_vVt7VrU/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */

-->
</style>

<script language='JavaScript'> 
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU1VrZ1UYKoL0_tn2tTMJJFTYHJ4pgvxn56fD9p3JFM5ccSCYHpo3KGH_taxkVDyr-E4cWkMdXZF-XKj0QyUbqu35uqFe85-ELFf6kW7kTabfOBDWQUn8cDfcR0LBW63lMZ9mHNdM4U/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://prohelpers.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Now Replace http://Www.Prohelpers.blogspot.com/ With Your Blog URL .

Widget Customizations .

As I Mentioned above this widget is fully customizable you can it at your own just by reading the properties of the valvues such as numposts means Number Of Posts. In Above code i am highlighting some valvues which you can simply edit them. Also I Highly Recomended you that done all the changes in our HTML Editor With using the html editor you can simply customize this widget as you wish with  watching prewie of your changes .

 Below I Am describing some imprtant values , 

* Numposts = 10; Total Of posts which you wants scroll by this widget .

* limitspy=4 ; number of the posts to apear on the widget .

* intervalspy=4000; Scrolling speed of the widget, if you decreased thw value speed of widget will increases .

Finaly Save Your All Changes and visit you blog to see the working widget .

Add Facebook Like Button To Blogger Posts

As well all know facebook is one of the largest social media Company in the world. If your Blog have any fane fage then it will help you alot in increasing traffic on your blog. We already shared all types of twitter tweet button and here also we are giving all types of facebook like button verticle count horizontal count and without count. You can add this button just below of post tile and belw of the post. Jst follow my instruction Carefully...

 * Note ! This button will not like your fan page it will like and share Your post .

How To Add Facebook Like Button To Blogger Posts .

* Go To Blogger Dashboard . Design . Edit HTML .

* First take a backup of your template .

* Tick the expoand widget check box .

* Find for below code in your Template .

<data:post.body/>

If You wish to add like button just below to post title the add the below code just before of <data:post.body/>

Facebook Like Button Styles 

You can add like Button in three Styles !

* Verticle Count .

* Horizontal Count .

* Without Count .

1 . Verticle Styles .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

realcombiz

2 . Horizontal Count .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

realcombiz

 3 . Without Count .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

realcombiz

If You Faced any problem , Please do not hesitate to Let me Know :)

Add Facebook Like Button To Blogger Posts

Posted by Unknown No comments

As well all know facebook is one of the largest social media Company in the world. If your Blog have any fane fage then it will help you alot in increasing traffic on your blog. We already shared all types of twitter tweet button and here also we are giving all types of facebook like button verticle count horizontal count and without count. You can add this button just below of post tile and belw of the post. Jst follow my instruction Carefully...

 * Note ! This button will not like your fan page it will like and share Your post .

How To Add Facebook Like Button To Blogger Posts .

* Go To Blogger Dashboard . Design . Edit HTML .

* First take a backup of your template .

* Tick the expoand widget check box .

* Find for below code in your Template .

<data:post.body/>

If You wish to add like button just below to post title the add the below code just before of <data:post.body/>

Facebook Like Button Styles 

You can add like Button in three Styles !

* Verticle Count .

* Horizontal Count .

* Without Count .

1 . Verticle Styles .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

realcombiz

2 . Horizontal Count .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

realcombiz

 3 . Without Count .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

realcombiz

If You Faced any problem , Please do not hesitate to Let me Know :)