Blogger Buzz

What's a Gadget?

A Gadget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe Gadget include: web widget, badge, module, webjit, capsule, snippet, mini and flake. Gadgets usually but not always use DHTML, JavaScript, or Adobe Flash.
End users primarily use widgets to enhance their personal web experiences, or the web experiences of visitors to their personal sites.

The use of widgets has proven increasingly popular, where users of social media are able to add stand-alone applications to blogs, profiles and community pages. widgets add utility in the same way that an iPhone application does. The developers of these widgets are often offering them as a form of sponsored content, which can pay for the cost of the development when the widget's utility maps to the user's needs in a way where both parties gain.

Bloggerplugins.org

BloggerGadgets

Blogger Videos

Redirect Your Blog To blogspot.com

Recently Google changed a lot of things along with their policies. Google started redirecting blogger blogs to country-specific URL. Lets consider that you have open anyblog.blogspot.com in your browser, you might be redirected to anyblog.blogspot.in if you are located in India or to anyblog.blogspot.com.au if you access the same blog from Australia. It is not a new thing since few days that your blogspot.com blog may redirect to a country based domain. Perhaps it is worldwide. Every blogger blog owner may have the same problem of automatic redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.

How To Redirect Your Blogger Blog To .Blogspot.com?
We will apply this hack with using very short JavaScript.

• Go to Blogger Dashboard > Design > Edit HTML.
• Take a backup/download your template.
• Find for </head> tag.
• Add below piece of JavaScript code just above </head> tag.

<script type="text/javascript">
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>
Now save your template.
Now your Blogger Blog will always redirect to the blogspot.com URL.

Recent Posts Widget

How To Add Recent Posts Widget To Blogger?
Today we will learn how to add feedburner recent posts widget to blogger ? Feedburner recent posts widget is a widget which shows recent posts of your blog via your RSS feeds.You can add this widget as a HTML/JavaScript widget i.e. you don't have to edit your template. This widget is highly customizable so that you can customize this widget as you wish.Below is a list of some things that you can customize in your recent posts widget.

• Display feed title
• Display favicon
• Display feed title
• Display item author name
• Display item content
• Display item publication date
• Display link to feed

First go to Feedburner.
Then click on Publicize and choose BuzzBoost.
Customize the widget as you wish.
Now scroll to top and choose Blogger Platform then Hit Go button.
After you hit Go button you will redirect to Blogger Add Widget page.
Give the title as you wish and click Add Widget Button.
Refresh your blog.You will see the recent post widget hanging on your blog.

Multi Level Drop Down Menu

Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories. I hope this drop down menu will surely help you to organize your links, categories and sub-categories easily. This script for this menu was taken from dynamicdrive and bloggerized by Helper Blogger.In order to create smooth hover effect this use jQuery. The arrange of HTML is damn easy so that you can customize this menu very easily.

How To Add This Menu To Blogger?

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header (see image below)

Paste below code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://helperblogger.webs.com/files/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>

  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

Customizations
To change background of menu find this #414141 code tow times and replace this code two times.
To change font size and font family fing this code font: bold 12px Verdana;
To add a link in menu use <li>
To add a sub-link use <ul>.
Replace the # symbols with page links
Replace the Sub Item 1.1 with Page Titles

Recent Posts Slider With jQuery

How To Add This Slider To Blogger?

Step 1 - Applying Styles

• Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)
• As always download a copy of your template first.
• Now find for ]]></b:skin>
• Add below code just before ]]></b:skin>

/* START EasySlider By helperblogger.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By helperblogger.com */

You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)

Step 2 - Adding JavaScript

• Now find for </body> tag
• Add below code just after/below </body> tag.

<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->
Now save your template.

Adding The Gadget

• Now go to Page Layout
• Add a Gadget > HTML/JavaScript
• Paste below piece of code and save it.

<div id="slider">
<script style="text/javascript" src="http://helperblogger.webs.com/files/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Now replace yourblog.blogspot.com with your own blog url. (Only change blog URL don't change any other things.

To change number of post find this var numposts_gal = 6; line in above code.

If you want to change number of characters to show in description find this piece of code var numchars_gal = 150;

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

jQuery Popup For Facebook Like Box

How To Add This Popup To Your Blog?

As always I have kept the installation extremely easy. You just have to copy and paste the code below...

• Now go to Blogger Dashboard > Design.
• Add a Gadget > HTML/JavaScript.
• Paste below code after replacing my username with yours.

<style>
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
 
/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUtCHkFCapXhynFRlE5iOPxoiXFKJzlCxKVOwQxp4DnTgscqaiB9MdOOpZ8A7lPeqZ_q66cI2RihQYUfXLHJXNBORSVIuc8i-675T7-9G6p7MwmCYgG29tfc9AiTeooQWjw21yqWwJW92s/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8HCImlHe_zurAXxc0fmNxd7-TvCGuU094tGM2q1iDh97ASpbJQYPD_yUitUU2HlW5FK1Uins_iHxDJU8Z3yU5gtP8aSlnelSLjIsTh0mR274afi_DwMS2VnOTIq3pa5N_zC06avyrh39/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8HCImlHe_zurAXxc0fmNxd7-TvCGuU094tGM2q1iDh97ASpbJQYPD_yUitUU2HlW5FK1Uins_iHxDJU8Z3yU5gtP8aSlnelSLjIsTh0mR274afi_DwMS2VnOTIq3pa5N_zC06avyrh39/s1600/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIizSt_nC1cLPAUN99wHaJs_c1t4kFXcbXvHp8nVukAtMO84IUD8TpA6u80pwg1RxTlxJMJ2wJxjbMGskfrQ5ZMRPKxwqE2gC3L4qvAW8mHATCewWJmYbYsHOCKqN0GeVRp6E9XLelKt5O/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIizSt_nC1cLPAUN99wHaJs_c1t4kFXcbXvHp8nVukAtMO84IUD8TpA6u80pwg1RxTlxJMJ2wJxjbMGskfrQ5ZMRPKxwqE2gC3L4qvAW8mHATCewWJmYbYsHOCKqN0GeVRp6E9XLelKt5O/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG18Jo8Y-a55iiRxOVqAyTrQL10nkCtK4gVjH4njsn9rfhQMFC5dTBQzAK_c17gBFZtlTdzfUYNV7wrCOYhR53QhNQkAdUEAijN6eROZSF1mgi8af-pCoUYL_QEdE6oBI8sQKsONzT9vOS/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}
 
/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
 
/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3XjkJ44LV1kZQFYOA6AkOsSW46C_Tp15mZVmlRKKCNSiMp1DI1GpGMO_aHGT2TPP2dfaoKCpod6sFUyZ5gMbNe6eLjaCi1wwLTas6Tg4pao8JYK2zDLDdLfdvXcDf28TL9I4XJdOgNJ0/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PYWqhnMyT5587MjyIj2av_H3DgAOQiatCRTkbykDDoYlOzpdpHmN5MAKgpRwhTzOJfvdlnagcrueAm5FFAGIBvqM3bWznSTaELllBGr_BLHK3r1Q4CU-zOD_Pb5nSn0G6-HJHKpAPlpf/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXYVMqBMRXqEPWqFDSjbNZGAhGWp0OGGZqCcn-MYAWm_eAkFWpOLw6LZnPcs7n-Jv8X16VkSuZFqRiTxXRxU2EF5IEnGBw-onn2UpTe1t93asSAUATHHqsofnXGRrBgdiTyz27rWwNrJf/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXYVMqBMRXqEPWqFDSjbNZGAhGWp0OGGZqCcn-MYAWm_eAkFWpOLw6LZnPcs7n-Jv8X16VkSuZFqRiTxXRxU2EF5IEnGBw-onn2UpTe1t93asSAUATHHqsofnXGRrBgdiTyz27rWwNrJf/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp10-CO1n6MZ8_z_nhd1R4G6E8IguxEGGHyWfCXS9zqEsauH5DO9lmjnxRy4q5foF4PtZh0sI_pGNIbgy9sUt6Ze9oEbMgHBgoBNKYdqyqBgqNklcRuAZvfTd5Ig9hSVkIP8BSyzJRHuyV/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLLeyQaiA56FXuH8xCM0m987o0KUa9BOOELohQmWxeujGwqfdeA6vtKbG2atHl7FwYbCa-uii8KHqLB0ftVeBMrDduyx2hR6HyqW3rlzImXpeAt-gTNVPqMAoZI7t-baJ5mEVkLb9U30Yo/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNI5NvSI2eGZT5CktEtwLa6j7eDhtCywyq2BFwmxXjWZjzFZ1_r7iYhYx9HtIhO9yw1-4c9eP58P-x-IJsDcB6J1H5ryGGsega6CIPNU1zWRC3KgRcCbpuJc3oY1kkCgZuZWhhhyphenhyphensOZ6l9/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6riXffCaEru4MfgtMdloxFSzWCv7W5m7HroyglqgQtNQU1dEoIf9PLCWhqDv61dZs3o2_zo1nolRataJo9UpY5zjfxKhX5Eo2AqYXzJflEJ-8BR9olr2MWnT3f6R1AeN4dsdDrYf6VjR/s1600/borderMiddleRight.png);}
 
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
 
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Helper Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
 
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
 
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpBGA9m5HCPTCJZFKImrK4uTygB1cpMf9o7lQ31atgaiDPq93qCRFT8mv_9FyAdzyOs1m1zBuGmUH8f8UMU4I_yAlObzvBh0Lx3jfDpUAVXtAtbUyZ629Hr0m78ucCzl5pcXnaXqq7mEs/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>
 
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/9fXrd">Grab This Gadget »</a> </p></div>
</div>

Now replace btsnts with your facebook fan page username.