Popup Facebook Like Box Widget for Blogger
Popup Facebook Like Box Widget for Blogger
Facebook is a great way for increase blog traffic. When you share your content on your facebook page, then here is an opportunity to share your content by your visitor with others. In this way can get more extra traffic. In this circumstance you have must need promote your page with your blog. Popup like box is one of the best way.
Now lets start the tutorial. Before start work, please take a backup of your template.
Step 1: Go to Blogger Dashboard > Template > Edit HTML and past below code before </style>
CSS
/*=============== CSS Popup Like box by msdesignbd.com ======================*/
.mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none}
.mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.mspopup .mspopup-close:hover{color:#535353}
.mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383}
.mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.mspopup .mspopup-content{padding:10px 20px}Step2: Now past below code before </body> tag.
javascript
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/>
<script type='text/javascript'>
$('#popup-box').mspopup({
'autoOpen': true
});
</script>HTMLStep3: Go to Layout > Add a gadget > HTML/Javascript and past below code.
<div id="popup-box" class="mspopup">
<div class="mspopup-container">
<div class="mspopup-header">
<div class="mspopup-close" data-dismiss="mspopup">x</div>
Like us and Join with our community
<p> Get our all latest update from our facebook page, Its free and speedy</p>
</div>
<div class="mspopup-content">
<div class="fb-page" data-href="https://www.facebook.com/kgsms.rtml" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div>
</div>
</div>
</div>Note: Change kgsms.rtml with your facebook page username.
That's it. Now refresh your blog and see awesomeness