Social Media Profile With Rss Subscription Widget For Blogger
In this tutorial im gonna explain how to add unique Rss Subscription widget with social media profile icons. This is also unique widget designed by bloggertrix.com By using this widget you can link your social media profile Facebook, Twitter and Rss and subscribe field. It will help to get the new updates by emails. im added for it.You can check it from below demo link.If you want
to look at other rss feed subscription widget,Demo
1. Log in to blogger account and Click drop down. 2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.
<style>
#btrixsocialcounters{
width:300px;
padding: 0 0 40px 0;
border: 1px solid #CCC;}
ul#btrixcounters {
list-style: none;
margin:0px;
overflow: hidden;
width:300px;
padding:10px 0 40px 0;
margin:10px 0 -60px 12px;
}
ul#btrixcounters li {
float:left;
margin:0px 0px 5px 0px;
width:auto;
padding:0px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;}
ul#btrixcounters li a {
display: block;
height: 54px;
margin-right: 10px;
padding-top: 85px;
text-align: center;
text-decoration: none;
width: 85px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
ul#btrixcounters li:hover {
opacity:0.6
}
ul#btrixcounters li:last-child a{
margin-right:0px;
}
ul#btrixcounters #counter-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnG5Iz9c_CsSiSptworG3sTB7mNy6SGehBMIxjugfciugKKH-i0HFrJ8Ee1Ohx_P_yuY2bb3DGlCQcAgZlsAPbbZEzHzVEVioEW3I4DhwjGrc96qBT8GQYP18dxd2cXtsNK0DzYg657iLY/s1600/btrix-rss-counter.jpg') no-repeat
}
ul#btrixcounters #counter-rss a {
color:#cf6600
}
ul#btrixcounters #counter-facebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs4vd8Sh16eyvwyH4JP31HFC9jxu7nmYQWXwCh3ytlXZBIzsryE97DjBnA7dW4Fx1buNSa5sd0Ea4TrsT6N1mT2QyGCafT7DxFdgtGVVOsrkLh8O3h2FsBLYwWL-petZvQlej1W7o-Wjv/s1600/btrix-facebook-counter.jpg') no-repeat
}
ul#counters #counter-facebook a {
color:#3b4d8f
}
ul#btrixcounters #counter-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1_-aqXEt0EycLz6LLO15PgSlYilEBlutAiZ54Ni-eRd0ZWMsphfhDcHEk9TMjGKl_WC5BaGhpbn-nmDQOueSRP4UJIaSdi6zYJNkPESqYQ3afm2UzIwKBJzKcxL6_faTAagfRuxtAIs_/s1600/btrix-twitter-counter.jpg') no-repeat
}
ul#btrixcounters #counter-twitter a {
color:#276ab6
}
.textwidget {width: 300px;margin-top: -50px;}
input[type="submit"] {color: white;border: 0px;text-transform: uppercase;font-size: 11px;padding: 13px;float: left;font-weight: bold;background-color: #2DA1EB;margin-left: 100px;cursor: pointer;margin-top: 10px;}
</style>
<center>
<br />
<div id="btrixsocialcounters">
<ul id="btrixcounters">
<li class="first-item" id="counter-rss">
<a href="http://feeds.feedburner.com/bloggertrix">540</a></li>
<li id="counter-facebook">
<a href="http://www.facebook.com/bloggertrix">2319</a></li>
<li id="counter-twitter">
<a href="https://twitter.com/#!/bloggertrix">5263</a></li>
</ul>
<div class="btrixtextwidget">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=350,height=520');return true" style=" padding: 3px; text-align: center;" target="popupwindow">
<h3>Enter your email address:</h3><br />
<input name="email" style="width: 180px;" type="text" /><br />
<input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Subscribe" /></form></div><a href="http://www.bloggertrix.com/2013/03/social-media-profile-with-rss.html" style="margin-right: -50px;margin-top: 100px;font-size: 10px;">Add this</a>
</div>
You have to change the counters manually, just change red color number according to profile.Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
5. Now save your HTML/Javascript'.
You are done..
No comments