Add Facebook Like Box Popup widget with Rss Subscription For Blogger

Facebook is the 3rd biggest website which has more than 1.11 billion monthly active users and the numbers are increasing every website owner knows the value of Facebook and they never avoid this big platform. They always want to attract that massive traffic to their site that is why they creates Facebook page and place the Facebook like box in the sidebar but it is always better to have a popup Facebook like box because it can give you more likes than sidebar Facebook like box.

The biggest advantages of popup Facebook like box widget is it will force your traffic to like your Facebook page and we also added an email subscription widget inside the popup div which will help you to generate your email subscriber so every time any user enter this widget will appears and will ask to subscribe or like. You're thinking it will annoy your users I don’t think because if they click anywhere on the page this widget will disappear so if any buddy don’t have email and Facebook they can still enjoy your content.

Advantages of Facebook & Rss Popup Widget 

• It will force your site visitor to like the fb page or subscribe.
• Likes will help you increase returning users on your site.
• The person who likes the page will get the latest post in his fb profile and his/her friend will also see that post that will give you more traffic.
• As you post the new content on fb page they can appreciate the good work by like and share.
• They can get new post notification in their Facebook.
• RSS subscription will increase your email subscriber they will get all the new content via email.

Add Facebook & Rss Email Subscription Popup Widget

1. Log into your blogger account and select your blog.
2. Click on layout and click on Add a Gadget.
3. Then just click on HTML/JavaScript.

4. Now copy paste the code given below inside the empty content box and save.

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script> /* remove if it's exist in your template */
<style>
#hideme{display:none}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
    cursor: pointer;
}   
#popup {
    position: fixed;
    font-family: arial;
    top: 25%;
    left: 25%;
    right: 25%;
    bottom: 25%;
    background: #fff;
    width: 400px;
    height: 425px;
    margin: auto;
    z-index: 200;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    border: 10px dotted #00A2CA;
}
#Fb-Rss-conatner{
    margin-top:1.6em;
}
.Fbinfo {
    margin: 0px auto 1em auto;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #fff;
    padding: 12px 15px;
    border-radius: 10px;
    width: 85%;
    text-align: Center;
    background: #00A2CA;
    box-shadow: 0px 0px 10px 0.8px #000;
}
#fbox {
    margin: 1.2em auto;
    width: 350px;
    height: 156px;
    box-shadow: 0px 0px 8px 2px #666;
}
#Rssfeed {
    margin: 12px auto 1em auto;
    font-size: 16px !important;
    font-family: arial !important;
    color: #fff;
    font-weight: bold;
    padding: 15px;
    border-radius: 10px;
    width: 85%;
    text-align: Center;
    background: #00A2CA;
    box-shadow: 0px 0px 10px 0.8px #000;
}
#Rssfeed form {
    margin: 10px auto;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 200px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin-left:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
#pwr{
    margin: 0px auto;
    border-radius: 10px;
    background: #F66303;
    color: #fff;
    width: 85px;
    font-size: 10px !important;
    font-weight: bold;
    text-align: center;
    padding: 1px 4px;
}
#pwr:hover {
    background: #000;
}
#pwr a {
    color: #fff;
text-decoration: none;
}
    </style>
  
<div id="hideme">
<div id="overlay"></div>
<div id="popup">
<div id="Fb-Rss-conatner">
    <div class="Fbinfo">
        Receive all Free updates via Facebook
Just Click the Like Button Below
</div>
<div id="fbox">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftrickolla&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=155" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:155px;" allowtransparency="true"></iframe>
</div>
<div id="Rssfeed">
You can also receive Free Email Updates
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickolla', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"><input value="trickolla" name="uri" type="hidden"><input value="Submit" class="submitbutton" type="submit"></form>

</div>
<div id="pwr"><a href="http://www.trickolla.com/2016/04/add-facebook-like-box-popup-widget-with.html" target="blank" rel="nofollow"> Get this Widget </a> </div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#hideme').delay(5000).fadeIn(1000); /* change delay & fade time */
});
</script>
<script type="text/javascript">
$(document).on('click', function (e) {
    if ($(e.target).closest("#popup").length === 0) {
        $("#popup").hide();
        $("#overlay").hide();
    }
});
</script>

Customization: Replace the green username with your username and orange digits for changing delay time and fading time 1000 = 1 sec.
If  <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script> already exist in your template then you can remove it from given code above. 

Share on Google Plus

About Eticketbuy