Tutorial Memasang Recent Post Slider Pada Blog Blogspot

Tutorial Memasang Recent Post Slider Pada Blog Blogspot - Sudah lama saya mencari widget dan tutorial berkaitan recent post slider yang amat menarik dan stylish. Akhirnya saya temui daripada blog ini yang mempunyai pelbagai jenis tutorial yang amat berguna bagi blogger yang ingin mencari kelainan.

Javascript Code Recent Post Slider

 Cara memasang kod java berikut:

1. Pergi ke Dashboard
2. Layout
3. EDIT HTML/ Add A Gadget
4. Masukkan kod di bawah ke dalam kotak seperti dalam gambar

   

<style scoped="" type="text/css">
/*www.techfurk.com*/
ul.techfurk-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.techfurk-slider{font:normal normal 11px Verdana,Geneva,sans-serif}ul.techfurk-slider,ul.techfurk-slider li{margin:0;padding:0;list-style:none;position:relative}ul.techfurk-slider{width:100%;height:300px}ul.techfurk-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.techfurk-slider li:nth-child(1),ul.techfurk-slider li:nth-child(2),ul.techfurk-slider li:nth-child(3),ul.techfurk-slider li:nth-child(4){display:block}ul.techfurk-slider img{border:0;width:100%;height:100%}ul.techfurk-slider li:nth-child(1){width:25%;height:100%;margin:0 0 2px;left:0;top:0}ul.techfurk-slider li:nth-child(2){left:25%;top:0;height:100%;width:25%}ul.techfurk-slider li:nth-child(3){left:50%;top:0;height:100%;width:25%}ul.techfurk-slider li:nth-child(4){width:25%;left:75%;top:0;height:100%}ul.techfurk-slider .overlayx,ul.techfurk-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.techfurk-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/AVvXsEhnhDRee9IpinxZ8-t6285Ja0T2YVZ-DT5QGs1Rsk5Rk2zMKCIdYVm4ATR6yLzykQGeDISfj9_uqcnwUIQHJl1tmj5iXhktVKSnA4-MxIME7ubmiwBn1pDqFjud6PhP4N7PBEr6sBYhIfk/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.techfurk-slider .overlayx,ul.techfurk-slider img{border:0px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}ul.techfurk-slider li:nth-child(1) .overlayx{background-position:50% 25%}ul.techfurk-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.techfurk-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}ul.techfurk-slider li:nth-child(1) h4,ul.techfurk-slider li:nth-child(4) h4{font-size:150%}ul.techfurk-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}ul.techfurk-slider li:nth-child(2) .autname,ul.techfurk-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://googledrive.com/host/0B4zcNjwo-rgsQ1NUdzJqcTd5cjg/techfurk-slider.js" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[FeaturedPostSide({blogURL:"http://www.aynoranur.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false});//]]>
</script> 

Nota:
Gantikan blogURL dengan alamat blog anda
MaxPost:8 - gantikan dengan jumlah post yang anda mahu


5. Tekan butang SAVE (Gambar bernombor 2)
6. Lihat blog dan jika tiada error, kod anda siap untuk digunakan.

Selamat mencuba.

Read More ....