Tạo Slide bài viết mới cho blogspot phong cách lạ cho blogspot/blogger

Tweet

[tintuc]
Hôm nay Hồ Hoàng Thái IT HUBT sẽ chia sẻ cho các bạn cách tạo 1 Slide bài viết mới nhất cho blogspot
Cái này dc chia sẻ và test trên chính http://hohoangthai.cntt.in
Nên bạn đọc có thể xem trước.




Cách thực hiện: Rất đơn giản
Thêm 1 widget HTML/Javascript và coppy đoạn code bên dưới vào là đã ok rồi
Chú ý: thay địa chỉ và thông số màu đỏ bên dưới cho phù hợp với Web của bạn nhé


<div align="left">
<style type="text/css">
#slidearea {
height: 230px;
overflow: hidden;
margin: 0px 00px 0 0px;
position: relative;
width: 520px;
background: #810302;
}
#gallerycover {
overflow: hidden;
width: 520px;
padding-top: 10px;
}
.mygallery {
overflow: hidden;
visibility: visible;
position: relative; z-index: 2;
left: 0px;
width: 900px;
}
.mygallery ul {
margin:0;
padding:0;
position: relative;
list-style-type: none;
z-index: 1;
width: 2700px;
left: -1620px;
}
.mygallery ul li {
overflow: hidden;
float: right;
width: 180px;
height: 210px;
}
.mytext {
position: relative;
margin: 0 5px 0 5px;
width: 170px;
height: 210px;
display: inline;
float: left;
color: #C4C4C4;
}
.mytext p {
padding: 0 0;
font-size: 12px;
line-height: 20px;
width: 170px;
}
.mytext h2 {
padding: 5px 0;
color: black;
width: 170px;
font-size: 14px;
font-weight: bold;
}
.mytext h2 a:link, .mytext h2 a:visited {
color: #E6EE08;
text-decoration: none;
outline: none;
}
.mytext h2 a:hover {color:#888;}
img.sidim {
width: 170px;
height: 100px;
}
.prevb {
float: left;
width: 15px;
height: 27px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU7vUJ4Nnpe4Kzb_lLJcXRRN1Wqs9FtVGQ9ieNarhtM2nVcKPAkohl-czcw89MZVS-gmuu7JNS9oPfgb9HzuOPUi4woGQNhLxAQlxbL6ZZpwOOORPI5-PPxP9yVg7EySE2IEMQFdwgIZTO/s35/prev%2520%25281%2529%2520copy.png)!important;
position: absolute;
left: 5px;
bottom: 110px;
}
.nextb {
float: right;
width: 20px;
height: 35px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjVY8ahVhN63DaULOsuyetLwXzRsv6gf7FLS3jgyBankTGXFzD9KWere31Dknb9JGPtSYz_qf0zLFGo4CEA_qZ6rGPSYEhZF0IZv6ivowFO49zVMoJ5Oj4T4daxVb262uzp_hlpaQGY94/s35/next%2520copy.png)!important;
position: absolute;
right: 5px;
bottom: 110px;
display: block;
}
</style>

<script src="http://hohoangthai12.googlecode.com/files/slide-mygallery.js" type="text/javascript"></script>

<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
auto: 3000,
speed: 1000,
easing: "backout"
});
});
</script>

<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<script type="text/javascript">
var mode = "all";
var g_numposts = 10;
var g_numcontents = 15;
var g_label="dien ten nhan cua ban";
var homepage="http://hohoangthai.blogspot.com";
</script>

<script src="http://hohoangthai12.googlecode.com/files/feed-mygallery.js" type="text/javascript"></script>
</ul>

<div class="clear"></div>
</div>
</div>
<a class="prevb" href="#"></a>
<a class="nextb" href="#"></a>
</div></div>

[/tintuc]