How To Add A Beautiful Subscribe Widget 2018 For Blogger

In this Tutorials, i will explain you How To Add A Beautiful Subscribe Widget 2018 For Blogger, Subscribe widget give your right to collect your own email list for your blog it's necessary today but now let me sow you a preview of this widget :

Preview 

So if you like this widget let's start our Tuto *_*:
Step 1 : Go To Blogger.com >> Layout >> Add HTML/JavaScript and copy paste the code bellow :

<div class="widget-content">
<center><style>
@import url(//fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
/* Subscribe Box */
.widget-content{padding:0}
.subscribe-wrapper h3{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 20px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-wrapper h3 span{display:inline-block;font-weight:bold;font-size:33px;}
.subscribe-wrapper p{margin:0 auto;opacity:.95;text-align:center;font-family: 'Droid Arabic Naskh', serif; font-size: 14px;}
.subscribe-wrapper{color:#fff;background:#952162;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:rgba(0,0,0,0.2);color:#fff;margin:0 0 15px;padding:0.962em 1.847em;width:100%;border:none;text-align:center;outline:0}
.subscribe-css-button{background: #fff!important; color: #E83E3B!important; cursor: pointer; font-weight: 700; padding: 7px; width: 100%; border: 0; font-size: 15px; text-transform: uppercase; transition: all .3s; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}
.subscribe-css-button:hover{color:#aaa!important;transition:all 0.3s ease-in;}
</style>
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>
<span>Get our newest posts at once</span></h3>
<p>
Subscribe to our mailing list and get interesting stuff.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Widgets4free" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Widgets4free', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" value="egtec4" type="hidden">
<input name="loc" value="en_US" type="hidden">
<center><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"></center>
<input class="subscribe-css-button" title="" value="Subscribe Now" type="submit">
</form>
</div>
</div>
</div>
</center>
</div>

Change The red with your Feed URL(FeedBurner).
Step 2 : Click Save

That's All, if you like this post please share this post with your friends and leave a comment here *_*.