Below are the five stylist social subscription widgets for blogger.
TYPE ONE
TYPE ONE
<style>
#sidebar-subscribe-box {
width: 300px;
border: 1px solid #aaa;
border-radius: 3px;
padding: 3px 0
}
.sidebar-subscribe-box-wrapper {
background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4e38af4FsU_GvqGM-xzbxjXthAQ7jwE9lP2a8AiajkpGI8mrJByq2yE94tWU_64-caHaCZP8cZyyulShPXLYbqiJh6GnMVxL5GFZNPfofEVzlH91v9jJZSH5zHF-DpMc0vbL7Jx6hPs/s1600/background.png) repeat scroll 0 0 #f7f7f7;
color: #111;
font-size: 14px;
line-height: 20px;
padding: 1px 20px 10px;
text-align: center;
text-transform: uppercase
}
.sidebar-subscribe-box-form {
clear: both;
display: block;
margin: 10px 0
}
form.sidebar-subscribe-box-form {
clear: both;
display: block;
margin: 10px 0 0;
width: auto
}
.sidebar-subscribe-box-email-field {
-moz-border-radius: 4px;-webkit-border-radius:4px;background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fz-KdnAuHJHEATVqts8dQ-G4t8JNbAIs_26GqtOdVM1n_nIa2UBSb6-HvMtTJxj8CRoyifZr9c2QJOZQbJBuIDA6JktfMKIg1pYktuM5wulsdZd5DMPkhSMnrygP6w-DCjE6-iZjGyY/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button {
background: #09f;
border: 1px solid #007fff;
box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.3) inset, 0 1px 0 transparent;
color: #fff;
cursor: pointer;
font-family: verdana;
font-weight: 700;
padding: 10px;
text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, .4);
text-transform: uppercase;
width: 100%
}
.sidebar-subscribe-box-email-button:hover,
.sidebar-subscribe-box-email-button:focus {
background: #1ca4ff
}
.sidebar-subscribe-box-email-button:active {
-moz-box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgbaundefined0, 0, 0, 0.5) inset;
outline: 0
}
iframe,
object,
embed,
.yt-border iframe,
.yt-border object,
.yt-border embed,
table {
width: 100%
}
embed {
border-radius: 3px;
-moz-box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
background: #FFF;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgbaundefined0, 0, 0, 0.2);
margin: 0;
padding: 4px 4px 4px
}
#footer-section {
border-top: 1px solid #aaa;
box-shadow: inset 0 4px 6px -3px #aaa;
font-family: cambria;
font-size: 14px;
height: 100px;
margin: 10px -30px 5px;
padding: 0 30px;
text-align: center;
width: 100%
}
a.social-icons {
margin-right: 5px;
height: 45px;
width: 45px;
}
a.social-icons:hover {
opacity: .7;
filter: alphaundefinedopacity=70);
}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://facebook.com/alldigitalguide">
<img src="http://i42.photobucket.com/albums/e324/alldigitalguide/facebook_zps8700b3d7.png" />
</a>
<a class="social-icons" href="https://twitter.com/hasanali737">
<img src="http://i42.photobucket.com/albums/e324/alldigitalguide/twitter_zps47e6ab32.png" />
</a>
<a class="social-icons" href="https://plus.google.com/118067472090521095383">
<img src="http://i42.photobucket.com/albums/e324/alldigitalguide/googleplus_zps432c8afe.png" />
</a>
<a class="social-icons" href="http://www.feedburner.com/blogspot/qwzKq">
<img src="http://i42.photobucket.com/albums/e324/alldigitalguide/rss_zps655044d2.png" />
</a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide" class="sidebar-subscribe-box-form" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"
target="popupwindow">
<input name="uri" type="hidden" value="AllDigitalGuide" />
<input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address" />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" />
</form>
</div>
</div>
</div>
TYPE TWO
<style>
#socialnetworking {
border: 1px solid #ebebeb;
width: 280px;
}
.fb-likebox {
padding: 10px 10px 0 10px;
border-bottom: 1px solid #ebebeb;
}
.googleplus {
background: #787c7b;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 280px;
}
#widgetbox {
background: #EBEBEB;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;
}
#widgetbox .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration: none;
}
.g-plusone {
float: left;
}
.twitter {
background: #b1dff5;
border-top: 1px solid #fff;
padding: 10px;
}
.fb {
background: #0a94d4;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.fb span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 280px;
}
.pterest {
background: #EFF5FB;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
border-top: 1px solid #ddd;
}
#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: "Arial", "Helvetica", sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
background: #fbfbfb;
width: 260px;
}
#email-news-subscribe .email-box input.email {
background: #FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial", "Helvetica", sans-serif;
}
#email-news-subscribe .email-box input.email:focus {
color: #333
}
#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradientundefinedcenter top, #afafaf 0, #FF9B00 100%);
background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0, #FFCA00), color-stopundefined1, #FF9B00));
background: -moz-linear-gradientundefinedcenter top, #FFCA00 0, #FF9B00 100%);
-pie-background: linear-gradientundefined270deg, #ffca00, #ff9b00);
font-family: "Arial", "Helvetica", sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: white;
text-shadow: #d08d00 1px 1px 0;
padding: 7px 14px;
margin-left: 3px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image: -moz-linear-gradientundefinedtop, #ffda4d, #ff9b00);
background-image: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#ffda4d), toundefined#ff9b00));
filter: progid: DXImageTransform.Microsoft.GradientundefinedstartColorStr=#ffffff, endColorStr=#ebebeb);
outline: 0;
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999 background: -webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0, #ffda4d), color-stopundefined1, #ff9b00));
background: -moz-linear-gradientundefinedcenter top, #ffda4d 0, #ff9b00 100%);
-pie-background: linear-gradientundefined270deg, #ffda4d, #ff9b00);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: #FFFFFF;
text-shadow: #d08d00 1px 1px 0
}
</style>
<div id="socialnetworking">
<!-- Begin Widget -->
<div class="fb-likebox">
<!-- Facebook -->
<center>
<a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/110774830949115484638" target="_blank">
<img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/google_plus.png" />
</a>
<a style="margin-right: 10px;" href="http://www.facebook.com/alldigitalguide" target="_blank" rel="nofollow">
<img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/facebook.png" />
</a>
<a style="margin-right: 10px;" href="http://feeds2.feedburner.com/AllDigitalGuide" target="_blank" rel="nofollow">
<img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/rss.png" />
</a>
<a style="margin-right: 10px;" href="http://twitter.com/alldigitalguide" target="_blank" rel="nofollow">
<img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/twitter.png" />
</a>
</center>
</div>
<div class="googleplus"> <span><font><font color="white">Recommend Us On Google </font></font></span>
<!-- GooglePlus -->
<!-- Place this tag where you want the 1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
undefinedfunction undefined) {
var po = document.createElementundefined'script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagNameundefined'script')[0];
s.parentNode.insertBeforeundefinedpo, s);
})undefined);
</script>
<script type="text/javascript">
gapi.plusone.renderundefined'plusone-div', {
"size": "medium",
"count": "true"
});
</script>
</div>
<div class="fb">
<!-- Twitter -->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Falldigitalguide&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no"
frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"></iframe> <span><font color="white">Like Us On Facebook</font></span>
</div>
<div class="twitter">
<!-- Twitter -->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=alldigitalguide&show_count=true&show_screen_name=true&size=m"
class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div id="email-news-subscribe">
<!-- Email Subscribe -->
<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;"
/>
<input type="hidden" value="AllDigitalGuide" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</div>
<!-- End Widget -->
TYPE THREE
<div class="subscribe_outer">
<div class="subscribe_wrapper">
<h5>Subscribe Via Email</h5>
<p>Enter your email to get free Updates</p>
<div id="adgEmailsub">
<form class="adgEmailform" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllDigitalGuide', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="AllDigitalGuide" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if undefinedthis.value == " enter your email...") {this.value="" }" onblur="if undefinedthis.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Now! undefinedFREE)" title="" />
</form>
</div>
</div>
</div>
<style>
.subscribe_outer {
background: urlundefined"http://i42.photobucket.com/albums/e324/alldigitalguide/Mobile%20Uploads/strips_zps666b2962.jpg") repeat scroll 0 0 transparent;
margin: 0 -10px;
padding: 5px 0;
}
body {
color: #272727;
font-family: Georgia,"Times New Roman",Times,serif;
}
body {
color: #272727;
font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h5 {
color: #FFFFFF;
}
.sidebar h5 {
color: #272727;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-size: 15px;
font-weight: normal;
padding: 4px 0 10px;
}
h5, h6 {
letter-spacing: 2px;
text-transform: uppercase;
}
.sidebar .subscribe_wrapper h5 {
color: #FFFFFF;
}
.sidebar h5 {
color: #272727;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-size: 15px;
font-weight: normal;
padding: 4px 0 10px;
}
h5, h6 {
letter-spacing: 2px;
text-transform: uppercase;
}
.subscribe_wrapper {
background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM4e38af4FsU_GvqGM-xzbxjXthAQ7jwE9lP2a8AiajkpGI8mrJByq2yE94tWU_64-caHaCZP8cZyyulShPXLYbqiJh6GnMVxL5GFZNPfofEVzlH91v9jJZSH5zHF-DpMc0vbL7Jx6hPs/s1600/background.png") repeat scroll 0 0 #333333;
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
padding: 38px 50px 18px 38px;
}
.emailButton {
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
width: 100%;
}
.emailText {
background: urlundefined"http://i42.photobucket.com/albums/e324/alldigitalguide/Mobile%20Uploads/msg_zpsfec161c4.jpg") no-repeat scroll 10px center #FFFFFF;
border: 0 none;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgbaundefined0, 0, 0, 0.05) inset;
color: #444444;
padding: 10px 40px;
margin: 0 0 15px;
text-decoration: none;
width: 70%;
}
input, textarea {
font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
color: #CCCCCC;
font-size: 14px;
line-height: 20px;
}
.post-body .emailButton {
width: 300px;
}
.emailButton {
background: -moz-linear-gradientundefinedcenter top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgbaundefined0, 0, 0, 0.4);
width: 100%;
}
</style>
CUSTOMIZATIONS
➨Replace Alldigitalguide with your feed url and alldigitalguide with your social networks usernames.Please Note:I am working on remaining two and will update soon!
Keep Visiting!!!!
Post a Comment