Cara Membuat Slider Recent Post DiBlog
TUTORIAL MEMBUAT SLIDER RECENT POST BERGERAK PADA BLOGGER RESPONSIVE
Selamat Datang di Blog Orang IT . Jarang-jarang saya update tutorial untuk mempercantik blog , pada postingan kali ini saya akan share tutorial bagaimana cara menambahkan widget slider recent post keren paling responsiv untuk blogspot . Karena bentuknya widget kita tidak perlu melakukan otak-atik pada template HTML dan pastinya sudah otomatis responsiv .
Karena hari ini saya membuat blog baru lagi dan menambahkan widget slider responsive keren recent post bergerak yang akan menampilkan data postingan terakhir , bisa anda setting apakah anda ingin menampilkan semua label atau label tertentu saja .
Widget recent post slider adalah tampilan element yang menampilkan data postingan terakhir dan bergerak sesuai namanya . sekian
Anda juga bisa menampilkan widget recent post responsiv ini hanya pada halaman awal atau halaman postingan menggunakan tag conditional . Widget slider recent post ini sudah responsiv jadi otomatis menyesuaikan dengan template yang anda gunakan.
Pada tutorial membuat slider recent post dengan tampilan responsiv dan keren ini saya mempraktekkanya pada template Evomagz nya Om Sugeng , langsung saja simak caranya membuat widget slider bergerak recent post pada blogspot dengan mudah :
1. Silahkan buka blogger - tataletak - addwidget - pilih HTML/Javascript
untuk peletakanya sesuaikan dengan widget anda mau ditaruh dimana
2. Langsung saja copas script berikut ini
<style>
#featuredpost {margin:15px auto;}#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:320px}#slides li{width:50%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50%;width:25%;height:50%}#slides li:nth-child(3){left:75%;width:25%;height:50%}#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;background:#ff6553;margin:0;}#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0;}#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';text-transform:uppercase;}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}#slides .overlayx,#slides li{transition:all .4s ease-in-out}#slides li:nth-child(1) .overlayx{display:none;}#slides li:hover .overlayx{opacity:0.1}@media only screen and (max-width:800px){#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}@media only screen and (max-width:600px){#slides ul{height:600px}#slides li:nth-child(1){width:100%;height:50%}#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}#slides li:nth-child(5){display:none;}}@media only screen and (max-width:480px){#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}</style><script type="text/javascript" src="https://cdn.rawgit.com/Helmy21/Helmykkediri/master/Helmykkediri.blogspot-slider1.js"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://ruang5.blogspot.co.id/",MaxPost:8,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:true,tagName:false});});//]]></script><div id="featuredpost"></div>
Keterangan :
blogURL:"http://ruang5.blogspot.co.id/", ganti dengan URL Blog anda
tagName:false , untuk menampilkan recent post dari semua label , untuk menampilkan label tertentu ganti tagName:"labelkamu"
3. Simpan dan lihat hasilnya
![]() |
DEMO |
Demikian postingan saya mengenai tutorial cara membuat widget recent post bergerak keren untuk blogger , semoga bermanfaat jika ada yang ditanyakan atau menambah modifikasi silahkan saja sekian dan terimakasih.
Posting Komentar untuk "Cara Membuat Slider Recent Post DiBlog"
Diperbolehkan menyalin artikel yang ada diblog ini dengan syarat menyertakan sumber. Blog anda tidak akan dihapus , deindex , adsense tidak akan menerima keluhan hak cipta dari saya.