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 == "item"'>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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('http://2.bp.blogspot.com/_rKG-ziTSNUQ/TL2884E4WyI/AAAAAAAABz0/g5lTgqEeX5Q/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="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TL29UxFwn0I/AAAAAAAABz4/CN7abEjuuw0/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 :
http://1.bp.blogspot.com/_rKG-ziTSNUQ/TL287akjWBI/AAAAAAAABzs/auI_r82aXvc/s1600/fb-mini.png
http://2.bp.blogspot.com/_rKG-ziTSNUQ/TL286pJwl8I/AAAAAAAABzo/Jr9AOOz2wf0/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.
Similar Posts
- Adding Post Titles To Older Post Newer Post Links On Blogger
- Shareaholic jQuery Slide Bookmarking Gadget With Tooltips And Counters For Blogger And WordPress
- The Default Theme Nivo Featured Posts Slider For Blogger
- The Pascal Theme Nivo Featured Posts Slider For Blogger
- Add Social Engagment Plugin Smart Layers To Blogger And WordPress Blogs
