Make Welcome Bar With Button Close On Blog
Updated on April 07, 2016
Welcome bar is usually stored in the top of the blog. And usually also welcome this bar contains a message for visitors to the blog. That way when a visitor enters the first visible bar is welcome because it typically uses more striking colors and be at the top like in the picture above.
Author: Adhy Suriady
These messages can be anything, for example pengumuan to update the features of the web or something new on the blog.
These messages can be anything, for example pengumuan to update the features of the web or something new on the blog.
Actually there is the easiest way to make this bar are welcome with a welcome bar of AddThis. But for those who are allergic to the js script from a third party, now I share how to create a welcome bar itself and equipped with the close button so it uses javascript jquery in order not to overload the blog. That way if there are visitors who feel disturbed by the bar welcome could close.
Have a look at JSFiddle demo HERE .
CSS code
Save the CSS code below the above code ]]></b:skin> or </style>#welcome_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;padding:8px 20px;background:#ff847e;color:#fff;position:relative;margin:0 auto;font-weight:normal}
#welcome_bar a{background:#3B81DE;color:#fff;padding:0 6px;border:1px solid transparent;border-radius:4px;font-weight:bold;}
#close_welcome_bar {display:inline-block;cursor:pointer;padding:0 4px;position:absolute;top:0px;right:5px;font-weight:bold;font-size:18px}
HTML code
Please save the HTML code below just under the code <body><div id='welcome_bar'>Please adjust the message with the message you want to display.
Sekarang Anda bisa unduh update terbaru dari blog ini, silahkan klik <a href='#' title='Unduh Update'>di sini</a>
<span data-target='#welcome_bar' id='close_welcome_bar'>×</span>
</div>
Javascript code
Please keep the following code above the code </body><script type='text/javascript'>
//<![CDATA[
var button=document.querySelector("#close_welcome_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});
//]]>
</script>
Have a look at JSFiddle demo HERE .