• Home
  • Contact

Soft 4 You

  • HOME
  • CRACK
  • SOFTWARE
    • COMPUTER TIPS
    • 2001
    • Tools
      • 21 April
      • CRACK
      • 23 April
        • Senin
        • Selasa
        • Rabu
        • Kamis
      • 24 April
      • 25 April
    • 2003
    • 2004
  • SEO MARKETING
  • VIDEO
  • MAKE MONEY
  • MẸO VẶT
  • GÓC TÂM SỰ
Beranda » Blogger Widgets » SEO » Add Facebook JQuery Popup like box with BackGround Image in Blogger

Add Facebook JQuery Popup like box with BackGround Image in Blogger

As you know Facebook is the largest social media site in world and billion of people are attached to it. You can share your thoughts and ideas with your friends on Facebook. Specially if you have Blogs or Websites then you must want to be popular on facebook. Facebook is that place where you can have more and more back-links. If you have a Website/Blog without interconnected social media then your Website/Blog may be worthless. So here I'm going to introduce a think that is very useful for your Blog ranking. So that is known as.

Facebook-like-box

Facebook popup Widget:

How it is useful for your Blog/Website? It is useful as a visitor click on your website there will be automatic popup of this widget. If a visitors wants to like your facebook page, he will like the page without doing anything further. 

Add this Widget on your Blog:

  1. Firstly open the Blog on which you want to add this widget
  2. Go to > Layout > Add a Gadget
  3. Select HTML/JavaScript after this
  4. Put this code given below
<script src="http://makingdifferent.github.com/blogger-widgets/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script>
<style type="text/css">
#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;
}
#cboxOverlay{
background:#000000;
opacity:0.5 !important;
}
#colorbox{
/*box-shadow*/
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.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(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.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;
}
#mdfb{
font:12px/1.2 Arial,Helvetica,san-serif;color:#666;
}
#mdfb a,#mdfb a:hover,#mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:5px 5px 5px #CCCCCC;
-moz-box-shadow:5px 5px 5px #CCCCCC;
box-shadow:5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px;
font-family:arial !important;
}
.mdbox-tagline{
color:#999;
margin:0;
text-align:center;
}
#mdsubs-container{
padding:35px 0 30px 0;
position:relative;
}a:link,a:visited{
border:none;
}
.demo{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"600px", inline:true, href:"#mdfb"});
}});
</script>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<table align="center"background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3M6tXQWUJRguS44N4tX0fqFg9BRJbB5dftpBFFvvxAe8vqtG9dDKXwZP9_IKj8ykqbqtKXAjjpGE_d4JVMAqjOg4rgQcnfza3CDacI09tR4kZgBFUA6ReeNfEYOcJyOS3vGSXvIzRnb5m/s1600/adsense+background+image%2528gj37765.blogspot.com.jpg.png" border="0" height="300" style="width: 505px;">
<tbody>
<tr>
<td height="345" width="505">
<div align="right">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/earnmoneyonline72&width=350&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:250px;" allowtransparency="true">
</iframe></div>
</td>
</tr>
</tbody>
</table>
</center>
<p style=" float:right;margin-right:35px;font-size:9px;">
By <a style=" font-size:9px;color:#3B78CD;text-decoration:none;" href="
http://makemoneyonline72.blogspot.com/2015/01/add-facebook-jquery-popup-like-box-with.html">MakeMoneyOnline72</a> | <a style=" font-size:9px;color:#3B78CD;text-decoration:none;" href="http://makemoneyonline72.blogspot.com/2015/01/add-facebook-jquery-popup-like-box-with.html ">Get This !</a>
</p>
</div>
</div>

Recommended: How to Make Money through Facebook.

Customize: 

  • Replace the earnmoneyonline72 with your facebook page name.
  • If you want every time popup of this widget simply replace true with false

Note: By adding this code on Blog if it doesn't appear, it means there is no JQuery script in your template. So in order to appear this Facebook popup box you must add Jquery script in your template. How? Follow the given steps.

How to Add:

  • Go to > Blogger Dashboard > Template > Edit HTML
  • Add the given below code before </head> tag, save the template
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 Also share this info. with your friends on Social Media Sites and follow us on Facebook, Twitter and Google+.
    Unknown
    Add Comment
    Blogger Widgets, SEO
    Sunday, January 11, 2015
    Tweet
    Add Facebook JQuery Popup like box with BackGround Image in Blogger Soft 4 You
    Published: 2015-01-11T07:15:00-08:00
    Title:Add Facebook JQuery Popup like box with BackGround Image in Blogger
    Rating: 5 On 22 reviews

    Related Articles

    No comments:

    Post a Comment

    Newer Older Home

    Entri Populer

    • Popular Posts
      How to Change YouTube Channel URL and Add Extra Features
      Now the topic is about YouTube Channel , As every body know YouTube is the largest Video Site owner by Google. Most of the people who works ...
    • Popular Posts
      Auto Video Template For Blogger By WebBilgi
      Best Theme for movies and video sites. Click Here For Demo: Click Here To Download: Features: 1-  Automatic thumbnail creation for YouTube ...
    • Popular Posts
      Add Most Attractive Widgets on Blog/Website From GetSiteControl
      Today SEO made very simple and easy . Now this post is related to SEO and basically I'm going to telling you how to add widget/gadget o...
    • Popular Posts
      How to Get Huge Website/Blog Traffic From Reddit Urdu/Hindi
      Reddit is the Social Media Site where anybody share content, images, videos and article. Reddit is very most popular social site. Most of t...
    • Popular Posts
      Top Free On-Page and Off-Page Optimization SEO Tools
      There are many SEO Tools to check your site performance. SEO stand for Search Engine Optimization, and SEO is the most important thing for r...

    Đăng ký

    Posts
    Atom
    Posts
    Comments
    Atom
    Comments
    Copyright QUOC TRUNG | SOFT FOR YOU