Latest Airtel PD Proxy Trick 2013 Working in many states

As this is a Location based trick so will not work in all the states, and User’s from maharsahtra please do not Try it as it seems to be not wokring in MH. We have some new tricks for our Maharashtra reader’s We will post it Soon. coming on this Trick you don’t need any configurations. Just simply Download PD proxy and setup some settings which are given below. please note Trial (free) PD Proxy Accout givs 100 MB daily Limit.

MULTICOLOR SOCIAL SHARING WIDGET

Social media subscription widgets are most important part of any blog or website. In this tutorial I will show in simple steps how to add the social subscription widget to your WordPress or Blogger blog.
This is very attractive because of multicolor. Four different colors for every social network. It include nice hover style. you can link with RSS, Facebook, Twitter and StumbleUpon. Lets look at the tutorial.

Multicolor Social Subscription Widget

Add Multicolor Social Subscription Widget To Blogger Blog

• Go to Dashboard > Design > Page Elements.
• Click Add A Gadget. In New Window, Select HTML/Javascript .
• Copy The Code Given Below and Paste It Inside The Box.
• Save The Gadget

Add Multicolor Social Subscription Widget To WordPress Blog

• Go to Dashboard > Appearance > Widgets > Available Widgets
• Drag Text Widget Into a Sidebar.
• Paste In The Code.
• Save Widget & Its Done

Code For Multicolor Social Subscription Widget

<style type="text/css">
.blogsdaddy-social-widget {
width: 340px;
margin-top: -10px;
border:0px solid #000000;
}
.blogsdaddy-social-widget ul {
margin: 0;
padding: 0;
 
}
.blogsdaddy-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.blogsdaddy-social-widget ul li a {
color: #fff;
display:block;
}
.blogsdaddy-social-widget ul li a:hover {
color: #c9c9c9;
}
.blogsdaddy-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.blogsdaddy-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;  }
 
.blogsdaddy-social-widget ul li .rss {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL9hDVoIheWBZurwvo6ErWnONqipBgQrE1STL1TGHa1oTkTFxXFoGwhs88ane2MyujHLiHdhqKt48cDvWSLlRfDBPwr97LTtWn4SYRRYNtjOzI1-kVwa9ZfZWRWdRI2lF1TA_BjyVwPj5R/s1600/blogsdaddy-Rss.png")
 no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .twitter {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIQPEdSsh3Aj3LemJvDuUqsnvKMFnt9WQAwG2Ej8PvIfEFSC9lWKw56A0gnNjmHuSA7IN1Vo-YLSMW_6eV-rCJ7kO61daJnq8HoQCeHEM3ysfVEErD4AVfRQSWgYcJMxGzY967Z6y6PRw/s1600/blogsdaddy-twitter.png")
 no-repeat scroll 2px center #59a5d9;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .facebook {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijF3-6oaiKbMXpKMD8TkdrDyYkATcfefjX0Ut83eucqXwRk5lQ-NnayDCV3r7BTjVix2pd8kNvI1k9TNchRyBu09IovckOdllKG83C0iW_4HpCzTKh1swdFgoCOWdA4rpKFeRMclgrYQxG/s1600/blogsdaddy-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .stumbleupon {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSl61E2I_kWZj0Fn9SgrrZ2y3eKMbmTBIQFVKCPGiQotxhGiwKcNrgjlapo56Eq9bsueaermdl3hkKm_JToAkT6d6wq7YvOJCeBmWI_hhDaaVrC8-1_-8qRGEa6lQv9iQybgD-Gu_eo6W2/s1600/blogsdaddy-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}
</style>
<div class="blogsdaddy-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/topbloggertrickstk" target='_blank' rel='nofollow'>Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/blogsdaddy"
target='_blank' rel='nofollow'>>Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogsdaddy"
target='_blank' rel='nofollow'>>Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/gaganmasoun"
target='_blank' rel='nofollow'>>Stumble on Stumbleupon</a></li>
</ul>
</div>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email RSS you only need to replace your feedburner ID with your own. Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/YourId with YourId being the ID.

ANGRY BIRD SOCIAL SHARING WIDGET FOR BLOGGER & WORDPRESS

Social sharing widgets are very useful for blogs, with these widgets bloggers can get huge quality traffic for their blogs. You all are know about "Angry Birds" very well. Today, I'm going to share social sharing widget related to Angry Birds.
You can add this widget to your blog easily. This widget contains 5 different color Angry Birds: G+, Facebook, YouTube, Twitter and RSS feed.

How To Add Angry Birds Social Sharing Widget To Blogger Blog

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget

How To Add Angry Birds Social Sharing Widget To WordPress Blog

1. Go to Dashboard -> Layout -> Widgets -> Available Widgets
2. Drag Text Widget Into a Sidebar.
3. Paste In The Code.
4. Save Widget & Its Done

Code For Angry Birds Social Sharing Widget

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="https://profiles.google.com/118121786688701820900" rel='nofollow' target='_blank'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFGJRk0BNjqJsfCWRby7hfGWV46x2krP9AWMoBe4YKAf-gCpTWOu7wPZc8SmDtCitgx2Wp93fB95zQJmuDShsv-E0JREjSNrmtug9x9Lblm84XEElJcz93rt0P34PmAmoCLksXeMpeAI/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="https://www.facebook.com/pages/topbloggertrickstk/116130148554956" rel='nofollow' target='_blank'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_WPmAlO7s865JP1suzr4aOv5NgboRfPqrKa01H27DTYKldQEiQ3TxgtQ0e6YKTlBaGfH2QdjBPW0_ojW7udQte917_FpmBMHChPViZbSnuXAyku_HUzjEfw6oLpL7xMsls0_7RUi4P4/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.youtube.com/YOUR YOUTUBE USERNAME" rel='nofollow' target='_blank'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibkP_1K3FFtjCEEENEHYIF6NTYsHXugRpjWzIII6cIYTb9_U2NJWajGFXjpIXJoh6wQ9VGmAA8r3jJsgEe-FvrQDeh9VFnlHHTTgTys1LxXKQwQN3pNfp5q82zShUNwCU0Vro0j2Renjo/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/Abhidinvader" rel='nofollow' target='_blank'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzrAe1CzGgXbJYVeZ_QOv7eWiZ1_jQ4zOHt4ZnNUTB9WO7kypDixfcjljvOUDJE6d-xEhC5RzOnKb2cqZzZhzOZPcEPTj6zyeu0i08GTb2Rk9HLxY7J-pMf8JxfKCtXF6UmroTw564ecI/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/topbloggertrickstk" rel='nofollow' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLry7J7c7HfNblsOyaNzTAbnMK7W5LyCZE3BbcB3GjJ3y0XBMrhmQCdS8V9PX_UPcRsjMtSjtIaVfdBcofX9nFFbpQHgwILbH_Ski8mHXcbL9Gs-G_yZFVDPWW4kr9Xi6ZWHXC0IAVNs/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

Remember Note: Replace yellow highlighted URLs with your own social profile links.

ADD SUBSCRIPTION BOX BELOW EVERY POST

Here I'm presenting RSS subscription box with no images or complex scripts. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!

Add it to Blogger

• Go to Blogger > Design > Edit HTML
• Backup your template
• Check the "Expand Widget Template" box
• Search for this,

<data:post.body/>

• Just below it paste this code,

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='topbloggertrickstk'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Now make these changes,

• Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace topbloggertrickstk with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk

• Save your template and you are all set!

ADD MULTI-COLUMN FOOTER WIDGET

This new widget is footer widget which can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better.

Add the Multi Column Footer Widget To Blogger-

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

• Go To Blogger > Design > Edit HTML
• Backup Your Template
• Search for ]]></b:skin>
• Just above ]]></b:skin> paste the code below,

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

• Now search for </body> and paste the following code just above </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

• Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

• In order to reduce or increase the overall width of the widget simply change width: 960px;

• If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

• Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.
After you have added the fifth column then remember to change width: 23%; with width: 17%; 
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard.

ADD COOL SLIDESHOW BAR WITH NAVIGATION

Hey guys, hope you all are fine. In today's tutorial we will get know how to add a cool and awesome looking slideshow bar with navigation feature. Slideshow bar is much useful when we are presenting our most popular post, or the post which we want to highlight to our viewers. It can just also be used to give slideshow of simple pictures which you like. So lets begin with the detailed steps.


How to add the Slideshow to blogger?

The methods as usual are more easy than you can imagine. Follow up,

1. Go To Blogger > Design
2. Choose Add a Page Element
3. Then choose HTML/JavaScript widget
4. Inside the widget paste the code below,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
<style>
#slider {
    position:relative;
}
#slider img {
        position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7io1Fkn-asOtKSBcfWTQRezfcDl0plcQD7U-fpuexEFWTEeMkb_Pfo9aFQ91VLJkLzuDoc8gte2OMnAg4o-9at4TwgxbrqWdupI6fX03Ca7pSE6FzdaIuB4Rfj4fm6R7fG5huv0yNP2A/s400/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRBvpKMw19vq_0QCwCwt3TemJImVILMnvq0SlNx2v5EI5tlPYfzWHH07jU-Z4tsP8bbVHFXzK8_FEY6VkEIIay1RtzaORXjxUN3hAFYiRG1TM-mihPKgv5Z-SH6AlQYJMpq8MALWZpCx4/s400/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size:16px;
    padding: 10px 0px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
.clear {
    clear:both;
}
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
</style>
<div id="slider">

<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="#htmlcaption" />
</div>
<!—Write Descriptoon With Links In this Part—>
<div id="htmlcaption" class="nivo-html-caption">
Cool na? :) Now Learn How to create one by <a href="http://www.topbloggertricks">Clicking here</a> </div>

<br/>
<br/>

How To Customize the Slider?

Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"
If you wish to add effects to text or use a link then use title="#htmlcaption"  instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.
Note:  Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial.

How To add More Images?

To add another image simply paste the code below just above </div>

<img src="URL Of Image" alt="" title="Description Goes Here" />

ADD MENU TAB WIDGET TO BLOGGER LIKE WORDPRESS

This tutorial will teach you how to add multi-tab widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.


Add this Multi Tabbed Widget To Blogger-

1- Adding the JQuery and JavaScript to your Blogger templates

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Just below it paste the following code –> MBT Menu Tabs JavaScript
5. Save your template
6. Done!

2- Adding the CSS

1. Inside your template search for ]]></b:skin> again
2. Just above it paste the code below,

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Color code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

1. Now Search for <div id='sidebar-wrapper'>
2. Make sure the widgets box is unchecked.
3. Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                      
</div>   
<div style='clear:both;'/>                       
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                        
</div>   
                       
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<div style='clear:both;'/>

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.
   4.  Now Go To Page Elements. You will see something like this,


Start adding your widgets and after you have added all your widgets then simply view your blog to see it in action.

Source-Mybloggertricks

COOL BLOGGER NOTIFICATION BAR

This tutorial deals with the cool notification bar which works best by grabbing readers attention and helps you to focus readers towards important deals, announcements or any story. It functions on pure JQuery light-weight functions and is compatible with all major browsers including IE9.

Custom, unique and non-commercial plugins are always better then public designs. HelloBar is now too common and used everywhere and you may not like the limited design customizations offers provided by them along with their logo on the plugin. HelloBar also requests URL redirection and you need to register to use it. Scripts are stored at Hellobar server and the browser needs to send a request in order to display it on your blog or site. Really not appropriate if you don't like redirection and attribution links.

Blogger Notification bar requires no registration and provides far better design flexibility. The scripts are less than 6KB in size and fully hosted at your server.  You can change its look and theme to any color that may blend your layouts. Every single element is well structured and can easily be configured. A perfect tool to play with. 

Installing Notification Bar on blogger

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like WordPress.

• Go To Blogger > Template
• Backup your template
• Click Edit HTML
• Search for <head>
• Paste the following scripts just below it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'>
//<![CDATA[
var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,
showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},
_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],
showAfter:0,
keepHidden:true,
duration:300,
closeable:true,
height:40,
borderSize:1,
easing:_0x519b[7]});} );
//]]>
</script>

• Next search for ]]></b:skin>

• Just above it paste the following styles

#bloggernotificationWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}

#bloggernotification {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #cccccc;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #fff;
}
#bloggernotification a{
text-decoration: none;
color:#FFFC00;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}

#bloggernotification a:hover{
text-decoration: underline;
}

#bloggernotificationWrap #closebloggernotification{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2EXc9-QgZUea4x3bu5dkAqcGuU5wbjKVJL-eeAMOYz3MkLueV28Igt1Js0w8rIqzZjxDlOXz6RCG8qY9_RujhAMe04PoE6nGtEyyE70XAWuNfXnNd4T1pled76lWyptRPRtldQSen9B4/s400/light.png) no-repeat 0 center;
cursor: pointer;
}

#bloggernotificationWrap #closebloggernotification:hover{
background-position: -21px 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification{
background-position: right 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
background-position: -42px 50%;
}

#bloggernotificationWrap #openbloggernotification{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
background: #2E2F2E;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:0px 1px 3px #666;
}

#bloggernotificationWrap #openbloggernotification span{
display: block;
width: 21px;
height: 34px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp2EXc9-QgZUea4x3bu5dkAqcGuU5wbjKVJL-eeAMOYz3MkLueV28Igt1Js0w8rIqzZjxDlOXz6RCG8qY9_RujhAMe04PoE6nGtEyyE70XAWuNfXnNd4T1pled76lWyptRPRtldQSen9B4/s400/light.png) no-repeat right 50%;
}

Make these Design changes if you wish:

• To change the background color of the bar simply edit #2E2F2E
• To change text color edit #cccccc
• To change hyperlink color edit #FFFC00
• To change anything else, just post me your query in the comment form below! :)

      8.  Finally to make the bar appear just add the following code below <body>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>

Write Your Notification Message Here

<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

<br/><br/>

• Save your template and you are all done!

Creating links  

To create links inside the notification bar use the following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

You must add the class='link' , which is required by the script.

Source-Mybloggertricks