Create a message box for blogspot

Creating one small box for the blog to inform one event or one problem that the blog seems quite necessary for the blog. Yes it will not have to write really one to post a message (event if it does not need to use 1 post to inform). Instead, we only need to show one small text.

Can one of you please code your message, I was ok. And another one is not familiar with the view of your code should be required to share the code of this message box. Today my write must first article to share it.

Some information about this small message box: 
- Shows a lot of notice. 
Notifications will display random (random) after each page load. 
- There button to close the message.

Illustrations from his blog:

- In order to select a reasonable position, I recommend that you put this message box in the header of the blog. 
- After determining the location of the message box, you create one widget HTML / Javascript and paste the code inside as in:

<style type="text/css"> 
# thbao { 
padding: 6px 0; 
border-bottom: 1px solid # e6dac3; 
} collection 

# thbao-margin {margin: 0 auto;} 
. thbao-container { 
width: 705px; 
border : 1px solid # f2b768; 
padding: 4px; 
font-size: 90%; 
} 
. thbao-header { 
background: # ff6734; 
color: white; 
border: 1px solid # ffa789; 
padding: 5px 10px; 
white-space: nowrap; 
} 
. thbao-body { 
background: # fae9c8; 
padding: 5px 10px; 
width: 99%; 
} 
. thbao-close { 
float: right; 
margin-right:-5px; 
} 
</ style> 

<script language = "JavaScript" > 
function hideitem () { 
document.getElementById ("thbao"). style.display = "no ne"; 
} 
/ / <! [CDATA [ 
thbao = new Array (3); 
thbao [0] = '{Content first notice 1} '; 
thbao [1] = '{Content the first message 2}'; 
thbao [2] = '{content the 3rd}'; 
thbao [3] = {Content the 4th message} '; 

tbindex = Math.floor (Math.random () * thbao.length); 
/ /]]> 
</ script> 

<div id="thbao"> 
<div id = "thbao-margin "class =" thbao-container "> 
<table cellspacing="0" cellpadding="0"> 
<tbody> 
<tr> 
<td class="thbao-header"> <b> Note </ b> </ td> 
<td class="thbao-body"> 
<a href="#" class="thbao-close" onclick="hideitem()"> <img src = "http://www.blogger.com/img/close . png "alt =" Close "/> </ a> 
<span class="thbao-text"> 

<script

- The first is to edit the CSS code: 
You can see the illustration below and then change the value of it to the appropriate message box with your blog, mainly to adjust the values color and size.

- Next is the correct javascript code: 
I see code like this:

thbao = new Array (3); 
thbao [0] = '{Content the first message 1}'; 
thbao [1] = 'Content {2} message'; 
thbao [2] = '{Home What the first message 3} '; 
thbao [3] = '{content the 4th}';

All content of the notice must be in single quotes. Display the message contents allows the use of HTML tags . Above is a sample code for 4 paragraphs message, if 5 you just add the code below:

thbao = new Array (4); 
thbao [0] = '{Content the first message 1}'; 
thbao [1] = 'Content {2} message'; 
thbao [2] = '{Home What the first message 3} '; 
thbao [3] = '{content the 4th}'; 
thbao [4] = '{Content 5th message}';

Thus completed. wish you success. 

Categories: blogger template , css , Javascript