Ajouter un style Metro Widget Social Bookmarking

Actuellement blogueur a de nombreux types de widgets liés avec bookmarking social dont le contenu l'effet de survol et de nombreux types d'effets pro en lui, mais aujourd'hui ce widget a un look très simple mais sensation professionnelle avec un effet impressionnant grand hover quand vous touchez votre pointeur de la souris à l' texte du widget. Il comprend le Facebook, Twitter, Google Plus et un widget Flux RSS et un widget il nommé Metro Style Widget. Ce widget est simplement faite par les codes courts CSS Il ne comprend pas le JavaScript et aucun autre type de langues, de sorte qu'il ne sera pas face à tout problème en elle.

Metro Style Social Bookmarking
Connectez-vous pour Blogger> Dashborad
Cliquez sur Drop Down Menu et sélectionnez Disposition
Ajouter un gadget HTML / JavaScript
Coller le code ci-dessous en elle.

<style>
# WG-sociale {
width: 305px;
float: left;
margin-top: 10px;
}

# WG-social li {
position: relative;
cursor: pointer;
padding: 0 importante;
}

# WG-social. Fb. Tw. Gp,. Fd {
position: relative;
-Moz-transition: tous .4 s facilité d'in-out;
-Webkit-transition: tous .4 s facilité d'in-out;
-O-transition: tous .4 s facilité d'in-out;
transition: tous .4 s facilité d'in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;
}

# WG-social. Fb {
width: 150px;
height: 152px;
background: url (/ / goo.gl/6xmUk) no-repeat Centre d'# 3b5998;
}

# WG-social. Tw {
width: 150px;
height: 74px;
background: url (/ / goo.gl / oyiFK) no-repeat centre de centre # 3b5998;
}

# WG-social. Gp {
width: 150px;
height: 74px;
background: url (/ / goo.gl/oT0kF) no-repeat Centre d'# 3b5998;
}

# WG-social. Fd {
width: 302px;
height: 74px;
background: url (/ / goo.gl / ncoLY) no-repeat Centre d'# 3b5998;
}

Li # WG-social:. Hover {fb
-Moz-transition: tout .1 s facilité d'in-out;
-Webkit-transition: tout .1 s facilité d'in-out;
background: url (/ / goo.gl/MH8AP) no-repeat centre de centre # 3468b6;
}

Li # WG-social:. Hover {tw
background: url (/ / goo.gl / hHRHv) no-repeat centre de centre # 4099ff;
-Moz-transition: tout .1 s facilité d'in-out;
-Webkit-transition: tout .1 s facilité d'in-out;
}

Li # WG-social:. Hover gp {
background: url (/ / goo.gl/wva4B) no-repeat Centre d'# e44524;
-Moz-transition: tout .1 s facilité d'in-out;
-Webkit-transition: tout .1 s facilité d'in-out;
}

Li # WG-social:. Hover {fd
background: url (/ / goo.gl / JFGqn) no-repeat centre de centre # f60;
-Moz-transition: tout .1 s facilité d'in-out;
-Webkit-transition: tout .1 s facilité d'in-out;
}
</ Style>


<div class="WG" id="WG">
<ul id="WG-social">
<li> <a class="fb" href="https://www.facebook.com/ WidgetGenerators "> </ a> </ li>
<li> <a class="tw" href="http://www.twitter.com/ WidgetGenerator "> </ a> </ li>
<li> <a class="gp" href="https://plus.google.com/ 101961392825834817673 "> </ a> </ li>
<li> <a class="fd" href="http://feeds.feedburner.com/ WidgetGenerators "> </ a> </ li>
</ Ul>
</ Div>

Enfin sauver votre widget.

Apporter des changements ....!
Remplacez WidgetGenerators avec votre page Facebook Nom d'utilisateur.
Remplacez WidgetGenerator avec votre Nom d'utilisateur Twitter.
Remplacez 101961392825834817673 avec votre Google + Nom d'utilisateur.
Remplacez WidgetGenerators avec votre Feed Burner Nom d'utilisateur.

Si n'importe quel problème vient, poser dans les commentaires