Install High Quality Email Newsletter Widget in Blogger

XpertShout

Read Also

Install High Quality Email Newsletter Widget in Blogger
Install a stylish and high quality email newsletter widget in blogger with two simple steps. XpertShout is sharing newsletter widget with css not sharing third party script. So, now you are thinking what are third party scripts?

Install High Quality Email Newsletter Widget For Blogger

Email Newsletter widgets are also provided by third party websites as plugin e.g Mail Champ, Mailer lite etc. You have to add their code to your site which includes link. There is a disadvantage of these script provided by third party websites. Your website will load slowly which may cause for down rank. But i am sharing this email newsletter plugin with html and css.

You can see demo of email newsletter widget on our site in footer section.

How To Install Stylish & Beautiful Newsletter Blogger Widget

Just follow the below steps to embed a stylish and high quality material design email newsletter widget in blogger templates.

Step 1

Go to your template html editing, and search for footer id and paste just below footer id line.
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=XpertShout' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=XpertShout&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='XpertShout'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='ripplelink subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
Replace all XpertShout with your feedburner email username.
as you can see in below screenshot.

Step 2

Now add email newsletter widget script CSS in blogger html editing. You can add css anywhere above </head>. After adding css you can add step 1 html anywhere, where you want to use. You can use step 1 html in layout tab & can add widget and paste there. But your css should be in template editing.
#subscribe-css{position:relative;padding:20px 0;background:#0a3d53;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#0c4862;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
.subscribe-css-email-field::-webkit-input-placeholder,.subscribe-css-email-field::-moz-placeholder,.subscribe-css-email-field:-ms-input-placeholder,.subscribe-css-email-field:-moz-placeholder{color:rgba(255,255,255,.7)}
@media only screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}}
@media only screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}}

Now enjoy high quality email newsletter widget in blogger.
Load comments

No comments