Social subscription widgets play an vital role in increasing your loyal readers.They help your readers connect to you on different platforms like Facebook and Twitter.
Today in this post i will share a simple but good looking social subscription box which will hopefully help increase you subscriber rate.
Features :
1.Email subscription through feedburner
2.Your Facebook page link
3.Your Twitter profile link.
4.And a link to your Rss feed as well
Preview :
1.Goto your Blogger dashboard and select your blog.
2.Now head to the template section of your blog in the extreme left side of the screen and click on Edit Html.
3.Now press Ctrl + F to get the search bar and search for this code
Today in this post i will share a simple but good looking social subscription box which will hopefully help increase you subscriber rate.
Features :
1.Email subscription through feedburner
2.Your Facebook page link
3.Your Twitter profile link.
4.And a link to your Rss feed as well
Preview :
Social Subscription Widget For Blogger :
1.Goto your Blogger dashboard and select your blog.
2.Now head to the template section of your blog in the extreme left side of the screen and click on Edit Html.
3.Now press Ctrl + F to get the search bar and search for this code
]]></b:skin>4.Now paste the following code above that tag @import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.ebpOldSocial ul {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
overflow: hidden;
}
.ebpOldSocial ul li {
float: left;
width: 90px;
padding: 0 0 0 55px !important;
margin: 0 0 0 5px !important;
line-height: 48px !important;
}
.ebpOldSocial ul li a {
font-size: 20px !important;
text-decoration:none;
padding:0 !important;
margin:0 !important;
text-decoration:none;
}
.ebpOldSocial ul li a:hover {
text-decoration:underline;
}
.ebpOldSocial ul li.w2brss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkckitxL8favu1N18oU8VK00CDFA0v68LGej-e3cKmUSGXnh0N_lv_l9I66jakXnY6Mrp1M7tWwG539ed_QhENpLtWPyASF1b4B-b9Bjn86-EJI8UHhp1BfCoqNY0hIYzEDvuk0hnxWsHc/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.ebpOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamUOV_dGUZI1thwvgS6BdEzh7IE2EbxSaHvhGYVqplZSBYQi6duGMoUSaEcXwFaR9kny7i_ZrCOKSuOgP7It6zsd8nMqtQvX3o5LpNKXPpOYegobw3tAbWe0FDdRk5yx3hNgc07LFtkHF/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.ebpOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidc5Y5YQi7u269qSB8MJUL20-gUSgD-AwG1NJ41YLG_xtl9V6lV3k_mRibGyDhbwTcjWuUFS-EXtqXceDZc7pWIJOp-qnEqHk6dNjPOHzdVNA33RITwHgd7EsdaR8Vulaiq9n5UmRxsloO/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.ebpOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFwVDf5A_OQAXx9AaknrIi_q3prnbZ2czfR8dEGTy3q2LF-w1EUtyui4NZYG8iE2A85WhVtEVoUnxQcDRdKkk_NIoOWA8PkExzZG_byeeOquYzd5XglRnUCQg-FL96vR30dlYELmWyeKfl/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#ebpEmailsub {
display: block;
clear: both;
margin: 10px 0;
}
form.ebpEmailform {
margin: 20px 0 0;
display: block;
clear: both;
}
.emailText {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kI1anjGTuilqjPd6JOkcr87bA-mM1GXyP9lqjGJxp0KwThBQ7ta5jqSfq1-1P83748InzWKqbJkjAqVuH_WWxNIzQ1kvT5PSyYG8GBicWQf5JYyoEC6yUSeFY2jEeWqlykY16dpaRNwb/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}5.Now hit the save template icon and head towards the layout section of your blog.6.Add the Html javascript gadget and place the following code in it. <div class="ebpldSocial"> <ul> <li class="ebprss"><a href="http://feeds.feedburner.com/eliteblogpress">RSS</a></li> <li class="ebpmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=eliteblogpress" >Email</a></li> <li class="ebptwitter"><a href="http://twitter.com/eliteblogpress">Twitter</a></li> <li class="ebpfacebook"><a href="http://facebook.com/eliteblogpress">Facebook</a></li> </ul></div><div id="ebpEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="ebpEmailform"> <input type="hidden" value="eliteblogpress" 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="emailText" />Customization : Don't forget to replace all the Id's and profile links highlighted with blue with your Id's and profile links. <---------------------------------------------------->And that's it you are all done.Do share what was your experience with this post and if you are having any trouble feel free to comment.If you enjoyed the article then do consider sharing it.
No comments:
Post a Comment