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/AVvXsEjGhH4GT_1D8AFyqSIPYvfgHgIplbjKOlo4N7RHGpD8M0W1GxTZC5Z3gAdBhLWDL8bec6OEE4DnqxHhM2VoSi3FIB9WVAgqHKm3oxIBYHgxxiukqihS7gor0gMLBJ-lwbCEa7n2LgMA9_Hl/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/AVvXsEixkNeDkK9MKwkKLWFN9EjydRIM165EvyrcpyERhYu4jjkw4rdskQBv-fO1yLpxsDbyZ5QU4-BHfJWc3D_K4EfHBPIEpWHpbp8sX871fIkttFip1Kx43TdDeLUtvfWRTOGOoAWCWAnyH7Xr/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/AVvXsEjC-LQfKDgsWzOn92-nxT46LaYrkLqnD1JcTADsdIBck9SlG808q1COiJuzcrq0Yjr0B8PVNoxk3nFLe6egTH3DtNPabZCLT6vs73FTQVeDnsfIvNaOyBWdsmlLo30iwBJ8dwakwHhmr1Gv/s1600/close+message.png" /></a>

</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/AVvXsEjCah9IqHi5Ph-SDl00GBWJYZ4G6ns47HmI_K0cMaPXMQXDlwa8epAP3ksFj6XEsZcQNyKmzpGUBP74Zqq7GuXqX_i2HO0HqMEgCYOg5UoF15NHhAYSRq1TKEc1F9nG34U2eI-2RdNsnosR/s1600/fb-mini.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIk8Q-3TyYnH3nLcr_bVyrmBxKITdMM-S6vOS8U11SOeL_1c61CZ6X_z5raPI2pgvkfIN7EiItnfRsaSw-y2PcnzXzOvFqqgdjPlO46BJn9d5IQTao-0yQ8Tmp9rHz0aNye9oEGgQT-C1V/s1600/twitter-mini.png

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