What are the advantages by using this notification bar?
If we run a shop or business first thing is to maintain the trust in the heart of your readers. Maintaining community is making relation ship and also a fruitful relation ship with each other. By providing a quality of information in the form of any source i.e widgets or a Notification bar what ever it may be there should be ongoing process towards your loyal readers. Sometimes, when author is on vacations and not in a position to update the blog contents then passing a perfect message to their readers that he/she is not available for some time blog updates are delayed for few days. By passing this message to readers that author is inactive for few days and the reader’s waits eagerly for new arrivals to read on your blog.By adding this BTF Notification bar you can generate a new look and freshness to your blog. This bar supports all browsers i.e Internet Explorer, Google Chrome, Firefox and others.
Tutorials for adding BTF Notification bar to blogger
Sign into your blogger accountClick on “Design (Layout in the new blogger interface)”
Click on “EDIT HTML” tab link (Before you do execute this better to backup you template, if anything goes wrong you can reuse it again)
Search for the below code
]]></b:skin>After finding the above code just to above code paste the below CSS code as here under
/* BTF Notification Bar */
* {margin: 0px; padding: 0px;}
.BTF_NOTICE{background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZUjjYARnFhLs62NN_QG-bsT5j_NLsuVPvN1xH6qmsYlp03R9ZL8-MwhjdLm-d1jr40rrO-mvRcPk31s3yNgFPCf43opSmBzIlPrTvZHKt2ZdgOOKC6Kc85V6Uj-5jVYHnQHq-mcpNpXM/s1600/1.png') repeat-x;
width:100%;
border-bottom: 2px solid #845888;
-moz-box-shadow: #066066 10px 5px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 3px 3px;
}
.BTF_NOTICE_WRAPPER{ color:#ffffff;
font-weight: bold;}
.BTF_NOTICE_WRAPPER .BTF_NOTICE{color:#FF0F0F;
width:100%;
margin:auto;
font-size:16px;
overflow: auto;
font-family: Tahoma, Arial, Helvetica, sans-serif;}
.BTF_NOTICE .BTF_NOTICE_NOTE { float:left;
width:945px;
text-align: center;
overflow: auto;}
.BTF_NOTICE .BTF_NOTICE_CLOSE{ float:right;
position:relative; top:-5px;
width:16px;
background-color:#FF0F0F;
border:1px solid #FFBB00;
padding:1px; text-align: center;
color:#ffcc00;
cursor:pointer;}
.BTF_NOTICE .BTF_NOTICE_CLOSE:hover{ border:1px solid #ffffff;
color:#ffee00;}
.N_HIDE { display:none; }
.BTF_NOTICE_LABEL { position: absolute;
float: right;
width:95%;
z-index: 10;}
.BTF_NOTICE_LABEL label {padding: 1px 18px;
font-style:bold;
margin-right:3px;
background-color: #FF0F0F;
color:#ffffff;
border:1px solid #845A1F;
border-top:0;font-style:bold;
font-size: 15px;}
.BTF_NOTICE_LABEL label:hover{ background-color: #;
cursor:pointer;
color:#ffff00}
Now search to find another code </head> and just above it paste the following JavaScript code.
<script type="text/javascript" src="http://www.blogtariff.x10.mx/jsfiles/jquery.js" ></script>
<script>
$('document').ready(function () {
$('.content-menu li')
.filter(":first").addClass("First")
.end()
.filter(":last").addClass("Last");
});
</script>
<script type="text/javascript" src=" http://www.blogtariff.x10.mx/jsfiles/jquery.cookie.js" ></script>
<script type="text/javascript">
var notice_cookie_name = "Notice71";
$("document").ready(function () {
var t = setTimeout("notice()", 1000);
});
function notice() {
if ($.cookie(notice_cookie_name) == "off") {
$(".BTF_NOTICE_LABEL").slideDown(500);
} else {
$(".BTF_NOTICE_WRAPPER").slideDown(600);
}
$(".BTF_NOTICE_CLOSE").click(function () {
$(".BTF_NOTICE_WRAPPER").slideUp(600);
$(".BTF_NOTICE_LABEL").slideDown(500);
$.cookie(notice_cookie_name, "off", { expires: 7 });
});
$(".BTF_NOTICE_LABEL label").click(function () {
$(".BTF_NOTICE_WRAPPER").slideDown(600);
$(".BTF_NOTICE_LABEL").slideUp(500);
$.cookie(notice_cookie_name, "on", { expires: 7 });
});
}
</script>
After successful pasting the above code, now find the code </body> and paste the below HTML code just above to it.
<div class="BTF_NOTICE_WRAPPER N_HIDE">
<div class="BTF_NOTICE">
<div class="BTF_NOTICE_NOTE"><br /><span style="color: #FDF6F6; font-size: 20px;">Your-Notice-Here<span style="font-weight: bold;">Your-Bold-Notice</span></span><br /><br /><br /></div>
<div class="BTF_NOTICE_CLOSE">x</div>
</div>
</div>
<div class="wrapper" style="text-align: right;">
<div class="BTF_NOTICE_LABEL N_HIDE">
<label style=""> Check Notice</label>
</div>
</div>
Simple modifications:-
If you need to change the color of Notification bar simple replace #FF0000 with any color code (USE OUR COLOR CODE CHART)If you need to change the text color #FDF6F6 with any color code (USE OUR COLOR CODE CHART)
If you need to replace the Notice button text “Check Notice” with your text or else leave it.
If you need to modify the width of Notice button “18px” replace size number according to your requirement.
If you need to replace the Notification text “Your Notice Here” with your text or else leave it.
If you need to replace the Notification “Your Bold Notice” customized the text as relevant
Modify the width of Notification text “20px” replace size number according to your requirement.
After necessary successful modifications “Save the Template” and preview the blog.. How it looks.
Acknowledgment:-
If you enjoyed this our article let know you views. Don’t miss to share your valuable views via comments, we always respect your views.Happily blogging, thanks to Omlitech
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments