Beranda › Blogger Widgets

Responsive Subscribe Box alongside Social Icons for Blogger

Ditulis Cica Selasa, 27 Maret 2018 Tulis Komentar Edit

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

Hello Bloggers! Here I am going to percentage a uncomplicated responsive Blogger subscribe box widget/gadget alongside social links icons as well as Email filling box. From which people tin hand the sack subscribe your weblog to acquire your latest updates of your weblog post through their Email notifications. This widget/gadget is quite responsive as well as is likewise dandy inwards appearance. You must purpose this widget/gadget.

Script as well as 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 venture #E6E6E6; margin: 0 0 20px;}
.subscribe{border-bottom: 1px venture #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 car 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 shape { 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 venture #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>

<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>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtolearnblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 as well as URL alongside 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 as well as re-create the inwards a higher house codes.
Put the in conclusion code on html/javascript box.

Watch hither video tutorial

I promise everything is clear. If you lot convey whatsoever sort of work regarding to setup subscribe box on Blogger's blog. Then, Please write your work below on comment box.

Belum ada Komentar untuk "Responsive Subscribe Box alongside Social Icons for Blogger"

Posting Komentar

Langganan: Posting Komentar (Atom)