domingo, enero 17, 2016

[TutosBlogs] Entradas relacionadas con botones para compartir

By: Ghaaby Captor | Fecha: 1/17/2016 |
 mis loqueros!!  bueno aquí una segunda parte de colocar entradas relacionadas!,   ojala les sea útil  .  Aquí le dejo la parte 1 [Clic Aqui]




Como muchos lo conocemos! es un generador de entradas relacionadas sin necesidad de registrarte en el sitio! ¿Quieres entrar? [Clic Aqui]
Para cambiarle el estilo, By CiudadBlogger

/* LinkWithin personalizado

----------------------------------------------- */

.linkwithin_div {

background: #EFF8FB; /* Color de fondo */

padding: 0 10px;

}

.linkwithin_text {

font-size:18px; /* Tamaño del título del gadget */

color:#084B8A; /* Color del título del gadget */

}

a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {

display:none; /* Con esto quitamos el enlace */

}

.linkwithin_posts {

width: 500px !important; /* Ancho del gadget */

}

.linkwithin_posts a {

border: 0 !important;

padding-right: 10px !important;

}

.linkwithin_posts a:hover {

background: #819FF7 !important; /* Color de fondo al pasar el cursor */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

}

.linkwithin_img_0 div, div.linkwithin_img_0,

.linkwithin_img_1 div, div.linkwithin_img_1,

.linkwithin_img_2 div, div.linkwithin_img_2,

.linkwithin_img_3 div, div.linkwithin_img_3,

.linkwithin_img_4 div, div.linkwithin_img_4,

.linkwithin_img_5 div, div.linkwithin_img_5,

.linkwithin_img_6 div, div.linkwithin_img_6,

.linkwithin_img_7 div, div.linkwithin_img_7,

.linkwithin_img_8 div, div.linkwithin_img_8,

.linkwithin_img_9 div, div.linkwithin_img_9,

.linkwithin_img_10 div, div.linkwithin_img_10,

.linkwithin_img_11 div, div.linkwithin_img_11,

.linkwithin_img_12 div, div.linkwithin_img_12,

.linkwithin_img_13 div, div.linkwithin_img_13,

.linkwithin_img_14 div, div.linkwithin_img_14,

.linkwithin_img_15 div, div.linkwithin_img_15,

.linkwithin_img_16 div, div.linkwithin_img_16,

.linkwithin_img_17 div, div.linkwithin_img_17,

.linkwithin_img_18 div, div.linkwithin_img_18,

.linkwithin_img_19 div, div.linkwithin_img_19,

.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordes redondeados */

-webkit-border-radius: 10px !important;

-moz-border-radius: 10px;

border-radius: 10px;

border:0 !important;

}

.linkwithin_title {

color: #0431B4 !important; /* Color de los títulos de las entradas */

font-family: Verdana !important; /* Tipo de fuente de los títulos de las entradas */

font-size: 13px !important; /* Tamaño de los títulos de las entradas */

line-height: 14px !important;

text-align:center;

text-decoration: none;

}

.linkwithin_title:hover {

color: #000 !important; /* Color de los títulos al pasar el cursor */

font-weight: bold !important;

}

Entradas relacionadas con botones para compartir en Blogger
Este me pareció re genial!! me lo encontré en el sitio de Amor sevillista 
Para instalar
El siguiente antes de </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

E igualmente colocar este código antes de </head>
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'>/*<![CDATA[*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons { border-radius: 5px; padding: 14px 7px; background:#ffffff; width: 500px; overflow: hidden; margin: 2px auto 0; box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button { background: #DCE0E0; position: relative; display: block; float: left; height: 40px; margin: 0 7px; overflow: hidden; width: 150px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; text-align: center;}.icon i { color: #fff; line-height: 42px;}.slide { z-index: 2; display: block; margin: 0; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px;}.slide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid #fff; border-left: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 16px; left: 0; margin: 0; position: absolute; text-align: center; top: 10px; width: 100%;}.button .slide { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.facebook iframe { display: block; position: absolute; right: -15px; top: 10px; z-index: 1;}.twitter iframe { width: 90px !important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;}.google #___plusone_0 { width: 70px !important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;}.facebook:hover .slide { left: 150px;}.twitter:hover .slide { top: -40px;}.google:hover .slide { bottom: -40px;}.facebook .icon, .facebook .slide { background: #305c99;}.twitter .icon, .twitter .slide { background: #00cdff;}.google .icon, .google .slide { background: #d24228;} /*]]>*/</style></b:if>

Buscaremos este código <div class='post-footer'> 
(Normalmente hay dos, colócalo trás el segundo.)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='2' cellspacing='0' width='100%'>
<tr>
<td rowspan='4' width='80%'>
<style type='text/css'>
.entradas-relacionadas{ margin:2em auto 0; font:normal normal 12px/1.4 Arial,Sans-Serif;margin-top:-5px;}
.entradas-relacionadas h4{ font-size:150%; margin:0 0 .5em;color:gray}
.entradas-relacionadas a{color:gray}
.entradas-relacionadas a:hover{color:darkred}
.entradas-relacionadas-style-6 li{position:relative}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-thumbnail{ width:50px; height:50px; max-width:none; max-height:none; background-color:gray; border:2px solid gray; padding:0; float:left; margin:0 10px 0 0}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-title{ display:block; font-weight:bold}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-summary{ display:block; overflow:hidden; font-size:11px}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip{color:black; position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:3px solid gray; background-color:#fff; padding:10px; width:90%; height:auto; display:none}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:before,
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:after{ content:&quot;&quot;; display:block; width:0; height:0; border:10px solid transparent; border-top-color:gray; position:absolute; top:100%; left:21px}
.entradas-relacionadas-style-6 .entradas-relacionadas-item-tooltip:after{ border-top-color:gray; border-width:9px; margin-left:1px}
.entradas-relacionadas-style-6 li:hover .entradas-relacionadas-item-tooltip{display:block}
.comparte h4{ font-size:170%; margin:0 0 .5em;color:gray;text-align:center;margin-top:-3px;}
</style>
<div class='entradas-relacionadas' id='entradas-relacionadas'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;ENTRADAS RELACIONADAS&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 170,
titleLength: &quot;auto&quot;,
thumbnailSize: 50,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;entradas-relacionadas&quot;,
newTabLink:false,
moreText: &quot;&quot;,
widgetStyle: 6,
callBack: function() {}
};
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/entradas-relacionadas.js' type='text/javascript'/>
</td>
<td width='20%'>
<div class='comparte' style='float: right; padding:0px; margin-left:20px;'>
<h4>COMPARTE</h4>
<div class='facebook button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=120&amp;height=20&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:20px'/> </div> <div class='twitter button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' href='https://twitter.com/share'> Tweet </a> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;); </script> </div> <div class='google button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div> <script type='text/javascript'> (function() { var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/plusone.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s); } )(); </script></div></div> </td></tr> </table></b:if>
avatar
Isabel Tomma
Admin
17 de enero de 2016, 13:38

Hola!
Me ha encantado el tutorial, además lo explicas muy bien.
Gracias por compartirlo.
Besos

avatar
17 de enero de 2016, 18:13

Uy gracias eso es muy útil si me animo lo hago

avatar
Bam
Admin
17 de enero de 2016, 19:20

Gracias por el tuto, para ponerlo en practica n.n
Besos!

avatar
Yurika
Admin
18 de enero de 2016, 1:28

buen tutorial gracias

avatar
Natalia
Admin
18 de enero de 2016, 9:15

Gracias por el tutorial Ghaaby, tiene mucho trabajo. Yo con los códigos todavía no me aclaro no se porque lo hacen tan complicado. He visto por encima el tutorial y creo que lo explicas bien que haríamos sin ti, yo he consultado tus tutoriales muchas veces para hacer cositas en mi blog, me paso enlace Isa Toma. Así que solo puedo decir 1000 gracias wapa. Por cierto luego caí en cual era la peli de Dicaprio mmmm que interesante me quedé con muchas ganas de verla la tengo pendiente. Un besito.

avatar
21 de enero de 2016, 12:57

(´• ω •`)ノ Holaaa!!!
Exelente tutorial gracias por compartirlo!!

穛 S4Ku SEK4i®