Slider Responsif Popular Post untuk Blogger

info-gamepc.blogspot.com - Halo teman-teman, hari ini saya akan berbagi widget dimana widget ini banyak dicari oleh para blogger mania, tampilan widget ini sekilas mirip dengan miliknya situs detik.com, sebenarnya saya berkeinginan untuk merubah slider ini supaya mirip dengan detik.com tapi berhubung mood saya lagi jelek, ya saya posting seadanya dulu ya, Agan-agan bisa merubahnya sendiri supaya mirip dengan miliknya detik.com, mungkin dilain waktu saya akan mengembangkan slider ini, ditunggu aja wes tapi nggak janji hehehe.

Slider ini memiliki tata letak yang responsif dan sangat menarik, slider ini sepenuhnya otomatis, kamu hanya menambahkan alamat URL blog kamu sedangkan gambar, judul dan link akan diperbarui sendiri secara otomatis, Slider ini akan menampilkan daftar postingan terbaru dari blog kamu.

Untuk lebih jelasnya kamu bisa melihat demo dibawah ini.

Setelah melihat demo diatas, gimana? pingin mencoba? kalo ya, Ok kita praktekkan.

Untuk menambahkan widget ini cukup gampang,

1. Login ke Blogger kamu.

2. Pilih Layout → Add Widget → HTML/JavaScript.

3. Paste kode dibawah ini.

<center> <div id="headerbox">Berita terkini</div> <div id="featuredpostside"></div> <script src="https://googledrive.com/host/0B-c1J6uB6dG5NGZWVTdzOWQ1b2s" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"http://ahmadsafei.blogspot.com", MaxPost:8, idcontaint:"#featuredpostside", ImageSize:300, interval:5000, autoplay:true, tagName:false }); //]]> </script> <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/> <style scoped="" type="text/css"> /* Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact */ ul.abt-sidebar-slider * { -moz-box-sizing: border-box; } ul.abt-sidebar-slider { font: 11px Verdana,Geneva,sans-serif; } ul.abt-sidebar-slider, ul.abt-sidebar-slider li { list-style: none outside none; margin: 0; padding: 0; position: relative; } ul.abt-sidebar-slider { height: 500px; width: 100%; } ul.abt-sidebar-slider li { display: none; float: left; height: 24.5%; overflow: hidden; padding: 0; position: absolute; width: 100%; } ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) { display: block; } ul.abt-sidebar-slider li:nth-child(2) { left: 0; top: 50%; } ul.abt-sidebar-slider img { border: 0 none; height: 100%; width: 100%; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li { transition: all 0.4s ease-in-out 0s; } ul.abt-sidebar-slider li:nth-child(4) { left: 0; top: 75%; width: 100%; } ul.abt-sidebar-slider li:nth-child(3) { left: 0; top: 25%; } ul.abt-sidebar-slider .overlayx { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img { border: 4px solid #2E8DCE; border-radius: 3px 3px 3px 3px; } ul.abt-sidebar-slider .overlayx:hover { opacity: 0.1; } ul.abt-sidebar-slider h4 { color: white; font-family: Oswald; font-size: 25px; font-weight: 100; line-height: 1.5em; margin: 0; padding: 0 10px; position: absolute; top: 25px; width: 100%; z-index: 2; } ul.abt-sidebar-slider .label_text { bottom: 10px; color: white; font-size: 90%; left: 10px; position: absolute; z-index: 2; } ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname { display: none; } .buttons { margin: 5px 0 0; } .buttons a { display: inline-block; height: 25px; position: relative; text-indent: -9999px; width: 15px; } .buttons a:before { border-color: transparent #535353 transparent transparent; border-style: solid; border-width: 8px 7px; content: ""; height: 0; left: 50%; margin-left: -10px; margin-top: -8px; position: absolute; top: 50%; width: 0; } .buttons a.nextx:before { border-color: transparent transparent transparent #535353; margin-left: -3px; } .date { background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84); bottom: 93px; padding: 8px; position: relative; right: 6px; } #headerbox { background: #8FB93D; font-family: Oswald; padding: 4px; } </style> </center>

4. Simpan template kamu, coba dibuka Blog kamu.. Jreng..!!!!!!!!!!!!

Catatan:

1. Ganti http://ahmadsafei.blogspot.com dengan URL Blog kamu.
2. Penempatan bisa kamu sesuaikan, apa mau diletakkan disidebar sebelah kiri apa kanan.