Subscribe For Free Updates!

We'll not spam mate! We promise.

Sunday, 22 December 2013

How To Add A Popup Facebook Like Box With Timer

Here are many kind of Facebook popup like box available at many sites.But Today I am going to share a best of best Facebook popup like box with timer,Yes with timer it will be closed automatically after 15 seconds.
So If you want to add it in your blog  just follow me.
  • Go to >>Blogger dashboard and click on Layout,
  • Now click on Add a gadget,
  • In new window select HTML/JavaScript ,
  • In content box copy paste the below code and replace the green words with your own Facebook name and click save ,
<!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type="text/css">
#exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>
<script type="text/javascript">
jQuery(document).ready(function() {
function exepopupfunc() {
var sec = 20
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup" style="top: 150px; opacity: 1; left: 500px; display: none;">
<h1>Join Us On Facebook</h1>
<div class="exepopupdata"><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FMHSKP786&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>
<div id="exepopupfooter">Please Wait <span>1</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;">Skip</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End -->
  • Now click Save arrangement and you have done.

Tuesday, 19 November 2013

Enable Facebook Comments Without Removing Google + Comments

Asslam o Alaikum dear friends

Today I am going to share you that how can you enable Facebook comments on your blogger blog without removing Google + comments.

1st step creating app

Just go to Facebook Developers Page  create a new app.Now write Name of your application and press continue button.In a new page you will find your app id and secret code just copy it and save it in a text file.
Step 2 installation in blogger
Just go to Blogger Dash Board>>Template>>>Edit HTML
and search for below lines
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
and replace these lines like below
<htmlxmlns:og='http://ogp.me/ns#'...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now find <body> tag.And after this insert below code.Make sure to  change highlighted lines (Your APP ID) with your Facebook ID.
<div id="fb-root"></div><script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Now search for </head> And just above it insert below lines.Replace Your APP ID with your own APP ID.
<meta property="fb:app_id" content="YOUR_APP_ID" />
Now find these lines carefully it is important
<b:includable id='comment-form' var='post'>
And just below it insert below code and save your template .
<b:ifcond='data:blog.pageType == "item"'>    <div    style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>        <script        src='http://connect.facebook.net/en_US/all.js#xfbml=1'        />        <div>            <fb:comments            colorscheme='light'            expr:href='data:post.url'            expr:title='data:post.title'            expr:xid='data:post.id'            width='550'            />        </div>                 </div>                </b:if>
And you have done it .

Sunday, 3 November 2013

Add Meta Tag Description In Customized Template

Add Meta Tag Description In Customized Template









How To add Meta Tag Description in customized templates?



 You should have to edit your template so go to like that
  1. First go to >Dashboard>>Template and backup your template
  2. Now click to edit HTML
  3. Find these lines in html window by Ctrl+F                                          <b:include data='blog' name='all-head-content'/>
  4. Ad below given code After the above code .
<b:include data='blog' name='all-head-content'/>
<meta content='Free Tips Tricks And Free Software I Want To Spread It Education To All The Poor Students Free.Pray For Me Please.' name='description'/>
    <meta content=' mhskp786,Earn money,Tips tricks,send free sms,live mobile tv,free software,books,skype,avg,converter,cc cleaner,security,recovery,games,grain surgery,  ' name='keywords'/>
    <meta content='Muhammad Hussain' name='author'/>
        • Change the blue line with your Description.
        • Change the  black line with your Keywords .
        • Change the red line with your Name.
        Now click Preview template it will take a few seconds depends on your internet speed.If all is ok the preview will be front of you successful.Now click to save the template and check your website with Meta Tag Analyzer   . 

        My comment box is waiting for your opinion about this post. 

        Add Meta Tag Description In Blogger


        Add Meta Tag Description In Blogger

        Meta Tag Description

        helps search engines to drive real traffic that is related to your website.  In blogger it is very easy to add meta tag description to your blog or every individual  post that you share. In this post i want to tell you that how can you add meta tag description to your blog
        1. Go to >Blogger Dashboard>>Settings>>>Search Preferences .
        2. Click to edit Meta Tag Description.
        3. Here write all keywords related to your blog like Tips tricks,games,media players, Maximum 150 words are allowed here .
        4. Click Save Changes and you have done it.
        Add Meta Tag Description to individual post
        When you will write a new post write a short summary about your post in Search Description it is in right side panel called Post setting .


        Learn How You Can Add Google Analytic Web Property ID To Blogger


        Learn How You Can Add Google Analytic Web Property ID To Blogger

        Google Analytic

        is a best way forever to know all about your Blog activity .
        To add Web Property ID to you blogger do this,
        1. First go to your Analytics account, your Google account handles it all.
        2. Got to >>Admin page ,
        3. Select your account and click on  Property setting ,
        4. Here you will found your Tracking ID it will be like this one UA-12345678-9 copy it
        5. Now got to Blogger dashboard
        6. Go to >Setting>>Other and find Web Property ID it will be at end of page
        7. Paste the code you have copied from Google Analytics account property and click Save Settings and you have done it.

        Make A Back Up Of Your Template


        Make A Back Up Of Your Template

        You are going to make any change in your template,but what will you do if there happened some thing wrong ? Your blog will not opened in any browser till you upload any other template.

        So if you are going to edit your blog html, first backup your template.

        How To Make A Backup
        1. Go to >> blogger dashboard and select Template.
        2. Select Backup / Restore button that is on upper right side of the window.
        3. Now select Download Full Template .
        4. Your template will be downloaded in download folder on your computer save it ta any other safe place .
        5. When you want to Restore it redo 1.2. option and select choose file and click upload and you have made it.

        Restore,Backup Template

        How To Add A Widget To Your Blogger ? Learn (Step By Step)


        How To Add A Widget To Your Blogger ? Learn (Step By Step)

        Widgets are very helpful for new bloggers who don't have enough to edit there template.
        If you want o ad a widget to your blogger follow these steps.
        How To Add A Widget To Your Blogger
        1. Got to Blogger and click on Layout.
        2. Here select Add a Gadget.
        3. A new window will open to show you the next step here select your widget and click + and then save it . As showing in picture  Add a Gadget
        4. If you want to add a third party widget or ad banner then select HTML/JavaScript in first line write a title to display in second insert code provided by the owner and click save.
        5. Now click Save arrangement and click view blog.
        Follow these pictures if you want to add a third party code.
        And for blogger default widgets selection will be change  at no.3 there is mostly no any other editing needed,simply select your widget and save
        Add a widget
        Add a widget 2

        Friday, 1 November 2013

        Google Plus Comments Not Showing In Custom Template ? (Solved)


        Google Plus Comments Not Showing In Custom Template ? (Solved)

        Google plus comments option gives you the opportunity to spread your thoughts to all over the world.
        When any reader write any thing in your comment box it is automatically published to Google + Community.
        How to enable do this
        To enable this option go to >>Your google+settings and check >>Use Google+ Comments on this blog .
        google + comments
        After doing it it will works on blogger default templates but if you have changed your template,then you have to made some changing in your template like below.
        GO to Template and first backup of your template now click on edit HTML
        Press Ctrl+F and search for ThreadedComments.
        It will be as below
        google + commments code


        Change the highlighted lines with below
        <b:include data='post' name='comment_picker'/>
        After this save your template and you have made it.