[Tutorial] Estilo en Facebook, gogle +1 , compartir face

Started by jaren, May 16, 2013, 08:53:14 AM

Previous topic - Next topic

jaren

Ola amigos  seguiendo con mis tutoriales  o tips enseñare a hacer este bonito estilo




Ojo :  "Cuidado" Si llevas este  post  no olvides  los creditos - BY DEMON GAMERZNICE 

Cualquier cambio que hagas a partir de este Post es bajo su responsabilidad






Abrimos nuetro index css de nuestro  tema [Themes > Tu Tema > Css > Index.css ]


.anmrltlt {
    background: -moz-linear-gradient(center top , #59C2FF 0%, #35B1EF 100%) repeat scroll 0 0 #4899DB;
    border: 1px solid #3399CC;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 12px;
    font-weight: bold;
    margin-left: -4px;
    margin-top: -44px;
    padding: 5px;
    position: absolute;
    text-shadow: 0 0 0.2em #2679D5;
    width: 353px;
}


.cmprdn {
    background-image: -moz-linear-gradient(center top , #FFFFFF 0%, #F0F0F0 100%);
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.23);
    height: 100px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-top: 50px;
    padding: 10px;
    width: 198px;
}



Pegamos al final del todo


Abrimos nuestro index.template [Themes > Tu tema > Index.template.php] si no ecuentran esta en [Themes > Default > Index.template.php]

Buscamos  y pegamos despues del primera etiqueta  echo

<body>';
}

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, \'script\', \'facebook-jssdk\'));</script>



Eso es para poder facebok en su  Display


Seguimos


Nos vamos a Nuestro Display.Template.php [Themes > Tu Tema > Display.Template.php]

Buscamos


      // Show the member's signature?



Pegamos despues



echo'

<div id="dny" class="cmprdn"><div style="width:195px" class="anmrltlt">COMPARTE ESTE TEMA</div>



<div style="height:63px; width:50px; float:left" class="eagz">

<div style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 50px; height: 60px;" id="___plusone_0"><iframe width="100%" scrolling="no" frameborder="0" hspace="0" marginheight="0" marginwidth="0" style="position: static; top: 0px; width: 50px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 60px;" tabindex="0" vspace="0" id="I0_1368703895908" name="I0_1368703895908" src="https://plusone.google.com/_/ 1/fastbutton?bsv&amp;count=true&amp;size=tall&amp;hl=en-US&amp;origin=http://gamerznice.com.nu&amp;url=http://gamerznice.com.nu/&amp;gsrc=3p&amp;jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.es.zjrUxDt_1h4.O/m=__features__/am=IQ/rt=j/d=1/rs=AItRSTM7Fb_ffANxLmw_eIE2U_JOvuLikg#_methods=onPlusOne,_ready,_close,_open,_resizeMe,_renderstart,oncircled&amp;id=I0_1368703895908&amp;parent=http://gamerznice.com.nu&amp;rpctoken=56263830" allowtransparency="true" data-gapiattached="true" title=" 1"></iframe></div>

</div>

<div style="float: left;margin-left: 10px;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>
</div>



<iframe scrolling="no" frameborder="0" allowtransparency="true" src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/ZonaElegante&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=90" style="margin-left:5px;height:63px; width:70px; float:left"></iframe>

<a href="',  $scripturl . '?action=bookmarks;sa=add;id_topic=' . $context['current_topic'] . ';' . $context['session_var'] . '=' . $context['session_id'],'"><img src="', $settings['images_url'], '/addfavorites.png" alt="" title="Añadir a Favoritos" border="0" class="modifybutton" /></a>


</div>';


Con eso quedara las redes Sociales mas chulos  :D


Demo Online:


http://www.gamerznice.com.nu/index.php?topic=217.0


El boton compartir  esta en tuto  de eduardo  puedes verlo dando
CLIK AQUI [nofollow]







No se olviden de visitarme en  mi fantastico y sensual foro  ???

Quote
http://www.gamerznice.com.nu/index.php [nofollow]

Saludos su Gran Amigos Demon  :-X

Mi Foro [nofollow]

rutenio3

Gran tutorial, excelente  ;)
Una pena que no es lo que estoy buscando a mi me gustaria hacer algo parecido con otro estilo y ponerlo en el topnav.
http://www.simplemachines.org/community/index.php?topic=502807.0

Gracias por el curro  ;)


arkarium

gracias lo andaba buscando :D pero pregunto de que lado del foro sale? xD

x4r0r

yo tengo una pregunta simple ..espero que me ayuden chicos...

como hago para tener mi foro como este estilo aqui les dejo la url gracias...

foro.axesogood. com

Advertisement: