Tiếp
nối chủ đề Hot "Hiển thị bài đăng theo nhãn" hôm nay mình cùng giới
thiệu đến bạn một phong cách mới khá đơn giản nhưng vẫn đạt được tính
thẩm mỹ.
Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com
Mẫu đã được mình chỉnh lại về giao diện và thêm một số hiệu ứng nhỏ nhằm làm đẹp hơn.
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#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/AVvXsEjr88nEzC2gTphFaz0_ucMzUaXLPi0cgafHu_2iugOJsOsi5mHHnsTeAl971RQtEbloAUymuTnHPhDAU9D_gMdzZS_lpiLPPV4Y0T_kVolUjXKtK61RjkFbDcFD1Xx6F94JnAYPXU7fDwN5/)
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/AVvXsEjPqWJEihZoorZ7BHo1J2on749SQ4SgACc5nyyyn8jplr0nTP6hs4qiZNHVbF_YhhsCpgoW5icEREBqi2-dshUoFTrcr0YpEjpecBw8F7AtqUBlVbiafP_gql8iEQxoLropeqi4zuxBH5Y/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'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
Và thêm vào ngay sau nó đoạn mã sau:
<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" .
Bạn nhấp vào "Chỉnh sửa" và thêm vào phần nội dung của widget tên nhãn mà bạn muốn hiển thị.
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!
Thống Kê :
Comments[ 0 ]
Đăng nhận xét