Monday, May 27, 2013

Social Media And Rss Subscribe Widget For Blogger

In this tutorial im gonna explain how to add Social Media And Rss Subscribe Widget. By using this Social Media widget you  can link your social media profile Facebook, Twitter and  Rss and  subscribe field. It Social Media will help to get the new updates by emails. You  can check it from below  demo link .If you want to look at other rss feed subscription widget,click this link. If you have any questions regarding to this.Let me know. I will help you.

Social+Media+And+Rss+Subscribe+Widget


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below code.

<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/bloggertrix" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnUI8wgWOkY3U_9bjn5CHNp2MczCa4n8ygj_a_2ZprrAAJO8WAKjP7fHQQdSOvr5mkfQnjk9_16XfFBYHViqFNrCsXiUjkRqcQNb4kQD7i_PNdULlEeGF3kUo94m7rHttCqvP1SVygOr0/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/bloggertrix" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-Jz17emrtfT2ek2-AX3E2qa7Mm5lS30ZkzjIxYeUTY6hys31VCOGPf4kSWZ48CmAhYlSY8-qnyVuQ5idUlFklhv9YXzPzsJ86pRJTAf2M-BhuKfYKLl9VqaXeDBXhOlIeisMIhngHEE/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini-Rb3f0DbsuRNtDkxFkuNUjkU5EuGVwT5WWmqEKsDzVe5Wb7OfO68g_WtTqrRdiWw0fjvq_Z4P4-_ZhmvRem_AkQntvKpio4_pBhd1vl2sjkq9WaeW30zTiZqw48-DouSYs35S8MwAE/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/bloggertrix" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOqG3toAXjNyYxCczCC-icUXjpePeL6TTK0UsEx8q7cCeun_i7y9w3RnsiTPALqNG5JhdwMcYQcYKoifpSkKNzOh1jgE-LFymaKTsGI3xnDWfI5PVy2nohwKgAYFsJGf8q1fdWahbo_4/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/bloggertrix" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAw7oMiRF5iArHsWGvr1y0T6khz3gszuhf0R5Iwe_YN44G0M0v_0UcKouAzal3wYO-N1WsKVDPjRUsdC4oE8Z-327aDFJzOf8fRLGD8o-R2Jr4Qbj4_5DFdTslBT7dfzGMSEf8H1qDSYU/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/bloggertrix"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>


Replace bloggertrix with your Feedburner ID
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace bloggertrix with your Pinterest Username
Replace UserId with your Twitter Username

5. Now save your HTML/Javascript'.You are done.
This is unique Social Media widget. Hope this helpful to you.

9 comments:

  1. Nice one. You put complete code to allow us customize them. thanks

    ReplyDelete
  2. But on the above code, Bloggertrix feedburner couter is what was displayed, and during email subscription too, it is bloggertrix that was shown in the box that pops up

    ReplyDelete
  3. You're so kind to provide the completed Widget

    ReplyDelete
  4. Thanks for Posting..
    Recently i use it in my blog http://www.pcdrivers.in/

    ReplyDelete
  5. thanks i used it on my website you can find more like this interesting tricks on
    ==>> http://www.MyTricksTime.com/

    ReplyDelete
  6. Thanks It works

    visit: designingtechniques.blogspot.com

    ReplyDelete
  7. very nice thanks to share with us can i use it as popup. if yes plz give me code for www.infopaktel.com

    ReplyDelete