Guidelines in Guest Posting Here in BTAT

Blogging sometimes ask  help to some friends who could be trusted  in some other way. However, this is an important opportunity for all those who wish to add their exposure in blogosphere by sharing their extraordinary posts with technology lovers around the globe.

If you wish to be our seasonal guest posters, please submit your articles at allmeetmoneymaker@gmail.com.
 Guest authors are informed of the following guest posting guidelines and conditions:

Guidelines on Guest Posting

• Your post must be of at least 500 words. It must be in HTML mode.Link builders are not welcomed here. 


•  If necessary, the post must be unique in every side,  duplicate free content and must follow copyright laws. Any duplicated article or choppy paragraphed article will be discarded. All posts are thoroughly scanned by the administrator. Any copied paragraph if found will be considered as violation of copyrights. 


• New or fresh blogging tutorials and technology news are highly appreciated.


• Standard English Grammar rules must be fulfilled.


• Authors will be granted a link to their homepages, facebook fan page and twitter account .
• Topics on the following areas will be accepted: Blogger, Web designing (CSS, HTML, JQuery, Javascript), Social Media News, Facebook, Google Plus and Blogging on smart phones.

I believed that you can  fulfill all these simple general rules  and we will be glad to  welcome you  to  BTT  as part  of our family.  Have a try now. It is your time now to grow in your blogging career.

This blog is for all of us buddies and in return we will help you out as much as you helped us with your consistent motivation and feedback.

Add Guest Poster Profile Below Every Post Titles

One of the most common problems of blog authors in their blog is the lack of time to make some quality posts and often have to rely on Guest posters to do the job. In return we offer them with quality back links and advertisement of their blog too. In order to better compensate them in their untiring job, it is important to display some info about them in a polite, attractive and professional manner. In return, this will encourage more and more people to write quality articles for you blog.  Furthermore, you can also use this widget to show your own info below the posts you have published. See screenshot for below an the example .

View Guest Poster Info Below Post Titles

There are two parts of this tutorial, the adding of the CSS and the the second part deals with the inserting of the HTML in your Blogger post editor's page.
So then Lets jump straight to the first part!
Step 1. Go To Blogger > Design > Edit HTML Back up your template
Step 2. Search for the code below

]]></b:skin>

Step 3. Just above it paste the code below,

/*----------Guest Poster --------*/
.btt-gp img {
margin:0;
border:2px #158aee ridge;
}
.btt-gp-about {
font-size:15px;
margin:0 auto;
padding:3px;
width:560px;
background:#edf6ff;
border:red solid 1px;
min-height:130px;
}
.btt-gp {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.btt-gp-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:14px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}

 Step 4. Save your template and jump to the second part of the tutorial below which is the adding of the HTML in your Blogger Post Editor's page.

Now whenever you publish a Guest post at your blog, simply switch to the Edit HTML Mode of your Blogger Editor's page. And drag to the bottom of the HTML codes and just at the end/buttom of it add the code below,

<div class="btt-gp-about">
<div class="btt-gp">
<img height="70" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduhyphenhyphenZ2ST4PB7BX2PCQgvRqY4xUZ8O7f5X5yMm50f8tHcALVuxmnZ8mYF68224sRdP4pR45egeWdTm-RLgFdIIYBFjUEu_kDwxUsV5wocue0CfjXJWmDcBDoXZ-fSmb5EvA2oVSB6pyH4/s1600/blogger+pic.png " width="80" />Princess Gainess </div>
<div class="btt-gp-text">
<strong>About the Guest Author:</strong>
      <br />
Princess Gainess is a passionate proffessinal blogger who enjoys writing articles on Technology, Make Money Online and Blogging niche. She is our No. 1  Contributor and co-author of all blogs under our network.<br />
Follow him @ <a href="https://twitter.com/blogtipsandtrix">Twitter</a> | <a href="https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603">Facebook </a></div>
</div>

Customization:

• Change the bold orange text with the image url of the Guest Poster.
• Replace Princess Gainess with the name of your guest poster.


• Replce the text in pink with your title of your Guest Poster Info widget.


• Replace the texts in blue with a short  profile of your  guest poster.


• Change the bold text in bold black (twitter link) and italic (facebook fan page link) with the necessary informations. 

The image size would fit perfectly if it is 200px by 125px.

I just hope you find it useful and worth trying. Take care of families  buddies. :>
Happy Blogging To All Of Us!!!

Donations to Help Victims of Typhoon Haiyan

Today I will not be  posting tips and tricks in blogging but a sad news which I have personally experienced here in our country and that is the  devastating effect brought by typhoon Yolanda (Haiyan). This cylone ripped our country  Philippines (central Visayas) on Friday, causing a 20-foot rise in sea waters and packing winds of up to 147 miles per hour. Authorities are calling it one the country's worst natural disasters on record.


More than 10,000 people are believed to be dead in the city of Tacloban alone, with death tolls continuing to rise, according to the AP. While the eastern island of Leyte was hit hardest, there was also extensive damage to roads and houses on neighboring islands. Around 4 million people were affected by the typhoon.

Rescue and relief efforts are underway, with many organizations mobilizing teams on the ground to get victims access to clean water, medical supplies and food. If you want to help, consider making online donations.

We've compiled a list of  organizations to which you can contribute online:

• The Philippine Red Cross -  Donations will help mobilize teams on the ground with rescue and relief efforts.
• Habitat for Humanity -  Donations will help create shelter-repair kits for families rebuilding their homes.
• Salvation Army -  Donate online for the Salvation Army's relief efforts, or text TYPHOON to 80888 to immediately donate $10.
• Catholic Relief Services - CRS is helping with the storm's aftermath by getting supplies and staff into the area.
• World Vision -  World Vision is working to get food and resources to those in evacuation shelters.
• The United Nations World Food Programme -  The WFP has set up an online donation page that will help rush food and resources to the regions affected.

• GlobalMedic - The Canadian organization is working to get clean water to victims.


• UNICEF- Donations will help children gain access to medical supplies and clean drinking water. "Safe drinking water can be impossible to find after such a massive natural disaster. And without it, a child will drink whatever water she can find, no matter how dirty or diseased. That drink can quickly lead to diarrhea, disease and death," UNICEF president Caryl M. Stern said.


•  Save the Children- Donations will help children and families in the Philippines, Laos and Vietnam. Ten percent of every donation will go toward preparing for any future disasters in the area.


• Habitat for Humanity- Donations will help create shelter-repair kits for families rebuilding their homes


• ABS-CBN Foundation- Initially, the organization's primary responsibilities were to generate welfare funds by broadcasting the plight of those in need of assistance and ensuring the proper allocation and utilization of solicited help.


• GMA Kapuso Foundation- For monetary donation, the Foundation accepts cash or check which can be personally delivered to the GMAKF Office or deposited in its bank accounts. An official receipt is automatically issued for donors who bring their cash donation to the GMAKF Office. For cash deposits, the donor is requested to fax or email a bank transaction slip indicating intended recipient and contact details for sending of official receipt. 

Reference: Mashable.com, wikipedia

Create Multi Level Drop Down Menu In Blogger

 A good day to all of us brothers in this field of work.This is our 2nd drop down menu so far, here we will be  sharing another cool drop down menu designed by dynamicdrive and bloggerized by mybloggertricks.This is a multi level drop down menu  wherein it will help you more in  organizing your blog important links, and also it will help your readers to easily navigate through your blog since it is our dream to let our users impress our blog as they land on it.The HTML structure of this menu is so easy as you have to use tags, but you have to add a different ul id for a new drop down, that's the little negative side of this  drop down menu. But don't worry pal, just follow below steps carefully and you will successfully integrate  this menu to your blog.

Create Multi Level Drop Down Menu In Blogger

Step 1. Go to Blogger Dashboard
Step 2. Click Lay- out
Step 3. Hit the Add a Gadget button >> Select the HTML/Javascript
Step 4. In the empty/blank space provided, place the CSS/scriptscript below

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.Bloggingtipsandtrix.blogspot.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}
.mattblackmenu li{
display: inline;
margin: 0;
}
.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited{
color: white;
}
.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}
.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}
</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>
</li>

<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

Simple Customizations:

• Replace the # symbols with your page link/URL
• Replace the bolded black texts with Page Titles
• To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1. Change the drop down number accordingly.
• Normal li and ul rules apply here to create sub menu and sub sub menu links.
• Main links are mentioned first and drop down menu links are mentioned separately after the JavaScript call function.
• To change the background color of the menu simply edit background:
#414141

Step 5. Save your widget and you are all done!

Visit your blogs to see the menu working just perfectly. Good Day Pal and Happy Blogging!!!

JavaScript Image Slider For Blogger

An apology to all my vivid readers since I was not updating my blog for the last  few days  but don't worry because today I  will be  sharing a cool slider which works with JavaScript and no jQuery and flash is needed. This contains a beautiful slice effect which slices image into 12 parts, this main feature increase beauty of the slider and attract more to your readers to stay longer in your blog/site .Another great feature of this slider is it is highly customizable so that  editing may not be a problem  as you wish and which will perfectly suits to your blog. I would say thanks menucool whom the the credit should go and I have created a bloggerized version of this slider to works perfectly with your blogger blog. I know some of you already know already but for those who have not yet seen this, you can proceed to the steps below for the implementation.

You  can see the screenshotshot above which I used before in  my sidebar,  I utilized the images from the  different scenes of our country who recently suffered from the disaster made by an earthquake.

Live Demo

JavaScript Image Slider For Blogger

Step 1. Go to Blogger Dashboard
Step 2. Layout
Step 3. Click on Add a Gadget
Step 4. Select HTML/JavaScript (below header) Paste code inside it,

<style type="text/css">
/* By Bloggingtipsandtrix.blogspot.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
     
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoBwHp0elv-AwIsZQtVDYHuEyxQDsbi_OmfbcQjSjKVt8dNc5vRWyHGcpm3DmQh370geNcZGp81LDYfjPdHVUFYCq8NT7_YDPp_kvYvdzPQtri73Pxf6vW7Lv_5bqAij3gzVll7GTXKdku/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0rnG24qKzug5iFJRXiFfBI_Wjaig5MPemu2KbpF0onPNlg2lG7py3K3lmiX_lA-gV4cq8n96E1Pa6cw9ZhJT_E9p3iEwWybuyDDUhYNPQeBt7pZWLNHcN7h4scZAau3-eQPyhB21FgpiG/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlAo_g4xaU_5yz68PLJdTck549EyLgNkkNdod6uEOKHAmqCp4GW3u2M2heOLuO6SGH5tqg-WvIEEl4IokYUgaa4Cws3HRQI-Jk2zUTaotEX6e5lz1jckbbYf9rwfRZC24FlQbqCP-mpSb/s1600/image-slider-1.jpg" alt="Image slider1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNv4YHEdoyibKbWKBV6FwqWhMgqJM9scX7Csrag5IZRaDSAblcVnLlN8aaCPmo7jpHDTz1DHDvsqabbrE79X5spSiOHhEvayEJpfTezN8QKFdeO3qOrcd306MTcDKwvjewF0qhxHIB3f0/s1600/image-slider-2.jpg" alt="Image slider 2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyOce91qk_P7k4BddL3-oAVW2b6uzWtjvCZ4iZ0VxJ8Kt7tggyFvAmsfDqgYRmp0wGGgtApHEplAmdpcVrJ7fSW3WNy73tnBYeYgc8fQ5zASIY9zPbBInsjhfpyHZIGMAEGDZeA56soGF/s1600/image-slider-3.jpg" alt="Image slider 3" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwos4pgPxP3zQD5ryOIL5ke9aLB8UKJ5pGvDiAlq3-b7KzRcr8968BBQ_p8NsEnNtZacnzV4Y-0QrvdAImxlT2el2glCuNpPMoYBu71tJuBuOZiYyKOZDCMXm4ZJDZNZe-QcjNsrJ94Ky/s1600/image-slider-4.jpg" alt="Image slider 4" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AV_Oi0PlRE-u69j5m0NTDkSuAef5Nan1FnTgC0KpU-tOA7bT3-KDAz2YEXJq0S3Xp39OwDcdC-t3yvWSRTRAhR_b50jB6sOvrWsZcKXJg-xYLV25sVexUMaSt3BIR_5BjvLXMsccw0zu/s1600/image-slider-5.jpg" alt="Image slider 5"/></a>
</div>
<div id="
Image slider1" style="display: none;">
Image Slider by <a href="http://bloggingtipsandtrix.blogspot.com/" target="_blank">bloggingtipsandtrix.blogspot.com</a>
</div>
<div id="
Image slider 2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Customizations:



• Change the Image URL in black bold texts with your own.
• Replace the texts in orange bold with your own image caption below the image

Step 5. You may now save your work.

Blogger Notification Bar With Up and Down Closeable Button

For the past few days, I was not able to update my blog! And now in order to cover- up those times with out touching my computer, I will share to you some tricks which I have learnt from MBT.  Today, I will share to you on how to  add Blogger notification with up and down arrow which when you click it the bar will interact accordingly. Personally, I love to share it with my readers since it will add beauty to their blogs.

  

                                                       See the live demo here.

Adding Blogger Notification Bar With Up and Down Closeable Button

Please follow the  simple steps  below in order to add the widget to your blogger blogs.
Step 1. Go To Blogger > Template > Backup your template
Step 2. Click Edit HTML  button
Step 3. Search for the code below Paste the following scripts just below it:

]]></b:skin>

Step 4. Just above that code paste the code below

 /* ----Blogger Notification bar by www.Bloggingtipsandtrix.blogspot.com----- */
#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 #158aee;
    position: relative;
    box-shadow:0px 1px 3px #666;
    z-index: 9998;
    text-decoration: none;
    color: #dddddd;
    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:#000000;
     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/AVvXsEihuRYSDBKWzx_u9nwMoANCBVDtL-lFv9s-Z6wWd9UwsISY0IiQHcGtO_fDCeKGdZ82GSWu9oLihIYaYuUNq1rD7yWQRDqEYjyEKjQDzV83r7CbOpS8ApaBy_OW9xdMKJzJP-IzvAT-sHVU/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: #158aee;
    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/AVvXsEihuRYSDBKWzx_u9nwMoANCBVDtL-lFv9s-Z6wWd9UwsISY0IiQHcGtO_fDCeKGdZ82GSWu9oLihIYaYuUNq1rD7yWQRDqEYjyEKjQDzV83r7CbOpS8ApaBy_OW9xdMKJzJP-IzvAT-sHVU/s400/light.png) no-repeat right 50%;
}
#bloggernotification img{
display:none;
}  

Customization:

• If you want to change the background color of the bar simply change 158aee. You can use our color code generator to select a wide variety of hexadecimal colors.
• To change the text color, replace dddddd.
• To change hyperlink color edit 000000.

Step 5. Finally to make the bar appear just add the following code below </head>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>
Write Your Notification Message Here Write Your Notification Message Here
<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>
<br/><br/>

Step 6. Now look for the code below

<head>

Step 7. And paste the script below just  after or below that code in step 6.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<!--Blogger Notification Bar by www.Bloggingtipsandtrix.blogspot.com-->
<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>

Creating Links Inside your Notification Bar

In order to create links inside the notification bar use the code below:

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

Step 8. Save your template! Bravo!!!!!
Take care your loved ones and yourself too!
Happy Blogging Pal!!!!!!