Cara Membuat Widget Images Slider Dinamis pada Blogger dengan Mudah

Cara Membuat Images Slider Dinamis pada Blogger dengan Mudah

Cara Membuat Widget Images Slider Dinamis pada Blogger dengan Mudah - Untuk mempercantik blogger kalian, kalian harus mencoba tutorial yang berikut ini nih. Yups, kali ini Saya akan membahas mengenai cara menambahkan/membuat images slider dinamis pada blogger.

Apa keuntungan dan kerugian dipasangnya Widget Images Slider Dinamis pada Blogger ?


Widget images slider ini, memiliki efek positif dan negatif juga. Untuk yang positif, tentunya blog kalian akan menjadi menarik. Memudahkan pengunjung mencari artikel yang mereka cari. Juga, bisa menambah kesan tersendiri bagi visitor yang ada.

Sedangkan yang negatif, mungkin loading blog kalian akan jadi sedikit lambat. Karena, proses load javascript widget ini.

Baca juga: 5 Cara Terbaru dan Efektif Mempercepat Loading Blog Blogger

Cara Cepat Membuat Images Slider Dinamis pada Blogger


Cara Membuat Images Slider Dinamis pada Blogger dengan Mudah
  • Agar slider dapat berjalan dengan baik, kalian harus periksa pengaturan berikut ini;
    1. Buka Setting=>basic=>blog readers=>public
    2. Buka Setting=> other=>allow blog feed=>full
  • Menambahkan kode CSS
Kalian buka opsi Theme/Tema=>Edit HTML=>kemudian, pastekan kode dibawah ini tepat sebelum kode ]]></b:skin>
/* Start XOmisse Blog Slider */
.cycle-slideshow{width:100%;height:400px;display:block;text-align:center;z-index:0;overflow:hidden;margin:0;position:relative;}.cycle-slideshow ul{width:100%;height:100%;height:100vh;padding:0;}.cycle-slideshow li{width:100%;height:100%;margin:0;padding:0;}.cycle-prev,.cycle-next{position:absolute;top:0;width:11%;opacity:.92;filter:alpha(opacity=92);z-index:800;height:100%;cursor:pointer;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;opacity:0;}.cycle-slideshow:hover .cycle-prev,.cycle-slideshow:hover .cycle-next{opacity:1;}.cycle-prev{left:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px solid #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s;}.cycle-next{right:10px;position:absolute;top:50%;margin-top:-15px;color:#fff;outline:0;z-index:999;border:1px solid #fff;height:30px;width:30px;font-size:16px;line-height:30px;text-align:center;border-radius:50%;-o-transition:.25s;-ms-transition:.25s;-moz-transition:.25s;-webkit-transition:.25s}.slide-inside{display:table;vertical-align:middle;height:100%;padding:0;width:100%;background:transparent;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-inside:hover{background:rgba(255,255,255,.1)}.slide-title,.slide-title a:hover{display:table-cell;vertical-align:middle}.slide-image{background-position:center;background-size:cover;height:100%;width:100%}.slide-cat{display:inline-block;margin:0 3px 13px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:2px;padding-bottom:2px}.slide-h2{color:#fff;font-size:24px;line-height:1.4em;font-weight:400;text-transform:uppercase;letter-spacing:3px;margin-bottom:16px;display:block;z-index:9}.slide-excerpt{color:#fff;font-size:12px;font-weight:300;letter-spacing:1px;padding:0 0 20px;display:none}.slide-divider{border-top:2px solid;display:block;max-width:50px;margin:0 auto;color:#fff}.slide-more{display:none;color:#fff;padding:10px 15px;margin:25px auto 10px;font-size:10px;text-transform:uppercase;letter-spacing:2px;border:2px solid #fff;display:inline-block;transition:all .25s ease-out;-o-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-webkit-transition:all .25s ease-out}.slide-more:hover{background:#fff;color:#000}#crosscol-overflow{margin:0 auto;}.mobile .cycle-slideshow{height:250px}.mobile .slide-resume,.mobile .slide-more{display:none;}
  • Menambahkan jQuery
Tahap selanjutnya ialah menambahkan jQuery, agar slider ini dapat berfungsi dengan baik. Pastekan kode berikut ini sebelum kode </head>
<!-- include jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'/>
<!-- include Cycle2 -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js' type='text/javascript'/>
  • Setelah itu, pastekan kode berikut ini bebas di bagian <div id='...'> mana yang kalian mau. Pada Demonya sendiri, itu Saya pasang diatas kode <div id='main-wrapper'>
<!-- include XOmisse Blog Slider -->
<script>
//<![CDATA[
// Written by XOmisse for xomisse.com
// Do NOT remove credits
var showpostthumbnails=!0;var showpostsummary=!0;var random_posts=!1;var numchars=100;var numposts=4;function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}
if(random_posts==!0){indexPosts.sort(function(){return 0.5-Math.random()})}
if(numposts>numPosts){numposts=numPosts}
for(i=0;i<numposts;++i){var entry=json.feed.entry[indexPosts[i]];var posttitle=entry.title.$t;
if(typeof cate=='undefined'){var cate="uncategorised"}else{var cate=json.feed.entry[i].category[0].term}
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}
if("content" in entry){var postcontent=entry.content.$t}
s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl=d}else var thumburl='//placehold.it/1000x300';document.write('<li><div class="cycle-slideshow"><a href="'+posturl+'"><div class="slide-image" style="background-image:url('+thumburl+');"/><div class="slide-inside"><div class="slide-title">');document.write('<div class="slide-container">');document.write('<div class="slide-cat">'+cate+'</div>');document.write('<div class="slide-h2">'+posttitle+'</div>');var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==!0){if(postcontent.length<numchars){document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontentl=postcontent.substring(0,quoteEnd);document.write('<div class="slide-excerpt">'+postcontent+'... </div>')}
document.write('<div class="slide-divider"></div>');document.write('<div class="slide-more">Read More</div></div></div></div>')}
document.write('</a></div></li>')}
document.write('</ul>');document.write("<div class='cycle-prev'><i class='fa fa-angle-left' aria-hidden='true'></i></div><div class='cycle-next'><i class='fa fa-angle-right' aria-hidden='true'></i></div>")}
//]]>
</script>
<div class='cycle-slideshow' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-random='true' data-cycle-slides='li' data-cycle-speed='1600' data-cycle-timeout='0'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts\&quot;&gt;&lt;\/script&gt;&quot;);</script></div><!-- .cycle-slideshow -->
Untuk mengubah berapa artikel yang akan kalian tayangkan di slider ini, kalian ubah angka '4' pada kode 'var numposts=4'.
  • Simpan perubahan pengaturan template dan lihat hasilnya. Untuk contonya, kalian bisa klik tulisan demo dibawah ini.

Akhir kata .....

Mudah bukan Sob tutorialnya. Tentunya, hasil dari widget ini akan responsive apabila diterapkan pada blogger kalian. Sekian artikel mengenai Cara Membuat Images Slider Dinamis pada Blogger dengan Mudah. Terimakasih sudah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel