NỘI DUNG CỦA TAB 1
NỘI DUNG CỦA TAB 2
NỘI DUNG CỦA TAB 3
NỘI DUNG CỦA TAB 4
NỘI DUNG CỦA TAB 5
Chèn nột dung muốn hiển thị
Home » Thủ thuật Blogspot » Slider Carousel 2 - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger

Slider Carousel 2 - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger

Unknown || || || Leave a nhận xét
Thủ thuật blogger và thủ thuật blogspot 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.

>>PopularPosts - Thủ thuật bài đăng phổ biến dạng ảnh chuyển động Blogger
Slider Carousel 2 - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger

1- Đăng nhập vào blogger / blogspot
2- Chọn Mẫu (Templates)
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/AVvXsEjqwjN69H6-8ZZEAzSRXj5nqW_NpBv7Y__-dj8chUNprknfwU2_gXl0hPUrqVHEw5B5aJBeEXUqYOtyoWG5yucCnGZKZtUGsNcVuAyVD2VcGbdFvxTwkTU1vLMslfCkYTf1ZfOkgF1Y6Rs/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrx5tLaKEtsl2jW4A3j1Cc2gqQZb5hYtPa3ph9sVCzdBfOk0HbKSHy9RHKmceoXbo5iX7S6nQkzulvnXASR0xg0qWJbpjdFmgnJh6lXJmWFuGM_T0HtvjWmXzA4uKjigEoj1AmIGzMWw/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/AVvXsEjfQU_a4hLiGmwJQysYY6YDEHjKy_yVJuFABEesHfJZIrug_JWKpUexzolKbvQn7goiVBMC4ScXwYbip2ObCVWlNPWKMwcuSncanycN_pGCOjVv1DK_fratMj_xwhcA7PfntvCf2KqdXuo/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9FVLL3vZ4g1P6GUH4Z8x2ZlCLf7SaQroLOlnR0ahob5aSeksl9Lqz-et8PdzkX_FJpnC6i_OhuOudxsRIL2P0iJUO2keuo2bb6J3eB6DY1lby3Q2TXTu90NU3GVlQq_M2LMyJV7ebOJE/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/AVvXsEgYEADMwRAwKCradKK_H7JxwcyDD1SWh3UPaf21rK9TIXrRDyMikiQPUpZHUjk9bj9m1ieKQSYwH75ZSA4rqSdNTdjBcsrXPjGClz_2PrTIt5SDqixLkSKLiEW3QZ_YRoDkIzQxXSc7C8M/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifESw7YsgVNKGrOGuY6g_GnK4L4GQ80mGhiViNbzN7yiByfYROU8zyKdzm8wSE1rmpmGbQPQqLH2akSWmPPkipb6RL_NBdX5g3TZLq1jEKXQw676UEG6iZ87DgMJ3PTwSFm3id03VFVyY/s1600/main.png) 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}
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/AVvXsEjfxT_qmVh2IcrWPu0Kpkb5Z_Wa36SzynzuqmAM-X8VFHT-dNPaZrHU8qP7PmmplgwUht9MXMHwmfhu_R4JzdAf4B_qVv8LT9p6701RZSYEHN7QlGt_U9P-L1Oto6_rcE3OYJMldLnNVmo/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>
  • 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>
  • 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, 
7- Lưu mẫu lại và xem kết quả nha.
/[ 0 nhận xét Untuk Artikel Slider Carousel 2 - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger]\


Đăng nhận xét