Comment ajouter un fil CSS3 Out partage Widget Social
Si vous avez envie de changer widget partage social de votre blog, vous avez de la chance. Le tutoriel du jour implique une nouvelle et rafraîchissante sociale partage widget de courtoisie de conception d'Abou Shaleh.
Le widget apparaît comme un cercle gris simple avec le mot "Partager" écrit à l'intérieur, mais une fois que vous passez le curseur de votre souris dessus, quatre boutons d'action apparaissent filature et un zoom arrière de celui-ci: un bouton Facebook «J'aime», un bouton Google +1 , un bouton Tweet et un bouton ShareThis.
Découvrez la démo live .
Voici comment vous pouvez l'installer sur votre blog:
Dans votre tableau de bord Blogger, aller à Conception , puis cliquez sur Modifier le code HTML .
Vérifiez l' widgets modèle Expand boîte.
Recherche pour la balise ou de la ligne de code suivante en appuyant sur Ctrl + F .
<div class='post-footer-line post-footer-line-1'>
Copiez / collez ce code CSS / JavaScript immédiatement à droite après / dessous:
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
{ringMenu.
d'width: 100px;
margin: auto 150px;
}
. ringMenu ul {
list-style : none;
position: relative;
width: 100px;
color: white;
}
. ringMenu ul a {
color: white;
}
. ringMenu ul li {
-webkit-transition: tous 0.3s l'aise en dehors;
-moz-transition: tous 0.3s aise en dehors;
-o-transition: tous 0.3s l'aise en dehors;
-ms-transition: tous 0.3s l'aise en dehors;
transition: tous 0.3s l'aise en dehors;
}
. ringMenu ul li a {
display: block;
width: 100px;
hauteur: 100px;
fond: RGBA (50,50,50,0.7);
text-align: center;
line-height: 100px;
-webkit-border-radius: 50px ;
border-radius: 50px;
font-size: 20px;
}
ringMenu ul li a: hover {.
background: rgba (230,150,20,0.7);
text-decoration: none;
}
. RingMenu ul li: pas {(principal).
-webkit-transform: rotate (-180deg) échelle (0);
-moz-transform: rotate (-180deg) échelle (0);
-o-transform: rotate (-180deg ) échelle (0);
transform: rotate (-180deg) échelle (0);
opacité: 0;
}
ringMenu: hover ul li {.
-webkit-transform: rotate (0) échelle (1);
-moz-transform: tourner (0) échelle (1);
-o-transform: rotate (0) échelle (1);
transform: rotate (0) échelle (1);
opacité: 1;
}
. ringMenu ul li.top {
-webkit-transform- origine: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top:-70px;
gauche: 50px;
}
. ringMenu ul li.bottom {
-webkit-transform-origin: 50% 52px;
-moz-transform-origin: 50% 52px;
-o-transform-origin: 50% 52px;
transform-origin: 50% - 52px;
position: absolute;
bas:-70px;
gauche: 50px;
}
. ringMenu ul li.right {
-webkit-transform-origin:-52px 50%,
-moz-transform-origin:-52px 50%;
-o- transformer d'origine:-52px 50%;
transform-origin:-52px 50%;
position: absolute;
top: 10px;
droite:-50px;
}
. ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 10px;
gauche: 50px-;
}
</ style>
<div >
<script type="text/javascript"> var switchTo5x = false; </ script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"> < / script>
<script stLight.options type="text/javascript"> ({éditeur: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"}); </ script>
<ul>
<li> <a href = "# principal"> Share </ a> </ li>
<span <li> class='st_fblike_vcount' displayText='Like'> </ span> </ li>
<li> <span class = 'st_sharethis_vcount' displayText = «Partager»> </ span> </ li>
<span <li> class='st_plusone_vcount' displayText='+1'> </ span> </ li>
<li> <span class = 'st_twitter_vcount' displayText = ' Tweet> </ span> </ li>
</ ul>
</ div>
</ b: if>
Enregistrez votre modèle et c'est tout. Vous avez terminé!
