Simple Slider bài mới trượt cho blogspot ves3

<div dir="ltr" style="text-align: left;" trbidi="on"> Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu slider mới. Dạng này thích hợp với các blog phim, ảnh,... Được phát triển bởi <a href="http://www.maskolis.com/2013/02/membuat-simple-slider-otomatis-gambar.html">maskolis</a>. bạn có thể xem ảnh hoặc Demo.<br /><div style="text-align: center;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0NfQPkLD0BH-s342G0_6dxxNZZ8US6mb-adWPw_TBMukIjP_I6x0-jLefaRqDCqZFykYkdvxQ6F4I_Z3AeVJn8zx037KRffJtuNFv-SLZST0gWEdG4MRqE0GGiqcRICoUB7SdR8ExObw/s1600/slider+vertikal.jpg" /></div> <br /><a href="https://www.blogger.com/blogger.g?blogID=2059397265180060704"></a><b><a href="http://johnyprett.blogspot.com/2013/01/another-sample-post-with-image-beautiful.html">VIEW DEMO</a><br /><br />¤ Thêm Simple Slider bài mới trượt cho blogspot ves3 cho blogger!<br /><br />1- Đăng nhập vào blog<br /><br />2- Chọn Mẫu (Template)</b><br /><b><br />3- Chọn chỉnh sủa HTML (Edit HTML)</b><br /><b><br />4- Dán code sau trước thẻ ]]></b:skin> :/* Slider */</b><div> <br />.sompret-wrapper {float:right; position: relative;}<br />.sompret { overflow: hidden; position: relative; width:300px; height:400px;}<br />.image_reel { position: absolute; top: 0; left: 0; }<br />.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}<br />.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }<br />.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXfBhTdXp5yYT4zxMxhR7B0IpGtQFBq6_VPxeZzh3KcCdSpoSKZtRknqoEO6gWC6PhHevHCziVQqUjy1-2mdmnlPTevEHqJ-vR2uHKe61MaJa335fd4M6pkJGfl-aUnQ56EOdT7euC1M/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }<br />.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhla83UtBK1yCuiWjcjjO8u8diWA8D4Oc28KeBDOqk9NWDchm6OtfATYU63hAOFMpyvf3ucXyS5jcIVMwHymHme65ZDFiTjq2gqqImHNXS0HoMVs6wZLwahVdNsJ70H8qdCD64p3ELjkaE/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}<br />.paging a:hover {font-weight: bold; border:none; outline:none;}<br />.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJy9ZtBKnCi21ROCVhkAsA21tmu6rrTSrxGq4xOZ6C_knNn7LCvAFtF-Flwm0VelSi6E1JrOgZM75WR5B2Lnr9XS58jOFm-ZQhE2cHXP-gv2ddvkbGWQNbD7fiOpMKAOvADftQWLwSDek_/s1600/uj-opacity-40.png);padding:5px 10px; }<br />.crott a{color: #fff;font: 16px Oswald }<br />.crott p{color: #fff;font: 12px Arial;}<br /><br /><b><br />5- Dán code bên dưới trước thẻ </head>:</b> </div> <div> <br /></div> <div> <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />jQuery(document).ready(function() {<br /><br />//Set Default State of each portfolio piece<br />$(".paging").show();<br />$(".paging a:first").addClass("active");<br /><br />//Get size of images, how many there are, then determin the size of the image reel.<br />var imageWidth = $(".sompret").width();<br />var imageSum = $(".image_reel img").size();<br />var imageReelWidth = imageWidth * imageSum;<br /><br />//Adjust the image reel to its new size<br />$(".image_reel").css({'width' : imageReelWidth});<br /><br />//Paging + Slider Function<br />rotate = function(){<br /> var triggerID = $active.attr("rel") - 1; //Get number of times to slide<br /> var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide<br /><br /> $(".paging a").removeClass('active'); //Remove all active class<br /> $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)<br /> <br />$(".crott").stop(true,true).slideUp('slow');<br /><br />$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");<br /><br /> //Slider Animation<br /> $(".image_reel").animate({<br /> left: -image_reelPosition<br /> }, 500 );<br /><br /><br />};<br /><br />//Rotation + Timing Event<br />rotateSwitch = function(){<br />$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");<br /> play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds<br /> $active = $('.paging a.active').next();<br /> if ( $active.length === 0) { //If paging reaches the end...<br /> $active = $('.paging a:first'); //go back to first<br /> }<br /> rotate(); //Trigger the paging and slider function<br /> }, 10000); //Timer speed in milliseconds (3 seconds)<br /><br />};<br /><br />rotateSwitch(); //Run function on launch<br /><br /> //On Click<br /> $(".paging a").click(function() { <br /> $active = $(this); //Activate the clicked paging<br /> //Reset Timer<br /> clearInterval(play); //Stop the rotation<br /> rotate(); //Trigger rotation immediately<br /> rotateSwitch(); // Resume rotation<br /> return false; //Prevent browser jump to link anchor<br /> }); <br /><br />});<br /><br />//]]><br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcj2Oi8gXPJm20ZPG7RAI6WQHD8s-xtUB-zQfYeCHX_bqnoA1dmugMuBI2tVWU6VP3_hyphenhyphenK3o5DvlVCNbJkomE_1OyDRSSQsi95HFRa6S4GFz9YC36d7zvGxx45WCUHVVxu1JgXxJyRZs/s1600/no+image.jpg";<br />showRandomImg = true;<br />aBold = true;<br />summaryPost1 = 80;<br />summaryTitle = 20;<br />numposts1 = 6;<br /><br />function removeHtmlTag(strx,chop){<br /> var s = strx.split("<");<br /> for(var i=0;i<s.length;i++){<br /> if(s[i].indexOf(">")!=-1){<br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br /> }<br /> }<br /> s = s.join("");<br /> s = s.substring(0,chop-1);<br /> return s;<br />}<br /><br />function showrecentposts1(json) {<br />j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br />img = new Array();<br /> <br /> for (var i = 0; i < numposts1; i++) {<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br />var pcm;<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /><br />for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> pcm = entry.link[k].title.split(" ")[0];<br /> break;<br /> }<br /> }<br /><br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;}<br /> else<br /> if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;}<br /> else var postcontent = "";<br /> <br /> postdate = entry.published.$t;<br /><br />if(j>imgr.length-1) j=0;<br />img[i] = imgr[j];<br /><br />s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br />if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br />//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br />var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];<br /><br />var day = postdate.split("-")[2].substring(0,2);<br />var m = postdate.split("-")[1];<br />var y = postdate.split("-")[0];<br /><br />for(var u2=0;u2<month.length;u2++){<br />if(parseInt(m)==month[u2]) {<br />m = month2[u2] ; break;<br />}<br />}<br /><br />var daystr = m+ ' ' + day + ' ' + y ;<br /><br />var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';<br />document.write(trtd); <br /><br /> j++;<br />}<br /><br />}<br /><br />function showrecentposts2(json) {<br />j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br />img = new Array();<br /> <br /> for (var i = 0; i < numposts1 ; i++) {<br /> var entry = json.feed.entry[i];<br /> var posttitle = entry.title.$t;<br />var pcm;<br /> var posturl;<br /> if (i == json.feed.entry.length) break;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> posturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /><br />for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br /> pcm = entry.link[k].title.split(" ")[0];<br /> break;<br /> }<br /> }<br /><br /> if ("content" in entry) {<br /> var postcontent = entry.content.$t;}<br /> else<br /> if ("summary" in entry) {<br /> var postcontent = entry.summary.$t;}<br /> else var postcontent = "";<br /> <br /> postdate = entry.published.$t;<br /><br />if(j>imgr.length-1) j=0;<br />img[i] = imgr[j];<br /><br />s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br /><br />if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br /><br />//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br /><br /><br />var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br /><br />var day = postdate.split("-")[2].substring(0,2);<br />var m = postdate.split("-")[1];<br />var y = postdate.split("-")[0];<br /><br />for(var u2=0;u2<month.length;u2++){<br />if(parseInt(m)==month[u2]) {<br />m = month2[u2] ; break;<br />}<br />}<br /><br />var daystr = day+ ' ' + m + ' ' + y ;<br /><br />var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';<br />document.write(trtd); <br /><br /> j++;<br />}<br /><br />}<br /> //]]><br /></script><br /><br /><br /><b><br />» Tùy chỉnh:</b><br />summaryPost1 = 80; Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.<br />summaryTitle = 20; 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.<br />numposts1 = 6; 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.<br />Xóa màu xanh nếu đã có jquery<br /><b><br />6- Tìm thẻ: <div id='main-wrapper'></b><br /><br /><br />- Dán vào trước nó đoạn code bên dưới: <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div class='sompret-wrapper'><br /><div class='sompret'><br /><div class='image_reel'><br /><script><br />document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script></div><br /><div class='description'><br /><script> <br />document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);<br /></script><br /></div><br /></div><br /><div class='paging'><br /><a href='#' rel='1'/><br /><a href='#' rel='2'/><br /><a href='#' rel='3'/><br /><a href='#' rel='4'/><br /><a href='#' rel='5'/><br /><a href='#' rel='6'/><br /></div><br /></div><br /></b:if><br /><br /><br /><br /><b>» Tùy chỉnh:</b><br />Nếu muốn tiện ích hiện ở cả trang chủ thì hãy xóa bỏ phần màu vàng đi.<br />Phần này mình để lấu tất cả các bài viết thuộc các nhãn khác nhau. nếu muốn hiện theo một nhãn nhất định thì thêm phần /-/Tên nhãn vào sau default<br /><br /><b><br />7- Lưu mẫu lại và xem kết quả.</b></div> </div>

Simple Slider bài mới trượt cho blogspot ves3

Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu slider mới. Dạng này thích hợp với các blog phim, ảnh,... Được phát triển bởi maskolis. bạn có thể xem ảnh hoặc Demo. VIEW DEMO¤ Thêm Simple Slider…

Đọc thêm »

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

<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="font-family: Arial, Helvetica, sans-serif;">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 <a href="http://www.maskolis.com/2012/04/membuat-slider-carousel-otomatis.html">maskolis</a>.</span><div class="post-body entry-content" id="post-body-7400979253654243205" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"> <div style="text-align: center;"> <img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBu9Dh2VU9RdA54D5WmxdMPNOfGnCffKNuNzC2f_v8VCB5EvvkPT2lvK6OUiYutYzGgIkW9ee22yUl2xDt3qLCiaXC6bwW9ZZu42qqvSwlGQUaEiImxbm2yYwdQrhxcxG9vGtvQc1uTs/s1600/slider+carousel.gif" class="decoded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkBu9Dh2VU9RdA54D5WmxdMPNOfGnCffKNuNzC2f_v8VCB5EvvkPT2lvK6OUiYutYzGgIkW9ee22yUl2xDt3qLCiaXC6bwW9ZZu42qqvSwlGQUaEiImxbm2yYwdQrhxcxG9vGtvQc1uTs/s1600/slider+carousel.gif" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></div> <br /> <a href="http://www.blogger.com/blogger.g?blogID=8624584820429677863" name="more"></a><a class="button big" href="http://johny-darkstore.blogspot.com/" rel="nofollow" style="background-color: #006666; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(0, 85, 85); box-shadow: rgba(255, 255, 255, 0.2) 0px 1px inset; color: #519ad6; outline: none; padding: 10px 20px; text-decoration: none;" target="_blank"><span style="color: red;">VIEW</span><span style="color: white;"> DEMO</span></a><br /> <div style="text-align: justify;"> <br /></div> <h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;"> ¤ Slider bài mới nhất trượt ngang với thumbnail cho blogger!</h3> <div style="text-align: justify;"> <b>1- Đăng nhập</b> vào blog</div> <div style="text-align: justify;"> <b>2-</b> Chọn <b>Mẫu </b>(Template)</div> <div style="text-align: justify;"> <b>3-</b> Chọn <b>chỉnh sủa HTML</b> (Edit HTML)</div> <div style="text-align: justify;"> <b>4-</b> Dán code sau trước thẻ<span style="background-color: #cccccc;"><b> ]]></b:skin></b></span></div> <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">#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/AVvXsEiSBaRh4AuXZdCQv2k72K65OuMpl4lUC3RlD6P9UOc_tQB5Tk-OeVRFcQ6dZUtONZdZATFeZUth3U9YF3ETbzCJmHVPVai5YFDkDSTCOIvMmhamhlVqSbqVNZ83Mt2P-sZtUMq5DjP3hpQ/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYkJdicgyADRr1BYoj8pME797JEs4xJL5Yly1T__IV9-k-7izRHetSZ1CziSsm6ha0OMPpyukqQbgdEYNye2hyDyVkr4rGhidnAek3065wKbFu2xFpRHuPjaRUjHyRKe1WrYrRRMqZOI/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/AVvXsEiv27mO6ZAmN5ttkihA2hN0II6UMgCBnolsGmAVh_NDhymDze6VITPhXUzLA7srC00yD_nvKl9mq2-zjTZwSYZ8EZ7BtyAyWxdhx045RafKyREn84s4xaOHBiWGdAcu6lOnpwPo3Dx086Q/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPyKHQfcMayuITK39gUmkD_rBbc67kJaHrX6tcpwSYmT3J-c1b7vGzOIlWIsAYzcanJyK_5B9yUs6cjfBSVz7WSk9QON5FnGatbE8h5QNDbN1oz6Zlljz1ZcgYdivWs-3kWgz0A16Gls/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/AVvXsEgobm-4Q7UbGGSo-6IMuEsxjVRAR1uR3Y3iyW0RB5zqPo7ireqOrv-gy8aLt02KtxylBKt-e-xF1uYc7QvcMGNxejPSZc8t657gAYLzN9BnhtD8gwjU-_LtqM5sXg5DlKSI3taWLiO0dGQ/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/AVvXsEjCR7Cvuj6sS1obshkgdjyQj4PoM6B2vv2SJbEAzDXuIw9MXf6zreboA88rcNn3wUSE5WGtuht02rBv-AQhSd-DB3Z161jwk4NASL9EmgTLq-3pjD8lh9nPU2jIlS9PXOtkSbYcrpQ3nWY/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}</pre> <b>5-</b> Dán code bên dưới trước thẻ <span style="background-color: #cccccc;"><b></head></b></span>:<br /> <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><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/AVvXsEhWcj2Oi8gXPJm20ZPG7RAI6WQHD8s-xtUB-zQfYeCHX_bqnoA1dmugMuBI2tVWU6VP3_hyphenhyphenK3o5DvlVCNbJkomE_1OyDRSSQsi95HFRa6S4GFz9YC36d7zvGxx45WCUHVVxu1JgXxJyRZs/s1600/no+image.jpg"; showRandomImg = <span style="background-color: cyan;">true</span>; aBold = true; summaryPost = <span style="background-color: yellow;">140</span>; summaryTitle = <span style="background-color: lime;">25</span>; numposts1 = <span style="color: orange;"><b>15</b></span>; label1 = "<span style="color: red;"><b>news</b></span>"; 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 <span style="background-color: #93c47d;">width="145" height="100"</span> 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></pre> <div style="text-align: justify;"> <b>» Tùy chỉnh:</b></div> <ul style="text-align: justify;"> <li>numposts1 = <span style="color: orange;"><b>15</b></span>; là số bài sẽ được gọi từ feed..</li> <li>label1 = "<span style="color: red;"><b>news</b></span>"; là tên của nhãn muốn gọi.</li> <li>summaryPost = <span style="background-color: yellow;"><b>140</b></span>; là số ký tự mô tả</li> <li>summaryTitle = <span style="background-color: lime;"><b>25</b></span>; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.</li> <li><span style="background-color: #93c47d;">width="145" height="100"</span> là chiều rộng và chiều cao của ảnh thumbnail.</li> <li>showRandomImg = <span style="background-color: cyan;">true</span>; 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 <span style="background-color: cyan;">true</span> thành <span style="background-color: cyan;">false</span>.</li> </ul> <div style="text-align: justify;"> <b>6- </b>Tìm thẻ:</div> <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><div id='main-wrapper'></pre> - Dán vào trước nó đoạn code bên dưới:<br /> <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><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<span style="background-color: red;">/-/&quot;+label1+&quot;</span>?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: <span style="background-color: #6fa8dc;"><b>1</b></span>, speed: <span style="background-color: orange;"><b>800</b></span>, visible: <span style="background-color: magenta;"><b>5</b></span>, start: 0, circular: true, btnPrev: &quot;#previous_button&quot;, btnNext: &quot;#next_button&quot; }); })})(jQuery) </script> </b:if> </pre> <div style="text-align: justify;"> <b>» Tùy chỉnh: </b></div> <ul style="text-align: justify;"> <li>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 <span style="background-color: red;">màu đỏ</span> đi nha.</li> <li>auto:4000,</li> <li>scroll: <span style="background-color: #6fa8dc;"><b>1</b></span>,  số bài viết cuộn mỗi lần.</li> <li>speed: <span style="background-color: orange;"><b>800</b></span>, Thời gian chuyển ảnh (tính bằng phần nghìn giây).</li> <li>visible: <span style="background-color: magenta;"><b>5</b></span>, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.</li> <li>start: 0,</li> <li>circular: true, </li> <li>Đâ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: <a href="https://www.box.com/s/vqobdkoz6kvowc29fwtt" rel="nofollow" style="color: #006666; text-decoration: none;" target="_blank"><b>Download now</b></a>.</li> </ul> <div style="text-align: justify;"> <b>7- Lưu mẫu </b>lại và xem kết quả nha.</div> </div> </div>

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

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 đề…

Đọc thêm »

Tạo hiệu ứng ảnh

<br /><div style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; padding: 0px; text-align: justify;"><b style="color: orange;">Cách 1: </b>Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:<br />Tiếp theo vào <b style="background-color: #666666; color: lime;"> Thiết kế </b> -> <b style="background-color: #666666;"> <span style="color: lime;">Chỉnh sửa HTML</span> </b>.</div><div style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; padding: 0px; text-align: justify;">- Các bạn có 2 cách để làm<br /><b>- Bước 1: </b>Thêm đoạn Code sau trước thẻ: <b style="background-color: #666666; color: lime;"></head></b></div><div style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;"><b>Code:</b></div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><style><br /><br />.pulloutimage{<br /> position: relative;<br />}<br /><br />.pulloutimage img{<br /> position: absolute; /* absolute position and stack images inside container */<br /> left: 0;<br />}<br /><br />.pulloutimage img.ondemand{ /*CSS for image shown on demand */<br /> opacity: 0;<br /> visibility: hidden; /* hide it initially (mainly for legacy browsers) */<br />}<br /><br />.pulloutimage img.original{<br /> z-index: 1; /* set base z-index of initially shown image */<br />}<br /><br /><br />@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */<br /> 0%{ /* Start of animation */<br /> z-index: -1;<br /> opacity: 0;<br /> }<br /> 50%{ /* Half way point, move image to right edge of container */<br /> opacity: 1;<br /> z-index: -1;<br /> left: 100%;<br /> box-shadow: none;<br /> }<br /> 51%{ /* 51% point, stack animating image on top of original image */<br /> z-index: 2;<br /> }<br /> 100%{ /* Final point, move animating image back so it's on top of original */<br /> left: 0;<br /> box-shadow: 8px 8px 15px gray;<br /> }<br />}<br /><br />@-moz-keyframes revealfromright{<br /> 0%{<br /> z-index:-1;<br /> opacity:0;<br /> }<br /> 50%{<br /> opacity:1;<br /> z-index:-1;<br /> left:100%;<br /> box-shadow: none;<br /> }<br /> 51%{<br /> z-index:2;<br /> }<br /> 100%{<br /> left:0;<br /> box-shadow: 8px 8px 15px gray;<br /> }<br />}<br /><br />@-ms-keyframes revealfromright{<br /> 0%{<br /> z-index:-1;<br /> opacity:0;<br /> }<br /> 50%{<br /> opacity:1;<br /> z-index:-1;<br /> left:100%;<br /> box-shadow: none;<br /> }<br /> 51%{<br /> z-index:2;<br /> }<br /> 100%{<br /> left:0;<br /> box-shadow: 8px 8px 15px gray;<br /> }<br />}<br /><br /><br />.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */<br /> -webkit-animation-name:revealfromright; /* specify animation keyframe */<br /> -webkit-animation-duration: 1s;<br /> -webkit-animation-iteration-count: 1;<br /> <br /> -moz-animation-name:revealfromright;<br /> -moz-animation-duration: 1s;<br /> -moz-animation-iteration-count: 1;<br /> <br /> -ms-animation-name:revealfromright;<br /> -ms-animation-duration: 1s;<br /> -ms-animation-iteration-count: 1;<br /> <br /> animation-name:revealfromright;<br /> animation-duration: 1s;<br /> animation-iteration-count: 1;<br /> <br /> visibility:visible;<br /> opacity:1;<br /> box-shadow: 8px 8px 15px gray;<br /> z-index:2;<br />}<br /><br />.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */<br /> opacity:0.5;<br />}<br /><br /></style></pre><span style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;"><b>- Bước 2</b>: Thêm đoạn Code sau vào HTML/JavarScrip hặc HTML bài viết</span><br /><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><!--dimensions of each container should be set to original image's dimensions --><br /><br /><div class="pulloutimage" style="width:298px; height:223px"><br /><img class="original" src="<b style="color: red;">Ảnh 1</b>" /><br /><img class="ondemand" src="<b style="color: blue;">Ảnh hiện ra khi dê chuột vào ảnh 1</b>" /><br /></div><br /><br /><br /><br /><div class="pulloutimage" style="width:263px; height:199px"><br /><img class="original" src="<b style="color: red;">Ảnh 2</b>" /><br /><img class="ondemand" src="<b style="color: blue;">Ảnh hiện ra khi rê chuột vào ảnh 2</b>" /><br /></div></pre><span style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;">Cách 2: Cách này hơi khác cách 1 đó là các bạn chèn trực tiếp mã sau vào bài viết của bạn.</span><br /><div style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;"><span style="font-size: xx-small;"><br /></span></div><div style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px; text-align: center;"><span style="font-size: x-small;"><span style="background-attachment: scroll; background-color: #24bde2; background-image: none; background-position: 0% 0%; background-repeat: repeat repeat; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 5px 10px;">Xem <a href="http://demo-namkna.blogspot.com/2012/01/hieu-ung-hover-thay-oi-2-hinh-anh-khi.html" style="color: #006666; text-decoration: none;" target="_blank"><b><span style="color: red;">Demo</span></b></a></span></span></div><br style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px;" /><a href="http://namkna.blogspot.com/" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;"><img border="0" name="nameyourimage" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP6I1dXvjMIvwLrJxScwoeWauqmS63jz2iLOEyRnoblMFIZIC7VtBVVM70Uk6psWKv9cE5hj6Cc6Q3hH1IWOv3LCbR4aINEV_rM3Cm1IOntlUh_9w3we0vNQ3X1BSLEeNVzOkBbdAXfhU4/s1600/tao-anh-mo-cho-blogspot-namkna-ngcotra.jpg" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a><br /><code style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin: 10px 0px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><a href="<b>http://namkna.blogspot.com/</b>" onmouseover="nameyourimage.src='<b style="color: red;">Link ảnh 1</b>'" onmouseout="nameyourimage.src='<b style="color: red;">Link ảnh 2</b>'"><img src="<b style="color: red;">Link ảnh 2</b>" name="nameyourimage" border="0" /></a></code><br /><span style="background-color: #f0f2f3; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 19.59375px;">Ta sử dụng 2 ảnh trùng nhau là <b style="color: red;">link ảnh 2</b> </span>

Tạo hiệu ứng ảnh

Cách 1: Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:Tiếp theo vào  Thiết kế  ->  Chỉnh sửa HTML .- Các bạn có 2 cách để làm- Bước 1: Thêm đoạn Code sau trước thẻ: Code:.pull…

Đọc thêm »