Add Professional Email Subscription Blogger Widget in Blogger Blog

Every smart blogger knows that, email Subscription blogger widget are Great way to make any Blog or website Popular and Successful. It’s most important element of every blogger. It’s also gather huge amount traffic for your blog. Today i will share a beautiful blue background blogger email subscription widget box for your blog.

https://blogsnucleus.blogspot.com/2016/06/add-professional-email-subscribers.html

Why to add feed burner email subscription widget for blogger.

This Subscription Box also Increase your Blog Subscriber Because it’s Smart and Look Beautiful and Professional and it will too Increase your Blog Social Media Pages visits and will Assist to Get More Followers and Likes on Facebook,Twitter,Google plus,Pinterest, dribbble and instagram . It’s created with pure css with font awesome icons. So Must Add this Email subscribe widget with Social Subscription Box in your Blog to provide your Blog Readers Chance to Subscribe on Your Blog.

Note:If you place blogger email subscription widget on sidebar then, it will be better.

Live Demo

Now let’s start our tutorial.

Email Subscribe Blogger Widgets :

At first you have to need add fontawesome icon and PT Sans google font. If already added then ignore this coad.

Step 1: Go to Your Blogger Dashboard >> Template >> Edit HTML and past below codes right after <head>

Step 2: Now need to add this following CSS Code before </style>

#subscribebox{background:#0080FF;padding:20px;font-family:'PT Sans',sans-serif;}

.widget_follow_subscribe .widget-detail{padding:32px 30px 35px}

#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}

.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}

.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}

.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}

.follow-subscribe-social ul li:last-child{margin:0}

.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}

.follow-subscribe-social ul li a:hover{color:#fff}

form.subscribe{margin-top:-7px}

form.subscribe input{display:block;width:100%}

.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}

.subscribe-email:focus{outline:0}

form.subscribe .placeholder{color:#cacaca}

form.subscribe input:-ms-input-placeholder{color:#cacaca}

form.subscribe input::-webkit-input-placeholder{color:#cacaca}

form.subscribe input:-moz-placeholder{color:#fafafa}

form.subscribe input::-moz-placeholder{color:#fafafa}

.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}

.subscribe-button:hover{background-color:#f1d640}

.subscribe-button:focus{outline:0}

.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Step 3. Now Save Template.

Step 4.Now from dashboard go to Layout >> Add a gadget >> HTML/Javascript and past below HTML code in the box and save widget.

<ul>

</ul>

</div>

<p>Subscribe to my Newsletter</p>

</form>

</div>

<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>