Cara Membuat Sildeshow Artikel Postingan Otomatis di Blog

Cara Membuat Sildeshow atau Slider Artikel Postingan Terbaru di Blogspot - Hai sobat ketemu lagi dengan saya dewan komputer dan kali ini saya akan membahas tentang cara membuat slideshow atau slider artikel postingan terbaru pada blog sobat. Fitur ini biasanya muncul di depan atau beranda dari blog sobat berupa gambar besar dan terdapat judul serta keterangannya yang akan berganti setiap beberapa detik. Slider ini menurut saya sederhana dan ringan untuk blog sobat. Slideshow ini juga menggunakan javascript dan juga secara otomatis jadi sobat tidak perlu memasukannya secara manual.

Cara Membuat Sildeshow Artikel Postingan di Blog

Gambar di atas adalah hasilnya jika sobat mengikuti cara dibawah ini. Caranya sangat mudah walaupun cukup panjang namun sobat cukup mengikuti langkah-langkah dari saya yaitu sebagai berikut :

1. Pertama yaitu Login ke akun Blogger sobat.

2. Masuk Dasbor dan pilih Template => Edit HTML

3. Selanjutnya cari kode </b:skin> untuk memudahkannya gunakan Ctrl+F dan masukkan </b:skin> lalu pastekankode dibawah

.easyslider-wrapper {
    width: auto;
    float: left;
    position: relative;
    padding-right: 2%;
    padding-top: 10px;
    }
.easyslider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 350px;
    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;
    background: #fff;
    width: 10px;
    height:10px;
    display: inline-block;
    border: none;
    outline: none;
    }
.paging a.active {
    background: #15E3FF;
    border: 1px solid #15E3FF;
    }
.paging a:hover { }
.easytitledes {
    width:70%;
    display: none;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 101;
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6);
    padding: 10px 15px;
    }
.easytitledes a {
    color: #15E3FF;
    font: 14px sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    }
.easytitledes a:hover {
    color:#29FF00
    }
.easytitledes p {
    color: #fff;
    font: 12px Arial;
    }

4. Cari lagi kode </head> caranya sama seperti di atas dan pastekan kode dibawah tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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>

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

5. Setelah itu cari lagi kode <div class="main-wrapper" > dan pastekan kode dibawah kode tersebut

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

6. Setelah itu klik Simpan Templates dan lihat hasilnya

Sekian postingan tentang  Cara Membuat Sildeshow Artikel Postingan Otomatis di Blog. Apabila sobat masihbingung atau ada pertanyaan maka bisa tinggalkan komentar pada kotak komentar dibawah. Semoga bermanfaat dan sampai ketemu lagi pada postingan saya lainnya.

• Tweet
• Share
• Share
• Share
• Share

About Admin

Saya senang berbagi ilmu agar semua orang tidak lagi asing terhadap ilmu-ilmu yang ada pada dunia komputer. Selain itu saya juga memberikan ilmu-ilmu tentang pemrograman ke blog ini khususnya untuk yang kuliah jurusan komputer ;) ;) ;)

Related Post