Làm thế nào để Tạo bản tự động trượt Carousel cho blog...

Chép code vào trước ]]></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:980px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/s1600/next.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:216px;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}

Chú ý: Các điểm tô màu xanh chỉnh sủa lại phù hợp với css của bạn.

Chép mã sau trước </header> :

Chú ý: Lưu 2 fine JS vào host riêng của bạn để sử dụng lâu dài

http://menulan.googlecode.com/files/jquery.min.js
http://menulan.googlecode.com/files/jcarousellite.js
numposts1 = 12; Là số lượng bài mà bạn muốn hiển thị
width="100" height="90" là chiều cao và chiều rộng của hình ảnh bạn muốn hiển thị trong thanh trượt.

Tìm đoạn code sau:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='demo (Tiêu đề)' type='Header'/>

</b:section>

</div>

Đặt sau nó đoạn code sau: nếu muốn như (DEMO): Còn không tùy bạn chọn vị trí cho phù hợp

<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/-/VIDEO?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: 4,
    speed: 800,
    visible: 4,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>

scroll: 4, Số hình ảnh trượt 1làn là 4 hình

speed: 800, Tốc độ trượt
visible: 4, Số hình hiển thị trên thanh trượt

Thay nhãn /-/VIDEO thành nhãn mà bạn muốn hiển thị

Cuối cùng, lưu mẫu và xem kết quả. Nếu bạn làm theo các bước trên một cách chính xác, Carousel thanh trượt sẽ xuất hiện trên blog của bạn.

HOẶC

Hôm nay namkna sẽ hướng dẫn các bạn cách tạo một tiện ích mang phong cách của tiện ích bài viết mới nhất (recent post) nhưng hiển thị dưới dạng một slider trượt ngang với các ảnh thumbnail và tiêu đề bài viết. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery. Tiện ích được phát triển bởi maskolis.

¤ Slider bài mới nhất trượt ngang với thumbnail cho blogger!

1- Đăng nhập vào blog

2- 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:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNULe7cHzvtrkYz0jGkNwhyphenhyphen91e0NXnkL6kI5FEwlLmCVbWAihyphenhyphenBejFyp5PZbkPzELXpONqzbaqenKEbukbj0mtyPU5QafEkrZ9ni5wFxEN3Kuh7lBTO68la8mZ-OFNhqPCyFPTSkQ1djI/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYjRpKM_1_8S6YqqSDxn6mumaaatXygzzTeu-y_tijku_AAZF8BNvWypbh-nHXd3_K7K9hQRUvd0GUVddyBpf0KF8XNTH92i6eB_Mk6xbQgSXtg12aicw9mcrwDKxQWTo9Nrk_v5yuSg/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yEHyp9atsUFphwvZ5erer0jndBkh6P9iDfmvSL1LoGk5bFiHOLSIKjGW8fIZeIF_9t9hbjageXiiNeDAtldg2zaEp1GTApgVGZzGKKM4ogY6AAUXKY5MfN-q98viTdRbP7b88AUsItY/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo4Dkw2VJ25pPB3N-eVnkT55Te3U_Ed-uI1jMZImXotjSaUmBN_t3fZfpTolW0Eoxs0l3Nr1PRXI40nfJQuDQtsuwJgW1l2Ez0vM-YeJ-fQFfFRXDoA-sfbEUwm1bNPuy8crSEnuUcCA/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yFVYxcPUorSJw2U-7uNOIK_nPPByYeHBTlvnIxLzLEedKR6CC0ILb83EFxl4Wg6azTrCcAbZJOnfI6WAAWA2co-3HQ7uUC-oMLiQyG-QuVlRCfbJWDQD8UDpKpeXsS1ih7pYexQW9DI/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABkCAAAAACap/5LAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAsSURBVHjaYvzPAAMs7+FMJgaEKCM2UfoqGBKGDZgjh4QVdDBskDln5DEBAwCNEQLr2H+8AwAAAABJRU5ErkJggg==) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

» Tùy chỉnh:

width:145px;height:150px lần lượt là chiều rộng và chiều cao của khung chứa hình ảnh và tiêu đề bài viết nếu chỉnh sửa nó thì bạn phải chỉnh sửa lại cả kích thước hình ảnh ở bước 5 nha width="145" height="100"
Bạn có thể thay đổi các hình ảnh next và preview theo ý của bạn nha.

5- Dán code bên dưới trước thẻ </head>:

<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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZWeZ7RVtj0TCjzieJxojnNHQjbytuyTCyUl_ywwuyL7-3QTmwnIFc79GKNRp5RsJsbQW7pbh3efr7t1pmkzJel4GXop0QtfibH6-VWSMoI9z0etbb8HqJZozMY8KfekKsdIVmWHSbSU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

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 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
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="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

» Tùy chỉnh:

numposts1 = 15; là số bài sẽ được gọi từ feed..
label1 = "news"; là tên của nhãn muốn gọi.
summaryPost = 140; là số ký tự mô tả
summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
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.

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 != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

» Tùy chỉnh:

Nếu muốn lấy toàn bộ các nhãn thay vì một nhãn cụ thể thì xóa phần màu đỏ đi nha.
auto:4000,
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).
visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
start: 0,
circular: true,
Đây là link download các file ảnh và javarscrip. Các bạn có thể tải về và upload lên host riêng để sử dụng lâu dài nha: Download now.
Mẫu SIMPLE đặt sau dòng: <div class='columns-inner'>

7- Lưu mẫu lại và xem kết quả nha.

Posted in: Thủ Thuật

Chia Sẻ Movie

Friday, March 21, 2014

Làm thế nào để Tạo bản tự động trượt Carousel cho blog...

¤ Slider bài mới nhất trượt ngang với thumbnail cho blogger!

Blog Ca Nhạc

0 comments:

Post a Comment

Xem nhiều tuần qua

Labels