Message Notification Widget for Blogger

You must want to go ahead by organizing friendly relation with your blog readers. You may have been using the different methods like organizing blog Contest and commenting on others blog. Don’t you think if there is any new method?

Recently, I post about how to remove widget automatically after someone visited the link. That’s quite unique. As I promised, I came back with another new trick about how to use that in your Blogger blog. Just before this post, I haven’t specified how to use this in your blog.

So, let’s get started.

Apply to Your Blog

First of all let’s erase your curiosity by viewing the DEMO on this post. You have to create the new Page for your blog. Go to Blogger.com > Posting > Edit Pages > Create new page. Now write the formal message in that page to your reader. See the example here.

Now, Add the new gadget on your blog. Design > Page Element > Add new Gadget > HTML / JavaScript. Paste the following code:

<!--Code by hacktutors.info-->
<a href="http://www.hacktutors.info/p/new-message-from-admin.html"><img src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/THOGg9HAWII/AAAAAAAAA5g/
elVMNdR5AL0/s1600/unread+mail.png" alt="Unread Message" title="Unread Message" /></a>
<!--Code ended-->

Don't forget to replace red color URL with your Page URL that we have done in first step.

Again, follow the steps below:

1. Log on to Blogger.com

2. Head out Design > Edit HTML. (No need to check Expand widget Template box)

3. Now, Search for the widget ID that you want to make changes. For example, I’ placed the widget named “New Message” on my sidebar. So, I’ve to search for something like this:

<b:widget id='HTML7' locked='false' title='New Message' type='HTML'/>

Now, the widget ID is HTML7. Remember we only need widget id.

Copy the widget ID on something else (Notepad).

4. Now, Search for ]]></b:skin> tag on your template. Just above this tag, create the new CSS pattern just like this:

#HTML7 ul {
list-style:none;
margin: 0;
padding: 0;

}

#HTML7 a:visited {
display:none;
}

Don’t forget to replace HTML7 with your widget id that we've done in step 3.

Now view your blog once again. It may work now :)

Hope it helps you a lot. This is the very good way to notify your reader with the new message. After your reader view the message it will not appears on the second time. That means it is just like the E mail Message! It will automatically disappears if your individual reader already viewed the message.