Adding Mashable WordPress Style Social Subscription Form
- Login to your Blogger Dashboard.
- Click the drop-down menu and select "Layout".
- Click on an "Add a Gadget" link.
- Scroll and find "HTML/JavaScript" element from the pop-up gadget list.
- Copy the code below and paste it inside the "Content Box".
<!--WordPress Style Social Subscription Form By www.bloggers-hero.blogspot.com-->
<style>
.Subscribe-BH h6{
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLILIpy1WbBaynfW61L9sfJEp57kEPUECQNiKD5jtN0eQ1JAMKitUgm0IdpcTFusnIugsRRCEUpDFjFPMYj6IPt6h3-NcFqBHLmvqZzcjG1g7HuONmFxKN-d2ziaT-U3q-3Mfsm748He8/s300/Subscribe%252Bblogger%252Bheroe.gif) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}
ul.social {
list-style: none;
margin: 10px;
overflow: hidden;
}
.social li {
float: left;
background: none !important;
padding: 0 !important;
margin: 0 8px;
}
.social li a {
display: block;
width: 50px;
height: 40px;
background: url("https://lh3.googleusercontent.com/-ZIq3nyjYYGA/UKni8Sk4OCI/AAAAAAAAG4k/R3QWdsBtQ_w/s250/Subscribe%252Bbloggerheroe%252BSocial.png") no-repeat transparent;
text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
}
.social li a:hover {
padding: 0 !important;
}
.social li.rssicon a {
background-position: 0 0;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a {
background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a {
background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a {
background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}
.social li.pinicon a {
background-position: -200px 0;
}
.social li.rssicon a:hover {
background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a:hover {
background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a:hover {
background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a:hover {
background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.pinicon a:hover {
background-position: -200px -50px;
}
.Subscribe-BH{
width: 300px;
float: left;
}
.Subscribe-BH .count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial;
height: 40px;
line-height: 40px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}
.Subscribe-BH .count span.bigcount{
color:#F17C18;
font-size: 24px;
font-family: Helvetica, Arial;
line-height: 39px;
vertical-align: middle;
margin:0px;
padding:10px 0px 0px 0;
}
.Subscribe-BH .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}
.Subscribe-BH .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 15px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}
.Subscribe-BH .emailsub .emailicon{
background: url(https://lh3.googleusercontent.com/-vXSxBUpddig/UKni7x8iqhI/AAAAAAAAG4c/lRhz5kh9pfI/s32/Subscribe%252Bblogger%252Bhero%252Bsubscribe.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px; line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #333;
}
.emailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.email{
clear:both;
width:100%;
margin:10px 0;
}
.emailform{
position:relative;
width:300px;
margin:0 auto;
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.emailbutton{
padding:8px !important;
}
.emailform, .emailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>
<p style="display:none;">Email Subscription box by<a href="http://www.bloggers-hero.blogspot.com/">Adrian Lucernas</a></p>
<div class="Subscribe-BH">
<h6 class='title'>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/bloggerheroe"><img src="http://feeds.feedburner.com/~fc/bloggerheroe?bg=F17C18&fg=000000&anim=1" height="26" width="88" style="border:0" alt="" /></a>
</span> Learn Pro Tricks daily </div>
<div class="subicons">
<ul class="social">
<li class="rssicon">
<a href="http://feeds.feedburner.com/bloggerheroe" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon">
<a href="http://twitter.com/jaa_09" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon">
<a href="http://www.facebook.com/bloggerhero" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="gicon">
<a href="https://plus.google.com/106957260261276964704/" rel="nofollow" target="_blank">Google+</a></li>
<li class="pinicon">
<a href="http://pinterest.com/jaa09" rel="nofollow" target="_blank">Pinterest</a></li>
</ul>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
color:#3A3A3A;
font-size: 13px;
font-weight: normal;
font-family: Helvetica, Arial;
padding:0;
margin:0;
">Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.</p>
</div>
<div class="email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="Bloggerheroe" name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div>
<!--WordPress Style Social Subscription Form By www.bloggers-hero.blogspot.com-->
- Click "Save".
- View your blog to see the widget.
Make these important changes:
- You should need to change this (<a href="http://feeds.feedburner.com/bloggerheroe"><img src="http://feeds.feedburner.com/~fc/bloggerheroe?bg=F17C18&fg=000000&anim=1" height="26" width="88" style="border:0" alt="" /></a>) inorder to view your Feed Count. Just make sure your FeedCount is activated. If it is not yet activated, just follow the steps below on how to activate:
- On your My Feeds page, click your feed, then click the Publicize tab.
- If FeedCount isn't already active, apply your desired color/animation settings and click Activate.
- Copy the URL that's in the src attribute of the <img> tag in the HTML code you're given to use to display FeedCount. It will start with http://feeds.feedburner.com/~fc/…
- http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe – You should replace this with your feedburner email subscription link. To get this, log in to feedburner, click on your feed. Then go to Publicize > Email Subscription. Activate and get the email subscription link under Subscription Link Code.
- Bloggerheroe – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is Bloggerheroe as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=bloggerheroe
- http://feeds.feedburner.com/bloggerheroe – Replace this with your feedburner link.
- http://twitter.com/jaa_09 – Replace with your twitter profile link.
- http://www.facebook.com/bloggerhero – Your facebook page or profile link here.
- https://plus.google.com/106957260261276964704/ – Replace with your Google+ profile link.
- http://pinterest.com/jaa09/ - Your Pinterest profile link here.
I would be truly diverted to concentrate nigh your suggestions and feedback. If you visaged any discommode then do not fearfulness and let me know!
No comments:
Post a Comment