Pages

How To Add Stylish Facebook Like Button On Blogger Blog ?

 


At Present, Facebook Like Button has turned as very important widget for any Blogger Blog or website. It is also very useful to increase the count of visitors on Facebook. Although Facebook offers a simple Like Button plugin that you can easily integrate into your website, but the default Like Buttons is not having good look at moreover ugly all. Today I shall introduce you some cool stylish as well as 3D format Facebook Like Button to get more like on your Facebook pages that you can easily add on side bar space both right or left on your website.

You don't need to do any think you only need to Copy and Paste the codes below which you like. I am sure that these stylish Facebook Like Button widget easily attracts your visitors or readers to increase the count of Likes.




So let’s get started add the Facebook Like Buttons on your Blog

At first, you must need to log into Blogger Blog with your Google account and just  follow the instructions below:

1. Go to Blogger Dashboard >> Layout 

2. Click on Add a Gadget link above right side of layout (Like below screenshot)





 3. Now scroll down the Add a Gadget window and click on HTML/JavaScript (Like below screenshot)





4. Keep blank the Title box.

5. Copy 
one of HTML Code from the Style given below and Paste into the Content box.


6. Click Save.


7. Now you drag and drop the gadget from top of the right side of Layout just above your targeted gadget (Title related gadget).

Ok, you have done. See View Blog .



Style-(1)


<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3oP9Y-C0kfMBBD9TXRCcUqNVqWi_xT946mT-UjOIStNj_lXOvcO2g-5LKD1IvtOjMrmyg74amOX_aDDTVZGeZOW8llGg1MmD8Tz0cJF7QmTxHMqODaeXin7v2pqTjXvbsJQpixKlOj1Y/s1600/like+us+on+facebook-3.png" height="80" width="300" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL



Style-(2)

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneSrmjYAklEPrE0xCHqH5vqdI6YPQazT-9B-obYl5amcE5jM-ulgIDl85-Lq4Rp8OPCUQ-o3iLmRsPCN4PHmOoA8TXq9DjxVlE-MlwO2vP7UrJhPsHUM0uN1R4mgbgWrQUH9OlAzBZx8/s1600/like+us+on+facebook-4.png" height="100" width="200" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div>


Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(3)


<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVizVsufl8NAc5dZFBELpxxPiZQuHVy5lbZEln8JFLOnAWwWQ0vSq-6NjOBO8sRDUXixjxjwhyphenhyphendYpIOQddvnPmF-UP5-xxjxoyVApqPEGnMZSLNtdgNVjwY2zRLuPaP5w4IMxtDKjK1Iw/s1600/like+us+on+facebook+-1.png" height="120=" width="280" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(4)


<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5aZuyVOWNICRIi8fN12HOi6Yj785slbza7G4ZpuFCABxObPHR7OWv2zDgP6qvMwlhntmSL8pDO_nfsvBE6UoBEKuFCrZ7VfE-vZMc02m4JDxacryARI_zRRUHIao9dz8CZqq9jTfkGE/s1600/like+uf+on+facebook-5.png" height="116" width="320" /></a></div><br /></div></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL


Style-(5)



<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggPzof8ZcRdv_HmgvNOlhj-Rf4ffTAeXcvjxgcImDOQOb9dNitFB61AIzUU4_TXlBveWBSDRe670gJUpqvbN1LraBWxZpAwrVb5VERPT5X2Q11u1vTXO9CaurVHLl5tVSUzCojU30eQkRz/s1600/animated+Like-Button-25.jpg" height="126" width="320" /></a></div></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(6)



<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: center;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"></div><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmjj5iWsHQFDPSRG669uI70-FT1hgKXqh7YdxkWsh3fW7owPeP2_8ITt2yGmV4wTN6ehrq52rEwPaiPjBS-3ZQqkGHeNNh3JS0wKonuAnS22s2dAensQa2bSv3nInAU6FgoeOxkAOqTE0/s1600/animated+Like-Button-9.jpg" height="150" width="150" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(7)


<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4AGcypSmf7X_ESlboR4Khv62zb7ENMBsIeMYRBt4z5CDJKq1MUaRuwwws_TDqJjJCRYCy3OgZThHqRdkQiRa4LQov5nXEoKskYgktnyLUTul4_nB5KuNcM9Zd3vcfFPAdY-MDBBsa2QE/s1600/animated+Like-Button-17.jpg" height="100" width="280" /></a></div><br /></div></div>



Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(8)


<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGdwZ_15-rHgb7mSZO-Kl56T-VjfU6h_U1r2YcI5rcMQq08v3zE_4JVWh9dduLOa82vHS110Cya3U-jzKGeDpBDnLSc_ke-rKyV8k7iW2uIbveW_qYpyyAJz-2njA4jUVv0LcSyasj_YY/s1600/animated+Like-Button-22.jpg" height="56" width="200" /></a></div><br /></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(10)



<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJF_gX4kNR_jh7P_33fRAWLg4sqKC4t7-JZy3A8jXz8HoP-ugwpPawGcwdcE-XA7pGZc5ckb4xiCUDi0hcV7vfIKm8Qhn_pi0nNaBUTIEPl2Rf5tE0DjExsV_7nj4C275xPpLHpU_AA4M/s1600/animated+Like-Button-12.jpg" height="180" width="300" /></a></div>
<br /></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(11)





<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqzkij-FyXVsim3oUH-UN6sZ0dy8fW1zv7tq7d38g-tZw7ydDB7X_i0IGhGXdv70sJ75h3YSWBGNwyEZ0ZLOokuWCmlG-EfcelmvZUC72jhJZMvGyLzuK1gnLdMzhgcbBmw6KBho9MhRg/s1600/animated+Like-Button-10.jpg" height="134" width="200" /></a></div><br /></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Style-(12)





<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://www.facebook.com/digitdigitaleye" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcgsns1O1KoJS52_AH3b15prAjDCQKG4bsBkBPt0nhPw-tcoRS0EukhtOY7bN-_PhOZcCp8NzAqd-vKhAC_vqk9rRltGztCfChNRiP4t2hGrBK-DuF9Nk-gie1xkwk1Hjs7cwcJgoyIVs/s1600/Like-Button-png.png" height="147" width="320" /></a></div><br /><br /></div>

Note: (1)You can re-size this gadget editing the  highlighted color HTML codes into the box.
(2) Replace this highlighted  color codes with your Facebook like page URL

Lot of Thanks for Adding the Gadget in your site. 

** If You face any problem to add the Gadgets please leave comments into the comment box without any hesitating. I will try my best to help you every time.




No comments:

Post a Comment