Ponle de todo a tu Blog - Recursos - Tutoriales // Parte 1

buenos



Risuss dijo:tutoriales

bloggerHola bienvenido a mi nuevo post , en el cual dejare algunos recursos y tutoriales , para que tu blog quede mas bueno . Los recursos que les traigo hoy son para el gran conocido Blogger , luego haré sobre otros , como jimdo y wordpress.
tuTodos los tutoriales y recursos se aplican a cualquier versión de Blogger , ya que se está actualizando y tu puedes elegir en que interfaz quedarte , dejare los tutoriales para las 2 interfazes asi que no te preocupes.
mejorarTodo el contenido de este blog fue sacado de otras paginas , en las cuales dejare al fin del post , solo comparto estos recursos muy útiles en la elaboración como decoración del Blog. Todo esta explicado muy bien , si necesitas ayuda mandadme un MP y se los contestare cuando pueda, soy muy activo. No dudes en preguntar si no entiendes.
oAhora continuo con el post y espero que disfrutes saludos.


Atte : @Risuss


y

• Botones para compartir que se detienen •

para

muy

Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.

Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.

decorar

• Tutorial •

Ponle de todo a tu Blog - Recursos - Tutoriales // Parte 1

buenosLo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes",
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>



tutorialesAhora antes de ]]></b:skin> pegamos los estilos de la barra:

#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}



bloggerPor último, debajo de <div class='post-header'> agrega el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>

<!-- Botón de Facebook -->
<li><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=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<!-- Botón de Bitácoras -->
<li><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>

<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://***/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.***/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>



tu

• Slider Automático para mostrar las últimas entradas •

mejorar

o

yHemos visto varios sliders con distintos efectos para todos los gustos. Pero muchos no se animan a usar uno por el "mantenimiento" que este implica, es decir, tener que estar editando el slider continuamente para cambiar los textos, los títulos, las imágenes, etc.Así que una petición constante es un slider que haga el "trabajo sucio", es decir, un slider que muestra las últimas entradas del blog de forma automática, sin necesidad de estar editando el slider una vez que esté puesto.

para

• Tutorial •

muy

decorarPara poner este slider automático en el blog entra en la EdiciónHTML de la plantilla y antes de]]></b:skin> pega los estilos:

/* Featured Content Slider
----------------------------------------------- */
#featuredContent {
margin:0 auto;
padding:7px 7px 5px;
width:450px;
display:block;
background:#efefef; /* Color de fondo */
}
#featured-slider {
position: relative;
overflow: hidden;
width:450px;
height: 320px;
}
#featured-slider img {
display:block;
height:auto !important;
}
#featured-slider .sliderPostPhoto {
position:relative;
height:256px;
width:450px;
overflow:hidden;
}
#featured-slider .sliderPostInfo {
position:absolute;
bottom:0;
width:450px;
min-height:30px;
color:#fff;
padding:5px;
background: url(http://lh3.googleusercontent.com/-jDLwXJiGntk/T29pYcTKb9I/AAAAAAAACUQ/gf-AfWqrTzY/s30/bgtransparent.png);
height:30px;
}
#featured-slider .sliderPostInfo p {
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
z-index:1;
}
#paginate-featured-slider {
display:block;
margin-bottom:5px;
font:bold 14.6px Arial, verdana, sans-serif; /* Tamaño fuente de los números */
}
#paginate-featured-slider a {
color:#000;
padding:2px 7px;
background:#ddd;
}
#paginate-featured-slider a:hover {
text-decoration:none;
color:#cd1713; /* Color de fondo de la pestaña al pasar el cursor */
}
#paginate-featured-slider a.selected {
color:#fff;
text-decoration:none;
background:#cd1713; /* Color de fondo de la pestaña activa */
}
h2.featuredTitle {
font:14px "trebuchet ms", arial, sans-serif; /* Tamaño fuente de los títulos */
font-weight:normal;
letter-spacing:1px;
display:block !important;
margin: auto 0 !important;
}
h2.featuredTitle a {
color:#fff;
display:block;
padding:3px;
}
h2.featuredTitle a:hover {
text-decoration:underline;
}



Ponle de todo a tu Blog - Recursos - Tutoriales // Parte 1Ahora antes de </head> pega los scripts, que son algo largos:

El código es muy largo , pedir por Mp @Risuss



buenosPor último, SIN expandir los artilugios busca esta línea:

dijo:<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>



tutorialesJusto arriba de ella agrega esto:

<b:widget id='HTML88' locked='false' title='Slider' type='HTML'>
<b:includable id='main'>
<div id='featuredContent'> <div id='paginate-featured-slider'>
<a class='prev' href='#prev'>Anterior</a>
<a class='toc' href='#1' rel='1'>1</a>
<a class='toc' href='#2' rel='2'>2</a>
<a class='toc' href='#3' rel='3'>3</a>
<a class='toc' href='#4' rel='4'>4</a>
<a class='toc' href='#5' rel='5'>5</a>
<a class='toc' href='#6' rel='6'>6</a>
<a class='toc' href='#7' rel='7'>7</a>
<a class='toc' href='#8' rel='8'>8</a>
<a class='toc' href='#9' rel='9'>9</a>
<a class='toc' href='#10' rel='10'>10</a>
<a class='next' href='#next'>Siguiente</a>
</div>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write(&quot;&lt;script src=&quot;http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default?max-results=&quot;+numposts10+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8&quot;&gt;&lt;/script&gt;&quot;
</script>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, contentsource: [&quot;inline&quot;, &quot;&quot;],
toc: &quot;#increment&quot;,
nextprev: [&quot;&#171; Anterior&quot;,&quot;Siguiente &#187;&quot;],
revealtype: &quot;click&quot;,
enablefade: [true, 0.4],
autorotate: [true, 5000],
onChange: function(previndex, curindex){ }
})
</script>
</div>
</b:includable>
</b:widget>


bloggerAgrega el nombre de tu blog donde se indica y listo.

tu

• Crear una Intro para el Blog •

mejorar

o

yCuando es la primera vez piensas en hacer un blog seguro se te viene a la mente algo más del estilo página Web con algún tipo de pantalla de bienvenida, pero luego descubres que una página Web no es lo mismo que un blog, y aunque un blog tiene demasiados puntos positivos a favor de repente hay quien quiere usar estos elementos de las páginas Webs para su propio blog, tal es el caso de las pantallas de presentación o intros.

para

• Tutorial •

muy

decorarAhora veamos cómo ponerlo, primero entra en Diseño | Edición de HTMl y busca esta etiqueta:

<body>



Ponle de todo a tu Blog - Recursos - Tutoriales // Parte 1O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>



buenosJusto debajo de cualquiera de una de ellas agrega lo siguiente:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
body#layout #Intro {display:none !important;}
</style>

<div id='Intro'>
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->

<img src='URL de la imagen'/>
<p class='btnEntrar'>&lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;document.getElementById(&#39;BlogContenedor&#39.className = &#39;quitarIntro&#39;, document.getElementById(&#39;Intro&#39.className = &#39;entrar&#39;, document.getElementById(&#39;ElementosAudio&#39.innerHTML = &#39;&#39;, document.body.style.overflow=&#39;auto&#39; &quot;&gt;Entrar&lt;/a&gt;</p>

<div id='ElementosAudio'>
<iframe frameborder='0' height='0' src='http://www.youtube.com/v/XXXXXXX?&amp;autoplay=1&amp;loop=1' width='0'/>
</div>

<!-- Fin del contenido del intro -->
</div>
</div>
</b:if>

<div class='BlogOculto' id='BlogContenedor'>



tutorialesY luego busca la etiqueta </body> y arriba de ella agrega esto:

</div>



bloggerLuego, en donde dice URL de la imagen puedes poner la URL de la imagen del logotipo de tu blog, alguna imagen de bienvenida o cualquier otra imagen.

tu

Risuss dijo:

mejorar

oBueno se termino el post , sorry que sean pocos los tutoriales , pero luego posteare mas , ya que los códigos para estos 3 son demasiados largos y T! , no me deja postear todo , así que lo dividiré todo en partes , si te gusto y queres que siga , comenta. Si no entiendes algo déjame un MP, @Risuss.
yAhora dejo el link a la web donde se extrajo todo el material.

paraLink ---------> http://www.ciudadblogger.com

muyMe despido espero que te haya gustado , saludos



decorar

Ponle de todo a tu Blog - Recursos - Tutoriales // Parte 1

buenos
[/quote]