Monday, July 25, 2016

How to add a blog scrolling Facebook Popup Like Box Widget in blogspot site?

Facebook like box to add a blog or website some of the means to increase Face book fan. In most cases it can be seen that, almost every blog on the right side is a Face book like Box. Visitors to the blog via the Facebook like Box like your fan page, you can see that they shot and post updates on Facebook in the future.

It has been shown in this case Facebook like Box Layout on the right side of the blog because many people do not appear. And if you give it a little tricks to overcome the Popup what would happen if, indeed, it would have easily seen the visitors. Facebook Popup like Box I'm sharing it too beautiful and stylist. When a visitor visits your blog Scrolling down from the top down, which will make it more attractive. Moreover, if you wish, you can give it different color effects.

  • Installing Widget at 1st Step

1. Login into your blogger blog
2. Go to template > Edit HTML
3. And from the keyboard by pressing Ctrl + F of the search </body>
4. And paste the bellow code in to the widget. Or, you can add the Below Section of code before closing</body> tag. 

   <style type='text/css'>
#FBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:5px;
background:#04BDFA;
font:normal Dosis,
Georgia, Serif;
color:#111;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#FBpop a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#FBpop&#39;).animate({top:&quot;50px&quot;}, 1000);
$(&#39;a.bsclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
  • Second Step

    1. Now Click on Layout of the Blogger Dashboard
    2. Now, the right side of the layout, click on Add Gadget
    3. Click on The HTML / JavaScript
    4. Copy the following bar codes HTML / JavaScript and paste it into the box
    5. Now click on Save Template to work. Thats Ok.
      <div id='FBpop'>
      <center>
      <div class="fb-page" data-href="https://www.facebook.com/Tutorialgift" data-show-cover="true" data-show-facepile="true" data-show-posts="false" width="300" height="250"></div>
      </center>
      <a class='bsclose' href='#'>&times;</a>
      </div>

    Customization

    • You can change the red part of the upper width: 300px;
    • You can change Background: # 04BDFA;
    • Change must replace at Facebook user name ID from “Tutorialgift”
    Previous Post
    Next Post

    0 comments: Post Yours! Read Comment Policy ▼
    লক্ষ্য করুনঃ
    পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

    Post a Comment

     
    Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE