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 Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage

Pada tutorial kali ini saya akan memberikan cara menambah dan menghapus admin atau pengurus di facebook fanpage . Seperti kita ketahui facebook fanpage di gunakan sebagai tempat berkumpulnya sebuah kelompok yang menyukai suatu hobi ataupun tokoh masyarakat. (Baca juga :  Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger ) Didalam dunia blog, kita sering menggunakan fanpage facebook agar kita lebih dekat dengan pengunjung blog, dan juga agar lebih mudah mendapatkan visitor dari fanpage yang kita miliki. Facebook fanpage biasanya di urus oleh beberapa admin jika fanpage tersebut berasal dari sebuah perusahaan atau kelompok tertentu. Untuk cara menambah dan menghapus admin ataupun pengurus di facebook fanpage , ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Tombol Share Bergaya Flat di Blogger ) Cara Menambah dan Menghapus Admin atau Pengurus di Facebook Fanpage Cara Menambah Admin atau Pengurus di Facebook Fanpage Langkah pertama login ter...
Baca Lebih Lanjut »

Cara Membuat Widget Komentar Postingan Terbanyak Responsive di Blogger

Kebanyakan blogger mengukur kesuksesan suatu artikel lewat komentar dari para pengunjungnya. Jika pengunjung menyukai artikel yang kita miliki, atau pengunjung ingin bertanya dan berinteraksi langsung dengan pemilik blog atau admin maka mereka akan menginputkan komentar mereka di kolom komentar. Untuk itu di artikel saya kali ini, saya akan memberikan cara membuat widget komentar postingan terbanyak yaitu sebuah widget untuk menampilkan beberapa artikel dengan komentar terbanyak. (Baca juga :  Cara Membuat Widget Komentar Terbaru dengan Avatar ) Widget komentar terbanyak ini akan menampilkan beberapa angka komentar tertinggi di blog kalian, dengan model yang responsive. Sehingga akan membuat para pengunjung blog kita tidak bosan dengan tampilan blog kita. Berikut langkah-langkah cara membuat widget komentar postingan terbanyak responsive di blogger. (Baca juga :  Cara Membuat Widget Komentar Terbaru Dengan Judul Postingan di Blogger ) Cara Membuat Widget Komentar Postingan T...
Baca Lebih Lanjut »

2 Cara Membuat Sticky Widget Sidebar dengan CSS dan jQuery

Sticky widget adalah widget yang bisa di bilang melayang atau mengambang apabila kita menscroll layar browser. Sticky widget ini biasanya menggunakan jQuery tetapi kali ini saya tidak hanya membuat tutorial cara membuat yang jQuerynya saja tetapi ada juga yang menggunakan CSS , untuk itulah saya akan memberikan 2 cara membuat sticky widget sidebar dengan CSS dan jQuery . Sticky widget ini awalnya hanya support untuk template responsive saja, namun seiring berkembangnya kemajuan blog, kini hadir template AMP yang di sebut-sebut memiliki kecepatan yang tinggi di versi mobile. Untuk itulah sangat di butuhkan sticky widget sidebar dengan CSS,  karena template AMP ini sangat anti jika di tempelkan script jQuery. (Baca juga : Cara Membuat Widget Recent Post Muncul Saat di Scroll ) 2 Cara Memasang Sticky Widget Sidebar dengan CSS dan jQuery di Blog Untuk cara yang pertama kita akan memasang sticky widget sidebar dengan jQuery terlebih dahulu. Untuk itu ikuti langkah-langkah dari saya ...
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 »

4 Langkah Untuk Periklanan Gratis

Selalu ada beban keuangan yang signifikan terkait dengan mengiklankan produk, layanan, atau upaya seperti situs web. Omong-omong, saya selalu menjadi penggemar tren iklan gratis. Saya telah sukses dengan dua metode berbeda untuk memperoleh publisitas gratis yang ingin saya bagikan kepada Anda. Salah satu opsi adalah menempatkan iklan di situs web populer dan gratis. Saya telah menulis tentang beberapa situs teratas yang akan beriklan secara gratis. Mulailah dengan mengunjungi internetmarketinglearningcenter.com/classified-ads.html untuk menemukan platform periklanan gratis yang Anda inginkan. Cara kedua agar saya dapat memasang iklan tanpa mengeluarkan uang adalah dengan berinvestasi dalam Kursus Iklan Baris Gratis. Ini adalah kursus yang sangat singkat, dan saya harus membayar Clickbank $19,95 untuk mengakses alat promosi ini. Pergi ke tautan unduhan perangkat lunak gratis yang akan Anda gunakan untuk memposting dan memantau iklan Anda adalah sorotan dari Kursus Iklan Baris Gratis. Ku...
Baca Lebih Lanjut »

3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita

Kita tahu Template adalah hal yang sangat identik dengan blog, namun apabila template kita kurang menarik. Bisa jadi para pengunjung blog kita hanya melihat sekejap mata saja, atau hanya 1 halaman saja yang mereka lihat dikarenakan tampilan yang kurang menarik. Untuk itulah saya akan membahas tentang 3 tips jitu menentukan template yang cocok untuk blog kita . Memang sebetulnya tampilan bukanlah hal utama dalam sebuah blog, tetapi konten yang bermutu dan berbobotlah yang membuat blog kita memiliki banyak pengunjung. Namun apabila mereka hanya datang tak di undang dan pulang tak di antar seperti jelangkung, atau datang hanya membuka 1 halaman dan pergi tanpa meninggalkan komentar. Bagi kalian yang ingin mengetahu tips jitu menentukan template yang cocok untuk blog kita, baca terus artikel ini. (Baca juga :  Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Cara Menentukan Template yang Cocok untuk Blog Kita 1. Berdasarkan Topik atau niche blog Niche Umum B...
Baca Lebih Lanjut »

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 Memasang Komentar Disqus di Blogger dengan Mudah

Komentar Disqus adalah sistem komentar paling di gemari oleh para blogger, karena banyak memiliki fitur-fitur yang lebih baik daripada sistem komentar yang lainnya. Karena komentar disqus mudah di gunakan, apalagi sistem komentar disqus yang mobile friendly , yaitu fitur yang bisa di gunakan di berbagai device . Untuk itu pada tutorial kali ini, saya akan memberikan cara memasang komentar Disqus di blogger dengan mudah. Akan tetapi agan tidak perlu takut kalau komentar yang berada di blogger akan hilang apabila agan memasang komentar disqus ini, karena fitur dari sistem komentar disqus yang dapat mengimport komentar yang sudah ada di blog agan. Untuk cara memasang komentar disqus di blogger dengan mudah , ikuti langkah-langkah dari saya berikut ini. Cara Memasang Komentar Disqus di Blogger Langkah pertama masuk ke dalam akun Blogger agan Kemudian masuk ke halaman Disqus , langsung pilih GET STARTED Silahkan masukan Nama , Email , dan Password yang agan inginkan di form tersebut Selanj...
Baca Lebih Lanjut »