Add message and customize Follow by E-mail widget in Blogger

Add a message in Follow by E-mail widget in Blogger

Follow By E-mail is a widget provided by Blogger,after installation of this widget,the blog automatically generate a Feed address via Feedburner.This widget is not customizable,the changes you can do is change the feed address,nothing else.But in this tutorial I'm going to share how to customize as well as add a message with this widget.

Update:Add message in Contact Form and Follow By E-mail widget in Blogger without using Javascript

Formerly,we will go through step by step.First you must know how to add the follow By E-mail widget.To add widget follow the steps below.

Go to layout > Add Gadget
Add the Follow By E-mail widget.

Click on blue button.
If you have any feed address already then replace the link written in the field otherwise,keep the field as it is.
Successfully the widget is installed.

Now lets move on to adding the message.We will use Jquery to append a message.Before using Jquery,your template should have a Jquery library.If no then add the following line just after <head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

Now before going to next step let me tell you about append and prepend which are different function of Jquery.Using of append method will insert an element or node as the last child element of the selector,while prepend insert the element or node as a first child element of selector.

As we want the message before the e-mail field then we will use prepend method.

Simply add the following code just before </head>

<script>
$(document).ready(function(){
$(".FollowByEmail").find(".widget-content").prepend("<span class='follow-widget-message'>If you love to read our articles,then write your e-mail below and get our articles right in your inbox.</span>");
});
</script>

Replace the highlighted stuff with your desire message.
Savetemplate and your message has been inserted.

If you want to make over your follow widget with some CSS.Then paste the following code just before

]]></b:skin>

/*
-------------------------------------
Follow By E-mail By Bloggerever
-------------------------------------
*/
.follow-widget-message
{
color:#333;
font:300 17px sans-serif;
}
.follow-by-email-address
{
background:#242628;
color:#fff;
padding:0 10px !important;
border:none !important;
height:40px !important;
font-family: 'open sans', sans-serif;
}
.follow-by-email-submit
{
background:#242628 !important;
font-family: 'open sans', sans-serif;
border:none;
display:block !important;
height:40px !important;
width:70px !important;
margin:0 20px !important;
}