Langsung ke konten utama

Cara Membuat Slideshow di Blogger Keren

Slideshow biasanya di gunakan untuk menampilkan beberapa gambar dan keterangan sebuah informasi. Sebuah slideshow di blog biasanya akan menampilkan beberapa artikel dan gambar dari artikel tersebut. Pada tutorial kali ini, ane akan memberikan cara membuat slideshow di blogger dan pastinya keren.

Baca juga : Cara Membuat Judul Blog dengan Gambar Teks Keren

Untuk contoh tampilan slideshow nya seperti ini, tapi maaf kalau gambar gif kurang lancar.
Cara Membuat Slideshow di Blogger Keren

Slideshow ini bisa kita atur secara manual dan otomatis, jika agan ingin secara manual, agan harus memasukan beberapa link supaya postingan dan tampilan gambar bisa muncul secara maksimal. Namun jika agan ingin menampilkan slideshow ini secara otomatis agan hanya harus memasukan script code saja.

Bagi yang ingin memasang slideshow ini secara manual, untuk cara pertamanya ane bakalan kasih yang cara manual dulu, kemudian baru cara otomatisnya. Untuk cara pasang slideshow keren di blogger ikuti langkah-langkah dari ane.

Baca juga : Cara Mudah Membuat Sitemap Untuk Blog

Cara Memasang Slideshow di Blogger

  1. Langkah pertama masuk ke akun Blogger agan.
  2. Pilih menu Tema, nah abis itu pilih tuh Edit HTML.
  3. Terus cari kode ]]></b:skin> atau </style>, yang belom tau cara nyarinya liat keyboard klik Ctrl+F, terus masukin deh kode dibawah ini di atas kode tadi.
    4. .easyslider-wrapper { 
        width: auto; 
        float: left; 
        position: relative; 
        padding-right: 2%; 
        padding-top: 10px; 
        }
    .easyslider {
        overflow: hidden;
        position: relative;
        width: 98%;
        height: 290px;
        background: #eee;
    }
    .image_reel { 
        position: absolute; 
        top: 0; 
        left: 0; 
        }
    .image_reel img { 
        float: left; 
        width: 20%; 
        height: 350px;
        }
    .paging { 
        background: none; 
        position: absolute; 
        bottom: 15px; 
        right: 20px; 
        padding:4px 0 2px; 
        z-index: 100; 
        display: none; 
        }
    .paging a { 
        margin: 3px; 
        width: 10px; 
        height:10px; 
        display: inline-block; 
        border: none; 
        outline: none;
        border: 2px solid #fff; 
        border-radius: 10px;
        }
    .paging a.active { 
        background: #0b84cb; 
        border: 2px solid #fff; 
        border-radius: 10px;
        }
    .paging a:hover { }
    .easytitledes {
        width: 70%;
        display: none;
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 101;
        background: #000A3F;
        background:rgba(0,0,0,0.7);
        padding: 10px 15px;
        border-radius: 10px;
    }
    .easytitledes a { 
        color: #fff;
        font: 20px open sans; 
        text-transform: uppercase; 
        font-weight: bold; 
        }
    .easytitledes a:hover { 
        color:#0b84cb; 
        }
    .easytitledes p { 
        color: #fff; 
        font: 12px Arial; 
        }
  4. Abis masukin kode tadi, terus cari lagi kode </head> masukin kode di bawah ini di atasnya, kalo udah ada yang sama kaya kode di bawah ini, ya gak usah di masukin lagi.
    5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
  5. Masih di atas kode </head>, masukin lagi kode di bawah ini pas di atasnya.
    6. <script type="text/javascript">
    $(document).ready(function() {
        $(".paging").show(); 
        $(".paging a:first").addClass("active");

    var imageWidth = $(".easyslider").width(); 
    var imageSum = $(".image_reel img").size(); 
    var imageReelWidth = imageWidth * imageSum;

        $(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){ var triggerID = $active.attr("rel") - 1; 

    var image_reelPosition = triggerID * imageWidth;

        $(".paging a").removeClass('active');
            $active.addClass('active');

        $(".easytitledes").stop(true,true).slideUp('slow');
        $(".easytitledes").eq( 
        $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
        $(".image_reel").animate({left: -image_reelPosition}, 400 );
        };

    rotateSwitch = function(){
        $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

    play = setInterval(function(){
        $active = $('.paging a.active').next();

    if ( $active.length === 0) {
        $active = $('.paging a:first'); } rotate(); }, 4000); };

    rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
        clearInterval(play); }, function() { rotateSwitch();
        });
        $(".paging a").click(function() { $active = $(this);
        clearInterval(play); rotate(); rotateSwitch();  return false;
        });
    });
    </script>
  6. Langkah selanjutnya masih ada 2 cara pemasangan, mau manual atau otomatis terserah agan deh.


1. Cara Memasang Slideshow Secara Manual

  1. Nah di sini agan harus cari kode yang pas buat taruh kodenya, kalo agan pake template evo magz, agan cari kode <div id='post-wrapper'> terus masukin deh kode di bawah ini pas di bawahnya. Kalo agan pake template lain coba agan cari kode <div class="main-wrapper"> atau <div id="main-wrapper">, kalo agan pake template bawaan blogger agan cari kode <div class='blog-posts hfeed'> terus masukin deh kode di bawah ini pas di bawahnya.
    2. <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='easyslider'>
       <div class='image_reel'>
    <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
    <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
    <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
    <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
    <a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
       </div>
       <div class='descriptionslider'>
    <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>
    <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>
    <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>
    <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>
    <div class="easytitledes"><a href='Masukin-URL-artikel-disini.html'>Masukin judul artikel disini</a><p>Masukin deskripsi disini</p></div>
       </div>
       <div class='paging'>
    <a class='' href='#' rel='1'/>
    <a class='' href='#' rel='2'/>
    <a class='' href='#' rel='3'/>
    <a class='' href='#' rel='4'/>
    <a class='' href='#' rel='5'/>
       </div>
    </div>
    </b:if>
    • Keterangan :
      • Masukin-URL-gambar-disini.jpg : Masukin URL gambar agan disini.
      • Masukin-URL-artikel-disini.html : Masukin URL artikel blog agan disini.
      • Masukin judul artikel disini : Masukin judul artikelnya disini.
      • Masukin deskripsi disini : Masukin deskripsi artikel agan disni.
  2. Udah selesai pilih Simpan tema.

2. Cara Memasang Slideshow Secara Otomatis

  1. Kalo otomatis tambahin kode javascript ini dulu, cari kode </head>, terus masukin kode di bawah pas di atasnya.
    2. <script type='text/javascript'>//<![CDATA[
    imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcLTWHVi8dTvFKUdyK-sJSX4xWLR4GnAXKGQ6-l2fAMJokf4G_M-DjFwgue1i-IBu1Cfv5NcDOC6BILjtzZR_yPKfTUVmYwamHS8m_7qBx8RBgOFXmUFFMqWqpSV6EWY_TZHEWOU7QBw/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
    function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s =  s.join("");s = s.substring(0,chop-1);return s;}
    function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }}
    for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
    function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img  = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href;  break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; 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!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
    //]]></script>
    • Keterangan :
      • Silahkan ganti URL gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcLTWHVi8dTvFKUdyK-sJSX4xWLR4GnAXKGQ6-l2fAMJokf4G_M-DjFwgue1i-IBu1Cfv5NcDOC6BILjtzZR_yPKfTUVmYwamHS8m_7qBx8RBgOFXmUFFMqWqpSV6EWY_TZHEWOU7QBw/s1600/no+image.jpg dengan URL gambar yang agan mau.
  2. Sama kaya tadi di sini agan harus cari kode yang pas buat taruh kodenya, kalo agan pake template evo magz, agan cari kode <div id='post-wrapper'> terus masukin deh kode di bawah ini pas di bawahnya. Kalo agan pake template lain coba agan cari kode <div class="main-wrapper"> atau <div id="main-wrapper">, kalo agan pake template bawaan blogger agan cari kode <div class='blog-posts hfeed'> terus masukin deh kode di bawah ini pas di bawahnya.
    3. <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='easyslider'>
       <div class='image_reel'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
       </div>
       <div class='descriptionslider'>
    <script>         
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
       </div>
       <div class='paging'>
    <a class='' href='#' rel='1'/>
    <a class='' href='#' rel='2'/>
    <a class='' href='#' rel='3'/>
    <a class='' href='#' rel='4'/>
    <a class='' href='#' rel='5'/>
       </div>
    </div>
    </b:if>
  3. Udah selesai pilih Simpan tema, kalo gak berhasil agan harus paham dulu kode-kode di atas.


Demikian tutorial dari ane tentang cara membuat slideshow di blogger. Kalo ada pertanyaan tentang cara pasang slideshow ini, agan masukin aja ke kolom komentar.

Terima kasih udah mau berkunjung di blog Tutorial Umum. Untuk tutorial yang lain, agan bisa cari di blog ane ini.

Postingan populer dari blog ini

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang , pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget. (Baca juga :  Cara Membuat Widget Popular Post Dengan Rating Bintang ) Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut. Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Popular Post Berdasarkan Label di...
Baca Lebih Lanjut »

Peristiwa yang terjadi pada 5 maret di Dunia

Peristiwa yang terjadi pada 5 maret di Dunia - Setiap hari pasti ada saja yang terjadi di masa lalu maupun di masa sekarang. Lantas apa saja yang terjadi pada 5 Maret di Dunia ? Berikut adalah berbagai Peristiwa yang terjadi pada 5 maret di Dunia. (Baca juga :  3 Trik Ludo King, 1 Diantaranya adalah Trik Paling Ampuh ) Peristiwa yang terjadi pada 5 maret di Dunia 1. 5 Maret 1824 - Perang Inggris-Burma Pertama Sumber gambar : id.wiipedia.org Inggris resmi menyatakan perang kepada Burma. Perang Inggris-Burma ini disebut Perang Burma pertama. Perang ini merupakan perang pertama dari tiga perang yang terjadi antara Burma dan Britania Raya selama abad ke-19 dengan kemenangan Britania Raya. (Baca juga :  3 Langkah Mudah Download Video Youtube Tanpa Plugin ) 2. 5 Maret 1933 - Adolf Hitler meraih 43.9% suara dalam pemilihan parlemen Jerman (Reichstag) Sumber gambar : id.wiipedia.org Memungkinkan kaum Nazi untuk mengesahkan Ermächtigungsgesetz dan membentuk kediktatoran. (Baca juga :...
Baca Lebih Lanjut »