Cara Membuat Slideshow Postingan Terbaru dan Gambar di Blog


Cara Membuat Slideshow otomatis di blog - Slideshow di blog adalah tampilan berupa beberapa kumpulan gambar, foto, tulisan dan lainya yang tampil secara bergantian secara otomatis.
Misalnya kita membuat sebuah postingan dan kita menambahkan lebih dari 1 gambar didalamnya yang gambar tersebut ingin kita tampilkan dalam satu bagian, maka dengan menggunakan slideshow gambar tersebut akan berganti secara otomatis dari gambar pertama dan gambar selanjutnya sesuai urutan yang kita buat dan terus menerus sampai kembali kegambar pertama.

Kadang kala ketika kita membuat postingan dengan banyak gambar kita perlu membuat gambar itu menjadi tampilan slider untuk menghemat tempat dan agar artikel kita terlihat cantik dan elegan, tidak dengan gambar yang bertumpuk dan tidak beraturan.
Dengan menggunakan slideshow gambar dan juga postingan kita terlihat rapi dan menarik sehingga pengunjung blog yang membaca artikel kita bisa membaca dengan nyaman dan akan dimanjakan dengan gambar yang berganti-ganti secara otomatis.
Bahkan bukan hanya untuk gambar saja, Anda juga bisa membuat postingan artikel terbaru Anda menjadi tampilan slideshow untuk mempermudah pengunjung blog Anda menemukan apa yang terbaru didalam blog Anda.

Untuk membuat tampilan Slideshow di blog ada beberapa cara :

Membuat Slideshow Galery Gambar atau Foto di Blog


Bagi pengguna Blogger untuk membuat slideshow untuk galery gambar harus membuatnya secara manual, karna didalam blogger opsi untuk membuatnya tidak ada. Yang ada hanya merubah ukuran gambar dan mengatur letak gambar di samping kiri, kanan atau ditengah postingan. Kode di bawah ini untuk membuat tampilan slideshow gambar atau foto di blog Anda, Bisa untuk di dalam postingan atau tampil di halaman depan blog Anda.
Cara Membuatnya :

1. Copy dan paste kode di bawah ini kehalaman atau postingan yang Akan Anda buat.

Pastikan saat Anda akan mempaste kode di bawah ini buat postingan dalam mode HTML.
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script> <script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#content-slider').cycle({ fx: 'fade' }); }); </script>
<style type="text/css">
#content-slider {
 position: relative;
 width: 100%;
 height: 250px;
 overflow: hidden;
 margin:0 auto;
}
#content-slider img {
 display: block;
 width: 100%;
 height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto Anda" />
<img src="URL Foto Anda" />
<img src="URL Foto Anda" />
<img src="URL Foto Anda" />
</div>

2. Klik simpan dan jangan lupa lihat hasilnya sebelum Anda mempublikasikanya.

Catatan :
Ganti URL foto dengan URL foto Anda.

Cara Membuat Widget Slideshow untuk Postingan Terbaru/Recent Post

1. Masuk ke akun blogger Anda.
2. Dibagian menu blogger pilih tata letak.
3. Tambahkan widget HTML/JavaScript di tempat Anda ingin menampilkan slidshow postingan terbaru Anda.
4. Copy kode dibawah ini dan paste kedalam widget yang baru Anda buat tadi.
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}ul.rcentside{width:100%;height:500px}ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.rcentside li:nth-child(2){left:0;top:50%}ul.rcentside li:nth-child(3){left:50.5%;top:50%}ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out}ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}ul.rcentside .overlayx:hover{opacity:.1}ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s;font-size:1em}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}.buttons{margin:5px 0 0}.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://fellovena01.blogspot.com",
  MaxPost: 5,
  idcontaint: "#featuredpostside",
  ImageSize: 500,
  interval: 10000,
  autoplay: true,
  tagName: false,
});
//]]>
</script>

Catatan :
Untuk bagian style atau CSS nya bisa Anda masukan kedalam template Anda dengan cara copy dan pastekan kode mulai dari <style> sampai </style> tepat dibawah kode <head> di dalam template yang Anda gunakan.

  • blogURL: "https://felovena01.blogspot.com", ganti dengan URL blog Anda.
  • MaxPost: 5, jumlah postingan yang tampil pada widget recent post.
  • ImageSize: 500, ukuran gambar untuk postingan yang ditampilkan.
  • interval: 10000, waktu untuk pindah slide, 10000 = 10 detik.
  • autoplay: true, untuk pindah ke postingan selnajutnya secara otomatis .
  • tagName: false, bisa Anda ganti dengan nama tag yang Anda inginkan. 

Cara Membuat Slideshow Menggunakan Google Slide


Google Slides adalah alat presentasi seperti microsoft powerpoint yang dapat Anda gunakan sebagai alat untuk membuat slidseshow untuk web atau blog secara gratis yang ditawarkan oleh Google dan dapat Anda simpan kedalam Google Drive di akun Anda.

Cara Menggunakan Google Slide untuk membuat gampar slideshow

1. Buka Google site melalui Google
2. Pilih menu Slide di bagian atas halaman
3. Klik Buka Google Slide dan pilih logo + kosong


4. Kemudian Anda akan dibawa kehalaman untuk membuat slide, kalian yang sudah paham membuat postingan di blogger atau microsoft powerpint pasti sudah paham cara menggunakanya, bagian untuk menambah slide 1, 2 upload gambar dan lain-lain.

5. Jika sudah klik File pilih publikasikan di web.
6. Setelah membuak tab baru di layar browser Anda pilih Sematkan.
7. Untuk dapat di upload ke blogger silahkan salin kode hasil tadi dan pastekan kedalam postingan blogger Anda.

Cukup mudahkan untuk membuat tampilan slideshow bergambar atau pun postingan didalam blog Anda, semoga artikel kali ini bermanfaat dan dapat membantu Anda. 
BERIKAN KOMENTAR ()