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

Inovasi Teknologi dan Seni Menuju Riau Berbudaya

Inovasi Teknologi dan Seni Menuju Riau Berbudaya - Riau adalah salah satu provinsi yang sedang giat dalam pembangunan jangka menengah, diantara salah satu misinya adalah meningkatkan pelayanan pendidikan. Peningkatan pelayanan pendidikan dilakukan karena peran para generasi muda dalam meningkatkan pembangunan sangatlah di butuhkan baik dari segi Inovasi Teknologi ataupun Seni, agar masyarakat Riau menjadi masyarakat yang berbudaya. Dimanakah peran generasi muda Riau dalam inovasi di bidang teknologi informasi? Peran Generasi Muda Riau Dalam Inovasi di Bidang Teknologi Informasi Program Riau Go.IT , adalah salah satu inovasi terbaru pemerintah dalam bidang teknologi informasi, sehingga memudahkan Pemerintah Provinsi Riau dalam meningkatkan pelayanan masyarakat, dan juga penyebarluasan informasi yang ada di Provinsi Riau. Sumber : http://humas.riau.go.id Program Riau Go.IT , adalah program Pemerintah Provinsi Riau pada saat ini, sehingga kemungkinan besar jika program ini sudah ter...
Baca Lebih Lanjut »

Cara Membuat Filter Gambar Dengan CSS

Filter gambar biasanya digunakan pada saat kita mengedit gambar. Biasanya juga kita hanya menggunakan aplikasi untuk memfilter gambar tersebut sehingga dapat berubah sesuai yang kita inginkan. Tetapi ternyata ada cara untuk memfilter gambar tersebut dengan menggunakan CSS , untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat filter gambar dengan CSS . (Baca juga :  Cara Membuat Gambar Flat Design Secara Otomatis ) Beberapa filter gambar yang bisa di gunakan antara lain. Filter Gambar yang Bisa di Gunakan dengan CSS 1. Blur Agan pasti sudah pernah mendengar istilah blur, efek blur pada gambar di gunakan untuk menyamarkan gambar. 2. Brightness Brightness di gunakan untuk membuat filter gambar menjadi lebih cerah, sehingga dapat disimpulkan filter ini di gunakan untuk mencerahkan gambar. 3. Contrast Kontras. Secara umum kontras diartikan sebagai perbedaan gradasi,kecerahan, atau nada (warna) antara bidang gelap (shadow) dengan bidang terang, atau warna...
Baca Lebih Lanjut »

Cara Mudah Membuat Banner Iklan Sederhana dengan Paint

Banner iklan adalah hal umum dalam sebuah blog . Dengan iklan yang muncul di sebuah blog, menandakan bahwa blog tersebut sudah terpercaya. Banner iklan ada berbagai ukuran tetapi yang paling umum adalah banner iklan sidebar dan header. (Baca juga : Cara Membuat Widget Artikel Terbaru Super Ringan di Blog ) Google AdSense adalah sebuah perusahaan yang paling terkenal untuk periklanan . Dengan bergabung menjadi publisher google adsense, hal ini memungkinkan untuk menampilkan iklan di halaman blog yang kita miliki. Lalu bagaimana cara membuat banner iklan sendiri? Sebetulnya caranya sangat mudah. Kita bisa membuat iklan kita sendiri dengan berbagai software ataupun aplikasi editor gambar yang ada. Untuk itu kali ini saya akan membagikan cara membuat banner iklan sederhana dengan software paint. Hanya dengan software Paint? Ya, software yang paling awam ini juga bisa di gunakan untuk membuat banner iklan. Kenapa memilih Paint? Paint adalah software yang pasti selalu ada di dalam se...
Baca Lebih Lanjut »

Cara Membuat Judul Blog dengan Gambar Teks Keren

Pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat judul blog dengan gambar teks keren . Kita sering melihat header judul sebuah blog menggunakan teks dengan bentuk font biasa seperti Arial , tetapi kita juga sering melihat judul blog berupa gambar , tetapi menggunakan font yang unik. (Baca juga :  Cara Membuat Slideshow di Blogger Keren ) Lalu bagaimana cara membuat judul blog dengan gambar teks keren? Kita sebenarnya juga bisa menggunakan aplikasi atau software editor gambar seperti Adobe Photoshop , Corel Draw , dan editor gambar lainnya. Namun jika kalian tidak memiliki skill membuat judul blog dengan gambar teks yang bagus, kalian bisa menggunakan cara dari saya. Nah, untuk cara membuat judul blog dengan gambar teks keren, silahkan kalian ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Efek Tombol Keyboard di Blogger Dengan CSS ) Cara Membuat Judul Blog dengan Gambar Teks Keren Karena di sini saya tidak bilang ingin menggunak...
Baca Lebih Lanjut »

Cara Mudah Membuat Widget Artikel Pilihan Di Blog

Widget adalah suatu komponen yang penting dalam sebuah blog. Widget di blog ada berbagai macam jenisnya, dari mulai bawaan blog ataupun kita sendiri yang membuatnya. Pada kesempatan kali ini, saya akan memberikan cara mudah membuat widget artikel pilihan . Widget artikel pilihan ini di gunakan untuk menampilkan list atau menu postingan di widget secara acak. Widget artikel pilihan ini adalah widget yang di rekomendasikan, bagi anda yang ingin mendaftar menjadi pusblisher Google AdSense . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Tampilan widget artikel pilihan ini cukup simple, yaitu hanya berupa teks saja. Bagi anda yang ingin menampilkan widget ini dengan tampilan gambar thumbnail silahkan gunakan widget ini . (Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger ) Jika anda penasaran bagaimana bentuk atau tampilan dari widget artikel pilihan ini, di bawah ini saya tampilkan bentuk tampilan dari widget artikel pilihan tersebut. Langsun...
Baca Lebih Lanjut »