windows phone type share buttons with subscribe button

Today I’m going to show to how to add Rss feed bar with subscribe box all in one place. This is just like windows phone incons widget. Your visitors can subscribe and share and rss news from this widget. It will help to get pageviews  for  your blogger and check it from demo link below. This will awsome for your blog and website also

All you need is follow this steps and it makes perfect widget

Step1:

                Login in to blogger account and click drop down

               

Step2:

                Now select “layout”  like below

Step3:

                Click Add Gadget and “HTML/JavaScript”

Step4:

                Paste below one of below code.

<style> #socialbox{ border:1px solid #ddd; font-family: segoe ui light; padding: 5px; width: 330px; } #share_icons_facebook { background-color: #3A5894; transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } #share_icons_facebook:hover { background-color: #3A5894; border-radius: 64px; opacity: .7; } #share_icons_twitter { background-color: #39A7ED; transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } #share_icons_twitter:hover { background-color: #39A7ED; border-radius: 64px; } #share_icons_pintrest { background-color: #D21313; transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } #share_icons_pintrest:hover { background-color: #D21313; border-radius: 64px; } #share_icons_g { background-color: #1B1B1B; transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } #share_icons_g:hover { background-color: #1B1B1B; border-radius: 64px; } #share_icons_rss { background-color: #F58125; transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } #share_icons_rss:hover { background-color: #F58125; border-radius: 64px; } .emailtext { color: #444444; font-weight: bold; margin-left: 2px; padding: 7px 15px 7px 7px; width: 120px; outline: none; width: 320px; } .ebutton { color: #fff; background: none; border:none; padding: 7px 20px; background-color: red; } </style> <br /> <div id="socialbox"> <table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody> <tr><td> <a href="http://facebook.com/VBDOTNETCOD" rel="nofollow" target="_blank"> <img id="share_icons_facebook" src="https://lh5.googleusercontent.com/-X6qeExoPErU/UNgSAAaY_tI/AAAAAAAABwg/XKz4udSujBM/s64/facebook.png" /></a></td><td> <a href="http://twitter.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_twitter" src="https://lh3.googleusercontent.com/-9rDdQ-P1SZo/UNgSG1c3ToI/AAAAAAAABxc/xJ_5HnLH94U/s64/twitter.png" /></a></td><td> <a href="http://pinterest.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_pintrest" src="https://lh6.googleusercontent.com/-RjHJUJhiWFo/UNgSF4yW3lI/AAAAAAAABxM/_EJ_S3xvQZM/s64/pintrest.png" /></a></td><td> <a href="https://plus.google.com/u/0/112997195363402486134" rel="nofollow" target="_blank"><img id="share_icons_g" src="https://lh5.googleusercontent.com/-UL6PaOsAlM0/UNgSA6PJz4I/AAAAAAAABws/mkytqGaY5xI/s64/goole%252B.png" /></a></td><td> <a href="http://feeds.feedburner.com/VBDOTNETCOD" rel="nofollow" target="_blank"><img id="share_icons_rss" src="https://lh4.googleusercontent.com/-Q3GMcqsrjdE/UNgSFwG8NSI/AAAAAAAABxU/jxBiKAu2Zt8/s64/rss1.png" /></a><a href="http://bloggertrix.com/"></a></td></tr> </tbody></table> <div> <center> <b>Get Newest Articles By EMAILS </b></center> </div> <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="VBDOTNETCOD" /> <input name="loc" type="hidden" value="en_US" /> <input class="emailtext" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /> <input alt="" class="ebutton" title="" type="submit" value="Subscribe" /> </form> </div>

               

Step5:

                For social medi icons, you can chage the URLs as your link.

Replace VBDOTNETCOD with your feedburner ID

Step6:

                Now save your “HTML/JavaScript”