Mil Trucos Blogger

Nuevo Slider para mostrar los posts destacados en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En el día de hoy vamos a ver como agregar un nuevo y espectacular slider en Blogger con el cual podremos mostrar el contenido más destacado de nuestros blogs.

Nuevo Slider para mostrar los posts destacados en Blogger

Slider-posts-destacados-Blogger

Demo del Truco

Primero agregamos el CSS del slider (el cual va justo antes de ]]></b:skin> )

.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("http://3.bp.blogspot.com/-T2u14ZkViVc/UDVDYSb6qoI/AAAAAAAAA4U/xgSh7zYVwGY/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}

 

Ahora agregamos el script del slider, el cual va justo antes de </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>

 

Ahora solo queda añadir la estructura HTML del slider (desde aquí puedes controlar y editar los posts se van a mostrar en el slider); este código lo añades donde quieras que se vea el slider:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='URL DEL POST'><img src="URL DE LA IMAGEN A MOSTRAR"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='URL DEL POST'>Titulo del Post</a>
</h3>
<p>
Descripción del Post. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='URL DEL POST'><img src="URL DE LAIMAGEN"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='URL DEL POST'>TITULO DEL POST</a>
</h3>
<p>
  DESCRIPCIÓN DEL POST.</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='URL DEL POST'><img src="URL DE LA IMAGEN"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='URL DEL POST'>TITULO DEL POST</a>
</h3>
<p>
DESCRIPCIÓN DEL POST. 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='URL DEL POST'><img src="URL DE LA IMAGEN"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='URL DEL POST'>TITULO DEL POST</a>
</h3>
<p>
DESCRIPCIÓN DEL POST. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='URL DEL POST'><img src="URL DE LA IMAGEN"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='URL DEL POST'>TITULO DEL POST</a>
</h3>
<p>
DESCRIPCIÓN DEL POST. </p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>

</div>
</div>
<div style='clear:both;'/>
</div>
</b:if>

 

Se ha resaltado en color verde los valores editables del slider y con los cuales puedes manipular que posts quieres que se muestren.

Espero que el tutorial haya sido de utilidad para todos y no olviden compartir en las redes sociales esta entrada.

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *




Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo