How to Add Metro Style Social Widget for Blogger

How to Add Metro Style Social Widget for Blogger

<div class=”metro-social”>

<li><a class=”fb” href=”https://bbloggertutorials.blogspot.com/2013/09/Your Facebook URL here“></a></li>

<li><a class=”tw” href=”https://bbloggertutorials.blogspot.com/2013/09/Your Twitter URL here“></a></li>

<li><a class=”gp” href=”https://bbloggertutorials.blogspot.com/2013/09/Your GooGle + URL here“></a></li>

<li><a class=”fd” href=”https://bbloggertutorials.blogspot.com/2013/09/Your FeedBurner URL here“></a></li>

</div>

<style>

/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs

Also Check: কুকুরের Vaccine কেন এবং কখন দিবেন?

How to Add Metro Style Social Widget for Blogger

CSS Grid and Custom Shapes, Part 2 | Meta CSS

Distributed under license CC BY-NC-ND 3.0 INT

Please keep license information intact while using this widget*/

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}

.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}

.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}

.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}

.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}

</style>

<br />

Also Check: 

  1. What is the Substation?
  2. TOP 100 SCHOOLS IN BANGLADESH IN 2022
  3. Microsoft Excel Basic Functions 
  4. CPA Marketing
  5. How to Fix Account warning on TikTok?
  6. 20 Best All-Inclusive, Adult-Only Resorts in the World
  7. 7 Top Economics Magazines, Publications & Journals in 2022

Check Us on Social Media: FacebookTwitterInstagramPinterestLinkedin