CÁC BẠN CÓ THỂ XEM ẢNH MINH HỌA HOẶC DEMO BÊN DƯỚI:
¤ SLIDER BÀI MỚI NHẤT TRƯỢT NGANG VỚI THUMBNAIL VES 2 CHO BLOGGER!
1- ĐĂNG NHẬP VÀO BLOG2- CHỌN MẪU (TEMPLATE)
3- CHỌN CHỈNH SỦA HTML (EDIT HTML)
4- DÁN CODE SAU TRƯỚC THẺ ]]></B:SKIN>.
#CAROUSEL{WIDTH:980PX;HEIGHT:125PX;BORDER-BOTTOM:1PX SOLID #CCC;POSITION:RELATIVE;DISPLAY:BLOCK;BACKGROUND:#5599E6;MARGIN-BOTTOM:8PX}
#CAROUSEL H5{COLOR:#555;MARGIN:2PX}
#CAROUSEL .CONTAINER{POSITION:ABSOLUTE;LEFT:24PX;WIDTH:960PX;HEIGHT:125PX;OVERFLOW:HIDDEN}
#CAROUSEL .THUMB{FLOAT:LEFT;MARGIN-RIGHT:5PX;}
#CAROUSEL #PREVIOUS_BUTTON{POSITION:ABSOLUTE;WIDTH:24PX;HEIGHT:125PX;BACKGROUND:URL(HTTP://2.BP.BLOGSPOT.COM/-FDQHENML378/UBXAD8RI9GI/AAAAAAAAAHS/JJEAAXTCYMO/S1600/PREVIOUS_NAMKNA-BLOGSPOT-COM.PNG) CENTER;Z-INDEX:100;CURSOR:POINTER;}
#CAROUSEL #NEXT_BUTTON{POSITION:ABSOLUTE;RIGHT:0;WIDTH:24PX;HEIGHT:125PX;BACKGROUND:URL(HTTP://4.BP.BLOGSPOT.COM/-8DUZV3Z7L6I/UBXAD7OPF-I/AAAAAAAAAHO/YOEJ1DKX74A/S1600/NEXT_NAMKNA-BLOGSPOT-COM.PNG) CENTER;Z-INDEX:100;CURSOR:POINTER;}
#CAROUSEL #NEXT_BUTTON:HOVER,#CAROUSEL .THUMB:HOVER,#CAROUSEL #PREVIOUS_BUTTON:HOVER{FILTER:ALPHA(OPACITY=70);OPACITY:.7}
#CAROUSEL UL{WIDTH:100000PX;POSITION:RELATIVE;MARGIN-TOP:10PX}
#CAROUSEL UL LI{BACKGROUND:#EBEBEB;DISPLAY:INLINE;FLOAT:LEFT;TEXT-ALIGN:LEFT;FONT:BOLD 11PX ARIAL;BORDER:0PX SOLID #CCC;WIDTH:212PX;HEIGHT:90PX;MARGIN:0 2PX 20PX 6PX;PADDING:6PX}
#CAROUSEL UL LI A.SLIDER_TITLE{COLOR:#222;DISPLAY:BLOCK;MARGIN-TOP:0;PADDING-TOP:0}
#CAROUSEL UL LI A.SLIDER_TITLE:HOVER{COLOR:#1B5D97}
#CAROUSEL A IMG{DISPLAY:BLOCK;BACKGROUND:#FFF;MARGIN-TOP:0}» TÙY CHỈNH:- WIDTH:980PX; LÀ ĐỘ RỘNG CỦA SLIDER
- HEIGHT:125PX; LÀ CHIỀU CAO CỦA SLIDER
<SCRIPT SRC='HTTP://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.7.2/JQUERY.MIN.JS' TYPE='TEXT/JAVASCRIPT'/>
<SCRIPT SRC='HTTP://YOURJAVASCRIPT.COM/265232511102/CAROUSELLITE.JS' TYPE='TEXT/JAVASCRIPT'/>
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
//<![CDATA[
IMGR = NEW ARRAY();
IMGR[0] = "HTTP://2.BP.BLOGSPOT.COM/-UITX7ROPTTU/TYV-G4NA_UI/AAAAAAAAFBY/NCWLPVNYENU/S1600/NO+IMAGE.JPG";
SHOWRANDOMIMG = TRUE;
ABOLD = TRUE;
SUMMARYPOST = 140;
SUMMARYTITLE = 25;
NUMPOSTS1 = 12;
FUNCTION REMOVEHTMLTAG(STRX,CHOP){
VAR S = STRX.SPLIT("<");
FOR(VAR I=0;I<S.LENGTH;I++){
IF(S[I].INDEXOF(">")!=-1){
S[I] = S[I].SUBSTRING(S[I].INDEXOF(">")+1,S[I].LENGTH);
}
}
S = S.JOIN("");
S = S.SUBSTRING(0,CHOP-1);
RETURN S;
}
FUNCTION SHOWRECENTPOSTS(JSON) {
J = (SHOWRANDOMIMG) ? MATH.FLOOR((IMGR.LENGTH+1)*MATH.RANDOM()) : 0;
IMG = NEW ARRAY();
DOCUMENT.WRITE('<UL>');
FOR (VAR I = 0; I < NUMPOSTS1; I++) {
VAR ENTRY = JSON.FEED.ENTRY[I];
VAR POSTTITLE = ENTRY.TITLE.$T;
VAR PCM;
VAR POSTURL;
IF (I == JSON.FEED.ENTRY.LENGTH) BREAK;
FOR (VAR K = 0; K < ENTRY.LINK.LENGTH; K++) {
IF (ENTRY.LINK[K].REL == 'ALTERNATE') {
POSTURL = ENTRY.LINK[K].HREF;
BREAK;
}
}
FOR (VAR K = 0; K < ENTRY.LINK.LENGTH; K++) {
IF (ENTRY.LINK[K].REL == 'REPLIES' && ENTRY.LINK[K].TYPE == 'TEXT/HTML') {
PCM = ENTRY.LINK[K].TITLE.SPLIT(" ")[0];
BREAK;
}
}
IF ("CONTENT" IN ENTRY) {
VAR POSTCONTENT = ENTRY.CONTENT.$T;}
ELSE
IF ("SUMMARY" IN ENTRY) {
VAR POSTCONTENT = ENTRY.SUMMARY.$T;}
ELSE VAR POSTCONTENT = "";
POSTDATE = ENTRY.PUBLISHED.$T;
IF(J>IMGR.LENGTH-1) J=0;
IMG[I] = IMGR[J];
S = POSTCONTENT ; A = S.INDEXOF("<IMG"); B = S.INDEXOF("SRC=\"",A); C = S.INDEXOF("\"",B+5); D = S.SUBSTR(B+5,C-B-5);
IF((A!=-1)&&(B!=-1)&&(C!=-1)&&(D!="")) IMG[I] = D;
//CMTEXT = (TEXT != 'NO') ? '<I><FONT COLOR="'+ACOLOR+'">('+PCM+' '+TEXT+')</FONT></I>' : '';
VAR MONTH = [1,2,3,4,5,6,7,8,9,10,11,12];
VAR MONTH2 = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"];
VAR DAY = POSTDATE.SPLIT("-")[2].SUBSTRING(0,2);
VAR M = POSTDATE.SPLIT("-")[1];
VAR Y = POSTDATE.SPLIT("-")[0];
FOR(VAR U2=0;U2<MONTH.LENGTH;U2++){
IF(PARSEINT(M)==MONTH[U2]) {
M = MONTH2[U2] ; BREAK;
}
}
VAR DAYSTR = DAY+ ' ' + M + ' ' + Y ;
VAR TRTD = '<LI CLASS="CAR"><DIV CLASS="THUMB"><A HREF="'+POSTURL+'"><IMG WIDTH="100" HEIGHT="90" CLASS="ALIGNNONE" SRC="'+IMG[I]+'"/></A></DIV><H5>'+DAYSTR+'</H5><A CLASS="SLIDER_TITLE" HREF="'+POSTURL+'">'+POSTTITLE+'</A></LI>';
DOCUMENT.WRITE(TRTD);
J++;
}
DOCUMENT.WRITE('</UL>');
}
//]]>
</SCRIPT>
» TÙY CHỈNH:
- WIDTH="100" HEIGHT="90" LẦN LƯỢT LÀ CHIỀU RỘNG VÀ CHIỀU CAO CỦA ẢNH THUMBNAIL.
- SUMMARYPOST = 140; LÀ SỐ KÝ TỰ MÔ TẢ KHI DÊ CHUỘT VÀO ẢNH HOẶC TIÊU ĐỀ.
- SUMMARYTITLE = 25; LÀ SỐ KÝ TỰ TIÊU ĐỀ TỐI ĐA HIỂN THỊ TRÊN SLIDER. BẠN NÊN ĐỂ VỪA PHẢI KHÔNG NÊN QUÁ NHIỀU KÝ TỰ SẼ LÀM SẤU SLIDER.
- NUMPOSTS1 = 12; LÀ SỐ BÀI VIẾT HOẶC ẢNH THUMBNAIL SẼ HIỂN THỊ TRÊN SLIDER. BẠN KHÔNG NÊN CHO QUÁ NHIỀU SẼ ẢNH HƯỞNG TỚI TỐC ĐỘ LOAD.
- SHOWRANDOMIMG = TRUE; LÀ LẤY ẢNH THUMBNAIL NGẪU NHIÊN TRONG BÀI VIẾT. NẾU MUỐN LẤY ẢNH ĐẦU TIÊN THÌ HÃY SỬA TRUE THÀNH FALSE.
- NẾU BLOG CỦA BẠN ĐX CÓ THƯ VIỆN JQUERY RỒI THÌ XÓA PHẦN MÀU CAM ĐI NHA.
6- TÌM THẺ:
<DIV ID='MAIN-WRAPPER'>- DÁN VÀO TRƯỚC NÓ ĐOẠN CODE BÊN DƯỚI:
<B:IF COND='DATA:BLOG.PAGETYPE != "ITEM"'>
<DIV ID='CAROUSEL'>
<DIV ID='PREVIOUS_BUTTON'/>
<DIV CLASS='CONTAINER'>
<SCRIPT>
DOCUMENT.WRITE("<SCRIPT SRC=\"/FEEDS/POSTS/DEFAULT/-/NINJA-LABEL?MAX-RESULTS="+NUMPOSTS1+"&ORDERBY=PUBLISHED&ALT=JSON-IN-SCRIPT&CALLBACK=SHOWRECENTPOSTS\"><\/SCRIPT>");
</SCRIPT>
<DIV CLASS='CLEAR'/>
</DIV>
<DIV ID='NEXT_BUTTON'/>
</DIV>
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
(FUNCTION($) { $(DOCUMENT).READY(FUNCTION(){
$("#CAROUSEL .CONTAINER").JCAROUSELLITE({
AUTO:4000,
SCROLL: 1,
SPEED: 800,
VISIBLE: 5,
START: 0,
CIRCULAR: TRUE,
BTNPREV: "#PREVIOUS_BUTTON",
BTNNEXT: "#NEXT_BUTTON"
});
})})(JQUERY)
</SCRIPT>
</B:IF>
» TÙY CHỈNH:
- THAY Ninja-LABEL THÀNH TÊN NHÃN BẠN MUỐN HIỂN THỊ TRÊN SLIDER.
- NẾU MUỐN HIỂN THỊ CHO TOÀN BLOG XÓA PHẦN MÀU XANH ĐI.
- VISIBLE: 5, SỐ BÀI VIẾT (ẢNH THUMBNAIL VÀ TIÊU ĐỀ) HIỂN THỊ TRÊN TRANG CHÍNH.
- SCROLL: 1, SỐ BÀI VIẾT CUỘN MỖI LẦN.
- SPEED: 800, THỜI GIAN CHUYỂN ẢNH (TÍNH BẰNG PHẦN NGHÌN GIÂY).
- MẪU SIMPLE ĐẶT CODE SAU DÒNG: <DIV CLASS='COLUMNS-INNER'>
