Email subscription widget is a subscription form for blogger sidebar provided by feedburner, this widget help your interested visitors to get latest updates from your blog via e-mail. People just enter their email address and then click on the "Subscribe" button and then, they would get all your blog's updates right on their email's Inbox. These widgets not only increase your traffic but also helps you to grow a loyal community of readers.

Benefits Of Email Subscription Widget

Email Subscription box is also considered as the best ways to promote a website. Subscription widget help you in creating an active community of readers and boost your blog traffic. More traffic = More AdSense earning. This widget help you to deliver latest posts to your customers instantaneously via Email, and the best part of this widget is that you will get social media links free in it which are going to help you to connect with your customers via social media channels.

How To Add Email Subscription Widget To Blogger

Even blogger provide the Email subscription widget for blogger but that was not as much appealing as a custom stylish email subscription box with social media integration. Custom email subscription widget provide email subscription service as well as social media service. Here are some best subscription widgets for blogger, so choose according to the design of your blog and follow the steps given below:

Steps: How To Add a Stylish Subscription Widget To Blogger

Adding Font Awesome Stylesheet (Optional)

firstly, we will add a fontawesome CSS file in the head. Fontawesome provides vectors and icons for websites.

Note: You can skip this step if you don't want to display social icons

1. Login to your Blogger account, then go to Theme > Edit HTML.

2. Click anywhere inside the Theme code, then search for the following code:

   </head> Ctrl+F

3. Paste the below given code just above it

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">

4. Click Save .

Configuration

Fillup the fields below and generate your code.

5. #hbzsub {
   	max-width: 300px;
   	margin: auto;
   	border-bottom: 50px solid #d8443d;
   	border-radius: 10px;
   }
   
   #hbzsub .hbzsignup-form {
     background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat top center / 100%;
     padding: 10px 0;
   }
   
   #hbzsub .hbzform-inner h4 {
   	text-align: center;
   	color: #fff;
   	padding: 0;
   	font-size: 18px;
   	margin: 0;
   	font-weight: bold;
   }
   
   #hbzsub .hbzemailform {
   	margin: 45% auto 0;
   	width: 90%;
     font-size: 12px;
   }
   #hbzsub #subscribe {
   	display: flex;
   }
   #hbzsub .hbzemailbox {
   	border: none;
   	margin-right: 2%;
   	box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
   	padding: 7px;
   	display: inline-flex;
   	width: 65%;
   }
   
   #hbzsub .hbzemailbutton {
   	background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
   	border: none;
   	color: #FFF;
   	padding: 7px;
   	border-radius: 5px;
   	display: inline-flex;
   	width: 33%;
   }
   
   #hbzsub .hbzemailbutton:hover {
       background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
   }

   #hbzsub .social-hbz {
   	padding: 20px 0;
   }
   
   #hbzsub .social-hbz ul {
   	display: flex;
   	margin: 0;
   	padding: 0px;
   	flex-wrap: wrap;
   	justify-content: center;
   }
   
   #hbzsub .social-hbz ul li {
   	border: none !important;
   	list-style-type: none !important;
   	display: inline-flex;
   	width: 15%;
   }
   
   #hbzsub .social-hbz ul li a {
   	font-size: 25px;
   	color: #ffffff;
   	width: 84%;
   	padding: 42% 0;
   	border-radius: 50%;
   	display: flex;
   	justify-content: center;
   	height: 0;
   	position: relative;
       margin: 0 8%;
   }
   
   #hbzsub a i {
   	position: absolute;
   	top: 50%;
   	transform: translateY(-50%);
   }
   
   #hbzsub .social-hbz.norms a {
     background: transparent !important;
     color: #d8443d !important;
   }
   
   #hbzsub .social-hbz.norms a:hover {
     opacity: 0.8;
   }

   #hbzsub {
   	background-color: #1E293B;
   	max-width: 300px;
   	margin: auto;
   }
   
   #hbzsub .hbzsignup-form {
   	padding: 20px 0;
   }
   
   #hbzsub .hbzform-inner {
     margin-bottom: 20px;
   }
   
   #hbzsub .hbzform-inner h4 {
   	color: #fff;
   	text-align: center;
   	padding: 0;
     margin: 0;
   	font-size: 18px;
   	font-weight: bold;
   }
   
   #hbzsub .hbzemailform {
   	width: 90%;
   	margin: auto;
   	font-size: 90%;
   }
   
   #hbzsub #subscribe {
     display: flex;
   }
   
   #hbzsub .hbzemailbox {
   	background-color: #FFF;
   	border: 1px solid #FFF;
   	border-radius: 7px 0px 0px 7px;
   	padding: 6px;
   	display: inline-flex;
   	width: 60%;
   }
   
   #hbzsub .hbzemailbutton {
   	background-color: #F0553B;
   	border: 1px solid #F0553B;
   	color: #FFF;
   	border-radius: 0px 7px 7px 0px;
   	padding: 6px;
   	width: 40%;
   	display: inline-flex;
   }
   
   #hbzsub .hbzemailbutton:hover {
       background-color: #1E293B;
       border: 1px solid #FFF;
       box-shadow: 0 0 5px #ddd;
   }

   #hbzsub .social-hbz ul {
   	margin: 0;
   	padding: 0;
   	display: flex;
     flex-wrap: wrap;
   }
   
   #hbzsub .social-hbz ul li {
   	list-style: none;
   	width: 33.334%;
   	display: inline-flex;
       padding: 0;
       margin: 0;
   }
   
   #hbzsub .social-hbz a {
     color: #fff;
   	display: flex;
   	flex: auto;
   	padding: 30% 0;
   	justify-content: center;
   	font-size: 30px;
   	text-decoration: none;
   }
   
   #hbzsub .social-hbz.norms a {
     background: transparent !important;
     color: #fff !important;
   }
   #hbzsub .social-hbz.norms a:hover {
     opacity: 0.8;
   }

   #hbzsub {
   	background-color: #576269;
   	max-width: 300px;
   	margin: auto;
   	padding: 3%;
   }
   
   #hbzsub * {
   	box-sizing: border-box;
   }
   
   #hbzsub .hbzform-inner {
       padding: 15px 0 10px;
   }
   
   #hbzsub .hbzform-inner h4 {
   	color: #fff;
   	text-align: center;
   	padding: 0;
       margin: 0;
   	font-size: 18px;
   	font-weight: bold;
   }
   
   #hbzsub .hbzemailbox {
   	background-color: #798187;
   	color: #FFF;
   	border: 1px solid #697780;
   	padding: 15px;
   	text-align: center;
   	width: 100%;
   }
   
   #hbzsub .hbzemailbutton {
   	background-color: #f35d5c;
   	border: 1px solid #d75453;
   	width: 100%;
   	font-weight: bold;
   	padding: 15px;
   	margin: 10px auto;
   	color: #fff;
   }
   
   #hbzsub .hbzemailbutton:hover {
       background-color: #E64C4B;
       border: 1px solid #BF4A49;
   }

   #hbzsub .social-hbz ul {
   	margin: 0;
   	padding: 0;
   	display: flex;
       flex-wrap: wrap;
   }
   
   #hbzsub .social-hbz ul li {
   	list-style: none;
   	width: 20%;
   	display: inline-flex;
   }
   
   #hbzsub .social-hbz a {
       color: #fff;
   	display: flex;
   	flex: auto;
       width: 100;
       height: 0;
   	padding: 45% 0;
   	justify-content: center;
   	font-size: 22px;
   	text-decoration: none;
       margin: 0 5%;
       position: relative;
   }
   
   #hbzsub a i {
   	position: absolute;
   	top: 50%;
   	transform: translateY(-50%);
   }
   
   #hbzsub .social-hbz.norms a {
     	background: transparent !important;
     	color: #fff !important;
   }
   #hbzsub .social-hbz.norms a:hover {
    	 opacity: 0.8;
   }
   #hbzsub .social-hbz.norms ul {
   	border-bottom: 3px solid #76858e;
   }

   #hbzsub {
   	background-color: #000305;
   	max-width: 300px;
   	margin: auto;
   	padding: 3%;
   }
   
   #hbzsub * {
   	box-sizing: border-box;
   }
   
   #hbzsub .hbzform-inner {
       padding: 15px 0 10px;
   }
   
   #hbzsub .hbzform-inner h4 {
   	color: #fff;
   	text-align: center;
   	padding: 0;
   	margin: 0;
   	font-size: 18px;
   	font-weight: bold;
   }
   
   #hbzsub .hbzform-inner h4::before {
   	content: "\f658";
   	font-family: "Font Awesome 5 Free";
   	margin-right: 10px;
   }
   
   #hbzsub .hbzemailform {
   	padding: 20px 0;
   }
   
   #hbzsub .hbzemailbox {
   	background-color: #fff;
   	color: #000;
   	border: 1px solid #000;
   	padding: 15px;
   	width: 100%;
   	border-radius: 10px;
   }
   
   #hbzsub .hbzemailbutton {
   	background: linear-gradient(to left top, rgb(255, 138, 0), rgb(229, 46, 113));
   	border: 1px solid #000;
   	width: 100%;
   	font-weight: bold;
   	padding: 15px;
   	margin: 10px auto;
   	color: #fff;
   	border-radius: 10px;
   }
   
   #hbzsub .hbzemailbutton:hover {
   	background: linear-gradient(to top left,#ff8a00 30%,#e52e71) !important;
   }

   #hbzsub .social-hbz ul {
   	margin: 0;
   	padding: 0;
   	display: flex;
     flex-wrap: wrap;
   }
   
   #hbzsub .social-hbz ul li {
   	list-style: none;
   	width: 16%;
   	display: inline-flex;
   }
   
   #hbzsub .social-hbz a {
   	color: #fff;
   	display: flex;
   	flex: auto;
   	padding: 45% 0;
   	justify-content: center;
   	font-size: 22px;
   	text-decoration: none;
   	border-radius: 10px;
   	height: 0;
   	position: relative;
       margin: 0 5%;
   }
   
   #hbzsub a i {
   	position: absolute;
   	top: 50%;
   	transform: translateY(-50%);
   }
   
   #hbzsub .social-hbz.norms a {
     background: transparent !important;
     color: #fff !important;
   }
   #hbzsub .social-hbz.norms a:hover {
     opacity: 0.8;
   }

   Heading

   Email Placeholder

   Blog URI

   How to get Blog URI:

   1. Visit https://feedburner.google.com.
   2. Then navigate to Publicize > Email Subscription and find your uri value in given box.
   For an instance: http://feedburner.google.com/fb/a/mailverify?uri=Howbloggerz and <input name='uri' type='hidden' value='Howbloggerz'/>

   Submit Placeholder

   Show social icons

   Monocolor icons

   Facebook

   url

   Instagram

   url

   Youtube

   url

   Pinterest

   url

   Twitter

   url

   RSS

   url

   icons per line

   
       Fill-up the form and click 'Generate Code'
       

   Generate Code

Creating Email Subscription widget

6. Navigate to Layout > Add a Gadget > HTML/JavaScript >

7. Paste your code inside the 'Content'.

8. Click Save

Read: How to Change Email Subscription Delivery Time

Enjoy !

Now visitors of your blog will be able to subscribe your blog easy by using Subscription widget. For any issues related to above Subscription boxes Please Comment Below. More Subscription widgets will be added soon. Stay Updated, Browse Howbloggerz ! :)