Sticky bar for your blogger

sticky bar for blogger alltechcorner.com

As you can see the image. like the same Today im gonna show you how to put a sticky bar for your blogger. like as its name the bar stick to the top of your website and scrolls with page. Its an awesome sticky bar and can used for any text, recent posts, important posts or any images with link.

Step 1: Go to Dahsboard –> Template -> Edit HTML ( If you dont know how to edit your template, read my article How to edit your blogger template effectively )

Step 2: Now find for ]]></b:skin> in the code by using CTRL+F function.

Step 3: Right above the ]]></b:skin> copy and paste the below code.

#atc-stickybar{
background: #0082ff url(‘http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png’) repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#atc-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,”Helvetica”,sans-serif;
line-height: 24px;
}
#atc-stickybar a:hover{
text-decoration:underline;
}
#atc-stickybar p {margin:0; list-style:none;}
#atc-stickybar img {vertical-align: middle;
margin-right: 6px;}

In above code #0082ff represents the color the bar. If you want to change it, then you can change the color of the bar with Hex color.

Step 4: Now again search for <body> in the code.

Option 1: If you want text copy the code below and right after the <body> code paste the following code.

<div id=’atc-stickybar’><a href=”http://www.alltechcorner.com”><img src=”https://lh4.googleusercontent.com/-LCJkK28d4BE/UxnRi4hLMbI/AAAAAAAACOI/yugjG6BXbQM/h120/n.png” /></a>
<a href=’#‘>ADD TEXT HERE</a>
</div>

In above code # is equal to your link. You have to replace # by your link and replace your text by ADD TEXT HERE.

Option 2: If you want to put any image in the bar just copy the code below and paste after <body>


<div id=’atc-stickybar’><a href=”http://www.alltechcorner.com”><img
src=”https://lh4.googleusercontent.com/-LCJkK28d4BE/UxnRi4hLMbI/AAAAAAAACOI/yugjG6BXbQM/h120/n.png”
/></a>
<a href=”#“><img src=”YOUR IMAGE LINK” /></a>
</div>

In above code # represents your link and YOUR IMAGE LINK represents the link of the image. Replace them with your link and image link.

Option 3: If you want to put both image and text in the bar copy the code below and paste after <body>

<div id=’atc-stickybar’><a href=”http://www.alltechcorner.com”><img
src=”https://lh4.googleusercontent.com/-LCJkK28d4BE/UxnRi4hLMbI/AAAAAAAACOI/yugjG6BXbQM/h120/n.png”
/></a>
<a href=”#“><img src=”YOUR IMAGE LINK” /></a>
 <a href=’#‘>ADD TEXT HERE</a>
</div>

As mentioned above replace both # with your links of destination and YOUR IMAGE LINK with your image link and your text with ADD TEXT HERE.

Still if you have any doubts let me know through comments.

About All Tech Corner 69 Articles
All Tech Corner is all about latest Technology News, updates from the world of mobile phones, gadgets, computers, tricks and tutorials. We work hard to serve you best and to satisfy your hunger of Technology

1 Trackback / Pingback

  1. How To Create An Awesome Tabbed Content Site Map For Your Blogger – All Tech Corner

Leave a Reply

Your email address will not be published.


*