Cara Membuat Slideshow di Blogger Keren

 

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.

.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.

<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.

<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.

Baca juga : Cara Membuat Syntax Highlighter Otomatis Tanpa Javascript di Blogger

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.

<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.

<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzdc6uuBcHnT05SBHhzCF3m0aqP3-k21kO20DBzBSA5p0d5cPMU157Eu9ZYbM5h2BSV5LKSM9MkoJABlo8DrU2NUA7rBdgbgY6F6yaIpJNRFoJxHrYha5nfr2xl9P98gI9m7Uq8daCfc/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/AVvXsEhzzdc6uuBcHnT05SBHhzCF3m0aqP3-k21kO20DBzBSA5p0d5cPMU157Eu9ZYbM5h2BSV5LKSM9MkoJABlo8DrU2NUA7rBdgbgY6F6yaIpJNRFoJxHrYha5nfr2xl9P98gI9m7Uq8daCfc/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.

<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.

sumber: http://tutorialbloggerindo1.blogspot.com/2017/08/cara-membuat-slideshow-di-blogger-keren.html