21.9.14
21
Membuat Artikel Terbaru Auto Slide Di Sidebar Blog - Tidak jauh berbeda dengan tampilan popular post pada umumnya yang terdapat pada halaman sidebar blog. Di sana akan terdapat 10 daftar artikel terbaru yang telah Anda publikasikan dengan menampilkan judul-judul artikel blog Anda, dengan mengkombinasikan sedikit sentuhan efek slide, artikel terbaru ini akan menghias tampilan halaman sidebar blog Anda menjadi lebih keren dan menarik yang tampak kurang lebih seperti gambar berikut:

Popular Post Slide Image


Cara Membuat Tampilan Popular Post Dengan Slideshow sebelumnya, Anda dapat melihat penggunaan kode script yang sama, namun tampilannya saya buat untuk widget halaman beranda. Karena lebar halaman beranda/home tidak sama dengan sidebar, maka untuk tampilan artikel terbaru kali ini, saya mengubah struktur letak kodenya agar sesuai dengan lebar halaman sidebar blog Anda dengan script seperti ini:


<script type="text/javascript">
var tinycarousel_config = {
    nav: {
        //tombol berikutnya dan selanjutnya
        prevText: 'Prev',
        nextText: 'Next'
    },
    carousel: {
        axis: "y", //bentuk tampilan
        itemwidth: 200, //lebar widget
        itemheight: 370, //tinggi widget
        itemmargin: 10, //jarak sisi (left,top,bottom,right)
        itempadding:5, //jarak isi widget
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000, //waktu slide
        animation: true,
        duration: 1000, //kecepatan slide
        easing: "swing",
        //kembali ke awal jika sudah menampilkan artikel terakhir
        callback: function() {}
    }
};




DEMO SHOW




Untuk mendukung hasil performa yang lebih menarik, Anda bisa gunakan CSS berikut untuk membuat bentuk desain tempilan artikel terbaru Anda dengan kode perintah seperti ini:


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

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

.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;
  background:#fff;height:auto;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:0;padding:0;
  -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;text-align:center;}
</style>



CATATAN
Perlu di ketahui, untuk Membuat Artikel Terbaru Auto Slide Di Sidebar Blog seperti ini, pastikan template Anda sudah dilengkapi dengan script-jQuery. Jika belum, Silahkan Copy jQuery ini, lalu letakkan diatas tag penutup </head>.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Artikel Terbaru Auto Slide Di Sidebar Blog
Ditulis oleh= Devy
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 =

21 komentar

  1. Selamat Siang Mbak Devy, wah unik dan baru tau nih Mbak kelihatanya
    Unik dan area postingan baru bisa ada seni, sungguh mengagumkan
    Makasih atas tutorialnya Mbak Devy salam sukses :)

    BalasHapus
    Balasan
    1. selamat siang juga kang, tadinya ada inspirasi mau membuat widget recent post, tetapi dikarenakan widget tersebut sudah banyak yang mempostingnya, jadi niat di urungkan, sehingga membuat tampilan yang berbeda seperti ini.

      sebenarnya sama seperti recent post, hanya mengubah bentuk thumbanail image saja, dan mengubah efek geraknya slide-top.

      Hapus
  2. betul2 ini anag..!,..kode seperti membuat artikel terbaru auto slide,,.. masih makan nasi kan Mba Dev..?, mau coba dulu ini,,semoga beruntung.!

    oiiya..kodeya kmarin,,makasi, sukses efeknya tp trnyata butuh js untuk load halaman rupanya ya mba..

    untuk gambar..slide album poto (Post kemarin)..kesalahan pada penumpukan gambar backround..itu dikarenakan apa ya Mba..!

    BalasHapus
    Balasan
    1. yang pasti masih asli orang INDONESIA, jadi makan makanan pokok aja mas, "NASI" hehe...

      benar sekali mas, untuk loading efek, akan bekerja dengan js pada halaman mana yang akan kita buat loading saat membuka.

      penumpukan pada gambar, bisanya terjadi karena lebar objek tidak sama dengan lebar halaman, (no responsive) sehingga untuk membuat gambar yang banyak, akan terjadi penumpukan untuk menampilkan hasil gambar keseluruhan,
      caranya - sebariskan kodenya saja mas.

      misal seperti ini:
      [pre]<input checked='' id='slide1' name='thumbnail' type='radio' /><label class='slide1' for="slide1"></label>

      <input id='slide2' name='thumbnail' type='radio' /><label for="slide2" class='slide2'></label>

      <input id='slide3' name='thumbnail' type='radio' /><label for="slide3" class='slide3'></label>[/pre]

      tiga buah gambar yang tersusun dengan jarak <br/> atau spasi, maka buat menjadi seperti ini:

      [pre]<input checked='' id='slide1' name='thumbnail' type='radio' /><label class='slide1' for="slide1"></label><input id='slide2' name='thumbnail' type='radio' /><label for="slide2" class='slide2'></label><input id='slide3' name='thumbnail' type='radio' /><label for="slide3" class='slide3'></label>[/pre]

      Hapus
  3. wah keren banget nih Artikel Terbaru Auto Slide Di Sidebar Blog nya, jadi ada kipasnya gitu, hehehe...

    BalasHapus
    Balasan
    1. yang kipas ternyata image loading yia, maaf kurang lama liat demonya, hehehe...

      Hapus
  4. wah keren ni mbak, ini salah satu tampilan yang saya cari, sebab mau saya letakkan di blog baru saya, terima kasih ya!

    BalasHapus
    Balasan
    1. emang blog sebelumnya tidak dikelola lagi mas,
      beritahu kita-kita attuh mas alamat blognya yang baru, biar singgah minta makanan, belum makan siang soalnya saya, hehe..

      ditunggu mas

      Hapus
  5. Wah jadi keliat tambah cantik dan menarik ya mbak :)

    BalasHapus
  6. wah mbak devy jago java script yah, dah cantik pinter lagi, kunjungan malam mbak....sambil menyelam minum air, sambil kunjungan malam belajar di blog mbak devy biar tambah pinter. Aamiin. :d

    BalasHapus
    Balasan
    1. bukannya pintar kok mas, hanya menonjol dalam bidang tertentu saja, karena buat saya semua orang pintar kok mas, hanya bidang keahliannya yang berbeda-beda.

      bukan begitu mas.? hehehe....
      terimakasih kunjungannya mas.

      Hapus
  7. Wah mesti banyak belajar disini ngeblognya..makasih mba, salam kenal

    BalasHapus
  8. asyik juga yah kalau pakai slide yang otomatis pada artikel terbaru, jadi nya makin sip perform blog kita ;)

    BalasHapus
  9. masih belom ngerti nih maklum masih pemula hehe, thanks infonya iya mbak :)

    BalasHapus
  10. Siang mba Devy, sy coba lengkapi template dengan script-jQuery, trus sy copas smua code widget tapi slide show utama sy ga jalan.... kira2 giaman solusinya mba...? ini blog sy mba http://bantaengkemenag.blogspot.com/

    BalasHapus
    Balasan
    1. Devy tidak melihat kalau sudah memasang slideshow ini di blog Anda, kalau ingin memasang widget ini, kode lengkapnya disini:

      » Popular post Sidebar Page

      Hapus
  11. saya kok sedikit bingung ya, soalnya ga ada kode pemanggil.... hm.. maaf, masih newbie soalnya

    BalasHapus
    Balasan
    1. <div id="tinycarousel-container" class="tinycarousel">
      </div>


      diatas kode script, kode komplitnya ada pada tampilan DEMO SHOW

      Hapus
  12. mba punya ane kog g muncul y??? ada yang di edit kah?, atau harus edit html??
    ini blog ane linkigdownload.blogspot.com

    BalasHapus
    Balasan
    1. kode yang saya jabarkan diatas hanya sebagai penjelasan tentang perubahan jika seseorang ingin memodifikasi tampilan, sedangkan kalau kode KOMPLIT nya lihat pada tomol DEMO SHOW,

      dibawah tampilan ada kode yang saya jabarkan secara komplit, silahkan tinggal di COPY saja kode itu.

      Hapus

  • 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