Hiển thị bài viết với CSS và jQuery

Hôm nay mình xin giới thiệu cho các bạn một tiện ích bài viết mới nhất với CSS và jQuery trông rất đẹp mắt.

Để làm được các bạn thực hiện theo các bước sau:

Đăng nhập Bloger => Bố cục => Thêm tiện ích => tạo 1 Widget HTML/JavaScript mới và dán đoạn code sau vào:

Demo












<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}
ul.rcentside{width:100%;height:500px}
ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}
ul.rcentside img{border:0;width:100%;height:100%}
ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.rcentside li:nth-child(2){left:0;top:50%}
ul.rcentside li:nth-child(3){left:50.5%;top:50%}
ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}
ul.rcentside  .overlayx,ul.rcentside 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.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi768dV94_duftvyWsjHKZkvMhLnNS7X1pINo3umcMG1lyZKi1FTu4l3P3KMX3dX95MEyTxFyu9CIbWB4o1ryWHKXj7nURKOkLWnS3hNtCqwV86tr66noGKpqlQYk_UHArlHv8tlgkWKZU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .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.rcentside 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.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.rcentside li:nth-child(2) .autname,ul.rcentside 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://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://vuamang.blogspot.com/",
MaxPost:10,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

blogURL : http://vuamang.blogspot.com/ thành domain của bạn
MaxPost : Số bài viết muốn hiển thị
idcontaint : Nhãn mà bạn muốn hiển thị
ImageSize : Kích thước hình ảnh
interval : thời gian
autoplay : true là tự động chạy ảnh >> false không tự động chạy ảnh

Nguồn : http://vuamang.blogspot.com

Bài viết bạn vừa đọc thuộc thể loại : css / jQuery / thủ thuật blogspot » Theo tiêu đề : Hiển thị bài viết với CSS và jQuery. Khi coppy bài viết xin ghi rõ nguồn : https://vuamang.blogspot.com/2013/07/hien-thi-bai-viet-voi-css-va-jquery.html. Thank!

Chia sẻ

+ Chia sẻ bài viết :