Theo yêu cầu của bạn MiKaNguyen

[FD's BlOg] - Ở thủ thuật trước mình cũng đã giới thiệu cho các bạn 1 thanh Hotnews với việc tự cập nhật bài viết mới theo nhãn hoặc cả blog. Ở thủ thuật đó mình chỉ dùng lệnh marquee để hiển thị các bài viết. Và ở bài này mình sẽ dùng mootools để hiển thị. Với việc dùng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều.

Xem demo : LIVE DEMO

Với việc sử dụng mootools, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.

Hình ảnh minh họa:

☼ Các bước thực hiện:
1. vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/blog/demo/hot-news/mootools.js' type='text/javascript'/>
<script src='http://data.fandung.com/blog/demo/hot-news/engine_compress.js' type='text/javascript'/>

<script type='text/javascript'>

try {$Gavick;}catch(e){$Gavick = {};};

$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 2,
"animationSpeed" : 250,
"animationInterval" : 5000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>


<style type='text/css'>

#bd {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: #000000;
margin-top: 5px;
font-size: 12px;
}

.text {
color:#98BF2F;
margin-left:8px;
}

/* CSS HotNews */

div#news-1 .gk_news_highlighter{
font-family: Verdana, Arial;
font-size: 11px;
color: #666;
}

div#news-1{
width: 960px;
height: 24px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #c51c99;
clear: both;
overflow: hidden;
}

div#news-1 .gk_news_highlighter_wrapper{
float: left;
width: 820px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: relative;
}

div#news-1 .gk_news_highlighter_item{
width: auto;
height: 24px;
padding-left: 20px;
display: none;
position: absolute;
}

div#news-1 .nowrap{
white-space: nowrap;
}

div#news-1 .gk_news_highlighter_title{
padding-left: 5px;
}

div#news-1 .gk_news_highlighter_desc{
padding-right: 5px;
}

div#news-1 .gk_news_highlighter_interface{
float: left;
width: 120px;
height: 24px;
text-align: right;
line-height: 24px;
z-index: 1000;
}

div#news-1 .gk_news_highlighter_interface .text{
float: left;
display: block;
width: auto;
padding-left: 5px;
font-weight: bold;}

div#news-1 .gk_news_highlighter_interface div {width: 30px; float: right;}
div#news-1 .gk_news_highlighter_interface a.prev,
div#news-1 .gk_news_highlighter_interface a.next {
cursor: pointer;
width: 13px;
height: 24px;
display: block;
background: url('http://i342.photobucket.com/albums/o433/bkprobk/play.png') no-repeat 0 50%;
float: left;
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position: -13px 50%;
}

div#news-1 a,
div#news-1 a:link,
div#news-1 a:visited,
div#news-1 a:active,
div#news-1 a:focus {
color: #FFFFFF;}

div#news-1 a:hover {
}

div#news-1 .gk_news_highlighter_interface a.next {
float: right;
background-position: -26px 50%;
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position: -39px 50%;
}
</style>

4. Save template.

5. Tạo 1 widget HTML/javascript và dán code bên dưới vào :

<div id="bd">
<div class="gk_news_highlighter" id="news-1">
<div class="gk_news_highlighter_interface">

<span class="text">HOT NEWS</span>
<div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>
</div>

<div class="gk_news_highlighter_wrapper">

<script language="JavaScript">
imgr = new Array();

showRandomImg = false;
aBold = true;

text = "no";

showPostDate = false;

summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";

label = "Love";
numposts = 10;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/hot-news/post-hotnews.js" type="text/javascript"></script>

</div>

</div>
</div>

- Điều chỉnh lại các code màu đỏ.
- code trên là hiển thị các bài viết mới của blog, nếu muốn hiển thị các bài viết mới theo từng 1 nhãn nhất định thì thay link javascript (ở đoạn code trên) : http://data.fandung.com/blog/demo/hot-news/post-hotnews.js

thành link này :

http://data.fandung.com/blog/demo/hot-news/label-hotnews.js

và sửa code label = "Love"; tương ứng với nhãn mà bạn muốn hiển thị bài viết.

Chúc các bạn thành công.

Read more…

[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.

Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.

Ví dụ ta có đoạn code CSS và HTML sau :

//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}


</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>

Kết quả hiển thị:

- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :

top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;

Ta sẽ có kết quả như sau:

- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :

top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, right :

bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;

ta sẽ có kết quả :

+ bottom, left :

bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;

ta sẽ có kết quả :


Chúc các bạn thành công.

Read more…