Random Post Slider Untuk Blogger

Random Post Slider untuk blogger - Artikel kali ini aku akan menciptakan Random Post Slider untuk blogger dengan dampak dapat di scroll kekiri & kekanan, misalnya menyerupai gambar berikut.

Tutorial ini mungkin akan berkhasiat untuk kalian yang memiliki blog dengan niche Download Anime Batch atau fanshare, kita mulai saja tutorial kali ini.

Random Post Slider untuk blogger

1. Silahkan buka Blogger > Tema > Edit Html, kemudian letakkan javascript berikut ini di atas </head>

<link href='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.css' rel='stylesheet' type='text/css'/> <script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.pkgd.min.js' type='text/javascript'/> <script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/fced48d0/random-post-slider-for-blogger.js' type='text/javascript'/>



2. Tambahkan CSS berikut diatas </style>, jikalau sudah Save Template

/* Slider Random Post   ======================================= */ #random-post-container{overflow:hidden;height:225px;padding:10px;} #random-post-container ul{list-style:none;padding:0;margin:0} #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}}



3. Buka Tata Letak, tambahkan widget HTML/Javascript dan simpan javascript berikut ini kedalam widget tersebut

<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[*/ artikelterkait(); $('li.carousel-cell img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w130-h180-c/'))}); /*//]]>*/</script> </ul> </div>



4. Sebelum itu pastikan widgetnya berada di bawah <div id='outer-wrapper'>, misalnya menyerupai gambar berikut ini



5. Jika belum ada silahkan tambahkan HTML sebagai berikut di bawah <div id='outer-wrapper'>

<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'/> </b:if>

Semoga artikel ini dapat bermanfaat buat kalian & jangan lupa bagikan artikel ini pada teman-teman kalian, kalau ada pertanyaan silahkan beri komentar, hingga jumpa di tutorial berikutnya, salam blogger.

Bagikan Artikel ini