Add Facebook Like Buttons In Blogger

How To Add Facebook Like Button In Blogger?

Follow below steps....

1.open facebook url in first steps shown in fig.

2.Paste your facebook page url which you want to create fb like button.

3.Click on get Code...

4.Goto your blogger id.
5.Select layout option.
6.Select Add a Gadget button in shown in fig.

7.Select HTMP/Javascript option shown in below fig.

select html/javascript option in blogger

8.Paste you iframe Facebook code like shown in fig.

html javascript option

9.Save it and you have done...

10:52

Add Facebook Comments System In Blogger

How To Get Facebook App ID?

This tutorial divided in some steps you need just follow these steps giving below.

First Go to Facebook Developers Page
Give you app name as your site title name etc and click on continue button as showing below

Now fill security check captcha and then continue
Now you go on a new page here you can see your app id and we need it in next steps

How To Add Facebook Comments In Blogger?

First go to Blogger > Template > Edit HTML
Now search for <html and just after it give a space and paste the below code

xmlns:og='http://ogp.me/ns#

Now search for <body> tag and just below it paste the following code

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Replace YOUR_APP_ID with your Facebook Application ID
Now search for </head> and just above it paste the below code

<meta property="fb:app_id" content="YOUR_APP_ID" />

Replace YOUR_APP_ID with your Facebook Application ID
Now search for <b:includable id='comment-form' var='post'> just after it paste the below code

<b:if
cond='data:blog.pageType == "item"'>
    <div
    style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
        <script
        src='http://connect.facebook.net/en_US/all.js#xfbml=1'
        />
        <div>
            <fb:comments
            colorscheme='light'
            expr:href='data:post.url'
            expr:title='data:post.title'
            expr:xid='data:post.id'
            width='550'
            />
        </div>
                </div>
                </b:if>

Now click on Save Template button and you are done !
Now you have successfully added Facebook Comments System in Blogger for result check preview of your site

If you like our tutorial then please share with your friends and give me your feedback via comments Take Care ! - See more at: http://www.googleagra.com

10:50

Add Beautiful Popular Posts Widget In Blogger

Beautiful Popular posts Widget For Blogger

Popular posts widget is also in blogger widgets as default but to give it a new look you need to make some changes in CSS coding. Today we are providing a beautiful popular widget for blogger which have a great look and have an awesome hover effect. Popular posts widget is in your blogger right side and also make a attention for a visitor to add this widget you can make a good impression on your visitor so when visitors show these posts and if like on of them then the visitor surely click on it and this visitor become your loyal reader. So for this cause we providing Popular Posts widget for Blogger it also make a professional look for your template. - See more at: http://www.googleagra.com

How To Add Popular Posts Widget In Blogger?

To add This widget in Blogger you need to follow these simple steps:-

First Go To Blogger > Layout
Click on Add A Gadget
Now Click on Popular Posts widget and make the follow changes as showing in picture

Make the same changes as shown above in picture
And Click on Save Button
Now the second part is add the CSS code for this
Go To Blogger > Template
Click on Edit HTML

Click on Black Arrow to expand the coding
Now search </b:skin> using ctrl+f
Above </b:skin> paste the following code

/*--- MBW Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/S
modosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Now click on Save Template and you are done !

If you need any kind of help then please leave a comment Take Care ! - See more at: http://www.mybloggerwidgets.com/2013/10/add-beautiful-popular-posts-widget-in.html#sthash.Fv1tNyJY.dpuf

10:48

Add Do You Like This Story Widget Below Every Post

Welcome again to all Friends as i already provided Social Media Sharing widget and also Flipper Sharing widget for Blogger, For many requests today i am showing you how to add Do You Like This Story Widget for Blogger. - See more at: http://www.googleagra.com/

How To Add Do You Like This Story Widget In Blogger?

To install this widget in blogger you need to following these simple steps:-

Go to Blogger > Template > Edit HTML
Search for <data:post.body/> using CTRL+F
Now paste the following code below it

<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbwtext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2
HIw/s28/w2b-mail.png) no-repeat scroll 4px center
transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbwbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb
0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,
#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerWidgets', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='MyBloggerWidgets'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbwtext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbwbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/googleagra' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-GMZCDc-rTEo/Ul1e3h5B_ZI/AAAAAAAAA7U/fUAGzf
FsbUE/s1600/flagrss.png
'/></a>
<a href='https://twitter.com/uttamsingh121' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-xuXeIIyW_7k/Ul1e3kYOYBI/AAAAAAAAA7Y/df8L7
ZihYTI/s1600/flagtwitter.png
'/></a>
<a href='https://www.facebook.com/googleagra' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-yy7ZUovcX4w/Ul1e3lIvgoI/AAAAAAAAA7k/zdgg0RkaQ
sk/s1600/flagfb.png
'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

Replace Googleagra with your Feed title
Replace Blue color link with your Feedburner link
Replace Orange color link with your Twitter link
Replace Maroon color link with your Facebook link
Now save your template and you are done !

After saving the template preview your site and you can see the changes
Note:- This widget only shows below your posts not on homepage and give your feedback via comments Take Care !

10:46

Facebook Popup (Like Box Widget) for blogger

Here's a fantastic way to increase facebook likes for your blog or website. Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page. The facebook widget will show up on your page about 30 seconds after the page loads. This is a surefire way to dramatically increase your likes.

Add Widget to Your Site

Add the following code anywhere in the body section of your template. Or simply click the "add to blogger" button for blogspot blogs.

How to Customize

Search for href=http://www.facebook.com/googleagra and replace it with your site's facebook page URL.
Change the 30 Second Time Delay by searching for the code below and changing the number 30000 to a greater or lesser number.
1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.

By default, the like box widget only shows up the first time the user visits your page. If you would like the facebook box to popup evertime the page loads, then remove this line of code:

Display facebook widget when user visits your homepage: You can do this by surrounding the widget code with these conditional tags below. Go to Template > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag. Make sure to include the conditional tags below.

10:40

Custom Color Picker

Installation

Download Custom Color Picker

Refer to customColorPicker.js and customColorPicker.css in the head section of your page
<link href="colorpicker/customColorPicker.css" rel="stylesheet" type="text/css" />
<script src="colorpicker/customColorPicker.js" type="text/javascript"></script>
Add a color picker to your page by the following HTML markup:
<span class="colorpicker"> <span class="bgbox"></span> <span class="hexbox"></span> <span class="clear"></span> <span class="colorbox"> <b class="selected" style="background:#A9BAD4" title="Light Blue"></b> <b style="background:#A1A4B3" title="Stone Blue"></b> <b style="background:#A49381" title="Sand"></b> <b style="background:#626878" title="Charcoal"></b> <b style="background:#2E436E" title="Navy Blue"></b> </span> </span>
Note:
- All color cells are defined as <b> tag contained in the span.colorbox. Each color is defined by its background style.
- Elements span.bgbox and span.hexbox are optional. span.bgbox indicates the selected color by its background color, and span.hexbox indicates the selected color by the color cell's title.
- Set class="selected" to the color cell that should be the default selected color.
- You can add multiple Custom Color Pickers on the same page.

09:47

Slider with Tooltip

HTML Content

This slide shows that HTML/Text can also be used as thumbnails

Demos: 1 2 3 4

Hovering over each thumbnail in the slider will launch a tooltip window that can display any HTML content.

The source code of this demo is the demo4.html that you can download from the jquery Slider page.

Steps to integrate Menucool Tooltip widget with the Thumbnail Slider

Set up a Thumbnail Slider as instructed in page jquery Slider
Add the Menucool Tooltip JavaScript and CSS links into the head section of the page
<link href="themes/4/Tooltip.css" rel="stylesheet" type="text/css" /> <script src="themes/4/Tooltip.js" type="text/javascript"></script>
Add onmouseover event to each thumbnail for showing the tooltip:
<div id="mcts1"> <img src="images/thumbnail-slider-1.jpg" onmouseover="tooltip.pop(this, 'This is the first slide')" /> <img src="images/thumbnail-slider-2.jpg" onmouseover="tooltip.pop(this, '#tip2')" /> <img src="images/thumbnail-slider-3.jpg" onmouseover="tooltip.pop(this, '#tip3')" /> ... ... ... </div>
// You just need to pass in the element ID starting with "#", tooltip.pop(this, '#tip2'). // The element of "#tip?" contains the tooltip HTML content on the page. You can view the source code of demo4.html for details.

There you have it!

It is recommended to use the source code of demo4.html that you can download from page jQuery Slider for a quick setup.

Using this demo requires two licenses: one for the slider and another for the tooltip.
($20 + $20 = $40).

More Tips & Tricks

09:44

New Widgets For Blogger

Add Facebook Like Buttons In Blogger

How To Add Facebook Like Button In Blogger?

Add Facebook Comments System In Blogger

How To Get Facebook App ID?

How To Add Facebook Comments In Blogger?

Add Beautiful Popular Posts Widget In Blogger

How To Add Popular Posts Widget In Blogger?

Add Do You Like This Story Widget Below Every Post

How To Add Do You Like This Story Widget In Blogger?

Facebook Popup (Like Box Widget) for blogger

Add Widget to Your Site

How to Customize

Custom Color Picker

Installation

Slider with Tooltip

Steps to integrate Menucool Tooltip widget with the Thumbnail Slider

Social Share Icons

Popular Posts

Label Cloud

Blog Archive

Pages

About Me

Popular Posts

Newsletter

Subscribe Our Newsletter