Tutorial Memasang Recent Post Slider Pada Blog Blogspot

aynora nur | 15 August, 2013,4:03 PM |
Advertisement
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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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.
Aynora Nur adalah seorang penulis blog separuh masa, terlibat dalam bidang hartanah dan perkhidmatan – di Johor, Malaysia. Lulusan MBA. Aktif berblog sejak tahun 2010. Hubungi saya untuk Promosi produk dan servis • Entry kekal di blog • • Pakej mengikut bajet • Daily PV : 35,000 - 45,000 • Monthly PV : 1.1juta - 1.5juta. Info lanjut di about me ...
 
loading...
0 Komen untuk "Tutorial Memasang Recent Post Slider Pada Blog Blogspot"
DISCLAIMER: All content provided on this "Aynorablogs.Com – Inspirasi Wanita" blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner of Aynorablogs.Com – Inspirasi Wanita will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information. This terms and conditions is subject to change at anytime with or without notice.

Boleh komen jika mahu, boleh LIKE jika suka. TERIMAKASIH.

Kisah 25 Filsuf Barat (MATLUTHFI)!! Harga cuma RM22.50 (Asal RM25.00)!

Buat Duit Blog
Back To Top