Transparent Sticky Bar With Subscribe|Like|Follow Link For Blogger:Digital Tech Inspiration

Add a transparent sticky bar to your blogger blog as to grab the attention of all visitors. A sticky bar is now used widely by many blogs/websites for notifying visitors of important updates, offers, latest news etc.

Stickybar is just a custom version of hello bar but it has no Ads. There are Facebook Like, Twitter Follow link added which will help you increase your fan following and Subscribe Link for your loyal readers to get your latest post updates directly to their mailbox. View the live demo below to see the bar in action.

LIVE DEMO

How to Add Transparent Sticky Bar With Subscribe, Like and Follow Link to Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

</body>

STEP #7: Just above it paste the following code,

#wt-sticky

{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5yN5Ij1otx93I35Aspj70DYTe-2M296jahZvhNjbV1KZ_Meo8xMIxnz6Q752VMs14CuN81wBY7jBhWaq3n4s7e3QeSnUVdnpLTZdKj4jGPfSsV3Ee25-pwydqfWgRw0Y2qjCNBR6OZq4/s1600/ut-bg.png') repeat;

color:#fff;

text-align: center;

margin:0 auto;

border-top: 1px solid #fff;

height:28px;

font-size:13px;

position:fixed;

left:30px;

bottom:0;

z-index:999;

width:95%;

border-top-left-radius:15px;

border-top-right-radius:15px;

display:block;

font-weight: bold;

font-family: arial,"Helvetica";

font-color:#fff;

}

#wt-sticky:hover

{background:#333;}

#wt-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}

#wt-sticky p a{ text-decoration:underline; color:#FFFF33;}

.wt-cross{display:block; position:relative; right:15px; float:right;}

.wt-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}

</style>

<p>Get Latest Updates: <a href="http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL" target="_blank">Subscribe Now</a> | <a href="http://www.facebook.com/WIKITECHNOL" target="_blank">Like Us On Facebook</a> | <a href="http://www.twitter.com/WIKITECHNOL" target='_blank'>Follow Us On Twitter</a></p>

</div>

function hide_cross()

{

crosstbox = document.getElementById("wt-sticky");

crosstbox.style.visibility = 'hidden';

}

</script>

How to Customize?

Replace WIKITECHNOL with your feedburner username.
Replace WIKITECHNOL with your Facebook username.
Replace WIKITECHNOL with your Twitter username.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.