Static update/notice message with hover effect for Blogger

Static update/notice message with hover effect for Blogger

Have you ever been away for your vacations and you can't update on your blog ? Don't you feel your readers would wonder why aren't you posting anymore, maybe they will even leave you blog because your blog is inactive. In this post i will be telling you how to add static message box on your blog.
It's very useful to keep your readers updated about your current status and that keeps them from assuming that your blog is inactive. I found it very useful when i changed my domain thus it was important to inform my readers about the domain change and it helped them understand the cause of redirection on my blog.

DEMO

If you want some message that appears on all pages of your blog then try this tutorial, i am sure you will love this to inform your readers about anything. This plugin connects you more to your readers and give them importance, now follow the steps below to add it.

1. Add the HTML in your template

The first step is to add the HTML. We have used anchor HTML tag for the message box, it's because if you want the message to go on a link you can put the link in href value, you can write a blog post for more information related to the message.

The HTML code is as follows

?

1	<a class="stx-update" href="" target="_blank" title="A message">Thanks for visiting our blog you can join us by subscribing</a>

Changes you can make

1. Fill the href attribute's value with a link if you want your visitors to go on a link by clicking it. For example href="http://stramaxon.com/p/update.html" 
2. Change the value inside title attribute, the text inside the title value will appear when you will hover it. For example mouse over this text and see the box appear with the text in it's title attribute.
3. The main change you need to make is the text between <a> and </a>, it will appear to your visitors.

Once you have made the necessary changes to the HTML you can now continue adding it into your blogger blog. Check the next step to know how to easily add it.

Placing the HTML in your template

You need to add the HTML code in your template by following these steps : (backup your template beforehand)

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Then open Edit HTML and Proceed
4. Use CTRL+F to find </body> in the template and place the html code above </body>
5. Save the template

That's it ! Once the HTML is appearing in the blog, you are now ready to style it using CSS

The CSS design

CSS is what gives the basic anchor HTML an awesome look and feel. Check the CSS code below and learn what you can change in the CSS

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.stx-update { text-decoration: none !important; position: fixed; right:0px; left:0px; top: 0px; display: block; background-color: #49A2E7 !important; text-align: center !important; padding: 20px !important; z-index: 9999 !important; color: white !important; font-size: 17px; font-family: 'verdana' !important; border-bottom: 8px solid rgba(255, 255, 255, 0.69); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; opacity: 0.8; overflow: hidden; }   .stx-update:hover { opacity: 1.0; }

You can make changes to the CSS, only make changes if you know what you are doing.

• Line 8 : Change the box color to your favorite or the color that looks good with your blog. Here's a list of basic CSS colors but you can also see the shades of those colors - CSS colors list
• Line 12 : This is the for the color of text into the message, check the link above for CSS color list.
• In fact you can modify anything in the CSS as per your needs, so enjoy, if you want any specific design message box you can contact me on depy45631@gmail.com

Now when you are done with modifying the CSS, read further to know how to add it to your blogspot blog.

Adding the CSS to blogger

You now have to add the CSS code in your template. To do that follow the steps below or just check this tutorial to know how to add CSS to template. 

1. Go to Blogger Dashboard
2. Locate the Template tab
3. You will see Customize button there, click it
4. You will be in the Template designer
5. Click on Advanced tab on the left pane
6. From the Advance tab, click on the Add CSS
7. And paste the CSS in custom CSS text area, preview it. If it seems to be correct and working then Apply to Blog.

Great ! If you did everything correct then you will see the new message box on top of your blog page.

 

Posted BY:http://www.stramaxon.com