Cara Membuat Slideshow di Blogger Keren - Hallo sahabat Apkpure, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Slideshow di Blogger Keren, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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

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.

Langkah pertama masuk ke akun Blogger
Pilih menu Tema, pilih Edit HTML
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;
    }

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'/>

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>

Langkah selanjutnya masih ada 2 cara pemasangan, mau manual atau otomatis terserah Anda.

Cara Memasang Manual

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.

Simpan Tema

Cara Memasang Otomatis

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/AVvXsEiJh-5b6dALLXzbNNL6Zvgatqn4JouFjTA1mfCG8vbZB3WhyphenhyphencZvipioZZ4rqLmbeQAsyoK7RP3M1_Wq4b6Pj6CkAbHtcTUQ047nBo0KfpDxqqFCOlM1gL0PQwvibkGMBFFSFUF60WJAqq0/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/AVvXsEiJh-5b6dALLXzbNNL6Zvgatqn4JouFjTA1mfCG8vbZB3WhyphenhyphencZvipioZZ4rqLmbeQAsyoK7RP3M1_Wq4b6Pj6CkAbHtcTUQ047nBo0KfpDxqqFCOlM1gL0PQwvibkGMBFFSFUF60WJAqq0/s1600/no+image.jpg dengan URL gambar yang Anda mau.

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("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
   </div>
   <div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</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("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
   </div>
   <div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</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>

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.

Demikianlah Artikel Cara Membuat Slideshow di Blogger Keren

Sekianlah artikel Cara Membuat Slideshow di Blogger Keren kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Slideshow di Blogger Keren dengan alamat link https://apkpure-123.blogspot.com/2018/12/cara-membuat-slideshow-di-blogger-keren.html

Sabtu, 08 Desember 2018

Cara Membuat Slideshow di Blogger Keren

Cara Membuat Slideshow di Blogger Keren

Demikianlah Artikel Cara Membuat Slideshow di Blogger Keren

Artikel Terkait Cara Membuat Slideshow di Blogger Keren :

Entri Populer

Sabtu, 08 Desember 2018

Cara Membuat Slideshow di Blogger Keren

Baca juga

Cara Membuat Slideshow di Blogger Keren

Demikianlah Artikel Cara Membuat Slideshow di Blogger Keren

Artikel Terkait Cara Membuat Slideshow di Blogger Keren :

Entri Populer