Home Blogging Cara Membuat Slideshow di Blogger Keren

Sabtu, 08 Desember 2018

Cara Membuat Slideshow di Blogger Keren

Diterbitkan
Tags

Cara Membuat Slideshow di Blogger Keren - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Cara Membuat Slideshow di Blogger Keren, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.


Judul : Cara Membuat Slideshow di Blogger Keren
link : Cara Membuat Slideshow di Blogger Keren

Baca juga


Cara Membuat Slideshow di Blogger Keren

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.

Cara Membuat Slideshow di Blogger Keren
Slideshow ini bisa kita atur secara manual dan otomatis, jika Anda ingin secara manual, Anda harus memasukan beberapa link supaya postingan dan tampilan gambar bisa muncul secara maksimal. Namun jika Anda ingin menampilkan slideshow ini secara otomatis Anda hanya harus memasukan script code saja.
  1. Langkah pertama masuk ke akun Blogger
  2. Pilih menu Tema, pilih Edit HTML
  3. Terus cari kode ]]></b:skin> atau </style> letakkan kode dibawah diatas kode tersebut.
.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;
    }
  1. Cari kode </head> masukin kode di bawah ini di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
  1. Kode </head>, masukin 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>
  1. Langkah selanjutnya masih ada 2 cara pemasangan, mau manual atau otomatis terserah Anda.

Cara Memasang Manual
  1. Anda cari kode <div id='post-wrapper'>. Jika tidak ada coba Anda cari kode <div class="main-wrapper"> atau <div id="main-wrapper">, Atau Anda cari kode <div class='blog-posts hfeed'> terus masukin 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='URL.html'>Judul</a><p>Deskripsi</p></div>
    <div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
    <div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
    <div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
    <div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</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 Anda disini.
  • URL.html: Masukin URL artikel blog Anda disini.
  • Judul: Masukin judul artikelnya disini.
  • Deskripsi: Masukin deskripsi artikel Anda disni.
  1. Simpan Tema

Cara Memasang Otomatis
  1. 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/AVvXsEj8pbMLUVT5vEn62uHNVfOJumzVLXvhZRqnjzMFQXcGRMvbCcLCcysxBS0Io545yWoa65LYeKqog0bhTMrjL_oDLloTnO4qCGrr3TLxXME36oJ51bKARykrQyWykINlMCT6gwiZOkAMNwY/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/AVvXsEj8pbMLUVT5vEn62uHNVfOJumzVLXvhZRqnjzMFQXcGRMvbCcLCcysxBS0Io545yWoa65LYeKqog0bhTMrjL_oDLloTnO4qCGrr3TLxXME36oJ51bKARykrQyWykINlMCT6gwiZOkAMNwY/s1600/no+image.jpg dengan URL gambar yang Anda mau.
  1. Anda cari kode <div id='post-wrapper'>. Jika tidak ada coba Anda cari kode <div class="main-wrapper"> atau <div id="main-wrapper">, Atau Anda cari kode <div class='blog-posts hfeed'> terus masukin 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><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>
  1. Simpan tema

Demikian informasi tentang Cara Membuat Slideshow di Blogger Keren. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.

Sekian Artikel Cara Membuat Slideshow di Blogger Keren

Sampailah kita pada akhir artikel Cara Membuat Slideshow di Blogger Keren kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Cara Membuat Slideshow di Blogger Keren dengan alamat link https://naparom.blogspot.com/2018/12/cara-membuat-slideshow-di-blogger-keren.html

Artikel Terkait

Bryan

Next Post
Previous Post


EmoticonEmoticon

Langganan: Posting Komentar (Atom)