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.

Categorías: Trucos Blogger

0 commentarios

Deja un comentario

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