................................... ...................................
Tags Populer: #Contoh Proposal #Contoh Surat #Autolike Update #Belanja Online
Sunday, February 14, 2010

Slide Recent Post Without Edit HTML

Salam blogger, ada yang sudah tau widget recent post slider. widget ini berbentuk unik bisa untuk mempercantik blog kita, dengan tampilan slider blog kita lebih terlihat atraktif loh. mau coba?
Tags: recent post keren, widget recent post slider, cara membuat recent post yang bagus keren dan cool.
Berikut ini Widget Recent Post Tanpa edit HTML yang keren sekali untuk anda pasang di sidebar blog:

 <style scoped="" type="text/css"> /*trickstoo modified widget of abt slider widget*/ ul.abt-sidebar-slider *{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } ul.abt-sidebar-slider{ font:normal normal 11px embria } ul.abt-sidebar-slider,ul.abt-sidebar-slider li{ margin:0; padding:0; list-style:none; position:relative } ul.abt-sidebar-slider{ width:100%; height:500px } ul.abt-sidebar-slider li{ height:24.5%; position:absolute; padding:0; width:49.5%; float:left; overflow:hidden; display:none } 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 img{ border:0; width:100%; height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%; height:49.5%; margin:0 0 2px; left:0;top:0 } ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%} ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%} ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%} ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{ -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out } ul.abt-sidebar-slider .overlayx{ width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6bortoXbcY6gOT6s32wD1mbYAyniqGxPyaPkWGxARix7k59-ynCTHvzaVZBXRc0CTd1FVIDp_qO_LInmeiwqzz139ElMrgF0cpJg5-aDzLlneOsuQi9vGaXPg36Q3l7MmZwdtURB0eqE/s1600/linebg-fade.png); background-position:50% 50%; background-repeat:repeat-x } ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{ border:4px solid black; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px } ul.abt-sidebar-slider li:nth-child(1) .overlayx{ background-position:50% 25% } ul.abt-sidebar-slider .overlayx:hover{ -ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)"; filter:alpha(opacity=10);-khtml-opacity:0.1; -moz-opacity:0.1;opacity:0.1 } ul.abt-sidebar-slider h4{ position:absolute; bottom:30px; z-index:2; color:white; margin:0; width:100%; padding:0 10px; line-height:1.5em; font:embria; font-weight:normal } ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{ font-size:150% } ul.abt-sidebar-slider .label_text{ position:absolute; bottom:10px; left:10px; z-index:2; color:white; font-size:90%} 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; text-indent:-9999px; width:15px; height:25px; position:relative } .buttons a::before{ content:""; width:0; height:0; border-width:8px 7px; border-style:solid; border-color:transparent #535353 transparent transparent; position:absolute; top:50%; margin-top:-8px;margin-left:-10px; left:50% } .buttons a.nextx::before{ border-color:transparent transparent transparent #535353; margin-left:-3px } </style> <div id="featuredpostside"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script> <script type='text/javascript'> //<![CDATA[ FeaturedPostSide({ blogURL:"http://Your Link Web", MaxPost:10, idcontaint:"#featuredpostside", ImageSize:300, interval:6000, autoplay:true, tagName:false }); //]]> </script> 


Copy semua kode diatas, Dan silahkan anda edit Your link web sesuai dengan alamat blog anda:
apabila di template anda terdapat Jquery 1.8.0.Js maka silahkan anda hapus Script yang berwarna merah. Interval waktu 6000 bisa anda ubah sesuai dengan keinginan anda semakin kecil maka slidenya akan semakin cepat

1 komentar:


  1. Dicoba mas, saya juga sudah lama tidak memasang widget2 menarik di blog. Berhasil atau tidaknya nanti mas akan saya kabari lagi ya, kalau ada masalah dan pertanyaan mengenai cara pemasangan ini widget mohon di bantu mas . HeHe...

    ReplyDelete

Silahkan Berkomentar Sahabat. Jangan malu untuk menulis komentar. Pembaca yang baik akan selalu berkomentar Positif. Semoga komentar anda dapat memberi inspirasi bagi penulis. Dimohon untuk tidak berkomentar dengan Kata-kata yang dianggap tidak sopan. "Komentar Akan di Moderasi" Terimakasih dan Mohon Maaf Jika Komentar Lambat di Respon... Tinggalkan jejakmu Dibawah ini:

Terima Kasih Sudah Menyempatkan Waktu untuk Berkomentar

free counters
Memuat...