Facebook Popup Like Box With Timer

Facebookthe largest social networking platform is considered as the most useful and fast source for advertising your online business. Facebook is the mostly used platform among all the social networks. Majority of the people around the globe rely on Facebookespecially when it comes to business advertisement. Therefore the FACEBOOK has provided the facility in shape of many widgets and boxes through which the webmasters and bloggers can easily advertise their blog or website and circulate it on the FACEBOOK. Today in this tutorial we are going to share with you the “FACEBOOK POPUP LIKE BOX WITH TIMER”, which you can easily install in your Blogger Blog and attract more visitors and build a better fan following on the Facebook.

How It Works?

Facebook Popup LIKE BOX is created with JQuery contains a LIKE BUTTON and an IMAGE which are link to your Facebook FANPAGE, so either the visitors can become FAN by clicking the LIKE BUTTON or by clicking the IMAGE. You can also adjust change the setting, whether the Popup Box appears immediately when the site loads or after sometime. You can also set the time that for how long the box appears before vanishing automatically. This POPUP LIKE BOX also contains the “CLOSE” option, so that you can also close it manually.

DEMO

How To Add Facebook Popup Like Box With Timer In Blogger?

1. Log in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See How)

3. Click “EDIT HTML”.

4. Inside “HTML EDITOR”, press “CTRL+F”and find </body> tag.

5. Copy & paste the following code, just above/before </body> tag.

<!-- Facebook Popup Like Box With Timer Starts -->

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

<style>
#fblikepop
{
background-color:#fff;
display:none;
position:fixed;
top:200px;
_position:absolute;
width:450px;
border:10px solid #6F6F6F;
z-index:200;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin:0pt;
padding:0pt;
color:#333333;
text-align:left;
font-family:arial,sans-serif;
font-size:13px;
}

#fblikepop body
{
background:#fff none repeat scroll 0%;
line-height:1;
margin:0pt;
height:100%;
}

.fbflush
{
cursor: pointer;
font-size:11px !important;
color:#FFF !important;
text-decoration:none !important;
border:0 !important;
}

#fblikebg
{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
z-index:100;
}

#fblikepop #closeable
{
float:right;
margin:7px 15px 0 0;
}

#fblikepop h1
{
background:#6D84B4 none repeat scroll 0 0;
border-top:1px solid #3B5998;
border-left:1px solid #3B5998;
border-right:1px solid #3B5998;
color:#FFFFFF !important;
font-size:18px !important;
font-weight:normal !important;
padding:5px !important;
margin:0 !important;
font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;
}

#fblikepop #actionHolder
{
height:30px;
overflow:hidden;
}

#fblikepop #buttonArea
{
background:#F2F2F2;
border-top:1px solid #CCCCCC;
padding:10px;
min-height:50px;
}

#fblikepop #buttonArea a
{
color:#999999 !important;
text-decoration:none !important;
border:0 !important;
font-size:10px !important;
}

#fblikepop #buttonArea a:hover
{
color:#333 !important;
text-decoration:none !important;
border:0 !important;
}

#fblikepop #popupMessage
{
font-size:12px !important;
font-weight:normal !important;
line-height:22px;
padding:8px;
background:#fff !important;
}

#fblikepop #counter-display
{
float:right;
font-size:11px !important;
font-weight:normal !important;
margin:5px 0 0 0;
text-align:right;
line-height:16px;
}

</style>

<script src='https://googledrive.com/host/0B9e7eeKnhqEVUFBGNGVKRkdHV3M' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVM3ppcFdvWkZPUEE' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/mytutorialscafeteria',
closeable: true });
});
//]]>
</script>

<div id='fbtpdiv'/>

<!-- Facebook Popup Like Box With Timer Ends -->

6. Click "Save Template".

You are all done. Refresh your blog to see the Facebook POPUP Like Box With Timer.

Note:-

1. Replace “mytutorialscafeteria” with your own Facebook username.

2. To set the time, after how much time the POPUP Box disappears, set the TIME in “timeout:30” to your own time. E.g. 10, 20 etc.

3. To set the time, after how much time the POPUP BOX appears, when a visitor enters your blog/site, set the time in “wait:0” to your own choice.

Tip:- Do not set the TIMER to maximum in "timeout", because visitors do not wait too long and if the popup box stay so long visitor will leave your website without anything. Similarly do not increase the time in "wait" also, because if the POPUP LIKE BOX appears late, in that time visitor might gone and if they want to be your FACEBOOK FAN, you might lose them.

How To Add Facebook Popup Like Box With Timer In WORDPRESS?

To add the FACEBOOK POPUP BOX in WordPress:

1. Log in to your WORDPRESS Dashboard.

2. Inside THEME SETTINGS, paste the above code immediately before </body>tag.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

“Do You Like This Story” Sharing Box Widget

Social networkingis a strong way to share your stories with the world with just a single click. Social media has given the webmasters an opportunity to add their official buttons or boxes in their blog or websites through which the readers or visitors share the stories with their friends and online community after reading it on certain blog or website. You might have seen different social media buttons, boxes which are in different shapes and also different in appearance. Today in this tutorial we are going to share with you a sharing widget i.e. “DO YOU LIKE THIS STORY” box, which you can easily add within your Blogger Blog and facilitate your readers to like or share your content without leaving your blog or website.

DEMO

Benefits Of Using This Sharing Box Widget:

The benefit of using this sharing box widget under the BLOG POST TITLES is that area always catches the attention of the visitors and readers and there are a lot of chances that your story must share and circulate more than normal on social media. It’s the most important place in whole article body. So it’s better to place this SHARING BOX under the POST TITLE other than any place in your blog post.

How To Add “Do You Like This Story” Sharing Box Widget” In Blogger?

Let’s learn how to add this “Sharing Box Widget” in Blogger blog, follow the steps below:

1. Log in to Blogger Dashboard.

2. Go to Template > Backup.(Click Here To See How)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for <data:post.body/>tag.

Note:- You will find the above tag at 2 places.

5. Now copy and paste the following code just above the  <data:post.body/> tag, where you find this tag i.e. at 2 places.

<b:if cond='data:blog.pageType == "item"'>
<div style=" height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;">
<p style="color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;">Do You Like This Story?</p>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false"></fb:like>
<a class='twitter-follow-button'  href='http://twitter.com/mytutorialscafe' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

6. Click “SAVE TEMPLATE”.

That’s all set, visit any of your blog posts to see the“Sharing Box” hanging just perfectly under the blog posts title.

Note:-

1. Change “mytutorialscafe” to your own Twitter Username.

2. You can change the text "Do You Like The Story", to your own text.

3. The above code is written between the Conditional Tags, highlighted in Green color above. Which means that the “Sharing Box” will appear only at Blog Posts, not on the homepage of your blog. If you want to show “Sharing Box” on your blog homepage as well, then remove the above “Conditional Tags”.

That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

FeedBurner Recent Comments Widget For Blogger

FeedBurner is the service provided by Google to maintain the records related to the Feeds of your blog or website. FeedBurnerservice consists of different features which show the Feed Count of your blog, helps your users to get SUBSCRIBE via email to your blog newsfeed which you update and many other great eye catching features. You might have seen in different blogs/sites a RECENT COMMENTS widget, although they all widgets are nice-looking and attractive but on the other hand they are also quite heavy, which increases the load time of your blog. FeedBurner provides an excellent feature to their users in shape of RECENT COMMENTS widget, which is not even heavy and you can also customize it your own way by adding different styles and give it the look you want. So let’s start the tutorial and see how you can add “FEEDBURNER RECENT COMMENTS” widget in Blogger Blog.

How To Create FeedBurner Recent Comments Widget? 

First you have to create a RECENT COMMENTS Widget, by using the FeedBurner service. Let’s start learning:

1. Log in to your FeedBurner Account.

2. Enter the COMMENT FEED URL as given below in the box and click NEXT. 

http://YOUR BLOG URL GOES HERE/feeds/comments/default. 

Note:- Replace “YOUR BLOG URL GOES HERE” with your OWN BLOG URL. E.G. www.mytutorialscafe.com

3. A “TITLE & ADDRESS” window will open. Give your FEED its TITLE and feedburner.comADDRESS and click NEXT.

4. You will see the “Congrats! Your FeedBurner feed is now live.” message. Click Next to move to the next step.

5. In “Get More From Your Feed Statistics” window, check the following two options:

• Clickthroughs 
• I Want More!

And click NEXT. Check the screenshot below:

6. You will see “You have successfully updated the feed "UHK" message (where UHK Is My Feed Name, yours will be some XYZ). Click “PUBLICIZE” button at the top.

7. Click “BUZZBOOST”from the left sidebar.

8. Now you have to set the options:

• Select “Number Of Items To Display” to 10.
• Uncheck “DISPLAY FEED TITLE”.
• Check “Display item author name (if available)”.

Scroll to the bottom and click “ACTIVATE” button highlighted in PINK.

9. Copy the code under “YOUR BUZZBOOST IS READY” area (save the code in NOTEPAD file for later use). Scroll to the bottom and click “SAVE” button highlighted in GREEN.

How To ADD FeedBurner Recent Comments Widget For Blogger?

1. Log in to your Blogger Dashboard.

2. Go to Layout > Add A Gadget.

3. In “Add A Gadget” window, select “HTML/JavaScript” from the list.

4. In “HTML/JavaScript” window, paste the “FEEDBURNER RECENT COMMENTS” widget code, saved in NOTEPAD file previously.

5. Click “SAVE” and you are all done.

Refresh your blog to see the “FEEDBURNER RECENT COMMENTS” widget.

How To Remove The FEEDBURNER Logo Under The Widget?

To Remove The FEEDBURNER Logo under the widget, simple add the following code just above the widget code added in “HTML/JavaScript” window:

<style>
div #creditfooter
{
display: none;
}
</style>

• Also Read This: How To Apply Your Own Styles To Buzzboost Widgets.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Flash Cloud Label Widget For Blogger

Labels in blogging plays a vital role because they describes the posts under the specific categories. Labels are defined by the users to keep the posts under the related categories which is an important part of the SEO (Search Engine Optimization). Labels helps the search engines robots to fetch the related content and bring it infront when the user search for specific category. By default like other widgets in Blogger, Labels widget is also present in the list, but the default label widget looks very simple and not customizable. In this tutorial we are going to show you, how you can turn the simple Blogger Labels Widget to the Flash Cloud animation.

DEMO

How To Add Flash Cloud Label Widget In Blogger?

To add the Flash Cloud Label Widget In Blogger, just follow the simple steps below:

1. Log-in to your Blogger Dashboard.

2. Go to LAYOUT > ADD A GADGET. 

3. From “ADD A GADGET” list, select “HTML/JavaScript”.

4. In “HTML/JavaScript” window, copy and paste the following code:

<script type="text/javascript">
var NBTFlashLabelSettings = { blogurl : "http://www.mytutorialscafe.com/",    
color : "000000",    
hoverColor : "333333",    
backgroundColor: "FFFFFF",    
size: 12,    
speed: 100,    
width: 250,    
height: 300,    
transparency:true };
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B9e7eeKnhqEVODBaeVpMbkhtRms ">
</script>

5. Click “SAVE” and you are all done.

Refresh your blog to see the your LABELS Flashing In CLOUD animation.

Note:- 

Change "http://www.mytutorialscafe.com" to your own blog address.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Customize Popular Posts With Auto Numbering In Blogger

Popular Posts is one of the most important and useful tool which helps the visitors know about your most prevalent posts which is mostly read and viewed at your blog. It grades the most viewed posts according to Google Analytics Data. It also helps you to keep engaged your visitors and readers at our blog by driving huge amount of traffic and also increase the page views of your blog. Blogger provides the facility to their users to install the POPULAR POSTS widget by adding it from the Gadgets list. But the default Popular Posts widget has very limited options from the customization point of view and looks very simple. To make the Popular Posts widget looks more attractive and beautiful, you can customize it your own way. We are here with this tutorial to show you how easily you can customize and add some attractive Auto Numbering to your Popular Posts.

DEMO

• Also Read This: Enable Auto Numbering With Threaded Comments In Blogger

So let’s start the tutorial:

Add Popular Posts Widget In Blogger: 

First you have to add the default built-in “POPULAR POSTS” widget in Blogger with some settings.

1. Log-in to your Blogger Dashboard.

2. Go to LAYOUT > ADD A GADGET.

3. From “ADD A GADGET” list, select “POPULAR POSTS”.

4. Configure the POPULAR POSTS widget, follow the Settings below:

• Select “DISPLAY UPTO 7 OR 9 POSTS”.
• Uncheck the “IMAGE THUMBNAIL” and “SNIPPET”.

Check the screenshot below:

5. Click “SAVE”.

Customize Popular Posts With Auto Numbering In Blogger:

As you have added the “Popular Posts” widget, now it’s time to customize it.

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag. Click ► to expand the code.

5. Now copy & paste the following code, just above the </b:skin> tag.

.popular-posts ul
{
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before
{
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666;
}
.popular-posts ul li
{
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover
{
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a
{
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover
{
text-decoration:none;
}

6. Click “SAVE TEMPLATE”.

You are all done. Refresh your blog to see the “Popular Posts” widget with colorful Auto Numbers.

Customization:

1. By default the shape of the AUTO NUMBER BUBBLE is SQUARE. To change it to CIRCLE, add the following line of code:

border-radius:15px; Just after: box-shadow: 1px 2px 9px #666666;

2. To change the background color of the AUTO NUMBER BUBBLE, change #292D30 to your own hexadecimal color.

3. To change the text color of the AUTO NUMBER BUBBLE, change #ffffff to your own hexadecimal color.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)