Blog E Trick: Metro Styled Social Subscription Widget For Blogger

We did post about how to add metro style social widget to blogger.

How To Install in to Blogger

1. Login To Blogger Dashboard

2. Select Layout

3. Click on add a gadget

4. Scroll down

5. Click on HTML/JavaScript

And then paste the code there and make changes in it.

<center><p id='rb_socialicons'>

<a href='http://feeds.feedburner.com/YourID' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYTH1aJhH5NsQSCowbvF50wOL6r1V-6yNszYDth6zRIu0rpcbTUqmc4KiXLzl1Goi7iA5P2qqAv8AwslUI3VhF_IDDKTqfB5RE0HWPtrJG-zOs0MGFz4-iC35DU1HV3gpE2QPG5FBNnWT/s1600/rss-inactive.png'' onmouseover='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibC1eXXWerR8EDEV0N-XrWewHbtfX-Lc_hTd1Sos7G0WYsPX-E_0-62K1cKVjY2nOKhWTAwEHzSmsS0fXSjnu26CUHdsiFoUMiA2c7Rcw2uFkZZwLL68oFEu7Dr1V1KSkwXUugKYr3h1rl/s1600/rss.png'' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYTH1aJhH5NsQSCowbvF50wOL6r1V-6yNszYDth6zRIu0rpcbTUqmc4KiXLzl1Goi7iA5P2qqAv8AwslUI3VhF_IDDKTqfB5RE0HWPtrJG-zOs0MGFz4-iC35DU1HV3gpE2QPG5FBNnWT/s1600/rss-inactive.png'/></a>

<a href='http://facebook.com/YourID' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1V1lzw8pX_cyzq1d5V5nciXlp2tWzlZQZ7ri9f7g34t7NejmU2AcYZAaYadUwW1NvpmNZt1zRfT5TyYJk30MnpGg30wSubFBAdZHP1JWKNgvK80repPIN1jamOjdypqu6dB60JBh0klt7/s1600/facebook-inactive.png'' onmouseover='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dOX6_tPlXzcN_-JLkKZU0UV9ZQMcUl9B_C4gnjS8M_xGNIdY6yvlOz0IM9Ji_-htw1Ee7tx_zjU3uq2O7XKmA8aOpXonEPDOeizROGoqvyjx4TV6jGpdEaiGugRamtFrzYzsLJ1FsRBi/s1600/facebook.png'' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1V1lzw8pX_cyzq1d5V5nciXlp2tWzlZQZ7ri9f7g34t7NejmU2AcYZAaYadUwW1NvpmNZt1zRfT5TyYJk30MnpGg30wSubFBAdZHP1JWKNgvK80repPIN1jamOjdypqu6dB60JBh0klt7/s1600/facebook-inactive.png'/></a>

<a href='http://twitter.com/YourID' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfwopv9JmumolhtS7X1pOWTesG4qJATumqAtRCHm3Iu3JIri-2IpZvNDm-2voxRgBH-AQ88XGu0EDYbQggaYxyf0cKYKZRJzC7kgp5u-qk6rOwmncFZRXgTMvwgpckCSRlPn2QMgb9eGu/s1600/twitter-inactive.png'' onmouseover='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIwtQlBfArxsqawd0njW26A521jpXI5Ia_gxdLPJdHmP3OW1mAo44Wr43yDvWvmt-4MaGK59sEF64o56jaeKWTrn8_Tm7YMQJtwIg9TjTTb5mxt0ASDbK7YK9AnKUk4Au_0rR6UnGkJxM/s1600/twitter.png'' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfwopv9JmumolhtS7X1pOWTesG4qJATumqAtRCHm3Iu3JIri-2IpZvNDm-2voxRgBH-AQ88XGu0EDYbQggaYxyf0cKYKZRJzC7kgp5u-qk6rOwmncFZRXgTMvwgpckCSRlPn2QMgb9eGu/s1600/twitter-inactive.png'/></a>

<a href='https://plus.google.com/u/0/115950**********1' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPpU2Syvt5UWeKdnJiWSytVjouy2ZNw7lhXgf1n482O0RkAV5FdMP8aWugRRbHxbLoPItxBLf9cE6DJj8i2C_XQGcaJy8Ux93M5oUstVMuQYLf123NynRITEYDTC0PtiOq1AiAxdEdwMB/s1600/google-plus-inactive.png'' onmouseover='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjWzmTG24P0LK8fcY34n1d0uJwFNIS3RZPC-h6RNI07doLYMRBcxbcD2R0XUMQMZnbO7F2jREeER4GD74WHutl6k-fUGbsv89rmVlrRxMsExBFSWI_AKaz1A9lUg08gScaRQ0f0Dt_tTaV/s1600/google-plus.png'' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPpU2Syvt5UWeKdnJiWSytVjouy2ZNw7lhXgf1n482O0RkAV5FdMP8aWugRRbHxbLoPItxBLf9cE6DJj8i2C_XQGcaJy8Ux93M5oUstVMuQYLf123NynRITEYDTC0PtiOq1AiAxdEdwMB/s1600/google-plus-inactive.png'/></a>

<a href='http://pinterest.com/YourID/' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3_02Ed9KxUGM_82p2w4mjG4zBLk4YkITUIZHaHZMU-uqY-ZL_rNfkUeyhloT01zDnQG3le3hPjLdZlfmZSrNm-Ds7L93nSVKE-eIP51bK00PsSCzsAY7ZJJQzcu7XRkgVwdsB0Nry2Wv/s1600/pinterest-inactive.png'' onmouseover='this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWdGZOHN9TZaiFgdXElKY6ALFeHwx00DFRJSq19P2XyTJN0Chkklt17-gOyxQwgbURXRVw8XamO-ollv0iMRpMCTjQs5SlwTUHjndRN2_AW3gDL-RD1RLoijenNMxR6ntzw9GklZ2tpb1/s1600/pinterest.png'' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3_02Ed9KxUGM_82p2w4mjG4zBLk4YkITUIZHaHZMU-uqY-ZL_rNfkUeyhloT01zDnQG3le3hPjLdZlfmZSrNm-Ds7L93nSVKE-eIP51bK00PsSCzsAY7ZJJQzcu7XRkgVwdsB0Nry2Wv/s1600/pinterest-inactive.png'/></a></p>

</center>

<center>

<div class="sidebar-subscribe-box-form">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=YourID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggeraxe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="YourID" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>

</center>

<style type='text/css'>
#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUDEP1xTAlXO1lS4piuCt2O5Uq9FsuZniXqTBHUkFBYPH3a8VkDPYgWWntTNHkj8QYACs79vLb9lyGMXHB36Ik85Rt1M-uacAphJncllMd0GGrQRt7ZooduRibY86XRyQYaOTDJjO4ATv/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhil90MSx-Z6j1ORVPNsa7BLpqo__jq42LwdqyVVjqyUVi4AnfUjDsl5Amx5Wa8SvGLlM43eY-No3D1TmMDYd0RuQsKH3Yn3BqJq_A0yUN2mt_4w6agIQ41b8RT17utPrqhS789dUl5_5Om/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc-tZjtcWJ0sdX1yjwxElvM8zpxNgaVD41owwjdPNGBEn8q6LcF8iM0vCTDOpa8eLr-rUSh3fCC9kTqdjW0YXChxfmEIyg0k22bTQILz8rO-9GaIqoa4mhyyQcd5fqAyKkhZABTN4p-sN/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpVc5MA_aQT78ghNmQy9Gb0NuYTT-DaCfmn8rPD9SaB_HMITxUt9eRJiQlHGbjRBxCco3Jt4zVc9MDd9D6HqM3hsNAMWs49CS3HEI0tfmwESRyRnmjNPhEgfBpu-x81pzCBIrQqJqSW2gw/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

p#rb_socialicons img {

    -moz-transition: all 0.8s ease-in-out;

    -webkit-transition: all 0.8s ease-in-out;

    -o-transition: all 0.8s ease-in-out;

    -ms-transition: all 0.8s ease-in-out;

    transition: all 0.8s ease-in-out;

}

p#rb_socialicons img:hover {

    -moz-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg);

}

</style>