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!

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-680×450′ 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-740×720′ 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!