Morse-Code Annoucement Widget With Close Button

When it comes to use a certain announcement widget on  your blog to grab visitors attention, you might be looking for something that really turns their eye balls right away to its self neglecting all the other distractions including advertisement etc.

Morse-Code Annoucement Widget With Close Button For Blogger
The announcement widget that we're sharing today is interesting in its own sense. The widget is made to blink a few times thus attracting readers to see what that has to offer. You can easily give out any message with in the announcement widget. Users can always close up the widget with the 'close' button, thus it wont be irritating for them.

Demo


Triple Blink Annoucement Widget


Follow the steps below to add the announcement widget to your blog.

Check few of the other recent widgets that we shared before:

For Blogger.com Users


Go to your Blogger dashboard >> Layout >> Add a gadget >> HTML/JavaScript and paste the following code with in it.

[lock]

[  <style>
    /*--Annoucment widget by BloggingeHow--*/
    #announcement{
    width: auto;
    font:bold 15px Trebuchet MS;
    border: 3px solid #6881A0;
    border-radius: 30px;
    margin: 0 40px 5px 40px;
    text-align: center;
    padding:15px 10px 15px 70px;
    background-repeat: no-repeat;
    background-position: 10px center;
    position:relative;
    color: #6881A0;
    background-color: #F9EAD4;
    background-image: url('http://2.bp.blogspot.com/-69gFOb0-rX0/UKJ7SMBw2mI/AAAAAAAAIRQ/xl2tVIaeq0U/s1600/annoucement+widget.png');
    }
    </style>
    <script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    $(document).ready(function(){
    $(".close").click(function(){
    $("#announcement").remove();
    });
    $("#announcement").fadeOut(800).fadeIn(400)
    .fadeOut(300).fadeIn(200)
    .fadeOut(100).fadeIn(80).fadeOut(800).fadeIn(400).fadeOut(300).fadeIn(300);
    });
    </script><div id='announcement'>
 <a class='close' href='#close' style='float: right;'><img border='0' src='http://2.bp.blogspot.com/-p3G5bbFtmjY/UKFFVpRSdfI/AAAAAAAAIPs/JRtIdvl76xY/s1600/x.png'/></a>
    <center>
    My announcement widget is here!
    </center>
</div>]
[/lock]

Simply edit the text highlighted above to show your desired message. Hope that you guys liked the widget. Cheers!smile

To Customize the behavior


In order to play with the fade in and fade out effects, you can always add few more blinks with custom values as shown below. This is the javascript code that is responsible for making the widget blink.

<script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#announcement").remove();
});
$("#announcement").fadeOut(800).fadeIn(400)
.fadeOut(300).fadeIn(200)
.fadeOut(100).fadeIn(80).fadeOut(800).fadeIn(400).fadeOut(300).fadeIn(300);
});

</script>

Just after, .fadeIn(300), you could call the functions fadein and fadeout once again by adding the below code:

.fadeOut(300).fadeIn(300)

Play with these values and you would get different results each time. To test the widget out, use out HTML Editor to see the LIVE results.


You may now like to read:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Morse-Code Annoucement Widget With Close Button
Morse-Code Annoucement Widget With Close Button
http://4.bp.blogspot.com/-GeqTQ9S7_CI/UfMPZFlSELI/AAAAAAAALYA/FxekqgHMPwM/s1600/morse+code+annoucment+widget.png
http://4.bp.blogspot.com/-GeqTQ9S7_CI/UfMPZFlSELI/AAAAAAAALYA/FxekqgHMPwM/s72-c/morse+code+annoucment+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/11/morse-code-annoucement-widget-blogger.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/11/morse-code-annoucement-widget-blogger.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade