Installer un module "Partager" !

par Alex Fowl Sam 13 Nov 2010 - 17:39

Installer un module "Partager"

Comment installer sur chaque page de son forum un module de ce type :

Installation du CSS

Citation :: Panneau d'administration  Affichage  Couleurs  Feuille de style CSS

Collez ce code et enregistrez :

Code:: .sharing-cl {
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a {
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://i82.servimg.com/u/f82/18/23/88/22/share-10.png) no-repeat;
}
a.sh-su {
background-position:-210px -40px;
}
a.sh-feed {
background-position:-70px -40px;
}
a.sh-tweet {
background-position:-140px -40px;
}
a.sh-mail {
background-position:0 -40px;
}
a.sh-digg {
background-position:-280px -40px;
}
a.sh-face {
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover {
background-position:0 1px;
}
a.sh-feed:hover {
background-position:-70px 1px;
}
a.sh-tweet:hover {
background-position:-140px 1px;
}
a.sh-su:hover {
background-position:-210px 1px;
}
.sh-digg:hover {
background-position:-280px 1px;
}
a.sh-face:hover {
background-position:-350px 1px;
}
#text {
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a {
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration: none;
}

Création du script

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Module de partage" et pour placement "Toutes les pages" (plus d'informations sur la gestion des scripts).

Insertion en haut de page

Créez un nouveau script affiché sur toutes les pages et contenant le code suivant :

Code:: jQuery(document).ready(function () {
var url = document.URL;
jQuery("#page-body, #main-content").before('<div class="h3"><hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body=' + url + '">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif ' + url + '" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u=' + url + '">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url=' + url + '">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url=' + url + '">Digg</a></li> </ul></td><td width="180" align="right" valign=center></td></tr></table><br>');
});

Insertion en bas de page

Créez un nouveau script affiché sur toutes les pages et contenant le code suivant :

Code:: jQuery(document).ready(function () {
var url = document.URL;
jQuery("#main-content, #page-body").append('<div class="h3"><hr></div><table cellspacing=0 cellpadding=0 width=100%><tr><td align=right valign=center style="margin-right:20px;"><ul class="sharing-cl" id="text"> <li><a target="_blank" class="sh-mail" href="mailto:?subject=Cette page devrait te plaire.&body=' + url + '">Email</a></li> <li><a target="_blank" class="sh-feed" href=" /feed">RSS</a></li> <li><a target="_blank" class="sh-tweet" href="http://twitter.com/home?status=Mon ForumActif ' + url + '" target="_blank" onclick="javascript:pageTracker._trackPageview (\'/outbound/twitter.com\');">Twitter</a></li> <li><a target="_blank" class="sh-face" href="http://www.facebook.com/share.php?u=' + url + '">Facebook</a></li> <li><a target="_blank" class="sh-su" href="http://www.stumbleupon.com/submit?url=' + url + '">Stumbleupon</a></li> <li><a target="_blank" class="sh-digg" href="http://digg.com/submit?phase=2&url=' + url + '">Digg</a></li> </ul></td><td width="180" align="right" valign=center></td></tr></table><br>');
});

Installer un module "Partager" !

Vous et Forumactif...

Trucs et astuces