Metro Style Social Icon Widgets For blogger
Hi blogians here i am going to show you how to add metro style social icons widget into your blogg. Metro Style was being introduced by Microsoft in windows 8 and it is most Modern style in computer world today. Its looks really amazing and so awesome visitors likes it so much. Here the widgets consist of four square social icons. As shown in given picture.
Adding the widget in Layout
Go to Blog Title→ Layout →Add Widget→ Html/JavaScript.Past the Below Code
<style>.socialicons_widget_sidebar li { float: left; width: 147px; height: 147px; margin: 0 0 0 0; padding: 0 0 0 0; border-bottom: none;}.socialicons_widget_sidebar li a { line-height: 1px; display: block;}.socialicons_widget_sidebar li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8;}.socialicons_widget_sidebar li a span { display: none;}.socialicons_widget_sidebar li.rss-icon { margin: 0 6px 6px 0;}.socialicons_widget_sidebar li.facebook-icon { margin: 0 6px 0 0;}</style> <div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar"><ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;"> <li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="http://www.twitter.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfEmmQGGUTFaMmqBwKp9OTjDrbZBAKdABYZemlnCiV0UFvjz0NkwB03gSR5YV6rYeGnXLRJrFVjgmDvW497zVDW0okQwyZzST7-i8DXwZHaFWnzFE-MzyXJVapEPpN9y_Oz9lItGja-GlO/s1600/twitter.png" width="147" height="147" /><span>Twitter</span></a></li> <li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="http://www.facebook.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdoUHKmWA5XwYPslpidiFV-2qzDpvW-0-SiRGZ5xSMysm_80ZD_E5La24Cw1n9dxh2RkevuLSOR6dkcu9x6GmHd465ekf_9Ra7FHFRIOH1cU5uHrt8GGNteYqYJcQbykTIEkZo6s-PcVk/s1600/facebook.png" width="147" height="147" /><span>Facebook</span></a></li> <li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="http://feeds.feedburner.com/#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTAaXovCm7-s_DmMFtv-c2GkkINs6Cbc8XkOqI8yZMOY_CEEudrRbQbx9NKqhr5qxzn1Xm1bgVw-EHcESUk9PX8ww8d2CbMi39z2U9AaNP0Cv11vykQ7v31eqM4lFL_NvAy0OH3D2CStN4/s1600/rss.png" width="147" height="147" /><span>Rss Feed</span></a></li> <li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="https://plus.google.com/u/0/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhGhJH_4klGtJ4X9puR7QzkyUiqldijamytovf6Ejm4oVaE5FEjboIeYjxu_5BmkU2RLPtJgJKs0nlBM881weyLg-zmQCljjANIH8jXQCftrY6dIZH0Nw_IkwBesUgXxKnyUC-Des2WjY/s1600/google.png" width="147" height="147" /><span>Google+</span></a></li> </ul></div>
Customization
Once you have added the code change the red shaded text and save it. You are now done and visitors will see this awesome widget on your blog. Thank you!
0 comments