Bài viết hướng dẫn các bạn tạo widget liên kết danh sách bạn bè có hình ảnh dạng giống như facebook với hình ảnh thumb và hiệu ứng đổ trên các logo. Để thực hiện các bạn có thể làm theo các bước bên dưới.
Đăng nhập vào Blogger -> Chủ đề - Chỉnh sửa HTML Copy đoạn code bên dưới thay cho code Popular mà bạn đang sử dụng
* CSS Popular Post */ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0} .PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;} PopularPosts ul li:last-child{border-bottom:none;} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;} .PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;} .PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}
Reponsive tức là hiển thị phù hợp nhất theo trình duyệt. Ví dụ như bạn có 1 hình ảnh rất lớn thì hiển thị ở pc nó to ra còn ở mobile thì nó nhỏ vừa với màn hình mobile nhưng vẫn giữ nguyên kích thước. Nôm na là vậy các bạn có thể xem ở demo hình bên dưới sẽ hiểu hơn công dụng của nó. Chủ yếu là để tương thích với nhiều thiết bị hơn mà không phải tác động nhiều
Responsive là công nghệ mới mà hiện nay hầu như mọi trang web đang áp dụng, công nghệ responsive tương thích với mọi loại màn hình hiển thị giúp cho website thân thiện hơn với người dùng và bài viết này sẻ hướng dẫn cách để hình ảnh hiển thị responsive cho website và blogspot
Css giúp hình ảnh tương thích với nhiều thiết bị. Code này thật ra sử dụng trong code bootrap css3. Áp dụng đối với blogger
1. Vào Blogger Dashboard > Template > Edit HTML. 2. Thêm đoạn css dưới đây vào trên thẻ ]]</b:skin>
- Chỉnh sửa lại cho phù hợp max-width: 50px; Chiều rộng tối đa của avatar width: 50px; Chiều rộng của avatar max-height: 50px; Chiều cao tối đa của avatar height: 50px; Chiều cao của avatar border:3px solid #fff : Màu viền của Avatar
Nhưng chúng ta đã biết cấu trúc template của Blogger luôn phải có ít nhất 1 thẻ <b:section> thì mới có thể lưu Template lại được. Vì vậy, nếu muốn tạo 1 trang web trắng tinh để bước đầu Build 1 Template thì bạn có thể thử đoạn code dưới đây nhé!
Đoạn code dưới đây chỉ mang tính chất tham khảo thôi nhé. Vì thực chất nó chưa hề có chút nội dung nào ngoài câu: “Thêm nội dung trang web của bạn vào đây”
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html> <head> <title> Tiêu đề trang web </title> <!-- Bắt đầu viết Css cho web --> <b:skin> <![CDATA[ /* Chèn Css vào đây */ ]]> </b:skin> </head> <!-- Bắt đầu phần hiển thị trên web --> <body> Thêm nội dung trang web của bạn vào đây <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'> </b:section> </body> <!-- Kết thúc phần hiển thị trên web --> </html>
Nó cũng giống như 1 bài tập làm văn gồm 3 phần : Mở bài thân bài và kết bài vậy thôi
Đầu tiên là bạn copy đoạn code bên dưới vào trước thể đóng </head>. Lưu ý nếu trong template của bạn đã có sẵn code này thì có thể bỏ qua. Mục đích của việc này là chúng ta sẽ sử dụng Font Awesome để tạo các icon, biểu tưởng mạng xã hội
Đăng nhập Blogger ~> Vào Bố cục ~> Thêm tiện ích HTML/Javascript Dán đoạn code sau vào hộp HTML/Javascript rồi Lưu lại
<style type="text/css"> .top-commenter-line {margin: 3px 0;padding:5px;} .top-commenter-line .profile-name-link {padding-left:0;} .top-commenter-avatar {position:absolute;bottom:-5px;right:-5px;width:15px;height:15px} .top-item-thumbnail {float:left;margin-right:10px;width:36px;height:36px} .top-item-info {overflow:hidden;word-wrap:break-word} .top-item-info h4 {margin:0;padding:0;} .top-item-info span {color:#555;font-size:10px;font-style:italic;} .ol{position:relative} .ol{background-image:url(https://lh5.googleusercontent.com/-TFh2lJda5nQ/VIlG9iF7qnI/AAAAAAAAAbM/MhbHh82aHpg/s555/sprites.png)} .ol.st{background-position:-40px -152px} </style> <script type="text/javascript"> // // Top Commentators gadget with avatars, by MS-potilas 2012. // Gets a list of top commentators from all comments, or specified number of days in the past. // See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html // // CONFIG: var maxTopCommenters = 5; // how big a list of top commentators var minComments = 1; // how many comments must top commentator have at least var numDays = 0; // from how many days (ex. 30), or 0 from "all the time" var excludeMe = true; // true: exclude my own comments var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // exclude these usernames var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames // var txtTopLine = '<div class="top-item-thumbnail ol st">[image]</div> <div class="top-item-info"><h4>[user]</h4> <span>[count] Nhận xét</span></div>'; var txtNoTopCommenters = 'No top commentators at this time.'; var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize // var sizeAvatar = 25; var cropAvatar = true; // var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfEZ-_EeZDR_5l6R906EjSJfh-vvc_Rer5yXz_6pO3l9okrMMrkhyA3BBinTyASRmsEf_9f0SBE1gyVvOcAiINRfstWDEYyT7t2FOMPXFRi6UBrDpAJWT5GFeSxnBxPpMFe4Rz-6d-eCw/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar; var urlMyProfile = ''; // set if you have no profile gadget on page var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image // config end // for old IEs & IE modes: if(!Array.indexOf) { Array.prototype.indexOf=function(obj) { for(var i=0;i<this.length;i++) if(this[i]==obj) return i; return -1; }} function replaceTopCmtVars(text, item, position) { if(!item || !item.author) return text; var author = item.author;
text = text.replace('[user]', authorcode); text = text.replace('[image]', imgcode); text = text.replace('[#]', position); text = text.replace('[count]', item.count); return text; }
var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) { var one_day=1000*60*60*24; var today = new Date();
if(urlMyProfile == "") { var elements = document.getElementsByTagName("*"); var expr = /(^| )profile-link( |$)/; for(var i=0 ; i<elements.length ; i++) if(expr.test(elements[i].className)) { urlMyProfile = elements[i].href; break; } }
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(numDays > 0) { var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601 var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
//Calculate difference btw the two dates, and convert to days var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day)); if(days > numDays) break; } var authorUri = ""; if(entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
// list top topcommenters: var realcount = 0; for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) { var item = tuplear[i][1]; if(item.count < minComments) break; document.write('<di'+'v class="top-commenter-line">'); document.write(replaceTopCmtVars(txtTopLine, item, realcount+1)); document.write('</d'+'iv>'); realcount++; } if(!realcount) document.write(txtNoTopCommenters); } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>'); </script>
maxTopCommenters: số lượng người nhận xét nhiều được hiển thị minComments: số nhận xét tối thiểu để được hiển thị ở bảng xếp hạng numDays: xếp hạng trong vòng bao nhiêu ngày ( Mặc định = 0 thì sẽ tính tất cả, ví dụ = 30 thì là xếp hạng nhận xét trong vòng 1 tháng) (tối đa 500 nhận xét) excludeMe: true : người dùng nặc danh excludeUsers: tên người dùng nặc danh maxUserNameLength: số ký tự dài nhất hiển thị tên người nhận xét
txtTopLine: Một số biến : [#], [image], [user] và [count]. [#] để đánh số thứ tự, [image] là avatar người nhận xét, [user] là tên người nhận xét và [count] hiển thị số nhận xét. Bạn có thể dùng html để tùy biến giao diện cho riêng mình. txtNoTopCommenters: Hiển thị khi danh sách xếp hạng chưa có ai txtAnonymous: "Anonymous" người dùng nặc danh urlMyAvatar: nếu trueAvatars = false, đặt url avatar của bạn vào đây urlMyProfile: nếu bạn không có profile gadget, đặt url hồ sơ của bạn ở đây urlAnoAvatar: avatar cho người dùng nặc danh urlNoAvatar: những người chưa thiết lập hình ảnh hồ sơ cá nhân, đang dùng logo Blogger. Bạn có thể ghi đè link ảnh khác nếu bạn muốn. cropAvatar: true - avatar vuông hoặc false - avtar tròn sizeAvatar: kích thước avatar
Cấu hình Phần trên có giới thiệu một số biến trong code, bình thường bạn chỉ cần quan tâm và chỉnh sửa một số biến sau: maxTopCommenters = 5 : hiển thị 5 người nhận xét nhiều nhất numDays = 0 : Xếp hạng tất cả. Nếu muốn xếp hạng theo tháng thì sửa 0 thành 30, tuần thì sửa 0 thành 7 (Các bạn nên để 0 hoặc 7 vì nếu để 30 thì có tháng có 30 ngày nhưng có tháng lại có 28,29 hay 31 ngày -_-) sizeAvatar = 25 : kích thước avatar - 25px cropAvatar = true : avatar vuông. Muốn để avtar tròn thì sửa true thành false txtTopLine: Dùng html và css để thay đổi giao diện.
Tiện ích này sử dụng CSS và HTML để tạo ra hiệu ứng cho icon di động động. Thường được sử dụng trên các trang bán hàng để nhằm thu hút khách hàng click vào để gọi điện thoại liên hệ trực tiếp cho người bán.
Khi sử dụng di động click vào biểu tượng này ứng dụng gọi điện sẽ tự động lấy số điện thoại của người. Trên máy tính (Laptop, PC) thì ứng dụng ở mở phần mềm chat Skype
Trong bài đăng này, tôi sẽ chia sẻ với các bạn về widget thống kê blogger. Bằng cách sử dụng tiện ích này, bạn có thể hiển thị tổng số lần xem trang, tổng số bài đăng và tổng số nhận xét trên blog của bạn và tôi cũng đã chỉnh sửa một chút về CSS của tiện ích thống kê này để phù hợp với mỗi người.
Trong tiện ích blogger này tôi đã sử dụng các biểu tượng khá đẹp và phông chữ PT Sans google. Bạn có thể đổi phông chữ tuỳ thích theo ý của bạn.
CÁC BƯỚC THỰC HIỆN Bước 1: Các bạn vào Trang tổng quan > Bố cục > Thêm tiện ích và chọn tiện ích Thống Kê Blog
Bước 2: Vào phần Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích Stats1 và tìm đoạn code sau:
Features: 1.) Awesome And Stylish Design. 2.) Speed Up Loading Time. 3.) Quick To Install And Easy To Use. 4.) SEO Friendly. 5.) Will Decrease Your Bounce Rate. 6.) Engage Your Readers In Your Awesome Articles. 7.) Based Upon Carousel Slider Code. 8.) J-Query 1.7.2 Added. 9.) Contain HTML-CSS-JavaScript-JQuery-Images Only. 10.) Automatically Fetch Latest Posts From Your Desired Label. 11.) You Can Control Your Post Count Easily. 12.) Automatic Slides After Your Desired Time. 13.) Visitor Can Also Move Your Post Manually Through Buttons. 14.) It Will Show Post Top Image Thumbnail And Post Title. 15.) You Can Customized It’s Design Via Easy CSS. 16.) You Can Also Change JQuery Code According To Your Desire. 17.) It Will Remain Sliding Between Your Allowed Latest Post From Label. 18.) You Can Add It Anywhere In Your Template Or Layout. 19.) You Can Bound It To Display On Your Desired Page/Post.(How To Display Gadgets On Your Desire Page/Post In Blogger?) 20.) Short And Easy Codes With A Lot Of Extra Customizations Easily. How To Add In Blogspot? 1.) Go To Your www.blogger.com 2.) Open Your Desire Blog. 3.) Go To “Template“. 4.) Click “Edit HTML“. 5.) Now Click Within Code Box. 6.) Go There Where You Want To Add This Slider. 7.) Now Copy The Below Code And Paste It There.
<b:if cond='data:blog.pageType != "item"'> <style type='text/css'> #carousel { width:950px; height:185px; margin-bottom:0; 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/AVvXsEh0zFLRN0cD7nVr4v1bscqJEXBcCJe7gCp8nF0lb5CN2A-jSvsWhk8BujDwc1C3RUOIFUjubT5QtmVTKAyT13I6AYDpk2puszJ4jB9wRK_sncRAe0a-Y_vNQuspWoa1lyJ6QqR9sjIZLuA/s1600/scroller-bg.png) repeat center; } #carousel #previous_button { position:absolute; width:49px; height:185px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNek46KB6lS_vls8j-RliMys2-sUHPsMbtc4RmxHXWUmgg7u80V-EYFXsjhKKe8h0RB7tr2ggIEyc4nKoiz3XYkkM-FHLSAKVRGaqX5pV4Un49HRqtEbaVf02GOHJIIw5pycYucKEC4Po/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/AVvXsEjtxvFPCHb2TNRkjyulMx9v3ZjvMbKaurkASojGqhhDitzC5g1LPUFL4OKo1Omnb1S99S3mG_ZlH0LBLc68UYCBMgzVPuUycKbTw4ZB9_DyK0IMiVhrDQ_dgCwr_Ge568pKDeSAAMKUyng/s1600/prev.png) center; } #carousel #next_button { position:absolute; right:0; width:49px; height:185px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdY7NeEyK7eM8vDniPzVt_QC6bBvEQsm_E_r3QBaELCg2QA12NudkjtjbFQyh8YzivszIiC0VccFV_hyphenhyphenRY-6IkasJfHxDCoArRPyYJzjGk0Neq7rON-O1aBx71V3UUcL4YwdRy3udVHc/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/AVvXsEgm4Sk2PTLchLwtKEdz1LE7eDS8tYHHwuV_k9BBO2WRhvBmKDokFOrwEruJPgCQ4EJeRz6Soesp5x-FQU2pggS2urjswTOm3bX0pLUkVXi_GVh-SaY8faKQ54OyxoYkF7IZ360OeFjGEiw/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/AVvXsEhwweQoxg-VU7nBT1cM4sZ4zTo_MsCJmiNB6WGQhvWA3fqsrNMd6SPHGvavPmVtJm_m0XVRholpr1obR8Q-kbBLaRZNkvF4DKmWkOcxYfNU0ZFjoUqcFERALXus5ebdXG7YtUO6AnRCbxQ/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; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 4px 20px 7px; padding:6px; } #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; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ (function ($) { $.fn.jCarouselLite = function (o) { o = $.extend({ btnPrev: null, btnNext: null, btnGo: null, mouseWheel: false, auto: null, speed: 200, easing: null, vertical: false, circular: true, visible: 3, start: 0, scroll: 1, beforeStart: null, afterEnd: null }, o || {}); return this.each(function () { var running = false, animCss = o.vertical ? "top" : "left", sizeCss = o.vertical ? "height" : "width"; var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible; if (o.circular) { ul.prepend(tLi.slice(tl - v - 1 + 1).clone()).append(tLi.slice(0, v).clone()); o.start += v } var li = $(".car", ul), itemLength = li.size(), curr = o.start; div.css("visibility", "visible"); li.css({ overflow: "hidden", float: o.vertical ? "none" : "left" }); ul.css({ padding: "0", position: "relative", "list-style-type": "none", "z-index": "1" }); div.css({ overflow: "hidden", "z-index": "2" }); var liSize = o.vertical ? height(li) : width(li); var ulSize = liSize * itemLength; var divSize = liSize * v; li.css({ width: li.width() }); ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize)); div.css(sizeCss, divSize + "px"); if (o.btnPrev) $(o.btnPrev).click(function () { return go(curr - o.scroll) }); if (o.btnNext) $(o.btnNext).click(function () { return go(curr + o.scroll) }); if (o.btnGo) $.each(o.btnGo, function (i, val) { $(val).click(function () { return go(o.circular ? o.visible + i : i) }) }); if (o.mouseWheel && div.mousewheel) div.mousewheel(function (e, d) { return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll) }); if (o.auto) setInterval(function () { go(curr + o.scroll) }, o.auto + o.speed); function vis() { return li.slice(curr).slice(0, v) }; function go(to) { if (!running) { if (o.beforeStart) o.beforeStart.call(this, vis()); if (o.circular) { if (to <= o.start - v - 1) { ul.css(animCss, -((itemLength - (v * 2)) * liSize) + "px"); curr = to == o.start - v - 1 ? itemLength - (v * 2) - 1 : itemLength - (v * 2) - o.scroll } else if (to >= itemLength - v + 1) { ul.css(animCss, -((v) * liSize) + "px"); curr = to == itemLength - v + 1 ? v + 1 : v + o.scroll } else curr = to } else { if (to < 0 || to > itemLength - v) return; else curr = to } running = true; ul.animate(animCss == "left" ? { left: -(curr * liSize) } : { top: -(curr * liSize) }, o.speed, o.easing, function () { if (o.afterEnd) o.afterEnd.call(this, vis()); running = false }); if (!o.circular) { $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); $((curr - o.scroll < 0 && o.btnPrev) || (curr + o.scroll > itemLength - v && o.btnNext) || []).addClass("disabled") } } return false } }) }; function css(el, prop) { return parseInt($.css(el[0], prop)) || 0 }; function width(el) { return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight') }; function height(el) { return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom') } })(jQuery) //]]> </script> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVoExjgC3tYhaWBqSy0I0jWgGkvvf3_cecbyTw8xfYEsKwUPeZfI-JMqYAihCl5XO3hMrqHIWZh9QQVl6nvljF4-fpaMxUIvuviAskp_lOnG1GsrqXRp-GUDHOFtzO89y8bPFUIuY3d8/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; summaryTitle = 25; numposts1 = 15; label1 = "Your Label Name"; 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> <div id='carousel'> <div id='previous_button'/> <div class='container'> <script type='text/javascript'> document.write("<script src=\"/feeds/posts/default/-/"+label1+"?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>
8.) Click Save, Now You Are Done.
Customization: 1.) Don’t Add J-Query 1.7.2 If You Already Have It. 2.) Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVoExjgC3tYhaWBqSy0I0jWgGkvvf3_cecbyTw8xfYEsKwUPeZfI-JMqYAihCl5XO3hMrqHIWZh9QQVl6nvljF4-fpaMxUIvuviAskp_lOnG1GsrqXRp-GUDHOFtzO89y8bPFUIuY3d8/s1600/no+image.jpg With Your Desired Image To Show Where You Don’t Have Post Image. 3.) Change false To true If You Want To Show Random Image From Your Post As Thumbnail. 4.) Change true To false Is You Want To Stop Bolding Title Text. 5.) Change 150 To Your Desired Summary Text Count. (Not Needed) 6.) Change 25 To Your Desired Title Text Count. 7.) Change 10 To Your Desired Post Count To Be Slide. 8.) Change Your Label Name With Your Desired Label Name That’s Post You Want To Show In This Slider. 9.) Change CSS According To Your Desire. 10.) Save and Done…
