Đối với 1 blogs, web thì việc không có hình ảnh trượt thì thật là nhàm chán đúng không ? chúng ta viết ra blog để làm gì? để được nhiều người biết đến vì thể trang trí giao dện cho blogger là 1 phần không thể thiếu được.
Hôm nay tôi sẽ hướng dẫn cho mọi người cách tạo ra những hình ảnh tự động chạy trên blogger, tiện ích của việc này là ít sử dụng javascript, do đó chắc chắn là nhẹ hơn so với bình thường. Được rồi trở lại để hướng dẫn mà tôi sẽ làm, lần này tôi sẽ thảo luận về làm thế nào để tạo một thanh trượt hình ảnh tự động đơn giản mà sẽ hiển thị bài viết mới nhất của bạn.
 |
| Tạo ảnh tự động trượt cho blogger |
Tạo ảnh tự động trượt cho blogger
Thanh trượt này chỉ mặc innerfade jquery và chu kỳ plugin jquery để làm mềm trượt nội dung chuyển giao (Bener không ya ...?), sự hiểu biết Innerfade jquery gần như thế này:InnerFade là một plugin nhỏ cho jQuery JavaScript-Thư viện. Nó được thiết kế để bạn có bất kỳ yếu tố mờ dần bên trong một container trong và ngoài.Nhận xét Những yếu tố này có thể là bất cứ điều gì bạn muốn, ví dụ như hình ảnh, danh sách-item, divs. Đơn giản chỉ cần tạo slideshow của riêng bạn cho danh mục đầu tư hoặc những quảng cáo vô của bạn. Tạo một newsticker hay làm một hình ảnh động.Nguồn: PhucNguyenIT.Blogspot.com
Vâng, ngay cả bản thân mình lẫn lộn tôi MAS / ya Tôi có thể hiểu được tiếng Anh thời gian học sáu đầu tiên, chỉ cần làm thế nào để làm cho nó:
- Đăng nhập vào blogger với tài khoản của bạn
- Sau đó chọn blog bạn muốn thêm thanh trượt này.
- Đăng nhập vào các mẫu >> Edit HTML , sau đó kiểm tra mở rộng tiện ích mẫu
- Như một biện pháp phòng ngừa trong trường hợp của một sai lầm trong việc chỉnh sửa sau này, bạn nên sao lưu mẫu của bạn.
- Sau khi tất cả các bước trên bạn, hãy đặt đoạn mã sau vào mã ]]> </ b: skin> :
- #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnahCpuJ5b7qTCGI-nXUezLWKUlCPvFNg8lJKUtsjUI6-IQ51G9u-mgQf5gQK8jotK4uPJFyDnUX-biZX3cucn7iOrkU-AsPVt0PIIV1KbhL6EWzlhm9eN_IZ8GYQYWCb0rdt-1XZhFs/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSorpNVL9tIh8WmnUxzoMeDEJ8eGy_R5veSKJia37CiMJPHTUVcSnMk18NL-EnH3_RdqiUhEkQVj4UrLw4o0G-SIRuLxgCfA2pz3DNUqGDxIp58u37JXq7wyVhfRuPi_jog7ii9zdG1Ww/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0} - Lưu ý mã màu xanh ở trên, nó là chiều rộng và chiều cao của thanh trượt trên demo mà tôi đã thực hiện, bạn chỉ cần điều chỉnh kích thước của mẫu của bạn.
- Bước tiếp theo là xác định vị trí các Chỉnh sửa HTML , chèn mã sau vào mã </ head> :
- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaI8BcoZAJSVPHc-w6xfbFtcIjD5VwvSJp5QwEo_MmXUosSTWU1W29sB3Di8gVTeK0EhG6i0zErBZuey9YCgUHH0nFDUwsmRwPTO8l3kdT3ZADGMNZKaaxjTUkl6WuOg8cdVZC6qfFbhk/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 7;
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('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>';
document.write(trtd);
j++;
}
document.write('</div>')
}
//]]>
</script>- Thông số kỹ thuật:Lưu ý các URL của các kịch bản màu đỏ ở trên, nó là mã script jquery.min.js loạt mới mà tôi sử dụng để làm cho thanh trượt này. Nếu mẫu bạn đã tìm thấy j Query.min.js mặc dù nối tiếp khác nhau, mã màu đỏ ở trên không còn cần thiết phải nhập. Chỉ cần một jquery.min.js trong mẫu, đó là vào các số series, nếu có thể các phiên bản mới nhất.Mã màu xanh : 7 là số thanh trượt được hiển thị. Trong khi các con số 340 và 212 là chiều dài và chiều rộng của hình ảnh là trong thanh trượt.
- Bước tiếp theo là để gọi các thanh trượt để xuất hiện trên blog của chúng tôi. Tìm đoạn code <div id = 'main-wrapper'> , sau đó đặt đoạn mã sau đây:
- <b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/sport?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div> </div> <!--end .container-->
</div>
</b:if>Nếu bạn muốn hiển thị thanh trượt cho mỗi thể loại hoặc nhãn sống chỉ cần thêm đoạn code trên:/feeds/posts/default?max-results
Trở thành:/feeds/posts/default/-/your label?max-results
- Hãy thay thế " nhãn hiệu của bạn "với các thể loại bạn muốn hiển thị trên thanh trượt.
- Cuối cùng, lưu mẫu và xem kết quả.
chúc các bạn thành công..!
0 Nhận xét