Designing our Blog with enthusiasm
and self believe is the most vital point, being a Blogger we try our best to craft our Blog to perfection. However, to
stylize a faultless design we more often use Widgets which not only improve our
Blog’s appearance but also provide convenience to our readers. Few days ago, we
launched a Scrolling-Bar with the close Button and luckily in real short time
it became a massive Hit! This is the motive, today we thought to take our blog
to the next level by designing a Notification Bar. To make our community more
reliable, we have made it lot easier. Users can easily view or dismiss the
notification bar any time they like. While I was searching the enormous world
of internet, a spectacular idea clicked me, why not we create a notice bar?
That would be capable of keeping our visitors updated. So I and my elder
Brother accepted this challenge, and finally after a full day hard-hitting
coding was able to win the challenge. So today we will learn How to Create a
Notice Bar.
I know you would love to preview this Notification bar for blogger, so before we get started lets see the live demo.
I know you would love to preview this Notification bar for blogger, so before we get started lets see the live demo.
Why to use Notification Bar:
To make our community more
worthy, we need to maintain trust in the heart of our readers. To provide them
with quality information regarding our organization, we can facilitate them
with Notification bar. For instance, if a blogger is on a holiday he will find
himself powerless to bring updates to his blog. However, his readers are still
not aware of this fact that he is on a leave. Hence he looses his loyal
readers. So to keep our readers updated we can facilitate them with Notice Bar where
we can list our essential activities i.e. Blogger is on a Leave, Website is under
maintenance and other crucial notifications.
Features of MBL Notification Bar:
- Built with Fresh and new look,
- Optimized with show and Dismissible buttons,
- Smooth Jquery shutter up and down style included,
- Ultra fast widget no compromise on site speed,
- Support’s multiple browsers i.e. Firefox, chrome. Internet explores and etc.
Adding MBL Notification Bar in Blogger:
To insert Notice Bar in Blogger
Blogspot blog, we don’t need to sense any kind of stress as these steps are uncomplicated.
Do as follows.
- Step#1: Go to Blogger.com >> Your Blog
- Step#2: Now select Template >> and take backup of your template
- Step#3: Then press Edit HTML >> Proceed
- Step#4: Now in your template search for the following code.
]]></b:skin>
- Step#5: Once you find it just place the following CSS Style code above it.
/* MBL Notification Bar */* {margin: 0px; padding: 0px;}.MBL_NOTICE{background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbYvBCqyg1x_kFWEAXmJuTS9adISJoENkT4NzLcCY0o6XdKlO1PKV0UdVDZo6BedDw9ALxXRtR7s_nwRIDfboCYjFsYph_1tw2Sy2MZW2Nu0UhYd8qDcfl-9mUEH4yG61IWtm46ga1NM/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;}.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 solid #FFBB00;padding:1px; text-align: center;color:#ffcc00;cursor:pointer;}.MBL_NOTICE .MBL_NOTICE_CLOSE:hover{ border:1px solid #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 solid #845A1F;border-top:0;font-style:bold;font-size: 15px;}.MBL_NOTICE_LABEL label:hover{ background-color: #;cursor:pointer;color:#ffff00}
- Step#6: Now again with (Ctrl+S) search for </head> and just above it paste the following 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);});function 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: 7 });});$(".MBL_NOTICE_LABEL label").click(function () {$(".MBL_NOTICE_WRAPPER").slideDown(600);$(".MBL_NOTICE_LABEL").slideUp(500);$.cookie(notice_cookie_name, "on", { expires: 7 });});}</script>
- Step#7: Now the last step search for <body> and just below it paste the following 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 change the color of your Notification Bar simply replace #FF0000
If you want to change the color of your Text simply replace #FDF6F6
To change the text of your Notice button replace
Check Notice with your text
To change the Width of your Notice Button simply replace 18px
To change the notification text replace Your-Notice-Here with your customized text
Replace Your-Bold-Notice with the most important text in your customized notice
Replace 20px to change the size of your notification text
- Step#8 Now after customizing your Notification Bar press Save Now and view your blog it will give perfect results.
Credits:
You are free to share our Notification Bar on your blog, forums and etc but it will be great if you link Mybloggerlab.com. This will be the best gift for our hard-work and determination.
So, guys I hope you have
enjoyed the rollercoaster ride. Soon we will share more similar widgets. If you
need any help feel free to ask, this is it for now. Till then peace, blessing
and happy notifying.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
4 comments
i like it, thanks friend :D
Well exellent Noti-bar
thanks Syed
sir can you tell me how to make an index or list of movies and games on my blog...
for example see this >>>
http://postimage.org/image/7mn0vtphh/ <<<
sir please tell me please
getripstuff.blogspot.in
sunil bishnoi..
@sunil bishnoi
Brother they are using simple Linking Anchor Text Technology with Optimized CSS Style. We are Working on This Widget soon we will Provide you Complete Step by Step Guidance on Creating Such Stunning List Like it. Stay Tuned Peace and Blessings.
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.