tháng 1 2019

  Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang với ảnh thumbnail cho Blogspot (Blogger), với tiêu đề đầy đủ như vậy chắc hẳn các bạn cũng hình dung được chức năng của thủ thuật này. Nhưng thủ thuật này chủ yếu dùng để trang trí trang chủ hoặc trang tĩnh nhằm làm nổi bật những trang này.


Giờ bắt đầu thủ thuật nhé các bạn .

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ</b:skin>. Sau đó dán đoạn mã Code sau ở phía trên 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/AVvXsEgJQLsdHwSoNhsLUie6qY7qbB-jvIUYw7O1_YJWDDTOZ_t2Wsx2aMQH8IsUOuU6TPUZA6hdc_D_P0blgdxJ4llkM0U2VAeCamoYqnaGZNWNnqKYYxaU0Ts6gNv7U_0D8kDy_ojYwT-cb_E/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzBPyFoY4C88QS6E7t8dDlUV_M6UPZFvLWQZLbeGMUtkw9nddqMnTLArojotDGFI0xIsgzQODF9UX43n_S7-sgD6uOzY_yXdmp6w-Y0osMNWIsdK665nDYub-T5dA6A9CAwhLX8JUtoI/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/AVvXsEjynkdzlrZrwPID-wQLCZ0DulOLH6j_1wUgfFCo4MVlivCImufq9MpDI35cb6H3mSFT-C7OMLM8AD-D_zXkGt50D-gfO-RdB0vXW27xZCm85ivFCdqZx-Eu0zVImpadfZK8abiDMQHdeq8/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMqtjeqFCVk65BnbL4uAgeF7IsIZ9WrgesQdR_Oj415wnPUisXdatUys-3yUizXiXtN2h7iYNuWvlpSDdf8r1Ecrk9ldJVXs-ZDiwzJQrL5WjwwqeSTm8XMLExx39Awufi07xj-EtmYQ/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/AVvXsEjeegdjN7Tm7ri2cxbepdyxsbJPyi-26dG1_itgXuSZ4Dp4EzFCcpGFKetCtukgKz1Zj-ThEpYEeyva7LkDxNoFrBwqZoTnaUmoThftsKTBlolzNF_j7UUOZEeWgYY4c4Zd7TMdsshyphenhyphenOcc/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} 

Các thống số:

·        width: 980pxheight: 185px lần lượt là chiều rộng và chiều cao của Slider.
·        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ạn có thể thay đổi các Link hình ảnh Next và Preview theo ý của bạn nha.

Bước 2: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên 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/AVvXsEiplKrUDQDtVOdPA1mFm9rFMgi6i4hY5Ary4NMRmpqrmAj4T0Ydk7jZjOdELwt34X5-p0zqraaYWUkHbnUzMyb_2zHYEH1aqregsSpPmrfDHG5q38HsfJqzub7dkKAYS-E6KCKL2y6H3p8/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> 
 

Các thông số:

·        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ần lượt là chiều rộng và chiều cao của ảnh thumbnail.
·        showRandomImg = true: là lấy ảnh thumbnail cách 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.

Bước 3: Dán đoạn code dưới đây vào dưới thẻ <data:post.body/> thủ thuật này và Lưu mẫu.(Lưu ý : một blogspot thường có vài thẻ <data:post.body/> vì thế các bạn thử cho tới khi được nhé!

<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>   

Các thông số:

·        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: Thời gian để cuộn 1 lần (4000 = 4 giây)
·        scroll: 1: Số bài viết cuộn mỗi lần.
·        speed: 800: Tốc độ cuộn (800 = 0.8 giây).
·        visible: 5: Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
·       start: 0: Bài hiển thị đầu tiên.
·       circular: true: Tự động lặp lại nếu không muốn lặp lại sữa thành false.
CHÚC CÁC BẠN THÀNH CÔNG!!!

  Website phimmoi.net là một theme code được nhiều người trong giới mê mẩn vì khá đẹp mắt . Nó đã được rip và chuyển thể sang blogpost dưới đây là đầy đủ bộ code.


Chắc hẳn bạn đã biết về bộ khung này rồi nên không cần phải nói thêm về nó nữa. Với thanh bố cục phân chia toàn trang , phimmoi.net được người xem đánh giá điểm chất lượng khá tốt. Ngoài ra , khi đã rip về blogspot giao diện đã được tích hợp Web/wap, hỗ trợ player trên mobile với phiên bản AncPlayer 5.2.
Việc cài đặt teamplate khá đơn giản , Không dài dòng thêm nữa , dưới đây là code teamplate đi kèm với data phim cho bạn. Click để mở khóa down nhé :

Tạo bài viết liên quan 3 cột có ảnh Thumbnail tuyệt đẹp cho blogspot
   Hướng dẫn tạo bài viết liên quan (related post) 3 cột có ảnh Thumbnail cho blogspot đẹp ấn tượng, bạn có thể tùy chỉnh số lượng cột. Giúp tăng lượt tương tác với bài viết hơn và giữ chân người đọc nhiều hơn
BẮT ĐẦU TIẾN HÀNH : 

Bước 1: 
Bạn dán đoạn CSS sau lên phía trên thẻ ]]></b:skin>  trong mẫu
.related-post-thumbnail{padding:20px 0 0;float:left;width:100%}
.related-post-thumbnail li{width:32.3333333%;float:left;margin-right:1.5%;position:relative}
.related-post-thumbnail li:nth-child(3n){margin-right:0}
.related-post-thumbnail img{width:100%;height:auto}
.related-post-thumbnail h3{border-left:0;padding-left:0;color:#CB2027;margin:0}
.related-post-thumbnail img{-webkit-filter:brightness(85%);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}
.related-post-thumbnail img:hover{-webkit-filter:brightness(100%)}
@media (max-width:500px) {
.related-post-thumbnail li{width:49.5%;margin-right:.5%;min-height:170px}
.related-post-thumbnail li:nth-child(2n){margin-right:0;float:right}
.related-post-thumbnail li:nth-child(3n){margin-right:.5%}
}
@media (min-width:501px) and (max-width:768px) {
.related-post-thumbnail li{width:49.5%;margin-right:.5%;min-height:163px}
.related-post-thumbnail li:nth-child(2n){margin-right:0;float:right}
.related-post-thumbnail li:nth-child(3n){margin-right:.5%}
}
#related-title{margin-bottom:20px}
Bước 2: Để lấy ảnh Thumbnail và tiêu đề bạn tìm đến thẻ </head>  và dán đoạn JS sau lên phía trên
<script type='text/javascript'>
//<![CDATA[
      $(document).ready(function() {
        var w = 340;
        var h = 180;
        $('.related-post-thumbnail').find('img').each(function(n, image){
          var image = $(image);
          image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'w' + w + '-h' + h +'-c')});
          image.attr('width',w);
          image.attr('height',h);
        });
      });
      var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>No Related Posts</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><i class="fa fa-check-square-o"></i><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
      var relatedTitles = new Array();
      var relatedTitlesNum = 0;
      var relatedUrls = new Array();
      var thumburl = new Array();
      function related_results_labels_thumbs(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          relatedTitles[relatedTitlesNum] = entry.title.$t;
          try {
            thumburl[relatedTitlesNum] = entry.gform_foot.url
          } catch (error) {
            s = entry.content.$t;
            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 != "")) {
              thumburl[relatedTitlesNum] = d
            } else thumburl[relatedTitlesNum] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuriI3GWKvbwI0ZRRGy6V4EWJs_jYKRF7W4rJfzNJvc6pjX-_sOdIKr-x-CLrA0M-8hc5iefD4V-hKysXzeL-khINs5ep7CHPRSVZZjqWDQ5cWMjK4mmfWWNnoAut3-nca7xYA-kmgk6iG/s1600/no-thumbnail.png'
              }
          if (relatedTitles[relatedTitlesNum].length > 35) relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 60);
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++
            }
          }
        }
      }function removeRelatedDuplicates_thumbs() {
        var tmp = new Array(0);
        var tmp2 = new Array(0);
        var tmp3 = new Array(0);
        for (var i = 0; i < relatedUrls.length; i++) {
          if (!contains_thumbs(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp3.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
            tmp3[tmp3.length - 1] = thumburl[i]
          }
        }
        relatedTitles = tmp2;
        relatedUrls = tmp;
        thumburl = tmp3
      }function contains_thumbs(a, e) {
        for (var j = 0; j < a.length; j++) if (a[j] == e) return true;
        return false
      }function printRelatedLabels_thumbs() {
        for (var i = 0; i < relatedUrls.length; i++) {
          if ((relatedUrls[i] == currentposturl) || (!(relatedTitles[i]))) {
            relatedUrls.splice(i, 1);
            relatedTitles.splice(i, 1);
            thumburl.splice(i, 1);
            i--
          }
        }
        var r = Math.floor((relatedTitles.length - 1) * Math.random());
        var i = 0;
        if (relatedTitles.length > 0) document.write('<h2>' + relatedpoststitle + '</h2>');
        document.write('<div style="clear: both;"/>');
        while (i < relatedTitles.length && i < 20 && i < maxresults) {
          document.write('<li><a style="float:left;');
          if (i != 0) document.write('"');
          else document.write('"');
          document.write(' href="' + relatedUrls[r] + '"><img class="related_img" src="' + thumburl[r] + '"/><br/><div id="related-title">' + relatedTitles[r] + '</div></a></li>');
          if (r < relatedTitles.length - 1) {
            r++
          } else {
            r = 0
          }
          i++
        }
        document.write('</div>');
        relatedUrls.splice(0, relatedUrls.length);
        thumburl.splice(0, thumburl.length);
        relatedTitles.splice(0, relatedTitles.length)
}
//]]>
</script>
Bước 3: Trong bước này bạn cần chú ý hơn, bạn tìm đến thẻ <data:post.body/> và dán đoạn code sau xuống phía dưới (lưu ý nếu không hiển thị bạn tìm và kiểm tra từng thẻ, trong mẫu thường có ít nhất 3 thẻ này nhé,các bạn thử lần lượt đến khi được thì ok)

<div class='scroll-box related-post-thumbnail'>
<h3><span>RELATED POST:</span></h3>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
 var currentposturl=&quot;<data:post.url/>&quot;;
 var maxresults=6;
 var relatedpoststitle=&quot;&quot;;
 removeRelatedDuplicates_thumbs();
 printRelatedLabels_thumbs();
</script>
</div>
Chỉnh sửa: maxresults=6 Mặc định là 6 bài bạn có thể tăng giảm tùy thích theo nhu cầu sử dụng .
Chúc bạn thành công!
 

TÁC GIẢ

{facebook#https://www.facebook.com/couponkhuyenmaimoingay/}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.