If you are here to add cookies to the stickybar and not interested on how it is done then you may read this part only.
How cookies are setup?
1. Assigning ID
If you are familiar with HTML and CSS basics then this would be extremely easy for you. You know that in order to apply a CSS style, you either use ID starting with (#) sign or a Class starting with (.) sign. Any HTML DOM can be given an identity i.e. ID. This id is then used in front-end scripts like jQuery, JavaScript etc. to add visual effects to HTML section. You can add an ID to any HTML tag may that be <div>, <span>, <img> or <a>.
Suppose if you wish to add an ID to a popup container then find its DIV and add an ID as shown below:
<div id="KEY">
---
---
---
---
---
---
</div>
Key= The name of your ID. it can be anything.
If incase the popup container already contains an id called mbtpopup then you can add a new ID in this way:
<div id="mbtpopup KEY">
---
---
---
---
---
---
</div>
Just give a space and there you go with the new ID name. You can add as many IDs as you want with a space in between any two IDs and also make sure the ID names should be unique. In the above example the Key could be anything except the mbtpopup. Lets take KEY as hidepopup
2. Using Jquery to setup a Cookie
Now when you have assigned an ID name, its time to set a HTML5 cookie in order to control the behavior of the popup. Suppose if you wish to show the popup window only once to your visitors then you can simply add the following script just above </head> tag in your blogger template:
<script type='text/javascript'>
$(document).ready(function() {
if(sessionStorage.getItem("popupcookie") == 1) {
$("#hidepopup").hide();
}
sessionStorage.setItem("popupcookie", 1);
});
</script>
Carefully understand these important points:
Setting cookie:
- The yellow highlighted part is responsible for creating/setting a sessionStorage. You already know the difference between a session and Local Storage. If not then please read Part1 of this tutorial series.
- In yellow section we kept the name of cookie as popupcookie. You can give your cookie any name you like. We also assigned it a value 1.
- The yellow part will execute as soon as the page loads first time.
Reading Cookie:
- The green highlighted section is where we are checking the value of popupcookie using an if conditional statement.
- The if condition will run only if popupcookie is set and has some value stored in it. In our case the value is 1.
- If the condition is met, the red section will execute and it will hide the popup from appearing on screen. This condition is true only if the popup has already been viewed and we are trying to hide the popup the next time a visitor comes.
Remember the order of writing the codes for setting and reading cookie. We will first check whether the popup has already appeared once or not. If this is the first time a visitor has opened your blog, then of course there will be no value stored inside popupcookie because it never executed before. But if this is the second time then we already have some value stored in popupcookie (the yellow section) , the condition will be true and the popup will not be shown this time.
I hope you are cleared now how to assign IDs and setting Cookie. Lets now learn how we added
The blogger notification bar that we released last year was the most liked sticky bar by our 80K readers. Now its time to take it to the next level by adding Session Storage in order to control its display. If a visitor would not want to see the stickybar at top, he will simply click the close button and the bar will remain hidden as long as he is navigating through the blog posts.
DEMO
For Demo please close the stickybar inside our blog and visit another page and see that it remains hidden. Then open the bar and again visit a new page or refresh the page. You will find that the bar shows up again. This cookie will work as long as you have not closed the browser. It will get deleted or will be destroyed as soon as you close the browser. If you want the cookie to have a lifetime life then use Localstorage instead of SessionStorage. That simple!
Installation
- First install the stickybar on your blog by reading this tutorial: Add stickybar
- Next paste the following script just above</head> tag in your blogger template
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { if(sessionStorage.getItem("HideBar") == 0) { $("#bloggernotification").show(); } if(sessionStorage.getItem("HideBar") == 1) { $("#bloggernotification").hide(); $("#openbloggernotification").css('top','0px'); } $("#closebloggernotification").click(function(){ sessionStorage.setItem("HideBar", 1); }); $("#openbloggernotification").click(function(){ $("#bloggernotification").show(); sessionStorage.setItem("HideBar", 0); }); });</script>
- Delete the yellow highlighted code if you have already added the jQuery library inside your blog.
3. Save your blog and you are all done! :)
Need help?
Please let me know if you would need further help in setting up cookies with HTML5. Would be a pleasure helping you buddies. Remember to avoid comments with hyperlinks. We simply take that as spam and delete them immediately.
With that we end our series on HTML5 cookies. Peace and blessings buddies. :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
12/20/2013
Web Designing
,
Widgets
