In this tutorial im gonna explain how to add Metro
Style social media widget for blogger. By using
this widget you can link your social media profile
Facebook, Twitter Youtube Rss and linkedin IDs
2. Now select "Layout" Like Below.
4. Paste below code.
<style> .metro-social{width:315px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjr8ZZMP4dD8VBei3H0rDnpK8WntTDaSI-26QS_HtsISyyg8G-96O8uXfK837GxM2aKQ3NvKJ55JTw2dxXbL6NA_bmZyWNSmB_DDujUtvlAab-XzDLiozIDMdG1WtwXXddcHjMwb-kww/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikLXr3oI52t10DZE0BTVrEoZn2r8AVCOIRg1lOAVFbpuk70Q8DaZgANBu-KLXgvHO0AoRAGYciGMLlR5Fl9e9lugbwKtXs_nmxmooZJG-2AoxNlGj9djAmeUYy6W0-WIzgWOVM4HXhfC0/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYn8Go00G6OwGSK17nYs7agtzK6LACn8GM1qi0TdNGKNkazvGMy1dgMqBqk20isyKSGW_Tsbb-v9HyUKD4Ixbokqh37A34Ogr47CNieHjOwivuf612cS-B5AG6_uN0eHJYNSD9QfNtrbw/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px} .metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipguw4QA4YRd2LAa_0_A1s-su0wb2412euDlzaxPqlZxhKZGg036RL7qW7aV8EaJufZ7LkvLC2B5SW6GLEYBY_Ci4nVo90ot3S9kSPrhlmYkTSXQLRqFfxGP882mD8WQdMq0kXB0YGMm8/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px} .metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBquuFl5zAxptUCmWQwFKfDSG4Z4xy8VmyKbBUy5qSiHVPPqyIwx0AMXfzxUv-Y7BWB2jo4chBGfwovUeok9xYABPQQzVMBsSeWtDvQz8X7UjTjBkRPwEieSj5JCmFKBMJSwII96Ju28w/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Um-7wsAIcxYuohxpYGCV-UeJG9ae01Us-6fZ31eND1i4xULCvlTxYWrthocS93IFhyphenhyphenr1zP4yujP5G5lB20E9wpOAsvOy87yILYj8vxpgwKfTiKHIG1rtX9nwxCqH-IFnAiZ6lpxoEnA/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxxOd4urzzSpCsUV5UYyj_y3ZkJgzeV8FrPCTG3WiwVEjDtIJe9j_l3a0bidO1p1WV1qGeRP_n-xHGgr_38viopBjxN99UkzH_Zdy6cKM9Cgbs6sqfy4FxKHeQi6XxRm3eZmS-7Oa7dPA/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAnAObZz4faFOpCejFoOmnvQS4ER39GDVKllQCFs2MgQBeE4ODJnktJMqWKQVMc2kFBc0pvvVN33m9q2Na7oBqR42aS1mwSBygeHfnhpl3nIwBu50tOnNPJE1K5qWvKeAQlCsv8p4-fw/s1600/bt-facebook.png) no-repeat center center #1f69b3} .metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRxdzf9xWxordRn-0DnXNWOAiGZzw4U7NEYigMdmmW7G4pNHVtLuzgLjOT3TyHPAcxIajzbxl4kYZiwx-0bLPb1eL1iTdfFeTj2iYGBFFrhGd-dXypvdxq_PPWlm3RWDVH9NeVYHrDWK4/s1600/bt-twitter.png) no-repeat center center #43b3e5} .metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip5qbcoxGtZZPlWzQ6iGg3tMdMQWmWBRoMfchxPGkrrfjyH5tJzh0yZ2Z3XR_73P8DUQCnEAjU_T3-QcIqAq_yx8Y2t6L6zPD0k1qrr2uJTuz_wsuj9_rdBYOvAM_2YZ3WLPLYQgegbi8/s1600/bt-google+plus.png) no-repeat center center #da4a38} .metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJU7reVndtl_estQpNjNAP2TWRwmAWmg8Shg6N_aEHXjfaYakUTnxaqODjJFPjzz9v7fNrDCesgtXBWyU7nhoLM7S5INrZBw1sqShIilAdQUP6Bw5JAGNTaAeqsEG5U3Aj3uEq3wT1GkI/s1600/bt-pinterest.png) no-repeat center center #d73532} .metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPnf7ZpSXbX_z0aVsE9HZ3U7_Es2-Z3LENPm9KSQak0Yoz5PFhyphenhyphen_PXaRFdZCMnVT9sgQ3Yhdq16Vf8dTbIBFzz7PKMkuuKg9Rb16PO6-R0VhLq1veuM5KsElZT006Z3SPScUG2BKC7Ac/s1600/bt-linkedin.png) no-repeat center center #0097bd} .metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MVslnVbRBKyQLfo3D2lhdHWk0ElhXuF4hnwRrH2YEAEeNbZH-8G0ezyDSXjDnFgqzgzJajSye2Z9wHQEz0MREcqRkODS2OpkiiNuq5HlZEsYV2cH2c19NeRYZ1-ODqIGsxNo9Hmk2EU/s1600/bt-youtube.png) no-repeat center center #e64a41} .metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZ-4ClVHFub3J8PU311a8F6luusBJzK_ClZ4CDyjFcSVHejOIKafLdZ1Z5wDvicqHylpMUa6w-9oMABT72mcUcWckCEVQv3w7ObjxGS5Fjl0_3dTV3vLiPo4D1mx7KUlwuA8Q8zc7jcc/s1600/bt-feed.png) no-repeat center center #e9a01c} </style> <div class="metro-social"> <br /> <li><a class="facebookbt" href="http://www.facebook.com/bloggertrix"></a></li> <li><a class="twitterbt" href="http://twitter.com/bloggertrix"></a></li> <li><a class="googleplusbt" href="https://plus.google.com/107955298793879607964"></a></li> <li><a class="pinterestbt" href="http://pinterest.com/bloggertrix"></a></li> <li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li> <li><a class="youtubebt" href="http://www.youtube.com/username"></a></li> <li><a class="rssbt" href="http://feeds.feedburner.com/bloggertrix"></a></li> </div>
Replace bloggertrix with your Facebook username
Replace bloggertrix with your Twitter Username
Replace 107955298793879607964 With Google plus profile ID
Replace bloggertrix with your Pinterest ID
Replace Username with your LinkedIn ID
Replace bloggertrix with your Youtube ID
Replace bloggertrix with your Feedburner ID
5. Now save your HTML/Javascript'.
You are done...
Wow, marvelous blog format! How lengthy have you been blogging for? you make blogging glance easy. The overall glance of your web site is fantastic, let alone the content!
ReplyDeletewebsite design