Cara Membuat Slide Recent Post Sederhana Secara Manual

Setelah beberapa kali saya posting cara membuat slide recent post secara auto, maka ada saatnya saya juga posting tentang cara membuat recent post secara manual dan ini merupaka alternatif bagi teman-teman yang masih belum berhasil membuat recent post secara auto.

Widget ini sangat sederhana karena tidak memerlukan keterampilan khusus untuk menerapkannya, cukup dengan mengatur posisi dimana slide tersebut ingi ditampilkan.

Yang perlu dimasukkan dalam slide ini hanya link image, link posting, title posting dan deskripsi posting yang ingin di masukkan dalam slide ini, sangat sederhana...!

Untuk permulaan, masukkan CSS/style berikut pada bagian style.

.homer {

    display:block;

    background-color:transparent;

    max-width:700px;

    padding:0 auto 0px auto;

    margin:0 auto 0px auto;

    text-align:center}

.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: 20px;

    height:20px;

    display: inline-block;

    border: none;

    outline: none;

    border-radius:30px

    }

.paging a.active {

    background: #FF1744;

    border: 1px solid #15E3FF;

    }

.paging a:hover {

}

.easytitledes {

    width:70%;

    display: none;

    position: absolute;

    bottom: 20px;

    left: 20px;

    z-index: 101;

    background: #FF1744;

    background: rgba(2, 0, 51, 0.6);

    padding: 10px 15px;

    border-radius:3px

    }

.easytitledes a {

    color: #FF1744;

    font: 14px sans-serif;

    text-transform: uppercase;

    font-weight: bold;

    }

.easytitledes a:hover {

    color:#29FF00

    }

.easytitledes p {

    color: #fff;

    font: 12px Arial;

    }

Kemudian script berikut diletakkan sebelum </head>.

<script type='text/javascript'>

//<![CDATA[

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

Apabila pada template belum ada script yang sejenis dengan script dibawah, bisa dimasukkan juga dan letakkan diatas </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

Pada bagian terakhir adalah penempatan dimana slide tersebut ingin ditampilkan, jadi harus ada sedikit pengetahuan sebelum memasangnya, bisa dibawah header atau sidebar diatas posting.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

  <div class='homer'>

<div class='easyslider'>

   <div class='image_reel'>

<a href="###"><img src="link image...jpg" /></a>

<a href="###"><img src="link image...jpg" /></a>

<a href="###"><img src="link image...jpg" /></a>

<a href="###"><img src="link image...jpg" /></a>

<a href="###"><img src="link image...jpg" /></a>

   </div>

   <div class='descriptionslider'>

<div class="easytitledes"><a href='...post-link1.html'>Title Posting...</a><p>Deskripsi Posting...</p></div>

<div class="easytitledes"><a href='...post-link2.html'>Title Posting...</a><p>Deskripsi Posting...</p></div>

<div class="easytitledes"><a href='...post-link3.html'>Title Posting...</a><p>Deskripsi Posting...</p></div>

<div class="easytitledes"><a href='...post-link4.html'>Title Posting...</a><p>Deskripsi Posting...</p></div>

<div class="easytitledes"><a href='...post-link5.html'>Title Posting...</a><p>Deskripsi Posting...</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>

</div>

</b:if>

Beberapa kode yang di teks box merah, bisa diganti sesuai selera.

Silahkan klik SAVE dan lihat hasilnya.

Result

Boleh tinggalkan pesan atau komentar apabila kurang dipahami.