I know you lot would dear to preview this Notification bar for blogger, so earlier nosotros acquire started lets come across the alive demo.
Why to utilisation Notification Bar:
To brand our community to a greater extent than worthy, nosotros demand to maintain trust inwards the catch of our readers. To render them amongst character data regarding our organization, nosotros tin facilitate them amongst Notification bar. For instance, if a blogger is on a vacation he volition abide by himself powerless to convey updates to his blog. However, his readers are withal non aware of this fact that he is on a leave. Hence he looses his loyal readers. So to give-up the ghost along our readers updated nosotros tin facilitate them amongst Notice Bar where nosotros tin listing our essential activities i.e. Blogger is on a Leave, Website is nether maintenance together with other crucial notifications.
Features of MBL Notification Bar:
- Built amongst Fresh together with novel look,
- Optimized amongst demo together with Dismissible buttons,
- Smooth Jquery shutter upwards together with downwards means included,
- Ultra fast widget no compromise on site speed,
- Support’s multiple browsers i.e. Firefox, chrome. Internet explores together with etc.
Adding MBL Notification Bar inwards Blogger:
To insert Notice Bar inwards Blogger Blogspot blog, nosotros don’t demand to feel whatever sort of stress equally these steps are uncomplicated. Do equally follows.
- Step#1: Go to Blogger.com >> Your Blog
- Step#2: Now select Template >> together with select backup of your template
- Step#3: Then press Edit HTML >> Proceed
- Step#4: Now inwards your template search for the next code.
]]></b:skin>
- Step#5: Once you lot abide by it exactly house the next CSS Style code inwards a higher house it.
/* MBL Notification Bar */* {margin: 0px; padding: 0px;}.MBL_NOTICE{background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUM1pgfOk8uEQ638tzxB3QspX3bXLucmtWto-JE7V_FbUBW46wVkBFuNhS2n10UeImZQ2Rkihjflc7u7EYOjjHVxn28-5syEt3ShEx1-tIYqzED4hJ3I5xOovcI_GsiAxuwYIbjUxoB7o/s1600/1.png') repeat-x;width:100%;border-bottom: 2px company #845888;-moz-box-shadow: #066066 10px 5px 3px;-webkit-box-shadow: #666666 0px 1px 3px;box-shadow: #666666 0px 3px 3px;}.MBL_NOTICE_WRAPPER{ color:#ffffff;font-weight: bold;}.MBL_NOTICE_WRAPPER .MBL_NOTICE{color:#FF0F0F;width:100%;margin:auto;font-size:16px;overflow: auto;font-family: Tahoma, Arial, Helvetica, sans-serif;}.MBL_NOTICE .MBL_NOTICE_NOTE { float:left;width:945px;text-align: center;overflow: auto;}.MBL_NOTICE .MBL_NOTICE_CLOSE{ float:right;position:relative; top:-5px;width:16px;background-color:#FF0F0F;border:1px company #FFBB00;padding:1px; text-align: center;color:#ffcc00;cursor:pointer;}.MBL_NOTICE .MBL_NOTICE_CLOSE:hover{ border:1px company #ffffff;color:#ffee00;}.N_HIDE { display:none; }.MBL_NOTICE_LABEL { position: absolute;float: right;width:95%;z-index: 10;}.MBL_NOTICE_LABEL label {padding: 1px 18px;font-style:bold;margin-right:3px;background-color: #FF0F0F;color:#ffffff;border:1px company #845A1F;border-top:0;font-style:bold;font-size: 15px;}.MBL_NOTICE_LABEL label:hover{ background-color: #;cursor:pointer;color:#ffff00}
- Step#6: Now in i trial again amongst (Ctrl+S) search for </head> and exactly inwards a higher house it glue the next JavaScript code.
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/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="https://mybloggerlab.googlecode.com/files/jquery.cookie.js" ></script><script type="text/javascript">var notice_cookie_name = "Notice71";$("document").ready(function () {var t = setTimeout("notice()", 1000);});business office notice() {if ($.cookie(notice_cookie_name) == "off") {$(".MBL_NOTICE_LABEL").slideDown(500);} else {$(".MBL_NOTICE_WRAPPER").slideDown(600);}$(".MBL_NOTICE_CLOSE").click(function () {$(".MBL_NOTICE_WRAPPER").slideUp(600);$(".MBL_NOTICE_LABEL").slideDown(500);$.cookie(notice_cookie_name, "off", { expires: seven });});$(".MBL_NOTICE_LABEL label").click(function () {$(".MBL_NOTICE_WRAPPER").slideDown(600);$(".MBL_NOTICE_LABEL").slideUp(500);$.cookie(notice_cookie_name, "on", { expires: seven });});}</script>
- Step#7: Now the finally measurement search for <body> together with exactly below it glue the next HTML code.
<div class="MBL_NOTICE_WRAPPER N_HIDE"><div class="MBL_NOTICE"><div class="MBL_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="MBL_NOTICE_CLOSE">x</div></div></div><div class="wrapper" style="text-align: right;"><div class="MBL_NOTICE_LABEL N_HIDE"><label style=""> Check Notice</label></div></div>
Customization:
To modify the color of your Notification Bar only replace #FF0000
If you lot desire to modify the color of your Text only replace #FDF6F6
To modify the text of your Notice push replace Check Notice with your text
To modify the Width of your Notice Button only replace 18px
To modify the notification text replace Your-Notice-Here with your customized text
Replace Your-Bold-Notice amongst the almost of import text inwards your customized notice
Replace 20px to modify the size of your notification text
- Step#8 Now later customizing your Notification Bar press Save Now together with persuasion your weblog it volition arrive at perfect results.
Credits:
You are gratis to portion our Notification Bar on your blog, forums together with etc but it volition live non bad if you lot link Mybloggerlab.com. This volition live the best gift for our hard-work together with determination.
So, guys I hope you lot stimulate got enjoyed the rollercoaster ride. Soon nosotros volition portion to a greater extent than similar widgets. If you lot demand whatever aid experience gratis to ask, this is it for now. Till together with so peace, approbation together with happy notifying.
No comments:
Post a Comment