Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery

Thời gian qua mình đã có post 2 bài viết về Recent post (Bài viết mới nhất) với hai hiệu ứng khác nhau. Và hôm nay tiếp theo mình xin giới thiệu đến các bạn thêm một tiện ích recent post cho blogger. Thủ thuật này với hiệu ứng auto-scroll, các bài viết sẽ tự động thay đổi nội dung với dạng cuộn tương ứng với khoảng thời gian đặt trước. Để thấy rõ tiện ích này như thế nào, bạn có thể click Demo và chờ giây lát để xem hiệu ứng của tiện ích này.





1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
div.autoscroll {
background:#eee; /*màu nền của tiện ích*/
color:#0000ff; /*màu text của tiện ích*/
width: 300px; /*độ rộng của tiện ích*/
position: relative;
overflow: hidden;
height: 425px; /*chiều cao của tiện ích*/
border:3px solid #ccc; /*đường viền của tiện ích*/
}
.autoscroll a{
color:#0000ff; /*màu tiêu đề bài viết*/
}
.autoscroll a:hover{
color:#ff0033; /*màu tiêu đề bài viết khi rê chuột*/
}

div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #fff;}

4. Bạn chèn tiếp code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/autoscroll.js" type="text/javascript"></script>
5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04dif5kbnu82fVC6TtFeSngULu_2R8l1h2FStDbc8YdTOdBBADw5FYkmJfvzV5dg14gMkIlTUJPagxVkSNr2vQpshOpJlIIpS9drbgeSV8nVczPN7pwRAdAyQ6CpqwAW4b8KDcLf-JDnf/";
showRandomImg = true;
borderColor = "no";
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //cở chữ của tiêu đề bài viết
dcmcolor = "#000033"; //màu text của phần ngày và nhận xét
dcmsize = "1"; //cở chử của phần ngày và nhận xét
acolor = "";
aBold = true;
icon = " » ";
text = "nhận xét"; //nếu không muốn hiển thị phần nhận xét bạn thay "Nhận xét" thành "no"
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thànhFALSE

summaryPost = 100; // số kí tự phần tóm tắt nội dung bài viết
summaryFontsize = 12; //cỡ chữ phần tóm tắt
summaryColor = "#000"; //màu text phần tóm tắt
icon2 = " » ";

numposts = 15; //số bài viết hiển thị
label = "Marketing"; //tên nhãn bài viết
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn

</script>
<div class="autoscroll">
<script src="http://traidatmui-tips.googlecode.com/files/recent_post_autosroll.js" type="text/javascript"></script>
</div>
Bạn chỉ việc dựa vào các dòng hướng dẫn và thay đổi cho phù hợp với blog cuả bạn.
6. Save tiện ích lại
Nếu muốn hiển thị bài viết theo từng nhãn, bạn hãy thay file script (recent_post_autosroll.js) thành link bên dưới
http://traidatmui-tips.googlecode.com/files/recent_label_autosroll.js
nguồn traidatmui.com
Chúc bạn thành công
Không có nhận xét nào:

Code loading – đang tải dữ liệu cho web-blog

Bạn chèn đoạn code sau vào sau thẻ <head>  :
<div border="0" style="position:fixed; width: 100%; height: 40px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="1" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="1" style="background-color: #FFFFFF; filter: alpha(opacity=70); opacity: .7; width: 150px; height: 40px; z-index: 1; border-collapse: collapse;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br><img border="0" src="http://i351.photobucket.com/albums/q463/nguyenthidung/loading.gif"> </div> </td> </tr> </table> </div>

Sau đó bạn thêm code này vào trước thẻ </body> :
<script >window.document.getElementById("loading").style.display = 'none';</script >
Chúc bạn thành công!
Không có nhận xét nào:

Tiện ích Recent posts với hiệu ứng trượt từ jQuery


- Bài viết này mình sẽ lại giới thiệu cho các bạn một ứng dụng khác nữa của jQuery cho tiện ích Recent posts. Với hiệu ứng ẩn hiện mô tả bài viết (ảnh thumbnail và phần tóm tắt) khi ta click chuột vào thanh header tương ứng của bài viết đó.
Xem demo ở đây : LIVE DEMO

Hình ảnh minh họa :


Bắt đầu thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. chèn đọan code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://data.fandung.com/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addclass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slidetoggle("slow")
.siblings("p:visible").slideup("slow");
$(this).toggleclass("active");
$(this).siblings("h3").removeclass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% arial, helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

4. save template.
5. tạo 1 widget html/javascript rồi dán code bên dưới vào:

<script language="javascript">
imgr = new array();
imgr[0] = "http://sites.google.com/site/fdblogsite/home/nothumbnail.gif";

showrandomimg = true;

jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#e67c15";
jabold = true;

jtext = "comments";
jshowpostdate = true;

jsummarypost = 200;
summaryfontsize = 12;
summarycolor = "#000";

numposts = 6;
label = "film";
home_page = "http://www.fandung.com/";

</script>

<div class="accordion">
<script src="http://data.fandung.com/js/recent-post-jquery/accordion/j-label-fix.js" type="text/javascript"></script>
</div>
- tùy chỉnh lại những đọan code im đậm cho phù hợp với blog của bạn.(xem các thủ thuật recent posts cơ bản để hiểu rõ hơn)
- nếu muốn hiển thị bài viết cho cả blog thì đổi link javascript(code màu xanh) ở trên thành link bên dưới:

http://data.fandung.com/js/recent-post-jquery/accordion/j-post-fix.js

tham khảo hiệu ứng jquery từ web designer wall
chúc các bạn thành công.
Không có nhận xét nào:

Tắt máy tính bằng 7 cánh khác nhau trong Windows XP

Siêu thị bán hàng trực tuyến - máy tính
1. Bấm chuột vào nút Start, chọn Turn Off Computer, cuối cùng bấm nút Turn Off trong hộp thoại Turn Off Computer.
     2. Nhấn Ctrl + Esc hoặc phím Windows và nhấn U 2 lần.
     3. Dùng 1 tiện ích nhỏ, miễn phí, ví dụ: Shutdown Utility tải tại http://tinyurl.com/28efyw. Sau khi tải về, giải nén, chương trình sẽ tạo ra những shortcut chạy ngay mà không cần cài đặt.
     4. Tạo một shortcut trên màn hình để tắt máy. Bấm chuột phải trên màn hình chọn New -> Shortcut, điền shutdown -s -t 00 vào khung Type the location of the item, bấm Next/Finish. Mỗi lần muốn tắt máy chỉ cần chạy shortcut này.
     5. Nhấn phím Windows + R để chạy hộp thoại Run, gõ vào shutdown -s -t 00 -f và nhấn Enter.
     6. Nhấn phím Windows + M để thu nhỏ mọi cửa sổ ứng dụng đang chạy, sau đó nhấn Alt + F4 để gọi hộp thoại Turn Off Computer, chọn Turn Off để tắt máy.
     7. Mở Windows Task Manager bằng cách nhấn tổ hợp 3 phím Ctrl + Alt + Del hoặc Ctrl + Shift + Esc, sau đó từ menu Shut Down chọn Turn Off
Không có nhận xét nào:

Game: Code Lyoko Monster Swarm

Không có nhận xét nào: