Tampilkan postingan dengan label popup. Tampilkan semua postingan
Tampilkan postingan dengan label popup. Tampilkan semua postingan

Sabtu, 30 April 2016

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 Im 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/AVvXsEhEEQzHFVgyApWrzQrYTp45TvedQT-dd9f5KMicGpHLe8BHSnqWiGxgYmLkltn2KigR_JDtxJQ_V1fiG7lQ-fuYdvSWH0Iv5nkO5pzcvR6PUTG12R5Sx8h1e2xhequMnNWy0rC_jPVyHv7Z/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 doesnt 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 > TemplateEdit 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+.
    Read more

    Kamis, 17 Maret 2016

    Add Popup Email Subscription Widget with Light Box Effect

    ,
    This is really a great widget because any viewers can subscribe your blog by simply write own Email address in popup Email widget. It get the best attention of the visitors which makes them so effective in doing their job. A visitors either have to subscribe your blog or click on a cross icon to continue suffering on your blog. If you have quality content on your blog then many viewers will want subscribe your blog, so this widget will be very helpful for you.

    Note: The code I have provided below will show-up the subscription box when the page has been loaded.

    blogger-RSS-subscription-box


    Install Popup Email subscription Box in Blogger:



    - Go to Blogger and log-in to your account

    - Select your blog and navigate to the "Template" section

    - Hit on "Edit HTML" Button

    - Click anywhere inside the code and press Ctrl + F to open the search box

    - Find <body> tag and replace with the given below code

    <body onload=lightbox_open()>

    - Now just after that paste the given below code


    <div id="light"> <div style=position:absolute;left:-20px;top:-20px;text-align:center;font-size:31px;width:40px;height:40px;background-color:white;border:4px solid black;border-radius:100%;color:black;font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif onClick="lightbox_close();">X</div>  <center><img style=width:400px;height:125px; src=https://lh5.googleusercontent.com/-wsjbg3uaeUU/VLbFISkW_xI/AAAAAAAAAWw/jYnp3D3MLQc/w400-h125-no/MakeMoneyOnline72.BlogSpot.png></img></center> <form id=sub action="http://feedburner.google.com/fb/a/mailverify?uri=makemoneyonline-72" method="post" target="popupwindow" onsubmit="window.open(http://feedburner.google.com/fb/a/mailverify?uri=makemoneyonline-72, popupwindow, scrollbars=yes,width=550,height=520);return true"><center> <p style=font-size:35px;margin-bottom:15px;>Subscribe To Our Mailing List</p> <input class=sbox id=sbox type=text name=uri placeholder=Your Email Address.../></center><input class=sbutton id=sbutton style=border:0; vertical-align: top; name=upload type=submit value=Subscribe/></form><center><p style=font-family:Source Sans Pro, sans-serif; ><b>P.S</b> I will never spam you...100% GUARANTEED!</p></center></div><div id="fade"></div><link href=http://fonts.googleapis.com/css?family=Source+Sans+Pro rel=stylesheet type=text/css/>
    <style>input:focus{outline: 0.5px solid #4c004c;}#sbutton {padding: 5px;font-size:30px;margin-top:10px;width:500px;margin-left:50px;:font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;background-color:#DFDFDF;}form { margin:0px;font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}#sbox {width: 500px;height:30px;vertical-align:bottom;}#sbox:focus{border: 1px solid #4c004c;}#fade{    display: none;    position: fixed;    top: 0%;    left: 0%;    width: 100%;    height: 100%;    background-color: #000;    z-index:1001;    -moz-opacity: 0.7;    opacity:.70;    filter: alpha(opacity=70);}#light{    display: none;    position: fixed;    top: 29%;    left: 29%;    width: 600px;    height: 400px;    margin-left: -150px;    margin-top: -100px;                   padding: 10px;    border: 2px solid #FFF;    background: white;    z-index:1002;    overflow:visible;}</style><script>

    window.document.onkeydown = function (e){    if (!e){        e = event;    }    if (e.keyCode == 27){        lightbox_close();    }}function lightbox_open(){ window.scrollTo(0,0);    document.getElementById(light).style.display=block;    document.getElementById(fade).style.display=block; }function lightbox_close(){    document.getElementById(light).style.display=none;    document.getElementById(fade).style.display=none;

    }</script>

    Customization:


    * Change the Blog Image/Logo URL in red with your logo url ( you can make this url by uploading image/logo on Google + site )

    * Replace the Feed Burner "User Name" in pink with your Feed Burner User Name

    * Now its complete. Hit on "Save" template button

    Recommended: Free Download CustomizeMe SEO Friendly Template

    Do let me know how this widget is working on your blog.If you are having any trouble with this subscription box then leave your experience down in the comment section below. Ill fix any bugs present in this widget and off-course if you liked it just stay turned for more :)


    Read more
     

    Sharing Information Copyright © 2016 -- Powered by Blogger