Hi friends in this tutorial I will tell you about how to
create a welcome a bar for your blog. Welcome bar is widely used by bloggers to
provide their special offers or updates on the top of the website.This sticky bar is used to show updates or important news or information, hence you can place it either in top of blog or bottom of blog.. It is work
likes an ad of your blog. A welcome bar helps your visitors to go some other or
special link or as its name suggest it is widely used for welcoming your
visitors on your blog, Some special websites like addthis.com offers you to add
a welcome bar to your blog with a special link or whatever you want to show a link,
but sometimes that welcome bar did not work or does not appears when visitors
come to your website. I also had this problem so I decided to make a great and
sticky welcome bar for a blog, In this sticky welcome bar i used various codes and java scripts and used css styles to make it stylish, but you can also change it according to the theme of your blog.So let's begin-
...................................................................................................................................................................
How to add a CSS Sticky Welcome Bar In Blog With Hide Button ?
...................................................................................................................................................................
Follow these easy Steps To Add A Sticky Welcome Bar Like This-
1. Go To Blogger
2. Now go to Dashboard>Template.
3. Select Edit HTML. (Recommended: Backup Your Template before performing any function)
4.Now Search For-
]]></b:skin>5.Now just above bskin paste the following code-
#ht4u_bar{6.Now search for-
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUcQtjBVwFLNyZDX8pHjFv8HHVWS6XMbiTePYzbdYyumMkVJpkBYjADMOYzS8wKw9ZyE_oq7CvAC2xSG3rJqH71HlcB-v24TooMfowlld4a9kvuJ8RwqXq_PDD8aDiVyyDPyQigbOX3HI/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;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#ht4u_bar a{
text-decoration:underline;
color:#E2E504;
}
#ht4u_bar a:hover{
text-decoration:none;
}
#ht4u_bar p {margin:0; list-style:none;}
#ht4u_bar img {vertical-align: middle;
margin-right: 6px;}
</head>7.Paste the following Javascript code just above it-
<script type='text/javascript'>8. Now finally search for <body> and paste this code just below it.
//<![CDATA[
var ht4u_arr = new Array();
var ht4u_clear = new Array();
function ht4uFloat(ht4u) {
ht4u_arr[ht4u_arr.length] = this;
var ht4upointer = eval(ht4u_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ht4usrc = document.all? document.all[ht4u] : document.getElementById(ht4u);
this.ht4usrc.height = this.ht4usrc.offsetHeight;
this.ht4uheight = this.cmode.clientHeight;
this.ht4uoffset = ht4uGetOffsetY(ht4u_arr[mbtpointer]);
var ht4ubar = 'ht4u_clear['+ht4upointer+'] = setInterval("ht4uFloatInit(ht4u_arr['+ht4upointer+'])",1);';
ht4ubar = ht4ubar;
eval(ht4ubar);
}
function ht4uGetOffsetY(mbt) {
var mtaTotOffset = parseInt(ht4u.ht4usrc.offsetTop);
var parentOffset = ht4u.ht4usrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ht4uTotOffset;
}
function ht4uFloatInit(ht4u) {
ht4u.pagetop = ht4u.cmode.scrollTop;
ht4u.ht4usrc.style.top = ht4u.pagetop - ht4u.ht4uoffset + "px";
}
function closeTopAds() {
document.getElementById("ht4u_bar").style.visibility = "hidden";
}
//]]>
</script>
<div id='ht4u_bar'>THERE WRITE YOUR TEXT OR MESSAGENow Change the color , text type , and any other thing according to your blog template.
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpQu8Gqx9WRjS91jpSpEIWSjAN0Zxk4Z8dtKM9qNu7tjXd3KS-p7dCKm7aOyqKiXuDnumSEPIMiHYcbLCIpAiLnNTvurkPBv9DJP9P1IINGikNTu86XxQb4FbGGXPDatx7UqCUMxHXAE/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div> //**hackintricks4u.blogspot.com**/
<br/><br/>
Finally save the HTML code , Now A Sticky Welcome Bar will be appear in your website.
<div class="alignleft">
<script type='text/javascript'>
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'coohactriandt-20';
amzn_assoc_region = 'US';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'RKEST76CTWC3UAYQ';
amzn_assoc_campaigns = 'countbf';
amzn_assoc_p = '12';
amzn_assoc_banner_type = 'promotions';
amzn_assoc_banner_id = '1YBZEC8N4E8KAC6C7VR2';
amzn_assoc_width = '300';
amzn_assoc_height = '250';
</script>
<script src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>
1 comments:
Click here for commentsI Want to use this medium in appreciating cyber golden hacker , after being ripped off my money,he helped me find my cheating lover he helped me hack her WHATSAPP, GMAIL and kik and i got to know that he was cheating on me, in less than 24 hours he helped me out with everything, cybergoldenhacker is trust worthy and affordable contact him on: cybergoldenhacker at gmail dot com
ConversionConversion EmoticonEmoticon