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 :

Widget page image
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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Tampilan Popular Post Dengan Slideshow
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

19 komentar

  1. wah ini ni yang aku suka mbk Devy, tapi sayang tanpilan slideshow di blog aku sudah banyak banget..

    BalasHapus
    Balasan
    1. berarti kalau ditambah satu lagi dengan ini, bisa numpuk attuh mas,hehe..

      Hapus
  2. wah keren nih slideshownya, dengan pemasangan JS apa tidak akan berpengaruh mbak kepada loading blognya...

    BalasHapus
    Balasan
    1. 90% blog ini membahas seputar tutorial blog,CSS,Efek dan JavaScript, yang semuanya saya tampilkan hasilnya pada tampilan DEMO SHOW.

      seperti tampilan HOME blog ini, saya menggunakan js, widget sidebar category file menggunakan js. namun semuanya saya bungkus dengan perintah tag kondisional agar tidak memberatkan speed load, jadi efek akan bekerja jika hanya dibutuhkan saja

      Hapus
  3. saya bookmark dulu mbak devy

    BalasHapus
  4. Wah keren sob, ane coba dulu, hehe :D

    BalasHapus
  5. langsung tancap ke tkp dulu mbak devy :)

    BalasHapus
  6. keren ya mbak, tampilannya seperti slide show. oya kalau ukurannya bisa di kecilkan bukan, sebab kan kalau ditempatkan di sedabr ukurannya biasanya 300 x 300 an gitu :D

    BalasHapus
    Balasan
    1. bisa saja mas, lihat peraturan image pada kode ini mas
      [pre]carousel: {
      axis: "x",
      itemwidth: 190,//lebar objek
      itemheight: 360,//tinggi objek
      itemmargin: 10,
      itempadding:10,
      visible: 4,
      display: 1,
      start: 1,
      interval: true,
      intervaltime: 3000,
      animation: true,
      duration: 1000,
      easing: "swing",
      callback: function() {}[/pre]

      bisa saja kita buat tampilannya menjadi diagonal style agar sesuai dengan tampilan kolom sidebar yang kecil, cukup ganti kode CSS berikut dengan ini
      [pre]
      .tinycarousel-navigation .tinycarousel-inner {border:none}
      .tinycarousel-button {
      background-color:#b6d7a8;padding:2px 5px;
      overflow:hidden;position:relative;
      float:left;margin:0 2px 0 0;color:white;
      text-decoration:none;font-weight:bold;
      text-align:center;}

      .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;}[/pre]

      selanjutnya kita ubah tampilan scriptnya ke- diagonal seperti ini

      [pre]
      <div id="tinycarousel-container" class="tinycarousel">
      </div>
      <script>
      var tinycarousel_config = {
      url: 'http://sahabatblogger77.blogspot.com',
      numPosts: 12,
      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: "y",
      itemwidth: 200,
      itemheight: 370,
      itemmargin: 10,
      itempadding:5,
      visible: 1,
      display: 1,
      start: 1,
      interval: true,
      intervaltime: 3000,
      animation: true,
      duration: 1000,
      easing: "swing",
      callback: function() {}
      }
      };
      </script>[/pre]

      DEMO SHOW

      Hapus
    2. wah jadi lebih menarik mbak tampilannya setelah dikecilkan, terima kasih atas jawabannya ya, kalau saya boleh saran, buat mbak artikel yang sama ini dengan pola ukuran untuk sidebar, saya jamin laris manis heehee

      Hapus
    3. artikel ini kan sudah termasuk mewakili untuk itu mas, jadi biarkan sahabat lain mengeditnya ala mereka sendiri,
      jika untuk tampilan sidebar sudah saya buat mas, tetapi tidak berupa postingan, hanya menjaga-jaga jika ada sahabat lain yang bertanya hal seperti yang mas tanyakan, dan hasilnya seperti yang sudah mas lihat pada tombol DEMO SHOW pada kolom komentar sebelumnya, bukan.?

      Hapus
  7. Wah keren mbak. Jadi terlihat seperti postingan di homepage ya. Kira-kira kalau di terapkan di blog saya cocok ga ya.

    BalasHapus
    Balasan
    1. tergantung selera mas, jika Anda merasa cocok pasti mereka yang melihat akan merasa cocok juga.
      kalau tampilan di home page itu berbeda lagi mas, disana saya menggunakan sistem scroll, klik dan auto tombol play, jadi kita bisa fungsikan scroll,klik tombol next atau sistem auto pada tombol play untuk mencari postingan yang diinginkan

      Hapus
  8. thenks infonya, sy tdk memakai begituan

    BalasHapus
    Balasan
    1. widget ini saya buat bukan khusus buat Anda.

      Hapus
  9. mantap artikelnya sangat bermanfaat

    BalasHapus
  10. kalo untuk sidebar gimana ya mbak?

    BalasHapus
    Balasan
    1. mungkin kalau widget ini terlalu besar untuk kita tampulkan pada halaman <aside>, karena saya merancang widget ini untuk di tampilkan pada halaman beranda/home.

      kalau untuk sidebar, mas bisa gunakan kode script seperti dala tutorial berikut -

      Widget Popular Post Slideshow Pada Sidebar

      Hapus
  11. klo bikin menu sprti MY DIARY tu judulnya apa y ?, yg bisa buka tutup,

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK