Text only | Text with Images

Simple Machines Community Forum

SMF Support => Español (Spanish) => Language Specific Support => Tutoriales => Topic started by: jaren on May 16, 2013, 08:53:14 AM

Title: [Tutorial] Estilo en Facebook, gogle +1 , compartir face
Post by: jaren on May 16, 2013, 08:53:14 AM
Ola amigos  seguiendo con mis tutoriales  o tips enseñare a hacer este bonito estilo


(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FEGr49Q3.jpg&hash=1f42644b07c53ea2552bb3c96c675a403a9edc3f)


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 ]


Code Select
.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

Code Select
<body>';
}

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

echo '

Code Select
<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


      
Code Select
// Show the member's signature?



Pegamos despues


Code Select
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:

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


El boton compartir  esta en tuto  de eduardo  puedes verlo dando CLIK AQUI (http://www.smfpersonal.net/tutoriales-para-tu-web/tutorial-agregar-boton-agregar-a-favoritos-en-el-primer-tema-t6960.0.html)





No se olviden de visitarme en  mi fantastico y sensual foro  ???
Quote
http://www.gamerznice.com.nu/index.php

Saludos su Gran Amigos Demon  :-X
Title: Re: [Tutorial] Estilo en Facebook, gogle +1 , compartir face
Post by: rutenio3 on May 17, 2013, 05:39:21 PM
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  ;)
Title: Re: [Tutorial] Estilo en Facebook, gogle +1 , compartir face
Post by: arkarium on August 12, 2013, 06:33:06 PM
gracias lo andaba buscando :D pero pregunto de que lado del foro sale? xD
Title: Re: [Tutorial] Estilo en Facebook, gogle +1 , compartir face
Post by: x4r0r on October 25, 2013, 01:02:31 PM
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
Text only | Text with Images