Saturday, 21 September 2013

How To Create a Social Content Locker in Blogger Blog

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'/>
  • 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.



Friday, 20 September 2013

Best Online Advertising Companies For Web publishers To Make Money

There Are So Many Web Advertising Companies To Make Money Online.Best Of Them Are

1. Google Adsense

It Is The Top Advt Company .It Provides a Free, Flexible way to Earn Money from your Websites, Mobile sites, and site search results with relevant and engaging ads.We Can Earn More By Using Google Adsense.

But It Is Impossible To Get Approved For Google Adsense For Small Websites or Blogs.Because it have Some Guidlines and Terms. 

2.Media.net (Yahoo! Bing Network Contextual Ads)

   It Is Also Best Advt Company .The Yahoo! Bing Network             Contextual Ads program enables web publishers to easily and      effectively earn advertising revenue. Publishers can now use the    Media.net self-serve platform to create and customize ad units that display relevant text ads consisting of sponsored links and ad topics from the Yahoo! Bing Network.

Tips To Get Approved For Yahoo! Bing Network Contextual Ads
  • TLD [ Top Level Domain Name ] - .Com, .Net, .Org etc.
  • Unique, Quality and Acceptable By The Network Content
  • Domain Age = 3/4 Months
  • 40% Organic Search Traffic
  • 1000 Daily Pageviews

3. Chitika Online Advertising Network

 It Is The Most Popular Web Advt Company. It Gives Three Ad Types

  • Text Ads
  • List Ads
  • Mobile Ads
You Can Easily Approved to Chitika..It Is The Best Alternative To Google Adsense If You Have A Small Blog Or WebSite Which Drives <  100 Traffic Per Day 

4. InfoLinks Text Ads

Infolinks' suite of ads is part of a welcome revolution - created to monetize sites with reader interests in mind.

Infolinks ads help publishers earn money from advertising on content they’re already developing for their site.

Main Features Are :
  • Relevant ads while reading related information
  • No disruption to your usual reading experience
5. B4psAds *
It Is Also  Best Web Advt Company
  • B4PSAds technology will help advertisers reach their targeted audiences and increase their ROI.
  • B4PSAds software Rotates, Test Campaigns & Ads, then Score Performance at the end of each day.
  • Campaigns and Ads with higher scores are given Top Priority. This will keep your cost low and profits Higher.
  • B4PSAds technology is designed to find the Winning campaigns and SCALE UP.
  • All of this is done while you sleep. Once you set up B4PSAds campaigns, ads and landing pages, you can sit back and relax while our system works its magic automatically.
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...
*This Is by Our Own Review



Thursday, 19 September 2013

Scrolling Social Buttons For Blogger Blog (All Versions)

We Are Sharing All Versions Of Scrolling (or) Floating Social Media Buttons For Blogger Blog. You Can Add These To Your Blogger Blog Very Easily By Following Simple Steps






  •  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

Version 1 :

<!-- Scrolling social Button Begin By NewBloggerTricks -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:80px;top:150px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a><script type="text/javascript" src="http://newbloggertricks.googlecode.com/svn/facebook.js"></script>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 

Version 2 : 

<!-- Scrolling social Button Begin By NewBloggerTricks-->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a>
<script type="text/javascript" src="http://newbloggertricks.googlecode.com/svn/facebook.js"></script></div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END -->

Version 3 : 

<!-- Scrolling social Button Begin By NewBloggerTricks  -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a>
<script type="text/javascript" src="http://newbloggertricks.googlecode.com/svn/facebook.js"></script>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script> <!-- Scrolling social Button END -->


Add The Code Which You Like Then Save The Widget

Customization :

Change The Red highlighted Code To Adjust Top And Side Positions Of The Widget





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/AVvXsEhCLcFaLDKm850LoSDWrdHYWi5x0dPYAJTkxijqPYlKTiHz6zOepa3ue7rLJ3ptpSKgAyg2EGsW56NG5EhCPa7mHdflcjZmdx2imvDvCsFmWpC3scAbzhq7csX7RFBZkiRhswaPseGMn-Xb/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/AVvXsEhqrUkC6J56xX_vPAt0thDyfylepzv1PvNs9366pwSwVdCU94DAS7iTxbHYT-vUn130N5yefK6nPKogrfQYs-7wERJIH_n9pfpwmpJPd9wvLblM2NuAKy9DNl8AMqNwJ8Vki2f8kSAja2Q6/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/AVvXsEgwydFCk9N9yL8x6tweVVjXK467WvfZgTdEvqhS1GXX8m8o10VjRxBxv6nh9do2oSOXu-vYZz0xmi45NXzBiQNdlbU-ttMoD907Adm6yLa8SMC_-ysR3ngPf1PyqpBO8JQdnLOlrTT3M3-5/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/AVvXsEimjJgVcUE9szp2eTt7upxk5sLqHfXRAe3NoF08awpJTGqH1yhhElqRegkefVoE4w_VlAah-P6Ktj4a1r6AUhAJM7v5yigjnmaZa_Oq3PnuIZfiw9EqUUeqJ5ravjhcaLTUVMhFYgr_sqh8/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.




  1. Home
  2. About Us
  3. Contact Us
  4. Write For Us
  5. Sitemap
  6. Privacy Policy
  7. Back To Top