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 Memasang In-Article Ads Google AdSense Secara Otomatis

Baru-baru ini Google AdSense memunculkan fitur iklan yang terbaru. Fitur iklan ini terbilang lebih efektif di bandingkan fitur iklan sebelumnya, karena lebih responsive dan memudahkan pengunjung untuk melihat iklan yang di munculkan di sebuah blog atupun website. Fitur iklan ini antara lain adalah In-feed ads , dan In-article ads . Dimana In-feed ads digunakan untuk memasang iklan di tengah pilihan artikel. Dan In-article ads di gunakan untuk memasang iklan di tengah artikel yang ada. (Baca juga : Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Namun pada kesempatan kali ini, saya hanya akan memberikan cara memasang In-articel Ads secara otomatis . Kemudian untuk langkah pemasangannya ikuti langkah-langkah dari saya berikut ini. Cara Memasang In-Article Ads Google AdSense Secara Otomatis L angkah pertama masuk ke akun Google AdSense anda Pilih menu My Ads , kemudian pilih Content , pilih Ad units , pilih tombol Unit iklan baru Masuk ke Unit iklan baru Ke...
Baca Lebih Lanjut »

Cara Menggunakan Google Webmaster Tools Terbaru

Kita sering melihat banyak blog yang muncul di google.com . Biasanya untuk mencapai posisi teratas dari google, seorang blogger menggunakan berbagai cara seperti menggunakan Webmaster tools . Untuk itu, pada tutorial kali ini saya akan memberikan cara menggunakan google webmaster tools . Sebetulnya banyak webmaster tools yang bisa digunakan para blogger, tetapi untuk mempermudah para blogger, google telah menyediakan Webmaster Tools agar para blogger dapat dengan mudah mengideks artikel-artikel mereka. (Baca juga :  Cara Menggunakan Bing Webmaster Tools Terbaru ) Apa itu Google webmasters tools ? Seperti yang sudah saya jelaskan tadi, Google Webmaster tools adalah fasilitas yang di berikan google agar mempermudah para pemilik sebuah situs dalam mesin pencari. Dalam hal ini Google juga memperlihatkan kinerja dari website atau situs yang kita miliki. Tidak usah panjang lebar menjelaskan, berikut adalah cara menggunakan Google webmaster tools. (Baca juga :  Cara Mengatasi Webmas...
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 Widget Social Media Button Efek Berputar

Sebelumnya saya sudah banyak membagikan beberapa tutorial tentang cara membuat widget sosial media dalam berbagai bentuk juga, yang ini pasti tidak asing bagi agan-agan karena widget sosial media ini bisa agan temukan di template yang di buat oleh Arlina Design . Karena belum ada tutor cara membuat widget ini, untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara membuat widget social media button dengan efek berputar . (Baca juga :  Cara Membuat Button Dengan Animasi Bounce Effect ) Karena kebetulan hobi saya adalah mencari tau bentuk-bentuk CSS terbaru, jadi saya mulai mempelajari widget ini, dan kemudian saya menemukan script untuk membuat widget sosial media ini. Widget sosial media ini tidak membutuhkan JavaScript jadi untuk pemakaiannya cukup simple dan tidak mengurangi kecepatan blog agan. Berikut adalah tampilan bentuk widget social media button ini. Maaf jika tampilan Gif kurang maksimal. Sebelumnya saya juga membuat tutorial cara membuat widget so...
Baca Lebih Lanjut »

Ganti Target Negara di Search Console Agar Artikel Blog Naik Peringkat

Search Console atau yang biasa kita sebut webmaster tools , adalah sebuah alat agar artikel blog yang kita milik bisa masuk ke mesin pencarian seperti google. Di dalam search console banyak sekali hal yang kita perlukan agar artikel blog yang kita miliki bisa naik peringkat di pencarian. Salah satunya adalah Penargetan Internasional , menu yang satu ini tidak boleh di lewatkan oleh kita. Di menu penargetan internasional ini ada 2 tab, yaitu tab pertama untuk Bahasa , kemudian tab kediua ada Negara . Banyak sekali manfaat yang bisa kita dapatkan dari menu Penargetan International ini. Untuk itulah kali ini saya akan membahas tentang cara ganti target negara di search console agar artikel blog naik peringkat. Bagi anda yang belum mengaktifkan tab bahasanya, anda bisa mengaktifkannya dengan Tag Hreflang . Untuk cara memasang tag hreflang ini, anda bisa baca artikelnya di sini . (Baca juga : Cara Memasang Tag Hreflang di Blog ) Apa manfaat dari mengganti target negara di search console?...
Baca Lebih Lanjut »

Cara Menggunakan Bing Webmaster Tools Terbaru

Webmaster tools sudah menjadi bagian dari para blogger , web master tools ini berguna untuk mengindeks sebuah artikel agar berada di situs pencarian. Namun kita biasanya hanya memakai Google webmaster tools saja, padahal ada banyak tempat untuk mengindeks artikel kita. Oleh karena itu sekarang saya akan membagikan salah satu webmaster tools selain Google webmaster tools, yaitu Bing webmaster tools. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menggunakan bing webmaster tools terbaru . (Baca juga :  Cara Menggunakan Google Webmaster Tools Terbaru ) Cara menggunakan Bing webmaster tools ini hampir mirip seperti Google webmaster tools , kita hanya memasukan url artikel kita Bing webmaster tools kemudian akan muncul di situs pencari Bing itu sendiri. Tetapi jika ada yang ingin mengetahui cara menggunakan Bing webmaster tools atau belum tahu cara menggunakan Bing webmaster tools, ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Memas...
Baca Lebih Lanjut »

Cara Membuat Floating Widget Breaking News / Headline News di Blogger

Setelah sebelumnya saya membagikan widget breaking news 2 style , pada artikel kali ini saya akan memberikan tutorial tentang cara membuat floating widget breaking news atau headline news di blogger . Sebelumnya saya menempatkan braking news ini pada area header dari blog, tetapi kali ini saya akan membuat widget ni menjadi melayang di bawah layar pengunjung blog. Baca juga :  Cara Membuat Widget Breaking News 2 Style di Blogger Sebenarnya sudah jelas dari judul artikel ini adalah floating widget berarti widget mengambang atau mengapung. Jadi floating widget breaking news adalah widget mengambang breaking news, saya menempatkan widget ini di bawah, karena biasanya template atau tampilan blog rata-rata menggunakan floating menu navigasi jadi pandangan pengunjung akan berkurang di atas. Dilihat dari fungsi, floating widget braking news atau headline news ini sangat berguna sekali, apalagi bagi pengunjung agar mengetahui informasi-informasi terbaru dari situs atau blog tersebut. Nah,...
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 »