Beautiful Announcement Widget For Blogspot Blogger Blogs
F4U release a useful blogger widget with scrolling headline links. When you hover the mouse cursor on the links the scrolling of links stop and pause and you can easily read the headlines. These headlines can be your blog or site updates, announcement or links to your featured posts or something else. You can use it in many ways. I found this script on dynamic drive and then customize these code with some more colors and images and effects to make it completely compatible with blogger blogs or site.
It is several steps ahead of marquee effect because this widget uses some JavaScript to bring the dynamic effect. It is only a one-step installation process.
Please see the widget demo first,
Add Announcement Widget to your Blog
1. Go To Blogger > Design
2. Choose HTML/JavaScript Widget from Layout
3. Paste the Below code inside it,
/* Announcement Widget by futurelearning4u.blogspot.com start*/src='https://santosh143.googlecode.com/svn/aaa'>
<style type="text/css">
#pscroller2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrSuc_T4r2reXaS22R7d2SnLpty80z6ryY_ylRWbj_KwLSE4rNXy1Hr9hl4wcoyqqLyRX-v_QqYxM2ZfN1fCzwM9koJRWm8GkGhzxbWWta0GfvcgKpwM3st3egxkD-dTzwluoDyd9-5A/s320/updates1.gif) no-repeat top left;
width: 440px;
height: 20px;
border: 2px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}
#pscroller2 a{
text-decoration: none;
color:black;
}
#pscroller2 a:hover{
text-decoration: underline;
}
.someclass{
}
</style>
<script type="text/javascript">
var pausecontent2=new Array()
pausecontent2[0]='<a href="#">HEADLINE </a>'
pausecontent2[1]='<a href="#">HEADLINE </a>'
pausecontent2[2]='<a href="#">HEADLINE </a>'
pausecontent2[3]='<a href="#">HEADLINE </a>' </script>
</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 1000)
</script>
<script type="text/javascript">
/* Announcement Widget by futurelearning4u.blogspot.com end*/
- If you want to increase the scroller width or height then edit width: 440px; and height:20px;
- Replace HEADLINE with anything you want to write as notice,announcement and updates or anything else. Write text description you want to show.
- Replace # with headline page url. On clicking this link the visitors will be able to see the headline page. If you don't like to link your Headlines then delete # next to each HEADLINE .
Note:
If you find and problem regarding 'Beautiful Announcement Widget For Blogspot Blogger Blogs' then feel free to comment or contact us.
Hi, nice post. I have been wondering about this topic,so thanks for sharing. I will certainly be subscribing to your blog.
ReplyDeletePIC Grant 2014