Random Post Slider untuk blogger


Halo gan, apa kabar? setelah liburan yang cukup panjang sehabis lebaran akhirnya saya mempunyai waktu luang untuk membuat artikel dari request yang sempat saya delay karena hari libur, nah artikel kali ini saya akan membuat Random Post Slider untuk blogger dengan efek bisa di scroll kekiri & kekanan, contohnya seperti gambar di atas. Tutorial ini mungkin akan berguna untuk kalian yang mempunyai blog dengan niche Download Anime Batch atau fanshare.

Random Post Slider untuk blogger

ok pertama-tama silahkan buka Blogger > Tema > Edit Html, lalu letakkan js berikut ini di atas </head>
<link href='https://cdn.rawgit.com/Arleth98/blog-orang/171548a8/flickity.css' rel='stylesheet' type='text/css'/>
<script src='https://cdn.rawgit.com/Arleth98/blog-orang/171548a8/flickity.pkgd.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/Arleth98/blog-orang/fced48d0/random-post-slider-for-blogger.js' type='text/javascript'/>

Kemudian letakkan CSS berikut ini dibawah <style>, Jika sudah Save Tema.
/* Slider Random Post
  ======================================= */
#random-post-container{overflow:hidden;height:225px;padding:10px;}
#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}}

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

Sebelum itu pastikan widgetnya berada di bawah <div id='outer-wrapper'>, contohnya seperti gambar berikut ini
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>

Lihat Gambar

Semoga artikel ini bisa bermanfaat buat kalian & jangan lupa bagikan artikel ini pada teman-teman kalian, kalau ada pertanyaan silahkan beri komentar, sampai jumpa di tutorial berikutnya, salam blogger.
Related Posts
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser

Post a Comment On "Random Post Slider untuk blogger"

Disqus Comments