Tuesday, 7 April 2015

How to block Adblocker on your Blogger Blog


Adblocker Now a days annoying the Bloggers By Reducing there Ad revenue..So Today We are Giving a Script That Will force your visitors to disable AdBlocker,which will detect AdBlock and guide the user to disable if they want to continue to Browse our site, otherwise It Will Show White screen until or unless they disable AdBlocker
To Add This Code To Your Blog Just Click On Below Button :

Manual Install :

  • Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget
  • Go To Layout Tab And Select Add a Widget
  • Then select HTML/JavaScript And Paste Any One Of The Below Code Inside It
  • And Save It
<style>
#nbtabu {
    position: fixed !important;
    position: absolute;
    top: 0;
    top: expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+"px");
    left: 0;
    width: 102%;
    height: 102%;
    background-color: #f9f9f9;
    font-style:normal;
    opacity: .97;
    display: block;
    padding: 10% 0;
}
#nbtabu * {
    text-align: center;
    margin: 0 auto;
    display: block;
    filter: none;
    font-style:normal;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-decoration: none;
}
#nbtabu ~ * {
    display: none;
}
#nbtabu * a{
padding: 12px 15px!important;
  background-color: #f77c6a;
  color: #fff!important;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Open Sans',sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  display: block;
  margin: 15px auto;
  clear: both;
  width: 20%;
  transition: all 0.3s ease-out;
}
p{
    font-size:25px;
}
</style>
<div id="nbtabu">
<span>Please Enable JavaScript!<br />Please Enable Javascript!<a href="http://www.enable-javascript.com/">Enable JavaScript</a></span></div>
<script>
 WebFontConfig = {
    google: { families: [ 'Yanone+Kaffeesatz::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
window.document.getElementById("nbtabu").parentNode.removeChild(window.document.getElementById("nbtabu"));
(function(l, m) {
    function n(a) {
        a && nbtabu.nextFunction()
    }
    var h = l.document,
        p = ["i", "s", "u"];
    n.prototype = {
        rand: function(a) {
            return Math.floor(Math.random() * a)
        },
        getElementBy: function(a, b) {
            return a ? h.getElementById(a) : h.getElementsByTagName(b)
        },
        getStyle: function(a) {
            var b = h.defaultView;
            return b && b.getComputedStyle ? b.getComputedStyle(a, null) : a.currentStyle
        },
        deferExecution: function(a) {
            setTimeout(a, 250)
        },
        insert: function(a, b) {
            var e = h.createElement("span"),
                d = h.body,
                c = d.childNodes.length,
                g = d.style,
                f = 0,
                k = 0;
if ("nbtabu" == b) {
                e.setAttribute("id", b);
                g.margin = g.padding = 0;
                g.height = "100%";
                for (c = this.rand(c); f < c; f++) 1 == d.childNodes[f].nodeType && (k = Math.max(k, parseFloat(this.getStyle(d.childNodes[f]).zIndex) || 0));
                k && (e.style.zIndex = k + 1);
                c++
            } e.innerHTML = a;
            d.insertBefore(e, d.childNodes[c - 1])
        },
        displayMessage: function(a) {
            var b = this;
            a = "abisuq".charAt(b.rand(5));
            b.insert("<" + a + '><center><p>We detected Adblock is active on your browser.<br>Please Turn off Adblock extension before browsing This Site</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgEDFrEmtJcIHf56OKeM3WGS1gXtTUAa-DrdrkjgzL_1QQ8KtVaCluLzco2-Q7F-j4Dfc1rXS0VK8gf55QjNTSa2eprc5fFYQRWUki7ntViHINCRVawM3p9nTic96Ja1ZRRJ7vuUfG00/s1600/Disable+Adblock.png"/><p>In order to keep this website free, this site is sponsored in part by advertisements.<br>Please consider disabling your ad blocker on this website if you enjoyed the content,and would like to support future informative posts.<br>Thank you!</p></center><a href="JavaScript:window.location.reload()">Reload</a>' + ("</" + a + ">"), "nbtabu");
            h.addEventListener && b.deferExecution(function() {
                b.getElementBy("nbtabu").addEventListener("DOMNodeRemoved", function() {
                    b.displayMessage()
                }, !1)
            })
        },
        i: function() {
            for (var a = "DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","), b = a.length, e = "", d = this, c = 0, g = "abisuq".charAt(d.rand(5)); c < b; c++) d.getElementBy(a[c]) || (e += "<" + g + ' id="' + a[c] + '"></' + g + ">");
            d.insert(e);
            d.deferExecution(function() {
                for (c = 0; c < b; c++)
                    if (null == d.getElementBy(a[c]).offsetParent || "none" == d.getStyle(d.getElementBy(a[c])).display) return d.displayMessage("#" + a[c] + "(" + c + ")");
                d.nextFunction()
            })
        },
        s: function() {
            var a = {
                    'pagead2.googlesyndic': 'google_ad_client',
                    'js.adscale.de/getads': 'adscale_slot_id',
                    'get.mirando.de/miran': 'adPlaceId'
                },
                b = this,
                e = b.getElementBy(0, "script"),
                d = e.length - 1,
                c, g, f, k;
            h.write = null;
            for (h.writeln = null; 0 <= d; --d)
                if (c = e[d].src.substr(7, 20), a[c] !== m) {
                    f = h.createElement("script");
                    f.type = "text/javascript";
                    f.src = e[d].src;
                    g = a[c];
                    l[g] = m;
                    f.onload = f.onreadystatechange = function() {
                        k = this;
                        l[g] !== m || k.readyState && "loaded" !== k.readyState && "complete" !== k.readyState || (l[g] = f.onload = f.onreadystatechange = null, e[0].parentNode.removeChild(f))
                    };
                    e[0].parentNode.insertBefore(f, e[0]);
                    b.deferExecution(function() {
                        if (l[g] === m) return b.displayMessage(f.src);
                        b.nextFunction()
                    });
                    return
                }
            b.nextFunction()
        },
        u: function() {
            var a = "ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","),
                b = this,
                e = b.getElementBy(0, "img"),
                d, c;
            e[0] !== m && e[0].src !== m && (d = new Image, d.onload = function() {
                c = this;
                c.onload = null;
                c.onerror = function() {
                    p = null;
                    b.displayMessage(c.src)
                };
                c.src = e[0].src + "#" + a.join("")
            }, d.src = e[0].src);
            b.deferExecution(function() {
                b.nextFunction()
            })
        },
        nextFunction: function() {
            var a = p[0];
            a !== m && (p.shift(), this[a]())
        }
    };
    l.nbtabu = nbtabu = new n;
    h.addEventListener ? l.addEventListener("load", n, !1) : l.attachEvent("onload", n)
})(window);
</script>



Monday, 6 April 2015

[UPDATED] How To Create a Social Content Locker in Blogger Blog


Update : Powered By New Blogger Tricks attribution is Removed..

Enjoy the New Version without any Credits 

Social Content Locker is Used To Lock Specific text  And Images
You Can Easily Install Social Content Locker By Following Simple Steps






  • Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget
  • Then Go To Template Tab  >>  Edit HTML
  • Then Add The Below Code Before or Above </head> (Want help to find Click Here)
<link href='http://newblogger-tricks.webege.com/locker.css' rel='stylesheet' type='text/css'/>


Update  New Design Added

            To See New Design ClickHere
  • For this design replace the above code with below code
<link href='http://newblogger-tricks.webege.com/locker-new.css' rel='stylesheet' type='text/css'/>








  • Now Go To The Post/Page you want to Lock Content And Add Below Code In HTML Tab

  • <article id="default-usage">
    <div class="to-lock" style="display: none;">
         
    <!--Hidden Content Starts (You can Use HTML BELOW)-->
    <div style="text-align: center; margin-bottom: 20px;">
    <img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
    </div>
    <div style="text-align: justify">
    Add Your Hidden Text Here
    </div>
    <!--Hidden Content Ends (You can Use HTML ABOVE)-->
    </article>
    </div><div id="nbtunlocker"> </div>
    <script type="text/javascript" src="http://newbloggertricks.googlecode.com/svn/lock.js"></script>

    <script>
    jQuery(document).ready(function ($) {
    $("#default-usage .to-lock").socialLock({
    text: {
    header: "Share it To Unlock This Content",
    message: "Yes, this is Social Locker. Just try it, click on one of buttons."
    },
    style: "ui-social-locker-secrets",
    buttons: {
    order: ["twitter", "facebook", "google"]
    },
    // twitter options
    twitter: {
    url: "http://www.newblogger-tricks.com",
    text: "Upgrade your social buttons to get more social traffic!"
    },
    // facebook options
    facebook: {
    url: "http://www.facebook.com/newbloggertrcks",
    appId: "706100816073140"
    },
    google: {
    url: "http://www.newblogger-tricks.com"
    }
    });
    });;;;
         
    </script>






  • For Facebook: Replace http://www.facebook.com/newbloggertrcks  with your Facebook Page.
  • For Twitter: Replace http://www.newblogger-tricks.com with your Website's URL or etc. 
  • For Google+: Replace http://www.newblogger-tricks.com with the URL of your website or post.
  • Replace Add_Hidden_Image_Here with the Image that you want to Hide.
  • Replace "Add Your Hidden Text Here" With the text that you want to hide from users.


  • Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 706100816073140 from above coding.



    Tuesday, 6 May 2014

    Add Flat UI Labels Cloud To Blogger Blog

    Flat UI design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions (such as drop shadows, gradients, or textures)..So Today We Are Going To Describe You How To Add FLAT UI Labels Cloud To Your Blogger Blog

    Step 1 : Add The Css Code To Your Template
    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
    • Now Paste The Following code Above/Before ]]></b:skin>
    .sidebar .label-size {
    position:relative;
    text-transform: uppercase;
    text-decoration:none;
    font-size:13px;
    font-family:Open Sans;
    color:#fff!important;
    }
    .sidebar .label-size a {
    color:#fff!important;
    font-weight:400;
    padding:8px 10px;
    margin:0 6px 6px 0;
    float:left;
    display:block;
    -moz-transition: all 0.4s ;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s ;
    -ms-transition: all 0.4s ;
    transition: all 0.4s ;
    }
    .sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
    .sidebar .label-size-1 a:hover {background:#16a085;}
    .sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
    .sidebar .label-size-2 a:hover {background:#2980b9;}
    .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
    .sidebar .label-size-3 a:hover {background:#27ae60}
    .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
    .sidebar .label-size-4 a:hover {background:#8e44ad}
    .sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
    .sidebar .label-size-5 a:hover {background:#c0392b}


    • After Adding Code Click On Save Template....
    • You're Almost Done..
    To Display Them In Cloud Mode Go To Labels In Layout And Select Cloud From The Options..
    Go To Your Blog And Check,if you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Sunday, 23 March 2014

    How to make maximum profit from adsense

    Today I will share something very important to every bloggers out there. Let me be clear that even most people having their Adsense account cannot make the enough profit out of it. This is because, they haven't followed the certain rules and regulations or, they do not comply with the terms.
    The fact being that Google Adsense is the one and only best solution for the publishers. And that it shares the maximum revenue with its customer.
    Today i'll tell you few guidelines that will help you to make the maximum profit out of your Google Adsense.

    1. See where to put Adsense ads.

    Google has found there are places where ads are more effective, and places where they are less effective.
    • Ads that appear when you first arrive at your page (i.e., "above the fold" as they say in the newspaper world) tend to be more effective than those that are below the fold.
    • Ads on upper left tend to perform much better than ads on the lower right.
    • Ads directly above the primary content, and ads that appear at the bottom of the page and above the footer tend to perform very well.
    • Wider ads are generally more successful, as they are much easier to read.
    • Ads that display images or video perform very well.
    • Using colors that complement your website colors will make them more readable, and so more effective.
    2. Tune your advertisements. 

    While Google AdSense will auto-populate your page with what they feel are relevant ads, use their tools to provide tighter controls. Here are ways to check which part of your webpage is perfect for ad placement.
    1. Set up channels. Channels are like labels that let you group your ad units your way—by color, category, or pages. By setting up channels, you can get detailed reports on the performance of your ad units, and use that to your advantage. For example:
    • Use one style of ad on one group of pages, and another style on another group. Track and compare the performance of the two styles, and pick the best performer.
    • Compare performance on pages that focus on different things. For example, if your pages about gardening perform better than your pages on cooking, you might consider adding more to your gardening pages.
    • If you have separate domains, set up a channel to track each of them to see which is generating the most clicks.
    So, tuning your ads alone won't make your profit more. The other things you should are:

    3. Traffic

    First and foremost, in order to generate any kind of revenue from AdSense you must have people clicking on your ads. In order for this to happen, you need to have people on your site, reading your content! Whether you have a business website, or a personal blog, the rule is the same: Get the word out!
    • Heavily trafficked large sites can see over a million hits a day, whereas a blog might feel lucky if they have 100 or 200 visitors a day.
    • For every click you receive, you may earn from $.05 to $5. Yes, that's a broad range, over a month, that is between $1.50 and $150.00. Where in that range you can expect to frequent depends entirely on you, your site, and your promotion efforts.
    4. Content is king

    The quality of your content is a most important factor in understanding your earning potential. If your site provides rich, compelling content and a great user experience, you will have more interested users. And more users means more traffic, which means more click, and more cash.

    I would love to hear from you. Please Comment..



    Saturday, 22 March 2014

    Add Customized Contact Us Page



    Contact Us Page Is Very Essential For Every Blog,So Today  We Are Posting How to add customized Contact Us Page....

    Step 1 : 

    • First Create a Blank Page  And Name It as Contact Us
    • Now Switch To HTML Mode and Paste The Below Code 

    <div id="contact_wrap">
    <h3>Contact Us</h3>
    <form name="contact-form">
    <input id="ContactForm1_contact-form-nbtname" name="name" placeholder="Name" size="30" type="text" value="">
    <input id="ContactForm1_contact-form-nbtemail" name="email" placeholder="Email" size="30" type="text" value="">
    <textarea cols="25" id="ContactForm1_contact-form-email-nbtmessage" name="email-message" placeholder="Message" rows="5"></textarea>
    <input id="ContactForm1_contact-form-nbtreset" type='reset' value='Clear'/>
    <input id="ContactForm1_contact-form-nbtsubmit" type="button" value="Submit">
    <br>
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-nbterror-message">
    </div>
    <div id="ContactForm1_contact-form-nbtsuccess-message">
    </div>
    </div>
    </form>
    </div>
    And Save The Page

    Step 2 :  

    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
    • Now Paste The Following code Above/Before ]]></b:skin>

    #ContactForm1_contact-form-nbtname{
    width: 270px;
    height:auto;
    margin: 5px auto;
    padding: 10px 10px 10px 40px;
    background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrG5WF-uQOhn58gL1gza9GipNp-jsziJ5yYtTrBEl2V2mCnYYrUhGAPDmBsPyI-El9SjJxPysn4soqyDLElObZwFNuR47sDte9C3V93KWBdOkWaG1DWuMetRCHRqH7uMUGXMmBXwVp7k/s1600/user.png)no-repeat 10px center;
    color:#777;
    border:1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    }
    #ContactForm1_contact-form-nbtemail{
    width: 270px;
    height:auto;
    margin: 5px auto;
    padding: 10px 10px 10px 40px;
    background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJdrptt0zLDiDQEFe49EePafw50j6SCo_jvAnd2Jhebuetz30vhRf8yN1uE9ftBTF6zp5tKxoem6LWhtcI4J1EMUh0lqrMTfQEEgb1Sut1SbgjesEKyDDZ6hULoDEmw8YWDNtb5fQyQq0/s1600/pen.png)no-repeat 10px center;
    color:#777;
    border:1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    }
    #ContactForm1_contact-form-email-nbtmessage{
    width: 270px;
    height: 150px;
    margin: 5px auto;
    padding: 10px 10px 10px 40px;
    font-family:Arial, sans-serif;
    background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLygnLJZANWRyANRMs3ew_Vr-GNuf_GBdvBIkFe9oX_jnyh6sH4r8YQYDeLbtsgcoPe-oHxgqmss1Gh2m14BXYRhiMb9XTqRZ3Bgv880tVy2iSQxJML5cKLUxYee4vdjoep5hHq6VvWTM/s1600/msg2.png)no-repeat 10px 10px;
    color:#777;
    border:1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
    }#ContactForm1_contact-form-nbtreset {
    width: 95px;
    height: 30px;
    float: left;
    color: #FFF;
    padding: 0;
    cursor:pointer;
    margin: 25px 0 3px 0 0;
    background-color:#005a8a;
    border-radius:4px;
    text-shadow: 1px 0 0 #1f4962;
    -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    background-color: #3689b9;
    border:1px solid #194f6d;
    }
    #ContactForm1_contact-form-nbtreset:hover {
    background:#4c9bc9;
    }
    #ContactForm1_contact-form-nbtsubmit {
    width: 95px;
    height: 30px;
    float: right;
    color: #FFF;
    padding: 0;
    cursor:pointer;
    margin: 25px 0 3px 0 0;
    background-color:#005a8a;
    border-radius:4px;
    text-shadow: 1px 0 0 #1f4962;
    -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
    background-color: #3689b9;
    border:1px solid #194f6d;
    }
    #ContactForm1_contact-form-nbtsubmit:hover {
    background:#4c9bc9;
    }
    #ContactForm1_contact-form-nbterror-message, #ContactForm1_contact-form-nbtsuccess-message{
    width: 320px;
    margin-top:35px;
    }
    You're Almost Done..Now Visit Your Contact Us Page And See The Miracle But Messages Cannot Be Sent.To Rectify This Follow step 3

    Step 3 :  

    This is The Final Step Do It Carefully
    • Log In to your Blogger Account
    • Go To Layout Tab And Select Add a Widget
    • Now Select Contact Form from More Gadgets and Save
    Now Your Contact Form Will Work...But You Can See Contact Form in Sidebar,To Disable Contact Form In Side bar
    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML >> Search For </head>(Want help to find Click Here)
    • Now Paste The Following code Above/Before </head>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style>
    #ContactForm1{ display:none!important;}
    </style>
    </b:if>

    •  Save The Template.Now You'r Done

    Go To Your Blog And Check,if you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Customize Blogger Blockquote & Highlight codes with it


    Many Of The Bloggers Don't Know How To Highlight html Codes I There Blogs.So Today We are Going To Post How To Highlight Html Codes by Using Simple BlockQuote Trick

    (Do You Don't Know How To Use Blockquote Click Here)

    Step 1 :  Find The Blockquote In Template


    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML >> Search For .post blockquote (Want help to find Click Here)
    You Will Find A Code Similar To This..
    .post blockquote{
    --------------------
    --------------------
    }
    .post blockquote p{
    ---------------------
    ---------------------
    }
    .post blockquote:hover {
    ---------------------------
    -------------------------
    }

    Step 2 : Then Replace the Above Codes Given Below in Step 4

    Step 3 : If You Don't Find The Code Then Simply Follow Below Steps


    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML >> Search For ]]></b:skin> (Want help to find Click Here)
    • Now Paste The Following code Above/Before ]]></b:skin>
    Step 4 :
    .post blockquote {
    background: hsla(0, 4%, 95%, 0.34) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAbwOJNDqQtgLQ-qVM7O2GQhP-DYgvA0DLRlSkzqMtP4jGQsDCI8E0_4bJS-BWfUv8xA9KLNAn_N1ipbkc71oHxDk7_ZbTsDNkCJJ-a_3gUmwiTP0eur_fjz7YMtbthwhMPwQMs2tFYo/s1600/blockquote.png) no-repeat bottom center;
    margin: 20px;
    padding: 10px 20px 40px 20px;
    border: 1px solid #ddd;
    font-size: 0.9em;
    word-wrap: break-word;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
    -moz-box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
    box-shadow: 0 0 5px 5px hsla(0, 0%, 50%, 0.13);
    }
    .post blockquote p {
    margin: 0;
    padding: 0 0 15px;
    }
    .post-body blockquote {
    line-height: 1.3em;
    }

    Customization  : 

    • Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAbwOJNDqQtgLQ-qVM7O2GQhP-DYgvA0DLRlSkzqMtP4jGQsDCI8E0_4bJS-BWfUv8xA9KLNAn_N1ipbkc71oHxDk7_ZbTsDNkCJJ-a_3gUmwiTP0eur_fjz7YMtbthwhMPwQMs2tFYo/s1600/blockquote.png With Your Image.
    • Now Save The Template
    • Go To Your Blog And Check,if  you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible. 



    Add Facebook Popup Like Box To Blogger Using Jquery

    The popup Like box is not designed for make you blog look like professionals, The widget designed for get more Facebook like. This box has also a close botton at the top right corner. Visitor can close this widget by clicking on close button.


    when reader visit your blog first timeFacebook like box is appear to your reader and when visitor navigate to another page or visit back later like box never appear again if readers doesn’t there browser cookies.






    How To Install This To Blogger

    You can Install This Widget Easily in your Blog By Following These Simple Steps....

    Before you edit any template it's better to keep a Backup..So First Backup your Template.

    1. Go to your Blogger Dashboard>>Template>>Edit Html

    2. Find following code in your template.
    </head>
    3. and paste the following code before/above </head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { var setDays = 1000*60*60*24*7; var expires = new Date((new Date()).valueOf() + setDays); document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); $.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); }});</script>

    4. Now Search for
     </b:skin>
    5. and paste following css code before/above </b:skin>


    /* Facebook Popup Like Box */ #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; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6towZbFWBi4CJE88RQ-4dKe5x9BHjC46E_zOz06tF_JNcw2SpHMb_UvFufbwx38BKHeNPMnROpic8Ru5ci45kjk7HLppVQ7BugzximBvrF2gSaUmoRWr5pYuWFjQSnViott0yTDEMAfS/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uFHpFqNQTspnnrdCJtiNo951wkawtxlKRTNxmPcO2B2W5IlPAK1oCtbt1Y23z0LPXFv2E5sdFq_inpudZC-OEeZyJH3Z5RdJOXf-Ufn56tpvTdBoJ_4XvMFdkfMlpdWdK3XRsgLUzjGU/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }
    6. Save your template and you are done second last step! Visit your blog to see it working just perfectly.
    7. Now finally find following code.

    </body>
    8. and paste the following code before closing </body> tag.


    <div style='display:none'> <div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> <div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewbloggertricks&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> </div> </div> </div>

    Replace newbloggertricks with your facebook fan page username.

    save your template and you are all done. .!!
    Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.

    I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong facebook fan growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.

    Customization :

    In The First Code
    • *7 Setting this value will effect cookie refreshment If It 7 then it appear for every  7 days. If you want to display like box to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.



  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top