loading...

Tutorial Memasang Recent Post Slider Pada Blog Blogspot

aynora nur | 15 August, 2013,4:03 PM |
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.
#Inspirasi Wanita❤:
Segala sesuatu dalam hidup ini akan pergi dan tidak pernah lagi kembali, ;) :) kecuali DOA. Ia pergi dengan HARAPAN dan Ia kembali dengan REDHA dan KURNIA..

Aynora Nur seorang blogger part time di Johor, Malaysia. Lulusan MBA. Aktif berblog sejak tahun 2010. Hubungi saya untuk Promosi produk dan servis. • Daily PV : 35,000 - 45,000 Info lanjut di about me ...
 

USERS
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.

Back To Top