Showing posts with label Blogger Tricks. Show all posts
Showing posts with label Blogger Tricks. Show all posts

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.



    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.



    Friday, 11 October 2013

    Add SOCIALIZE IT Bar Below Post Title In Blogger Blog

    Social Buttons Plays a Crucial Role In Generating traffic From Social Sites..So Add These Buttons Under Post Title Will Increases Traffic

    Adding SOCIALIZE IT Below Post Title In Blogger

    Implementing this new horizontal social bookmarking button bar below post title in blogger is not a difficult task..Follow The Below Steps To Add Them Easily
    • Go To Blogger >> Template >> Backup Your Template
    • Click Edit HTML and Find For </head>  (Want help to find code Click Here)
    • Just Above </head> Paste The Following Code.
    <style type='text/css'>
    /*<![CDATA[*/
        .horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle;  font-size: 14px;}
        .horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px;  height: 25px; }
        .horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
        .horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
        .horizontalsocial .sharerbubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlBRRJtw8m9quEQfKIctrCU9YfQFsFdT0bGJJ-bp2qjHAvLmMEFrnlFbAu31kCjoIsemgpFR1OPKF1ozXs82HWuE5fTuRrDpXxjNH9HmuI6gjZchY8BJ3BpN7wbZLT0ZCnB56jP3K4UE/s1600/Commentz.png) no-repeat;  height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
        .horizontalsocial .sharerbubble a{color: #2d2520;  padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
        .horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
        #nbtsocialshare {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
        #nbtsocialshare td{padding:4px;margin:0;border:none;}
        #nbtsocialshare td iframe{max-width:82px;width:82px !important;}
        #nbtsocialshare.nbtFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
    /*]]>*/
    </style>
    <script type='text/javascript'>
    /*<![CDATA[*/
    // Set the Top Offset
    $theOffset = 0;
    jQuery(document).ready(function(b){var a=b("#nbtsocialshare");a.wrap('<div id="nbtSocialPlaceholder"></div>').closest("#nbtSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#nbtsocialshare iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("nbtFloatSocial"):a.removeClass("nbtFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
    /*]]>*/
    </script>
    <script type='text/javascript'>
    /*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

    /*]]>*/
    </script>

    • Now  Find For <div class='post-body entry-content'>
    • And Just Above/Before It Add The Following Code...
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='horizontalsocial social-buttons' id='horizontalsocial'>
    <div class='nbtsocialshare' id='nbtsocialshare'>
    <table class='nbtsocialshare' width='100%'>
        <tr>
    <td><div class='sharertitle'>Socialize It &#8594;</div>
    </td>
            <td>
                <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
            </td>
            <td>
            <div class='fb-like'>    <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
            </td>
         
            <td>
            <div class='sharergplus'>    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
            </td>
         
            <td>
    <div class='sharerbubble'><span class='thecomments'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
    </b:if>
    </span></div>
    </td>
        </tr>
    </table>
    </div></div>
    </b:if>


    • Click Save Template and You're  Done!
    • Go To Your Blog And Check It Below Post Title
    • If  you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.
    Update :
    Make This Bar Floating By Following Below Step

    On The Second Code  Replace 
    <div class="horizontalsocial social-buttons" id="horizontalsocial">
    With
    <div class="horizontalsocial social-buttons" id="horizontalsocial"style="position: fixed;">



    Saturday, 28 September 2013

    Add Custom Page Link In Address Bar Of Blogger Blog

    Are You Created New Page  ?
    In address Bar It Is Showing   as /p/blog-page.html Instead Of Original Name ??
    Change The Link Of Any Page Easily As You Like By Following 
    • First Go To pages Tab on Blogger
    • Click On New Page >> Blank Page and Enter The Page Title As You Like
    • Now Click On Publish Without Writing Any Thing On That Page
    • Now Check The Page Link It Will Definitely The Name You Entered
    • Now Edit The Page And Write On That Page.
    If You Want To Share This On Your Blog Give A Link Back to Our Site

    This Is A Simple Blogger Trick,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Friday, 27 September 2013

    Beautiful Page Navigation for Blogger Blog

    Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.By using this In your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.





    So add This To Your Blog By Following Simple Steps Below
    • Log In to your Blogger Account
    • Go To Layout Tab And Select Add a Widget
    • Then select HTML/JavaScript And Paste The Below Code Inside It
    <style type='text/css'>#blog-pager{height: 28px;    padding: 10px 0 0;overflow:hidden;text-align:center;}.showpageArea a {text-decoration:underline;font-size: 16px;       text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
    .showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
    .showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=7; var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://www.newblogger-tricks.com" style="font-size:0pt">Nbt Widgets</a><script style='text/javascript' src='http://newbloggertricks.googlecode.com/svn/newbloggertricks-page-nav-v2.js'></script>

    Customization :

     If You Want To Change The No.Of Posts Appear per page

    • Change pageCount=
    • Go to Settings >> Posts and Comments and Change as Show In Fig
    Finally save your Widget and visit your Blog You Will Find The Page Navigation At The end Of Page.We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Thursday, 26 September 2013

    Awesome Recent Comments Widget With Avatars for Blogger (Single Step)


    Recent Comment Widget Helps You To Get More Comments On Your Blog
    So We Are Released Recent Comments Widget With Avatars for Blogger.Just In One Click You Will Add It To Your Blog...






    Recent Comments Widget Generator

    • In Customize Field Enter The Name Of Your Blog/Website With Http://
    • Click on Generate Button and Add To Blogger Button Respectively.
    • Another page will appear follow simple instruction that set.
    • You Can Watch Demo (In New Tab) By Clicking on Demo

    We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Tuesday, 24 September 2013

    Add Multi Colored Popular Posts Widget for Blogger

    This Is a Widget Which Gives Multi Coloring To Our Old Popular Post Widget..

    Steps To Add This To Your Blog Post
    • 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>

    <!-- Popular posts multi colored theme -->
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;left:-27px;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding:4px;
    border:1px solid #fff !important;
    }
    #PopularPosts1 img:hover {
    border-radius: 0 0 0 0;
    -moz-transform: scale(1.2) rotate(-711deg) ;
    -webkit-transform: scale(1.2) rotate(-711deg) ;
    -o-transform: scale(1.2) rotate(-711deg) ;
    -ms-transform: scale(1.2) rotate(-711deg) ;
    transform: scale(1.2) rotate(-711deg) ;
    }
    <!-- popular posts multicolored by nbt-->

    •  Now Save The Template
    • Go To Your Blog And Check
    We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Add Mashable Sharing Widget For Blogger v.2 (One Step Process)

    We Are already Discussed About Mashable Sharing Widget V.1 Now I am Going To Give a new Method V.2 to Add In A One Step Process











    • In Customize Field Replace All The Names With Corresponding Usernames Of Your Profile 
    • Click on Generate Button and Add To Blogger Button Respectively.
    • Another page will appear follow simple instruction that set.
    • You Can Watch Demo (In New Tab) By Clicking on Demo

    We have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,We will reply as soon as possible.



    Sunday, 22 September 2013

    Add Email Subscription Widget Below Blogger Posts v.1

    Email Subscription Widget Below Blogger Posts Increases Your Feed Count As It Appears Under Every Post. Just Follow Simple Instructions To Add This To Your Blog

     Widget Generator :

    • In Customize Field Enter Your Feed Burner ID In Corresponding Box
    • Click on Generate Button 
    • You Can Watch Demo (In New Tab) By Clicking on Demo
    • Copy The Generated Code And Follow Below Steps

    Copy The Generated Code And Follow below Steps
    • First go to Blogger Dashboard > Template
    • Download a copy of your template
    • Click on Edit HTML
    • Find below code in your template (Want help to find code Click Here)
    <data:post.body/>

    • If You Find Three <data:post.body/> Then Add The Code After or Below 2nd One 

    Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.

    Direct Mode :

    • First go to Blogger Dashboard > Template
    • Download a copy of your template
    • Click on Edit HTML
    • Find below code in your template (Want help to find code Click Here)
    <data:post.body/>
    If You Find Three <data:post.body/> Then Add Below Code After or Below 2nd One

    <style>
    .topsubsbox {
    background: none repeat scroll 0 0 #292929;
    border-radius: 0px 0px 0px 0px;
    color: #FFFFFF;
    font-size: 14px;
    height: auto;
    margin-left: -7px;
    padding: 15px;
    transition: border-radius 0.5s ease 0s;
    width: auto;
    }
    .topsubsbox:hover {
    border-radius: 0px 30px 0px 30px;
    }
    .topsubsbox p {
    line-height: 21px;
    text-align: justify;
    width: auto;
    }
    .subsbox {
    float: right;
    margin: 0 106px;
    }
    #subbox {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjffWW2hBeuq3Z0YmSn0a8pD5EQuV01acFyuVR35I6bFWGXhBcGPBK4LT79IitHcjjSCwpzPELynClzPF10xX9cW8Sq0v8M6Ljb5ABteiOTmzzwg3Hb68LIw5kIgIjdIPQzteKr0cIItxCT/s1600/subscribe-email.png") no-repeat scroll right center white;
    color: #888888;
    padding: 10px;
    width: auto;
    }
    #subbutton {
    background: none repeat scroll 0 0 #0089E0;
    border: 1px solid #292929;
    border-radius: 0px 0px 0px 0px;
    color: #FFFFFF;
    font-weight: bold;
    height: 40px;
    margin-top: 15px;
    text-transform: uppercase;
    transition: border-radius 0.5s ease 0s;}
    #subbutton:hover {
    border-radius: 18px 0px 18px 0px;}
    </style>
    <br />
    <div class="topsubsbox">
    <div style="font-family: oswald; font-size: 20px; letter-spacing: 1px; text-align: center;">
    Don't Miss a Single Post ! Join Us Now !</div>
    <div class="subsbox">
    <form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=newblogger-tricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input id="subbox" name="email" onblur="if ( this.value == '' ) { this.value = 'your email address';}" onfocus="if ( this.value == 'your email address') { this.value = ''; }" type="text" value="your email address" />
    <input name="uri" type="hidden" value="newblogger-tricks" />
    <input name="loc" type="hidden" value="en_US" />
    <input id="subbutton" type="submit" value="Send Updates!" />
    </form>
    </div>
    <br />
    <div style="color: #05a4d5; font-size: 9px; letter-spacing: 2px; margin-top: 25px; text-align: center;">
    Note: Don't forget to click the confirmation link (in your email) to verify Your Entry!</div>
    </div>
    <div style="clear: both;">

    • Replace  newblogger-tricks with your Feedburner Username
    Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.



    Saturday, 21 September 2013

    Add Rainbow Animation To Links For Your Blogger Blog

    This is a simple Blogger Blog Trick,Changing the color of Link when Mouse over it.7 colors are changing like animation when hover the link.
    Hover On Any Link To See on demo site



    Follow the simple steps below..
    • Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget then goto
    • Template Tab >> Edit HTML
    • Then Add The Below Code Above or Before </head>  (Want help to find Click Here)
    <script type='text/javascript'>//<![CDATA[var rate = 20;if (document.getElementById)window.onerror=new Function("return true")var objActive;  // The object which event occured invar act = 0;    // Flag during the actionvar elmH = 0;   // Huevar elmS = 128; // Saturationvar elmV = 255; // Valuevar clrOrg;     // A color before the changevar TimerID;    // Timer IDif (document.all) {document.onmouseover = doRainbowAnchor;document.onmouseout = stopRainbowAnchor;}else if (document.getElementById) {document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);document.onmouseover = Mozilla_doRainbowAnchor;document.onmouseout = Mozilla_stopRainbowAnchor;}function doRainbow(obj){if (act == 0) {act = 1;if (obj)objActive = obj;elseobjActive = event.srcElement;clrOrg = objActive.style.color;TimerID = setInterval("ChangeColor()",100);}}function stopRainbow(){if (act) {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}function doRainbowAnchor(){if (act == 0) {var obj = event.srcElement;while (obj.tagName != 'A' && obj.tagName != 'BODY') {obj = obj.parentElement;if (obj.tagName == 'A' || obj.tagName == 'BODY')break;}if (obj.tagName == 'A' && obj.href != '') {objActive = obj;act = 1;clrOrg = objActive.style.color;TimerID = setInterval("ChangeColor()",100);}}}function stopRainbowAnchor(){if (act) {if (objActive.tagName == 'A') {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}}function Mozilla_doRainbowAnchor(e){if (act == 0) {obj = e.target;while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {obj = obj.parentNode;if (obj.nodeName == 'A' || obj.nodeName == 'BODY')break;}if (obj.nodeName == 'A' && obj.href != '') {objActive = obj;act = 1;clrOrg = obj.style.color;TimerID = setInterval("ChangeColor()",100);}}}function Mozilla_stopRainbowAnchor(e){if (act) {if (objActive.nodeName == 'A') {objActive.style.color = clrOrg;clearInterval(TimerID);act = 0;}}}function ChangeColor(){objActive.style.color = makeColor();}function makeColor(){// Don't you think Color Gamut to look like Rainbow?// HSVtoRGBif (elmS == 0) {elmR = elmV;    elmG = elmV;    elmB = elmV;}else {t1 = elmV;t2 = (255 - elmS) * elmV / 255;t3 = elmH % 60;t3 = (t1 - t2) * t3 / 60;if (elmH < 60) {elmR = t1;  elmB = t2;  elmG = t2 + t3;}else if (elmH < 120) {elmG = t1;  elmB = t2;  elmR = t1 - t3;}else if (elmH < 180) {elmG = t1;  elmR = t2;  elmB = t2 + t3;}else if (elmH < 240) {elmB = t1;  elmR = t2;  elmG = t1 - t3;}else if (elmH < 300) {elmB = t1;  elmG = t2;  elmR = t2 + t3;}else if (elmH < 360) {elmR = t1;  elmG = t2;  elmB = t1 - t3;}else {elmR = 0;   elmG = 0;   elmB = 0;}}elmR = Math.floor(elmR).toString(16);elmG = Math.floor(elmG).toString(16);elmB = Math.floor(elmB).toString(16);if (elmR.length == 1)    elmR = "0" + elmR;if (elmG.length == 1)    elmG = "0" + elmG;if (elmB.length == 1)    elmB = "0" + elmB;elmH = elmH + rate;if (elmH >= 360)elmH = 0;return '#' + elmR + elmG + elmB;}//]]></script>


    • Save Your Template After Adding Code
    Thanks For Reading This Article.If You Found Any Errors In My Post Please Feel Free To Comment Below



    How to Change Text Select Highlight Color on Blogger Blog

    You Can easily Change Text Select Highlight Colour By Adding A Small Css Code To Your Blogger Template..This can ensure that when users highlight text on your blog, it matches your blog’s theme, and may also look professional at the same time.


    Follow These Simple Steps :

    • Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget then goto
    • Template Tab >> Edit HTML
    • Then Add The Below Code Below or After </head> (Want help to find Click Here)
    <style type='text/css'>
     ::selection {background:#00624b;color:#ffffff;}
     ::-moz-selection{background:#00624b;color:#ffffff;}
    </style>

    • Then Save Your Template
    • You Can Change The Selecting Colour By Replacing #00624b with Code Of Your Colour
    Try Our Html Colour Code Generator Nbt Colour Codes



    Monday, 16 September 2013

    How to Change Your Blog ScrollBar

    Change Your Blog's Scroll Bar Which Gives Good View Of Your Blog


    You Can see Changed Scroll Bar On Right Side Of My Blog

    Steps To Add This To Your Blog
    • 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>


    /* Webkit override Scrollbar with CSS3 By NBT */
    ::-webkit-scrollbar {
    width: 12px; height:8px;
    }
    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
    background:#fff;
    }
    ::-webkit-scrollbar-thumb {
    background: rgb(62,201,187);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(62,201,187);

    If You Want To Customise The Colour Then  change rgb(62,201,187) as your Desired Colour
    You Can Also Change Width And Height by Changing 12px and 8px

    Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....




    Saturday, 14 September 2013

    Add Stylish Success , Announce , Note and Warning Boxes For Your Blog


    Add Stylish Sucess , Announce , Note and Warning Boxes For Your Blogger Blog..Use These To Show Your Notifications...

    Steps To Add This To Your Blog Post
    1. Go To Blogger >> Template >> Backup Your Template
    2. Click Edit HTML >> Search For   ]]></b:skin>  (Want help to find Click Here)

         3. Now Paste The Following code Above/Before  ]]></b:skin>

    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
      }
      @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
      }


      .nbt_message_box {
        margin:15px 0;
      }

      .note {
        color:#666;
        font-family:"Open Sans";
        font-size:16px;
        border:1px solid #FDEBA5;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_7IN4-o7mipvKUvIP-e98ImLuqOaUgFdBGymzVCEkA5tO60g77ug0jXx__VQI4OztnFaF0R8NbHzf-KNIPy_vmXeKQrtXhgmrAkPjuQUpRayP8EsSVtWsF0Ic2o7mUZ8JgxxsAjGfzKQp/s1600/Nbt+Notification.png) no-repeat scroll 10px center #FEF4C8;
        padding:.5em 1em .5em 3em;
      }

      .announce {
        color:#666;
        font-family:"Open Sans";
        font-size:16px;
        border:1px solid #BEE5F8;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAV25z-ZKIOkSr7OgfuMhQIR_KvLi49vRLaFVO-7ew1xexy5UJatZRuBzAuoRr0PqRT6VjoDYC5SICWZ2Bw32kSWpZIdpAqk7zYznI56wGF9MFsBvW1uqQsDj9BTSHCFADBBwpxAGExSBS/s1600/NBT+Announce.png) no-repeat scroll 10px center #D7EFFB;
        padding:.5em 1em .5em 3em;
      }

      .success {
        color:#666;
        font-family:"Open Sans";
        font-size:16px;
        border:1px solid #DEF1BF;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRh-8x7D6oSeAAjmT1ccWWxHGgsdYTOdnglLzqySxr0PpQjpjLdG6x-OwUA8hOX55ERJad2j7CpFpMfKFwppX1fqrnSedaTiGEeywpc3mmh41uSCl8lQVBd5mnLbsY2MSdihnpnJ_LYqb-/s1600/NBT-Sucess.png) no-repeat scroll 10px center #E8F6D2;
        padding:.5em 1em .5em 3em;
      }

      .warning {
        color:#666;
        font-family:"Open Sans";
        font-size:16px;
        border:1px solid #FFDBDB;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwBRxoZx2m1tfBJyy8J3qVW_gFOXN3mXyY9qHRa-JeCk60xDP_j6Wr65tXRxylGVo6xOranLJWDLcQwDxknPmJPHh307bRbnonoUfs89n1VT9j__DjDvLrCKFHWC-pGOyc6CoALd_atQn/s1600/NBT+Warning.png) no-repeat scroll 10px center #FFE7E7;
        padding:.5em 1em .5em 3em;
      }
    <br />

         4. Now Save Your Template

    Do You Want To Add These Boxes To Your Posts Follow The Below Steps
    1. Go To Blogger >> Create New Post
    2. And Go To The HTML Tab
    3. Copy The Below Codes Of Boxes
    4. And Paste The Code In  In  HTML Tab.

    Note Box :

    <div class="nbt_message_box note">
    Hello This Is NBT-Notification Box
    </div>

    Success Box :

    <div class="nbt_message_box success">
    Hello This Is NBT-Success Box
    </div>

    Announce Box : 

    <div class="nbt_message_box announce">
    Hello This Is NBT-Announcement Box
    </div>

    Warning Box : 

    <div class="nbt_message_box warning">
    Hello This Is NBT-Warning Box
    </div>

    • Replace The Red Text With The Your Message
    • And Publish The Post.




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