Add a jQuery Facebook LikeBox Pop-up to your blog or website
This window is a jQuery window for Facebook LikeBox. It comes as soon as
a new visitor visit your blog for the first time. This is very helpful
to increase the Facebook Fans of your page. This is simple one with one a
Facebook LikeBox but in the next tutorial I will post more interactive
jQuery pop-up window for Blogger. Actually it works on both platforms
Blogger and Wordpress All you need is to copy/paste the code into your
source code and it's done. So let's get started to add this awesome
window to your blogger.
How It Works?
First thing every blogger should need to understand and keep in mind
that it stores the new visitors ip in browser cookies so that it will
not disturb the reading flow of your blog readers. We can set the value
that after how much time it will take to pop-up again for the same user
who have already seen it? In the code it's value is 7 days. I will help
you to change this value by yourself.
How To Add jQuery Pop-up Facebook LikeBox In Blogger?
Here I will help you to add the jQuery pop-up Facebook LikeBox in your blogger source code.
</div><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%;}
#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:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66Qm5YfOl-3NWnNRzT3HRh5feaI8SRcp0aXQ00VTXUwc4YHdKshXhAyWDrGmHGszrs8yNN3AnCX8m3FTSjem9XLLbUv5OxwpwCQl0eN_95no_XhMo3z_CjiGIuRfG4bmVklKIssFp9Io/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66Qm5YfOl-3NWnNRzT3HRh5feaI8SRcp0aXQ00VTXUwc4YHdKshXhAyWDrGmHGszrs8yNN3AnCX8m3FTSjem9XLLbUv5OxwpwCQl0eN_95no_XhMo3z_CjiGIuRfG4bmVklKIssFp9Io/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzv4q-p0TftcEMt2NOP9llGGuKZxH6fNId0wRbEau4sGoWwSqXKN7_zJIR4dgMUnwBptzUV3X5o4VJVDMi6otnKjTiDat6-eNv-huX0N_Z6RvXuOWK3Ckqx00bElQTgqIILcZBaJDV5M/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2GFE3wDNp_qLU2a7hBoee0XT_9OWdTbKEjo54GVmIqB-qdBMsWDX5X06X7SmnmKDjs6Wx_gPqoRx8cBmD3PGtTKSKmGPA3xhPcr9iQcL5XM-WPy4qdTjyd00AnMlkbQcLt-MaJ4K5x_o/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBMoWafOdO-u8c_vU7m6x0zX5K2PjCUPNKswBLRqjyl3KpHtNE_MbmcbRlBBgG18OlwMQ8x_gslLgRyO29tABmSKebiHbH54cjZ2KJmwuIuld8VxL4Sh3qzyI9cbtaHDmBgpd1uNwnhU/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox Pop-up For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*1;
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;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >?</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/kavyanshjain&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.kaavyanshjain.blogspot.com">warwolf</a></p>
</div>
3. After changing just copy the codes.
4. Go to Blogger > Layout.
4. Click on Add a Widget.
5. Select HTML/JavaScipt.
6. Paste the code into body of widget and click Save.
You are done!! :-)
___________________________________________________________________________________
Add invisible background music to your blog or website
This is the warwolf and in this article I will teach you how to add invisible background music to your blog!!
“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison
Depending
on the subject matter of your blog, having music played in the
background may either enhance the pleasure of reading or annoy your
visitor. Imagine the agony of surfing the web in discreet, only to catch
the attention of your office colleagues or parents when the music
automatically blasts off in the background. Not to mention, a big music
file may cause a slower page download. Nevertheless, the solution, as
shall be explained later, is simple - have an option for the reader to
play or stop the music.
1. First you need to host/upload your song
that you want to add in your blog on an audio hosting site. I prefer
tindeck.com. Click on the following banner to signup on tindeck.com as
my referral and start uploading your audio files!!
3. Go to Blogger Dashboard.
4. Open Template designer.
5. Click on Edit HTML.
6. Paste the following codes just after the opening <head> tag as in the image below these codes.
<embed autostart='true' height='0' loop='true' src='http://tindeck.com/listen/irjy' width='0'/>
 |
| Click on the image to view in full size |
