Membuat Tampilan Popular Post Dengan Slideshow

Info informasi Membuat Tampilan Popular Post Dengan Slideshow atau artikel tentang Membuat Tampilan Popular Post Dengan Slideshow ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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.

Demikian artikel tentang Membuat Tampilan Popular Post Dengan Slideshow ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Tampilan Popular Post Dengan Slideshow ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik