I know y'all would dearest to preview this Notification bar for blogger, so earlier nosotros acquire started lets run across the alive demo.
Why to utilization Notification Bar:
To brand our community to a greater extent than worthy, nosotros demand to maintain trust inwards the pump 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 honor himself powerless to choose updates to his blog. However, his readers are however non aware of this fact that he is on a leave. Hence he looses his loyal readers. So to conk on 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 as well as other crucial notifications.
Features of MBL Notification Bar:
- Built amongst Fresh as well as novel look,
- Optimized amongst present as well as Dismissible buttons,
- Smooth Jquery shutter upwardly as well as downwards manner included,
- Ultra fast widget no compromise on site speed,
- Support’s multiple browsers i.e. Firefox, chrome. Internet explores as well as 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 every bit these steps are uncomplicated. Do every bit follows.
- Step#1: Go to Blogger.com >> Your Blog
- Step#2: Now select Template >> as well as choose 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 y'all honor it precisely house the next CSS Style code higher upwardly 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 corporation #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 corporation #FFBB00;padding:1px; text-align: center;color:#ffcc00;cursor:pointer;}.MBL_NOTICE .MBL_NOTICE_CLOSE:hover{ border:1px corporation #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 corporation #845A1F;border-top:0;font-style:bold;font-size: 15px;}.MBL_NOTICE_LABEL label:hover{ background-color: #;cursor:pointer;color:#ffff00}
- Step#6: Now over again amongst (Ctrl+S) search for </head> and precisely higher upwardly 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);});role 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 lastly mensuration search for <body> as well as precisely 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 alter the color of your Notification Bar merely replace #FF0000
If y'all desire to alter the color of your Text merely replace #FDF6F6
To alter the text of your Notice push replace Check Notice with your text
To alter the Width of your Notice Button merely replace 18px
To alter the notification text replace Your-Notice-Here with your customized text
Replace Your-Bold-Notice amongst the nearly of import text inwards your customized notice
Replace 20px to alter the size of your notification text
- Step#8 Now later on customizing your Notification Bar press Save Now as well as sentiment your spider web log it volition laissez passer perfect results.
Credits:
You are costless to portion our Notification Bar on your blog, forums as well as etc but it volition live swell if y'all link Mybloggerlab.com. This volition live the best gift for our hard-work as well as determination.
So, guys I hope y'all guide hold enjoyed the rollercoaster ride. Soon nosotros volition portion to a greater extent than similar widgets. If y'all demand whatever help experience costless to ask, this is it for now. Till as well as then peace, approbation as well as happy notifying.
No comments:
Post a Comment