lundi 17 juin 2013

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

Aucun commentaire:

Enregistrer un commentaire

Nous vous invitons ici à donner votre point de vue, vos informations, vos arguments. Nous refusons les messages haineux, diffamatoires, racistes ou xénophobes, les menaces, incitations à la violence ou autres injures. Merci de garder un ton respectueux et de penser que de nombreuses personnes vous lisent.
La rédaction

Messages les plus consultés

Inscrivez-vous à notre newsletter pour recevoir les nouveaux articles