Adaugarea unor butoane de tip "Share"

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Adaugarea unor butoane de tip "Share"

Mesaj Scris de Cassius Dio la data de Mar 29 Ian - 18:57

Adaugarea unor butoane de tip "Share"

Acest tutorial consta in instalarea unor butoane de impartasire ("share") a forumului cu alti prieteni prin intermediul site-urilor de socializare. Efectul tutorialului il puteti previzualiza in urmatoarea imagine:

Coduri CSS de instalat:

Cod:
.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:100%;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.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;
}

Coduri JavaScript de instalat:

- pentru versiunea phpBB2:
Cod:
jQuery(document).ready(function(){
var url=document.URL;
jQuery("#page-body").prepend('
<br>
<div class="cattitle" style="margin-top:5px;">Spune-le prietenilor despre acest forum:<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=Nu ai auzit inca de acest forum?&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=Fa-ti si tu un cont pe acest forum: '+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><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>
');
});

- pentru versiunea phpBB3:
Cod:
jQuery(document).ready(function(){
var url=document.URL;
jQuery("#page-body").prepend('
<br>
<div class="h3" style="margin-top:5px;">Spune-le prietenilor despre acest forum:</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=Nu ai auzit inca de acest forum?&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=Fa-ti si tu un cont pe acest forum: '+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><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>
');
});

- pentru versiunea PunBB:
Cod:
jQuery(document).ready(function(){
var url=document.URL;
jQuery("#main-content").prepend('
<br>
<div class="page-title" style="margin-top:5px;">Spune-le prietenilor despre acest forum:</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=Nu ai auzit inca de acest forum?&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=Fa-ti si tu un cont pe acest forum: '+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><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>
');
});

- pentru versiunea Invision:
Cod:
jQuery(document).ready(function(){
var url=document.URL;
jQuery("#navstrip").append('<br>
<div class="h3" style="margin-top:5px;">Spune-le prietenilor despre acest forum:<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=Nu ai auzit inca de acest forum?&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=Fa-ti si tu un cont pe acest forum: '+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><fb:like href="'+url+'" layout="button_count" width="45"></fb:like></td></tr></table><br>
');
});

Aplicarea codurilor pe forum:

1. Mergeti catre:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS.

Adaugati codurile CSS in foaia de stil si salvati. Pentru a salva faceti click pe butonul Valideaza.

2. Mergeti catre:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript.

Creati un cod JavaScript nou, si in dependenta de versiunea de forum pe care o folositi, adaugati codurile JavaScript necesare.

Dupa ce ati completat toate rubricile corect, faceti click pe butonul Valideaza pentru salvarea modificarilor efectuate.

Tutorial scris de Alex Fowl si zz10, tradus de SGSS

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 83
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum