Thursday, 9 May 2013
Stylish Social Subscription Box for Blogger
Bloggers are the species who hate traffic in real life but love the same when
they write something new for their readers. Traffic and genuine readership is
the soul for any blog, Every blogger expect that all his post get maximum
exposure and traffic from all around the globe. Some bloggers succeed in
achieving high level of genuine readership while other fails miserably. Every
blogger needs genuine readership for his
blog so that he can generate a good
amount of page views each day. One of the way to get good readership is social
networking sites. Users of social networking sites are hungry for good and
worth to read blogs. If we add a social subscription box on our blog then we
can get a good number of audience out from the leading social networks, these
kind of audience is genuine and will help you to turn your blog in to a brand.What is social subscription box?
Social subscription box is a Gadget that contains link to your blog’s all leading social networks accounts as well as feeds subscription, with the help of this social subscription box you can get a good amount of returning visitors to your blog.
Stylish Social Subscription Box for Blogger:
Everyone knows that blogger doesn't provides designing facility like word press. But today we are sharing a stylish social subscription box for Blogger like wordpress, which change dynamically on mouse hover. I am also using this social subscription box with my blog, You can check my sidebar for preview.
To add this social subscription box for Blogger to your blogspot blog just follow these steps:
1) Login to your blogger’s blog.
2) Go to “layout” and then click on “add a gadget” on sidebar.
3) Select html/javaScript as a type of gadget.
4) In title type “Follow us” and in content, copy and paste the following.
<!—START COPY FROM HERE-->
<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFSxZqrFnVP_OzceG7O2eIbDnloILliITqGcpOGVqgMAhEpH6CCRmyz2siLeV1LB51PSGgtusMbfhjDhjIYDYC3_vfJlNvNa093lYhTMGikkghVAGSD-WPCtBafAPp1q5X5-gB-uHrCcg/s454/Sharing%2520Touch%2520Me.png)
no-repeat;
-webkit-transition: ease-in
0.2s all;
-moz-transition: ease-in
0.2s all;
-o-transition: ease-in
0.2s all;
-ms-transition: ease-in
0.2s all;
transition: ease-in 0.2s
all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px
-58px;
}
.touchme a.googleplus:hover
{
background-position: 0px
0px;
}.touchme a.twitter {
background-position: 0px
-290px;
}
.touchme a.twitter:hover {
background-position: 0px
-232px;
}
.touchme a.facebook {
background-position: 0px
-406px;
}
.touchme a.facebook:hover
{
background-position: 0px
-348px;
}
.touchme a.rss {
background-position: 0px
-174px;
}
.touchme a.rss:hover {
background-position: 0px
-116px;
}
</style>
<div
class='touchme'>
<!--RSS-->
<a class='rss'
href="http://feedburner.google.com/fb/a/mailverify?uri=Tricksmode"
rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus'
href="https://plus.google.com/113959661643910960674"
rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook'
href=" http://www.facebook.com/TricksMode
" rel='external
nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter'
href="https://twitter.com/tricksmode"
rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2cSj6Gk07ujY5Yf4msICZlDzI73tP2Rh7CQMqSiyN8BHtupuafKmgoR1Chw17_WD7qJPw9jOdjyYO4bq62z3OqyVaj6e4J66IO5iL_O1Vd2btSwyMRdv8YqHmSSf9YVj19iFLGu5XViO/s48/email%2520%25283%2529.png)
no-repeat 0px 5px ;
width:300px;
padding:0px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 1px 0;
color:#686B6C;
}
.tk-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px
rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tk-emailsubmit:hover{
background:#3d87d0;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px
1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px
1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset
1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#666;}
</style>
<div
class="tk-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Tricksmode"
id="feedform" method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techkgp',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input
gtbfieldid="3" class="textarea" name="email"
onblur="if (this.value == "") {this.value = "Enter
email address here";}" onfocus="if (this.value ==
"Enter email address here") {this.value =
"";}" value="Enter email address here"
type="text" />
<input
type="hidden" value="Techkgp"
name="uri"/><input type="hidden" name="loc"
value="en_US"/>
<input
class="tk-emailsubmit" value="Submit"
type="submit" />
<a
href="www.tricksmode.com" rel="dofollow"><font
size="0.1" color="#C0C0C0">facebook
tricks</font></a>
</form>
</div>
<!—STOP COPY HERE-->
<!—STOP COPY HERE-->
5) Once done, Replace red colored trickmode social networking account url’s with your social networking account urls.
6) Click on save gadget and you’re done.
Now preview your blog and you’ll see a stylish floating subscription box in the sidebar.
Have any questions in mind, drop them in comment box below.
Subscribe to:
Post Comments (Atom)
1 Responses to “Stylish Social Subscription Box for Blogger”
22 May 2013 at 03:27
Must say, its nice email subscription box.
Post a Comment