How to Make Random Post Slider for blogger

Posted on

Hello, how are you? On this occasion I will make an article about how to create a Random Post Slider for bloggers with the effect can be on the left & right scroll, for example like the picture above. This tutorial may be useful for those of you who have blogs with the Batch Anime or fanhare Download niches.
First go to Blogger> Themes> Edit Html, then put the JS code brought into </ head> (Put above the end Tag)

Copy the code below:

<link href=’’ rel=’stylesheet’ type=’text/css’/>
<script src=’’ type=’text/javascript’/>
<script src=’’ type=’text/javascript’/>

Second place the following CSS below, <style>  then Save Theme

Copy the code below:

/* Slider Random Post
  ======================================= */
#random-post-container .carousel-cell{width:13.3%;height:180px;margin-right:10px;background:#444;counter-increment:carousel-cell}
#random-post-container img {width:130px;height:180px;}
#random-post-container h2 a{position:absolute;bottom:0;left:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;padding:5px;color:#FFF;font-weight:400;font-size:12px;background:-webkit-linear-gradient(top,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%);background:-o-linear-gradient(top,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%);background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,.85) 70%);text-shadow:rgba(0,0,0,.8) 1px 1px 0;}
@media screen and (max-width:640px){#slider .widget-content{display:none}}

Then open Layout, add the HTML / Javascript widget and save the following javascript into the widget

Copy the code below:

<script src=’/feeds/posts/default?alt=json-in-script&callback=relpostimgcuplik&max-results=50′ type=’text/javascript’></script>
<div id=’random-post-container’>
<ul class=’carousel’ data-flickity=”{&quot;autoPlay&quot;:1500,&quot;wrapAround&quot;:true}”>
<script type=’text/javascript’>/*//<![CDATA[*/
$(‘li.carousel-cell img’).each(function(){$(this).attr(‘src’,$(this).attr(‘src’).replace(//s[0-9]+(-c)?//,’/w130-h180-c/’))});

Before that make sure the widget is below <div id = ‘outer-wrapper’>, for example like the picture below

If not add the following HTML under <div id = ‘outer-wrapper’>

Copy the code below:

<b:if cond=’data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;’>
<b:section class=’widget-atas arleth’ id=’slider’ maxwidgets=’1′ showaddelement=’yes’/>
<div class=’clear’/>

Ok so all for today thanks

Leave a Reply

Your email address will not be published. Required fields are marked *