jQuery Animated Welcome Message For Blogger

One of the popular plugins for Wordpress blogs is the Blog Welcome Message which is displayed above or below the post titles on blogs.In this post i will show you how to add a similar welcome message to Blogger.The Blog welcome message uses an animated effect, it fades in and out when the reader first lands on your page to grab their attention.You can add any text to the message along with a thumbnail image, also readers can collapse and hide the message.I have created three welcome messages you can use and i will show you how to add them to your blog.I will also show you how to edit every part of the message like text, colors, image and more.

I have created 3 samples to give you an idea of how you can use the message on your blog.

Working Demo 1 - See a demo of a Rss Feed welcome message above post titles Here

Working Demo 2 - See a demo of a Twitter Welcome message below post titles Here

Working demo 3 - See a demo of a Facebook Welcome message below posts Here

Adding The Welcome Message To Blogger

Rss Feed Welcome Message - Below is the message with the Rss Feed link, you can use this message and simply change the feed link to yours.Instructions are below to completely change the message and use another image and different text.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2kQvSkN_wlQFDpbPuYf9e7bm-53xJwZV5kRKRUoPOrpK6WSxZ7fZvTIKL9nx2y28a3damYJq21nbQ22FQTbRKcYthPEJLuBNmZHwsytsOU-drKmOGPy1mz057BP2ot35sTQjBxt-7-HX/s1600/best+blogger+tips.png'/></a><style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #BDE5F8;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYRES8kQU-sq5yWxbslkfd5cpQGd2BNOowQV_yDaSi2OhQgcoEd_p03VHav3YReUjXzVm6pNbN774RJDF1c1Fk7k2HwMXyRKUlTl7WPaAZ6OSWHEbiDm7diemQ2W5JXXGSYtqnXlE7HuL/s1600/rss-mini.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(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczZsgDW_4sHiZZapkzq6wBYB-9jFzp-C-_HEddUcRNWkaZL8RWUTmFihTAsnidw8kQwYpzzIhl6fW9wRdcOH53IqpsGD6DdEIYRqhJig2EibogNmUileTFSGYnJJvnvVdNLJPx-o2t3_T/s1600/close+message.png" /></a>

<center><b>Welcome</b> - If Your New Here You Wont Want To Miss Another Article.<br />Why Not Subscribe To Our <a href="http://feeds2.feedburner.com/spiceupyourblog" target="_blank"><b>Rss Feed</b></a> !</center></div>
</b:if>

*To change the Rss Mini image replace the Image URL in red.
*The code in orange is the Text Message and Rss link replace them with your own message and image.
*Change the text color edit - color: #00529B;
*Change the background color edit - background-color: #BDE5F8;
Get color codes here - Color Code Generator

Images from demos - If you want to use the facebook or Twitter images from the demos here are the codes :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_Pk-9HT1csFHMrZN53mVRW1Om4nNSpMlHeheUjn5_AJc08Y8i4Ryq3Nw_SzSBW6QoU2UWoNHnWIWyd2-khsLmjOzULggItCXItzXdz1EmhiFWP0OXtfzQH8-VIJZsajDs-iq5mLt6e2w/s1600/fb-mini.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0acFlfJEFE4tV7MdU39FIuGMm7M4x8NSXHlShYIHQc-vEzco46uVFBvueywzYH1eIQqmxSBZI9saLiLbO_r_xJzg-aRdl-VQAhwmYdT1FyGMb7kUYJhJ-drCSNRchZRL5vZUlEIORh8b/s1600/twitter-mini.png

OK so you have the code for your message lets add it to your blog !

How To Add Message To Blogger

Add Message Above Posts

Step 1. In your dashboard click 'Design' > 'Add A Gadget'





Step 2. From the pop up menu choose Html/Javascript



Step 3. Paste the code for your message into the Html/Javascript area and save.Now drag the gadget to the area above the posts as shown below.

Add Message Below Post Titles

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.







Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-header-line-1'/>

Step 3. Paste you message code Directly Below <div class='post-header-line-1'/>

Save your template.

That's it you have a cool welcome message to greet visitors to your blog and hopefully get some subscribers and followers.