As you can see the image. like the same Today im gonna show you how to put a sticky bar in 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{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.
background: #0082ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyjT5cjRikHb3Ap5PMCO2hxEELFf1UHjEOS1rj9lLxJldg-25vqAX0m838v5WyULk5qzitOwJMtLb1SiZ4f6ptvCaHysoYxuQHej4J7WGehxat6lJ-qdgI6gN9XTy5wHFXV894AfHmzk/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;}
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPylgqsjQony6SzF3vBoiz9Qz5aLUuLWx19xHu-_iP6ZJMLy8HQNShOc3A7z6BYojq4hX1i6dBQspm8rzqmMUz0GiRiiEK-lP1oGR7-y8-pC4a8p_DbhCrtPKKXkIJzZUmey1wGy9uUYEC/h120/n.png" /></a>In above code # is equal to your link. You have to replace # by your link and replace your text by ADD TEXT HERE.
<a href='#'>ADD TEXT HERE</a>
</div>
Option 2: If you want to put any image in the bar just copy the code below and paste after <body>
In above code # represents your link and YOUR IMAGE LINK represents the link of the image. Replace them with your link and image link.
<div id='atc-stickybar'><a href="http://www.alltechcorner.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPylgqsjQony6SzF3vBoiz9Qz5aLUuLWx19xHu-_iP6ZJMLy8HQNShOc3A7z6BYojq4hX1i6dBQspm8rzqmMUz0GiRiiEK-lP1oGR7-y8-pC4a8p_DbhCrtPKKXkIJzZUmey1wGy9uUYEC/h120/n.png" /></a>
<a href="#"><img src="YOUR IMAGE LINK" /></a>
</div>
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPylgqsjQony6SzF3vBoiz9Qz5aLUuLWx19xHu-_iP6ZJMLy8HQNShOc3A7z6BYojq4hX1i6dBQspm8rzqmMUz0GiRiiEK-lP1oGR7-y8-pC4a8p_DbhCrtPKKXkIJzZUmey1wGy9uUYEC/h120/n.png" /></a>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.
<a href="#"><img src="YOUR IMAGE LINK" /></a>
<a href='#'>ADD TEXT HERE</a>
</div>
Still if you have any doubts let me know through comments.
0 comments:
Post a Comment