NUEVO SLIDER PARA MOSTRAR LOS POSTS DESTACADOS EN BLOGGER

NUEVO SLIDER PARA MOSTRAR LOS POSTS DESTACADOS EN BLOGGER

"TECLEANDO PARA TI 2019"

Hemos visto varios sliders con distintos efectos para todos los gustos.Seguramente tengas algunos artículos que quieras destacar para los lectores de tu web o blog.

Es decir, quieres crear unas publicaciones destacadas, o un contenido destacado.

Es posible no solo hacer esto, sino que se muestre en forma de slider, y que automáticamente vayan pasando diferentes diapositivas con estos artículos destacados. 

Una forma excelente para que ciertas entradas no se pierdan en el tiempo. O para que las nuevas tengan un lugar destacado en tu homepage.

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

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

  Un clic en “Editar HTML”

  Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

 Busca el siguiente código

]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbKw_dFAct6DrXMEfPl59WcM7Hhg1nXh_Xz5tQHihiNsAW4_QbIbjMlmn82hUW4rgCwsj5jg6AQ1BDsI8ckEvtX_7ZSkraZ6VVgdxQo9E5RruMnkwxXQet4MVi2Qk-VQqnKGI0R3vQDdP/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5sUNxUdoYPFPCnsWJMVqsIh0Xzk3v4pjfxKwRedUt644RGkhxlqOilrcx3gxI8lJP5iVZ998-fVIFAQirT8vy4yaBGXy7UAQv65tDy3q95l7ETx5JGnOdsPGbFlTTbdL0dJDBaHtfsgk/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjOK8wZsZbH7pz3THcFe8oKlao8HilxQPTwnebyVtmzFJ_xZwz186EBPvATcGAOqQuQDS1cUzuIfbyKkdPtYGhsaaJR_VKlq8xUH-3ua4P5z-fZCDRN9pz2ONyzim3GUaKpjtEd6QZhas/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPvY9XO2TfTQLtf3g2L37CxoAtlUtxtG6hzqrfRL5Izk0zX_rEUHsa0SDjo8oXrj8xUPzTjH_NHiKYpTPr7ddWkfqXb39cVWvf00JXPWk-6r55W7nwfJF4rlTkE9oBiocOxO7jAUWdqr1/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>

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

 Coloca este código en el buscador y dale un "Enter"


</head>



Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste

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

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

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

Después de haber insertado el código, un clic en "Guardar"

Data: 04/10/2019

Fuente: miltrucosblogger

Publicado por: