Edit Jetpack email Subscription Widget and make it look catchy - Make Money Online

Breaking

Saturday, 13 July 2019

Edit Jetpack email Subscription Widget and make it look catchy

A friend of mine, who uses Jetpack Subscription box on his blog, recently sought my help. You see, he uses it for managing his blog’s mail subscription list. His problem was that he found Jetpack’s mail subscription box to be too dull. Further, as if to make things worse, Jetpack didn’t offer much option to modify the subscription widget. My friend asked me to make it a bit more ‘attractive’ and catchy.

You know, I’m like ‘Good Guy Greg’. I make it a point to help out my friends. Further, interestingly, I too was (and still am) using Jetpack email subscription! But I never looked at the ‘aesthetic’ side of this mail list building service.

I checked the subscription box’s appearance and style. At once, I realized that my friend was not being an idiot! He was absolutely spot-on! The subscription box looked so dull that it almost seemed like it didn’t exist at all! God, just take a look at the color combination and the ‘subscribe button’. Just plain old dull appearance.
jetpack subscription widget dull
Literally non-existent!

This was followed by me delving into the widget’s customization possibilities. That also ended in disappointment. The widget only had options to change the ‘text’ only! I couldn’t change the color settings or layout related stuff using it!

Here’s my take on Jetpack Mail Subscription Widget

The main reason I use it is because it offers the service for free! Further, looking at the technical aspects, it is as clean and pure as my soul (I’m awesomely good hearted!). I mean there is no need to configure it and all. It is a tool from the dreams of a lazy man. It does all the job without the webmaster needing to configure it!

But, when it comes to ‘attractiveness’ and ‘customizability’, it is useless! I mean it, folks!

Things I’m gonna help you customize in Jetpack subscription widget

Of course, there might be plugins to help you customize it. I tried, but couldn’t find any. So, I decided to edit CSS and bring some ‘awesomeness’ to it. That’ll be one thing you’ll learn from this article.

Another thing I noted about it is the ‘style’ of the ‘confirmation e mail’. You see, when a user subscribes to your blog, he/she will receive a mail to ‘confirm’ that subscription. The content of that e mail looked too automated/ robotic to me. It is very easy to change the ‘content’ of that mail. I know that most of you know how to get it done. But still, I’ll show how to do it, for the sake of my readers. Man, I love you people soooo much! Anything for you fellas!

Okay, let’s get this started. I don’t wanna keep you guys in dark for long. First, I’ll show how to use CSS to make it look more attractive. Later, I’ll show how to change the ‘confirmation e mail’.

Using CSS to modify Jetpack mail subscription widget and making it awesome

I’ll describe you how to change the color combination, color and size of the submit button etc here. For doing all this, first of all, we need to find the CSS (Cascading Style Sheets) file of the subscription box.

You may find it easily using your blog’s C Panel. Just follow the following steps-

Open C Panel > File Manager > Web Root (Public HTML) > WP- Content> Plugins > Jetpack > Modules > Subscriptions > Subscriptions.css
subscription.css
Gotcha! Now edit the hell out of him!

Now that you have that little file at your mercy, waste no time editing it! Hack your subscription box into awesomeness!

To edit the various parts of the subscription box, you must know the ‘ids’associated with each of them. I’m listing the important ones here-

id of subscription button- ‘subscribe-submit’
id of subscription text- ‘subscribe-text’
id of e mail address (input)- ‘subscribe-email’

Suppose you want to edit the hell out of the subscribe button, how would you do it? This is how you should edit the CSS-

#subscribe-submit Input {
color: red;
background-color: yellow;
padding 1px 2px; }

As you can see, it all starts with #, followed by the id of the entity you want to edit. This is followed by ‘input’, since the button is a means of giving data (input). The customizations like color, background color, padding etc are contained in the curly braces, each one followed by a semi colon (;).

Let’s go code few more lines, I’m in mood tonight!

#subscribe-text {
color: white;
background-color: green;
}


Here, I’ve not used the term ‘input’ after field id. This is because the text is not a means of giving inputBefore you edit or mess around with any file, pleaseremember to take a backup!

jetpack subscription widget after editing
Looks better, doesn’t it?

These are just basic customizations. With the right codes, you can literally hack your subscription box into awesomeness! For example, you may insert a beautiful background image, change the font style etc.

css codes
Simple codes I used

Since I want you to do exactly that, I’m giving you this link to a good CSS tutorial. There, you’ll find more interesting CSS codes, which you can apply in your case. Learning bits of CSS will surely come handy!

After inserting the necessary codes, remember to save the CSS file. Now, clear the cache of your blog and check out the new avatar of your subscription box!

Making the ‘confirmation email’ a bit more human

The default content of this email hardly sounds convincing. I mean, there is no mention of your blog’s name in it!

If you’re a user of it and haven’t edited it yet, it is high time that you do it! Doing it is incredibly easy. Just go to your blog’s Dashboard > Setting > Reading.

There, you’ll find it. Make the changes as you wish.

That’s all folks!

Okay, I’ve kept my promise. I just gave you what you were searching for. Now, you can’t change the format of the newsletter that jetpack sends. This is because they send the newsletter from their own servers. So, unless you are Hugh Jackman (from the movie Swordfish), you won’t be able to hack their servers and change that stuff!
Hugh Jackman
Pictured here- not you!

Hey, cheer up! Now you at least know how to brighten up your Jetpack subscription box! I need your sharesShare this post with your friends if you think it is helpful and awesome!

No comments:

Post a Comment