Diễn Đàn Chia Sẻ Kiến Thức OnlineLog in

Kết nối để thành công

Chào mừng bạn đến với diễn đàn DNTG - Diễn Đàn Chia Sẻ Kiến Thức
Địa chỉ hiện tại của diễn đàn là dntg.forumotion.com
Vui lòng gửi cho chúng tôi một email về giang@dntg.vn nếu bạn có bất kỳ góp ý nào về diễn đàn và nhận 10 điểm tín nhiệm
Bạn có nguyện vọng đóng góp vào diễn đàn? Gửi yêu cầu về giang@dntg.vn và tham gia với chúng tôi ngay.
LIÊN HỆ QUẢNG CÁO giang@dntg.vn

Share

descriptionCode tạo slide hot topic!

more_horiz
Một lần có 1 bạn nhờ mình thay đổi template cho blog, và mình đã tìm thấy một thủ thuật khá đẹp mắt từ template đó, nên mình quyết định lọc thủ thuật đó ra và post lên cho mọi người.

Xem demo trực tiếp ở trang của mình

Hình minh họa:

Cái của mình đang sử dụng là đã cỉnh lại phần chiều ngang cho hợp với skin!


Để đơn giản, bạn hãy copy tòan bộ đọan code bên dưới, và dán nó vào 1 widget HTML/Javascript. Tốt nhất nên tạo 1 widget ở header là thích hợp nhất:

Code:

//code Javascript
<script src="DÁN LINK #01 BÊN DƯỚI VÀO ĐÂY" type="text/javascript">
</script>
<script src="DÁN LINK #02 BÊN DƯỚI VÀO ĐÂY" type="text/javascript">
</script>

//code CSS
<style type="text/css">
#slider {
background:url(http://illiweb.com/fa/pbucket.gif);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
</style>

//code HTML
<div id="slider">
<div id="mover">


<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

<div class="slide">
<h2><a href="POST-LINK-HERE">POST-TITLE-HERE</a></h2>
<span class="slmet"> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img src="IMAGE-LINK-HERE"/>
</div>

</div>
</div>

Link bổ sung:
#01: [You must be registered and logged in to see this link.]
#02: [You must be registered and logged in to see this link.]
+ Do ảnh nền của tabnews có độ rộng là 1000px, nên muốn hiển thị tốt, blog của bạn phải có độ rộng trên 1000px.
+ Nên down các file javascript về máy và up lên host riêng của bạn để tráng trường hợp hết bandwidth

descriptionRe: Code tạo slide hot topic!

more_horiz
links die check lại đi bạn

descriptionRe: Code tạo slide hot topic!

more_horiz
host 110mb đang bị lỗi, bạn quay lại sau nha!

descriptionRe: Code tạo slide hot topic!

more_horiz
[You must be registered and logged in to see this link.] wrote:
links die check lại đi bạn

Link hoạt động lại rồi đấy bạn.
Link bổ sung:
#01: [You must be registered and logged in to see this link.]
#02: [You must be registered and logged in to see this link.]
+ Do ảnh nền của tabnews có độ rộng là 1000px, nên muốn hiển thị tốt, blog của bạn phải có độ rộng trên 1000px.
+ Nên down các file javascript về máy và up lên host riêng của bạn để tráng trường hợp hết bandwidth

descriptionRe: Code tạo slide hot topic!

more_horiz
Permissions in this forum:
You cannot reply to topics in this forum