Cara Buat Random Post Slider blogger Otomatis Responsive javascript Carousel

 

Cara Buat  Random Post Slider blogger Otomatis Responsive javascript Carousel


Random Post Slider untuk blogger

Random Post Slider untuk blogger - Artikel kali ini saya akan membuat Random Post Slider untuk blogger dengan efek bisa di scroll kekiri & kekanan, contohnya seperti gambar berikut.

Cara mendesain Tampilan Thema Blooger dengan Random Post Slider dapat anda ketahui di notlern.com , berikut kami jelaskan Lengkapnya.




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



Random Post Slider untuk blogger

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


<pre data-content="built2bless"><content class="select-all">



&lt;link href='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.css' rel='stylesheet' type='text/css'/&gt;

&lt;script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/171548a8/flickity.pkgd.min.js' type='text/javascript'/&gt;

&lt;script src='https://cdn.staticaly.com/gh/Arleth98/blog-orang/fced48d0/random-post-slider-for-blogger.js' type='text/javascript'/&gt;



</content></pre>



Tambahkan CSS berikut diatas </style>, jika sudah Save Template


CODE CSS


<pre data-content="built2bless"><content class="select-all">



/* 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}}


</content></pre>


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


<pre data-content="built2bless"><content class="select-all">



&lt;script src='/feeds/posts/default?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50' type='text/javascript'&gt;&lt;/script&gt;

&lt;div id='random-post-container'&gt;

&lt;ul class='carousel' data-flickity="{&amp;quot;autoPlay&amp;quot;:1500,&amp;quot;wrapAround&amp;quot;:true}"&gt;

&lt;script type='text/javascript'&gt;/*//&lt;![CDATA[*/

artikelterkait();

$('li.carousel-cell img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w130-h180-c/'))});

/*//]]&gt;*/&lt;/script&gt;

&lt;/ul&gt;

&lt;/div&gt;




</content></pre>


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


<pre data-content="built2bless"><content class="select-all">


&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot; and data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;

&lt;b:section class='widget-atas arleth' id='slider' maxwidgets='1' showaddelement='yes'/&gt;

&lt;div class='clear'/&gt;

&lt;/b:if&gt;



</content></pre>


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.



<style type="text/css"> 

pre { position:relative;width:100%;padding:0;padding-top: 35px;margin:.5em auto;background-color:#ff6600;border-radius:3px;white-space:pre;word-break:normal;word-wrap:break-word;overflow:auto;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;-moz-tab-size:2;-o-tab-size:2;tab-size:2;}pre::-webkit-scrollbar,pre::-moz-scrollbar,pre content::-webkit-scrollbar,pre content::-moz-scrollbar,content::-webkit-scrollbar,content::-moz-scrollbar {display:none;}pre:after {width: 100%;background: #4d4d4d;display:inline-block;content:"Double Click to Select All";font-style:normal;font-weight:normal;font-size:12px;color:#fff;text-align: right;top:0;right:0;padding: 7px 10px;position:absolute;}pre content {max-height:500px;display:block;background:none;border:none;color:#fff;padding: 20px 20px 20px 20px;font-size: 14px;white-space:pre;overflow:auto}pre mark,content mark,pre content mark {background-color:#4d4d4d!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}pre[data-content="built2bless"]:before {background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}

</style>

<script type="text/javascript">

var pres = document.getElementsByTagName(&quot;pre&quot;);

for (var i = 0; i &lt; pres.length; i++) {

  pres[i].addEventListener(&quot;dblclick&quot;, function () {

    var selection = getSelection();

    var range = document.createRange();

    range.selectNodeContents(this);

    selection.removeAllRanges();

    selection.addRange(range);

  }, false);

}

</script>



Post a Comment

Featured Post

5 Destinasi Liburan Favorit untuk Meriahkan Akhir Tahun

 5 Destinasi Liburan Favorit untuk Meriahkan Akhir Tahun Yuk Agendakan! Menyambut tahun baru dengan petualangan yang tak terlupakan di lima destinasi liburan favorit pilihan kami. Dari keindahan pantai Bali hingga kemegahan Gunung Everest, jangan lewatkan kesempatan untuk menjelajahi Menara Eiffel, kebun binatang Kruger, dan merasakan keajaiban salju di Lapland. 5 Destinasi Liburan Favorit Akhir Tahun Berikut ini merupakan Destinasi Liburan Favorit yang patut anda masukan dalam Agenda Liburan Anda , Aoa Saja itu? Birikut Pilihannya ; 1. Pantai Bali, Indonesia Menikmati pasir putih dan air biru yang memikat sambil mengeksplorasi budaya Bali yang kaya. Yuk Segera Agendakan Liburan Anda untuk Menikmati keindahan pantai Bali, Indonesia dengan pasir putih yang lembut, air laut yang jernih, dan pemandangan alam yang memukau. Jelajahi tempat-tempat indah seperti Pantai Kuta, Nusa Dua, atau Pantai Jimbaran. Rasakan suasana santai, bermain air, dan menikmati matahari terbenam yang menakjubkan d