seo How To Add Mashable WordPress Style Social Subscription Form To Blogger/blog 2013

on Saturday, March 23, 2013 | 0 Comment

Seo Master present to you:

Adding Mashable WordPress Stylish Social Subscription Form Blogger/blog

This Tutorial All About How To Add Mashable WordPress Style Social Subscription Form To Blogger/blog.i Will Try that how we can Add This own blogger and Blog.

Five Easy Steps Follow

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".
Copy the code below and paste it inside the "Content Box".

<style>

.Subscribe-BH h6{
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIG3t8YlGO5djmFxNJjwy8gAqDiujZLwBNtwyNUskyqwKO-Nm7_jK6Pdv84NJEYahgs4pIxz1iFTAeJEk-mDEp4gFwUYzBas2N8HX6LnCM-r-z5OBh4H-5rvNjIey9oZnY6Ik0BeUa28/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeW0fD4hX0DW35Zj97O1nmGVN4edko-2vScfQu8p6ny-8YbKPVE-A30YLv6rPc9qsp-KDLDLYOQ8SRwdi17_Mdt_eFlCNbqbwiyZdLdtQRbCoTp3DCLqH3Cj_jrrAqpZseRgHoM0HhD8zZ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNu8DVq_cJIIHfPcB9GWgE7ynh6A8hKzI7usq43T3fzUG2W7aLZPLotTHu9RW7WFoEuxvxOPMzrcHR0rQJYuEUR0D3noPDomnskBfRgy4GFOfbsvNk6rsOWJtb1agngEJvOJBrapkfVOyX/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.www.matrixar.com/">Imtiaz Ahmed</a></p>

<div class="Subscribe-BH">

<h6 class='title'>Subscribe Now!</h6>

<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/imtiazbloggertrick"><img src="http://feeds.feedburner.com/~fc/imtiazbloggertrick?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/imtiazbloggertrick" rel="nofollow" target="_blank">Rss</a></li>

<li class="twicon">
<a href="http://twitter.com/itsimtiazforum" rel="nofollow" target="_blank">Twitter</a></li>

<li class="fbicon">
<a href="http://www.facebook.com/imtiazbloggertrick" rel="nofollow" target="_blank">FaceBook</a></li>

<li class="gicon">
<a href="https://plus.google.com/114713654938026424676/" rel="nofollow" target="_blank">Google+</a></li>

<li class="pinicon">
<a href="http://pinterest.com/itsimtiazforum" 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=imtiazbloggertrick', '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>

Make these Some important changes This Code.

Please Change Only Highlights Codes Such as imtiazbloggertrick and itsimtiazforum

i Hope You Are Done It.. 2013, By: Seo Master

Labels: Blogger tricks, social media, Widget