If you are using Jetpack plugin on your WordPress and want to put a Subscription widget on your blog with your own customization. Then in this post you will know all the important things for customization of widget area with the Jetpack Plugin. Jetpack is a powerful WordPress plugin to keep checking your blog stats and you can optimize your blog SEO. The plugin comes with a subscription widget to put on your blog sidebar, Blog post or in a single page. But this is a simple widget without any design so you need to customize it by using the following steps.
How to Add Jetpack Subscription Widget on WordPress Blog:
If you want to add a subscription widget on your WordPress blog provided by jetpack then you need to go the Appearance then click on Widget. Here you will see Blog Subscription (Jetpack) widget available so you need drag and drop where you won’t see on your blog sidebar. And then edit the Text that you want to show. After successfully adding Jetpack subscription widget on your blog sidebar you need to customize it by editing or adding few CSS code on your WordPress administrator area. Follow the below steps to add CSS code.
First, you need to click on Appearance and then click edit CSS. I recommend you to use Edit CSS instead of themes CSS code because sometimes our theme CSS code did not work correctly so always use Edit CSS window to add new CSS code on your Wordpress Site or Blog.
After clicking on Edit CSS Menu, your theme customizer will be open with the CSS window. In this window, you will need to write the following CSS code to design your Jetpack Subscription Widget.
#subscribe-email input {
width: 85%;
height: 40px;
padding: 10px 8px;
font-size: 15px;
float: left;
border: 1px solid #ffb2a0;
}</p>
#subscribe-submit input {
background: #0C6041;
width: 15%;
padding: 0;
border: 1px solid #0C6041;
height: 40px;
}
#subscribe-text {
background:#F5B041;
padding: 5px;
margin-bottom: 5px;
color:black;
font-weight:bold;
text-align:center;
border-radius:10px
}
#blog_subscription-2{
background:#F56A29;
padding:15px;
color:white;
text-align:center;
padding-top:30px;
padding-bottom:30px
}
Without using the Above CSS code your blog Jetpack Subscription widget will be looks like this. In this Screenshot you can see there is no any design available for Jetpack Subscription. So you need to write the above code on the Edit CSS window.
After adding the Following CSS code your Jetpack Subscription widget will look like the following Screenshot. In this screenshot, you can see the New design of your Subscription widget. If you want to change the color of this Widget then choose the best color for your theme and add the color code on the Background color on CSS code.
So Just copy the above code and paste in on the Edit CSS window to use the above design on your WordPress Jetpack Subscription widget.
