How to customize the appearance of Blogger Follow by Email gadget

Blogger ‘Follow by Email’ gadget is a simple and useful gadget for your blog. It can help your blog readers receive updates of your blog by email. Adding this gadget to your blog is also rather easy. You can go to ‘Design’ -> ‘Page Elements’ -> ‘Add a Gadget’. You can then choose the ‘Follow by Email’ gadget in the list.

However, in some cases the problem with this gadget would be the text box and the submit button are in the same row. For blogs with three columns and the ‘Follow by Email’ gadget is in the small left/right navigation column, the text box for inputing user email will be shortened:

You may also want to draw a box surrounding this gadget.

Therefore, this article will describe how to customize the appearance of the 'Follow by Email' gadget.

Step 1: Sign in to your blog
Visit Google Blogspot home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.

Step 2: Locate the CSS id selector of your 'Follow by Emailgadget
When you sign in to your blog, you are presented with the main dashboard. You can then click 'Design' link under your chosen blog title.

Under 'Page Elements' tab, click 'Edit' link of your Blogger 'Follow by Email'. In the title text box copy the title of your blog label gadget.


You can then click 'Edit HTML'. Tick the 'Expand Widget Templates'. Search for the title of your Blogger 'Follow by Email' gadget.


By doing this you can know the id selector of your gadget. In my case it is 'FollowByEmail1'.

You can also find the tag determining the appearance of your gadget title below:
<h2><data:title/></h2>
So to change the appearance of your label gadget you would need to modify something like the following:

#FollowByEmail1 {
  /* css code */
}

#FollowByEmail1 h2{
  /* css code for the title */
}

#FollowByEmail1 form table td{
  /* css code for the input text and submit button */
}

You can also see the html codes creating a table with two columns below. One column is for the text box. Another column is for the submit button.

<table width='100%'>
 <tr>
  <td>
   <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
  </td>

  <td align='center' width='64px'>
   <input class='follow-by-email-submit' type='submit' value='Submit'/>
  </td>
 </tr>
</table>

So to make the submit button locates in another line, you can modify the above html code as following:

<table width='100%'>
 <tr>
   <td>
    <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
   </td>
 </tr>
 <tr>
   <td align='center' width='64px'>
    <input class='follow-by-email-submit' type='submit' value='Submit'/>
   </td>
  </tr>
</table>

And the result would be:
Step 3: Add Custom CSS to your blog
Add your modified CSS codes to your blogger blog html template (click here) :

#FollowByEmail1 {
  padding-top: 5px;
  padding-bottom: 5px;
  border:1px solid #B3B3B3;
}

#FollowByEmail1 h2 {
  text-align: center;
  text-decoration:none;
  font-weight: bold;
}

#FollowByEmail1 form table td{
  padding-top: 5px !important;
}

No comments:

Post a Comment

Blog Archive

About Me

My photo
I am a software developer with roughly 5 years of experience in developing end-to-end solutions in C#, Java, C/C++, PHP and HTML/CSS/Javascript. At the moment, I am joining the Professional Doctorate in Engineering degree program in Software Technology at Eindhoven University of Technology. My areas of particular interest include software design, data structures and algorithms, problem solving, software security, embedded system, machine learning, and data science.