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.
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.
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>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
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.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri= BLOGSNUCLEUS ' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri= BLOGSNUCLEUS, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value=BLOGSNUCLEUS/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>
Customization:
# Modify all # tag with your all social media link.
# Modify all BLOGSNUCLEUS with your own feedburner user name.
# Modify background color #0080FF with your own.
0 Response to "Add Professional Email Subscription Blogger Widget in Blogger Blog"
Posting Komentar