Add Mashable Sign-in Bar To Blogger Blogs!

Mashable is very popular website among social media and technology blogs.They have a very clean design.I liked the design they used and i am trying to convert Mashable template to blogger template in xml format.Whenever i visit there i saw a cool sign-in bar at the top right corner like shown in the picture above.

If you want to add this on your blog simply follow these steps!
Steps To Add A Sign-In Bar Like Mashable
Follow these steps!

1.Go to Blogger Dashboard>Design>Edit Html.
2.Find this code in your template, (use Ctrl+F to find the code)

]]></b:skin>

3.Just above the code given in step 2, add the following code,

#sign-in {
position: absolute;
top: -1px;
right: 8px;
background: #8DC469;
border: 1px solid #AFE57A;
border-bottom-color: #497A18;
border-right-color: #305010;
box-shadow: rgba(0,0,0,0.15) 3px 1px 2px;
border-width: 0 1px 1px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-o-border-bottom-left-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-o-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 5px 5px 5px;
font-size: 1.25em;
color: white;
text-shadow: #407120 1px 1px 1px;
z-index: 9999;
padding-left: 10px;
}

.facebook-login, .twitter-login
{
display: inline-block;
background: url(http://www.blogager.com/wp-content/uploads/2012/01/fb-logins.png) center left repeat-x;
color: white;
height: 21px;
text-indent: -9999px;
width: 90px;
line-height: 21px;
padding: 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
font-family: "lucida grande","tahoma","arial","helvetica";
font-weight: bold;
margin: 0 6px;
}
.twitter-login {
background: #ADD5DB url(http://www.blogager.com/wp-content/uploads/2012/01/twitter-logins.png) top left repeat-x;
background-image: url(http://www.blogager.com/wp-content/uploads/2012/01/twitter-logins.png);
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-position-x: 0%;
background-position-y: 0%;
background-origin: initial;
background-clip: initial;
background-color: #ADD5DB;
width: 85px;
border-color: #9DC3D3;
border-top-color: #9DC3D3;
border-right-color: #9DC3D3;
border-bottom-color: #9DC3D3;
border-left-color: #9DC3D3;
color: #3C5C66;
text-shadow: 1px 1px 2px white; }
.greet_block {
background:#fff;
border:1px solid #eee;
margin:10px 0;
width:100%;
}

4.Now add the following piece of code just below your navbar.

<div id='sign-in'>
<span style='color: white; font-family: &apos;Helvetica Neue&apos;, Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 11px; text-align: -webkit-auto;'>Welcome to ShareTheTricks! Join us on</span><a class='facebook-login small popup popup-680x450' href='http://www.facebook.com/pages/NewTricksNTips/303547589685015' target='_blank'>Facebook</a><span style='color: white; font-family: &apos;Helvetica Neue&apos;, Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 11px; text-align: -webkit-auto;'>and</span><a class='twitter-login small popup popup-740x720' href='http://twitter.com/NewTricksNTips' target='_blank'>Facebook</a>
</div>
5.You have to find an appropriate place for it for example:Navbar or Subnavbar.


Customizations:

Replace All the lines marked with red with your Facebook Page and Twitter page respectively.If you need any help just comment below.Make sure to subscribe to our RSS feeds to get future updates from us.At the last please like our Facebook page below!

8 comments:

  1. @Arpith
    Please let me know where did you added the code provided in the last!

    ReplyDelete
  2. Really good looking bar thanks for the share

    ReplyDelete
  3. @Hammad
    Thanks for the comment!
    I saw your site and yo customized it.Looking nice up there.

    ReplyDelete
  4. @Arpith
    I found that you are using the old thesis theme!
    Wanna get the newer version of ShoutMeLoud thesis theme read this post:
    High Quality Magazine Templates For Blogger

    ReplyDelete
  5. What do you mean by "add the following piece of code just below your navbar"?

    Can you tell how to add it?

    ReplyDelete
  6. @Sid Bandhu
    In Which blog you want to add it? so that i ca help you accordingly

    ReplyDelete

Don't Spam Please !