Membuat Tampilan Popular Post Dengan Slideshow

Membuat Tampilan Popular Post Dengan Slideshow - Widget popular post atau daftar artikel terbaru pada blog, umumnya merupakan cara untuk mempermudah visitor dalam menjelajah beberapa atau keseluruhan artikel yang terdapat pada blog tersebut. Pada artikel sebelumnya tentang Cara Membuat Artikel Terbaru Desain Gallery Dan Tooltip merupakan beberapa desain popular post yang sudah pernah saya modifikasi untuk mempercantik tampilan widget popular post blog Anda.

Desain kali ini, SAHABAT BLOGGER 77 kembali mempersembahkan tampilan terbaru popular post buat sahabat semua dengan Membuat Tampilan Popular Post Dengan Slideshow.
Sumber - Efek Slide Otomatis Pada Gambar




DEMO SHOW


TAHAP PENERAPAN WIDGET PADA BLOG
Tanpa menyentuh peng-editan HTML Template, pada dasboard masuk ke menu Tata Letak, kemudian tambahkan beberapa elemen halaman Gadget pada formulir HTML/JavaScript :

Halaman Menambahkan Widget

Selanjutnya, Copy kode berikut letakkan di dalam formulir.

<style type='text/css'>
.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;}

.tinycarousel-viewport {
  overflow:hidden;
  margin:0 auto;
  position:relative;
  background-color:#333;
  border:1px solid #ccc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align:center;}

.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;}

.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:#fff;
  color:#666;}

.tinycarousel-inner {
  padding:10px;
  border:1px solid #080;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;}

li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0px;
  padding:0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;}

.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 3px;
  background:none;
  border-bottom:3px double orange;}

.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;}

.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;}

.tinycarousel-footer {
  font:bold 12px/normal Helvetia;
  color:#ccc;
  background-color:#333;
  background-image:-webkit-linear-gradient(#660000,#e06666);
  background-image:-moz-linear-gradient(#660000,#e06666);
  background-image:-ms-linear-gradient(#660000,#e06666);
  background-image:-o-linear-gradient(#660000,#e06666);
  background-image:linear-gradient(#660000,#e06666);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;}

.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  color:#fff;
  background-color:#38f;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;}

.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#b6d7a8;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 4px 0 0;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
  -webkit-border-radius:50%;
  border-radius:50%;
  -moz-border-radius:50%;
  border:2px solid red;}

.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;}

.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;}

.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;}

.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom:0;}
</style>

Selanjutnya, letakkan kode berikut setelah kode penutup </style>

<div id="tinycarousel-container" class="tinycarousel">
</div>
<script>
var tinycarousel_config = {
    url: 'http://sahabatblogger77.blogspot.com',//ganti dengan URL Blog Anda
    numPosts: 9,//tentukan jumlah posting
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    nav: {prevText: 'Prev',nextText: 'Next',},
    carousel: {
        axis: "x",
        itemwidth: 190,
        itemheight: 360,
        itemmargin: 10,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/pop-post-auto-slide.js"></script>

Sebagai alternatif, tampilan widget popular post seperti ini, bisa Anda jadikan sebagai daftar Arsip artikel pada halaman Beranda/Home.