Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com
#dxh1{width:338px;float:left;padding:5px}
#dxh2{width:338px;float:right;padding:5px}
.featuredPost2 h1{font-size:15px;font-family:Arial;font-weight:bold;text-shadow:1px 1px 1px #fff;padding:10px 10px;color: #464546;letter-spacing:-1px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #c6c2c1;background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZKcwVUmC1sLuWWzSRkImm0aEUSY4zNBCNILC5ADPjAaeItuVPow2BwheV2jTr5_YQW5GJFvEZL6jD3KVhTvreCRSi7acjPkUi5DnFN1XLxVWs1hS3itZYoP2LhVffV683cgiYBYbEbOd3/) repeat-x left bottom;text-transform:none;}
.featuredPost2 h1 a{color:#464546}
.featuredPost2 h1 a:hover{color:#0077ff}
.featuredPost2{font-size:13px;font-family:Arial;color:#464546;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);margin-bottom:15px;padding-bottom:8px;float:left;line-height:1.3em;}
.featuredPost2 ul{border:1px solid #fff}
.featuredPost2 .entry-title{font-size:13px;font-family:Arial;font-weight:bold;text-transform:none;color:#0077ff;line-height:15px;margin-bottom:5px}
.featuredPost2 .entry-title a{color:#0077ff}
.featuredPost2 .entry-title a:hover{color:#464546;text-decoration:underline}
.featuredPost2 ul li{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom: 1px dashed #b2b1b4;margin:0 8px;padding:8px 0}
.featuredPost2 img{background:#fff;-webkit-box-shadow:0 0 5px rgba(0,0,0,.7);-moz-box-shadow:0 0 5px rgba(0,0,0,.7);box-shadow:0 0 5px rgba(0,0,0,.7);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;;padding:3px;float:left;display:block;margin-right:10px}
.featuredPost2 img:hover{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.index{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#0077ff;float:right;font:12px Tahoma;color:#fff;display:block;margin:8px 5px 0;padding:3px 10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.index a,.index a:visited{color:#fff;}
.index:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#555;text-decoration:none}
Bước 2: Thêm đoạn mã dưới đây vào trước thẻ </head> trong template của bạn.
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoaUO-Yn1nWbBcOJFLFo2jWcbibF4N3GS3AH-Op9vkocXqJ3xZ3TNRGj81qye-Y7OOZY_p22KkZ_CpOfNA-GvOwO24U7KAaJSyOu-tDyeElxS9VJtJyyQKjX9L-fWVihdiUnLJZ2gcW0/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=110;summaryTitle=20;numposts6=4;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 showrecentposts6(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts6;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;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="featuredPost2"><a href="'+posturl+'"><img width="62" height="62" class="alignleft" src="'+img[i]+'"/></a><div class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost)+'...</li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>
Bước 3: Tìm kiếm đoạn mã (không Mở rộng Mẫu Tiện ích)
<b:section class='main' id='main' showaddelement='no'>Và thêm vào ngay sau nó đoạn mã sau:
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
<b:section class='book' id='dxh1' preferred='yes'>
<b:widget id='HTML51' locked='false' title='TEST1' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML52' locked='false' title='TEST3' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='book' id='dxh2' preferred='yes'>
<b:widget id='HTML53' locked='false' title='TEST2' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML54' locked='false' title='TEST4' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
Saver lại template.
Lưu ý: Nếu muốn các widget mới tạo hiển thị ở những trang bất kỳ bạn tham khảo thêm bài viết.
Bước 4: Bạn vào phần Bố cục → Lúc này trong template đã hiển thị thêm 4 widget với tên lần lượt là: TEST1, TEST2, TEST3, TEST4 nằm ngay bên dưới "Bài đăng trên Blog" .
Trong ví dụ tên nhãn của mình là "test1"
Bấm "Lưu" và quay lại trang chủ tận hưởng!
sau minh lam khong duoc hocdethi.blogspot.com
Trả lờiXóa