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:
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:
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:
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>.
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() {}
}
};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>
Demikian artikel tentang Membuat Artikel Terbaru Auto Slide Di Sidebar Blog ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Artikel Terbaru Auto Slide Di Sidebar Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
