Latest News
» » Responsive Subscribe Box Amongst Social Icons For Blogger

Responsive Subscribe Box Amongst Social Icons For Blogger

Add Comment
Blogger Tutorials
Friday, March 16, 2018

Add Responsive Subscribe Box amongst Social Icons for Blogger(Blogspot)


Hello Bloggers! Here I am going to part a unproblematic responsive Blogger subscribe box widget/gadget amongst social links icons too Email filling box. From which people tin subscribe your weblog to acquire your latest updates of your weblog post through their Email notifications. This widget/gadget is quite responsive too is too cracking inwards appearance. You must purpose this widget/gadget.

Script too codes to setup subscribe box on your Blogger blog

<style type="text/css">
div.subscribe{width:100%; padding:15px 0; height:80px}
#bor-social{background: #FFFFFF; border: 1px enterprise #E6E6E6; margin: 0 0 20px;}
.subscribe{border-bottom: 1px enterprise #E6E6E6;padding:15px 0;}
.subscribe li a{display: block; float: left; line-height: 1.3; margin: 0 2px 0 0; padding: 38px 0 0 2px; width: 64px;  text-align:center; color: #777777; font-size: 11px;}
.subscribe ul{list-style:none;}
.subscribe li {margin: 0 motorcar 0;padding: 0px;border: none;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.subscribe .sub-google a{background: url(http://1.bp.blogspot.com/-lC9AgvCg208/UxDjlzEVdDI/AAAAAAAACSQ/6VNDJSyNM_Y/s1600/ico-google.png) no-repeat 13px 0;}
.subscribe .sub-twitter a{background: url(http://1.bp.blogspot.com/-NB2cMSawG8o/UxDjn7IaE7I/AAAAAAAACSg/cOC-YMt_Mtg/s1600/ico-twitter.png) no-repeat 15px 0;}
.subscribe .sub-facebook a{background: url(http://3.bp.blogspot.com/-G4_BfjWP96s/UxDjm8r6eRI/AAAAAAAACSY/2rV1MJlKoe0/s1600/ico-facebook.png) no-repeat 15px 0;}
.subscribe .sub-rss a{background: url(http://1.bp.blogspot.com/-2jhfGbPuYho/UxDjlNGxPFI/AAAAAAAACSI/qQy51oqO2g4/s1600/ico-rss.png) no-repeat 16px 0;}
.subscribe .sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
.linked {width:100%; cursor: auto;}
.linked cast { margin:0; padding:0;}
.linked p.intro {font-size: 14px; line-height: 1.5; color:#000; padding:10px 20px 0; margin:0 0 5px; font-weight:bold;}
.linked a{ color:#777 !important;}
.linked p.feed { margin:0 10px 0 18px; font-size:12px; color:#777777; }
.form-go{ background: url(http://3.bp.blogspot.com/-wTLtzwr6Z7w/UXpe75Yi78I/AAAAAAAAA1k/TkaF6yr7AWA/s1600/alert-overlay.png); color: #2C2F32; margin-left: 10px; height: 29px; padding: 0px 6px; border: 1px enterprise #ddd; cursor: pointer; margin-bottom: 9px;moz-border-radius: 5px; width:67px; margin-left:0px;
-webkit-border-radius: 5px; text-shadow: 1px 1px 0 #fff;}
.form-go:hover{opacity: 0.8;}            </style>
      
    <div id='bor-social'>
<div class='subscribe'>
<ul>
<!-- Social Profile Icons -->
<li class='sub-google'><a href='YOUR-GOOGLE+-URL' rel='nofollow' target='_blank'>Google+</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
</ul>
</div><div class='clear'/>
<div class='linked'>
<p class='intro'>E-mail Newsletter</p>
<p class='feed'>Receive Latest Posts from CB Blogger Straight inwards Your Email Inbox</p>
<!-- Configure Subscribe Form -->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:8px 3px 12px 15px; margin:0 0 0 3px;' target='popupwindow'>
<p><input class='form-subscibe' name='email' placeholder='E-mail' style='width:160px;border-color: #ccc #efefef #efefef #ccc; border-width: 1px; border-style: solid; color: #777; padding: 6px 6px 6px 10px;' type='text'/>
<input name='uri' type='hidden' value='howtolearnblog'/><input name='loc' type='hidden' value='en_US'/>
<input class='form-go' type='submit' value='Submit'/></p></form>
</div></div>
<div class='clear'/></div></div>

How to setup subscribe box for Blogger (Blogspot)?

Follow these steps:
  • Replace all the yellow marked lift too URL amongst your weblog feed name.
  • The glue this code on sidebar of your blog.
  • Go to Theme department on your blog.
  • Click on Add Gadgets on sidebar. 
  • Select HTML/JAVASCRIPT

  • Modify too re-create the inwards a higher house codes.
  • Put the concluding code on html/javascript box.


Watch hither video tutorial


I promise everything is clear. If y'all convey whatever form of occupation regarding to setup subscribe box on Blogger's blog. Then, Please write your occupation below on comment box.

0 Response to "Responsive Subscribe Box Amongst Social Icons For Blogger"

Subscribe to: Post Comments (Atom)