Hiển thị bài đăng trên blog dạng magazine

Đôi khi bạn muốn thay đổi cách hiển thị bài đăng trên Blogger dạng magazine, portal... thay vì dạng danh sách như hiện tại. Bài viết này mình sẽ hướng dẫn các bạn thủ thuật hiển thị bài đăng dạng magazine cho blog (xem hình trên). Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, tìm dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới: 

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Bước 2:  Tìm dòng <b:include data='post' name='post'/> và thay thế nó thành:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Bước 3: Chèn đoạn code sau vào sau thẻ đóng </head>:

<!--Magazine Style by kjmagic.blogspot.com-->
<script type='text/javascript'>
posts_no_thumb_sum = 290; // Độ dài phần trích dẫn không có thumb
posts_thumb_sum = 240; // Độ dài phần trích dẫn
img_thumb_height = 80; // Chiều cao ảnh đại diện bài viết 2 cột 
img_thumb_width = 80; // Độ rộng ảnh đại diện bài viết 2 cột 
first_no_thumb_sum = 600; // Độ dài phần trích dẫn bài viết mới không có thumb
first_thumb_sum = 540; // Độ dài phần trích dẫn bài viết mới  
img_thumb_height1 = 145; // Chiều cao ảnh đại diện bài viết mới
img_thumb_width1 = 165; // Độ rộng ảnh đại diện bài viết mới
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { 
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* màu nền bài viết mới */
border: 1px solid #E5E5E5; /* màu đường viền bài viết mới */
}
.first-body { /* Phần snippet cho bài viết mới */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* Style bài viết mới */
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Màu nền khi rê chuột cho bài viết mới */
color: #1061A1;
}
.post { 
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* màu nền bài viết 2 cột */
border: 1px solid #E5E5E5; /* đường viền bài viết 2 cột */
overflow: hidden;
}
.posts-thumb { /* Ảnh đại diện bài viết */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* Tiêu đề bài viết */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* Màu nền tiêu đề bài viết */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* Màu của tiêu đề bài viết khi rê chuột qua */
color: #005B77;
} 
h2.date-header { /* Ẩn ngày đăng bài */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Styles nút Read More */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Màu nền nút Read More */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link { /* Style số đếm comments */
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* màu đường viền số đếm comments */
background: #EAEAEA; /* màu nền số đếm comments */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* Style số đếm comments cho bài viết mới */
margin: -200px 10px;
}
.post-comment-link a{ /* Màu của số đếm comments */
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
} 
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>
<!--/Magazine Style by kjmagic.blogspot.com-->

Dựa vào những chú thích trong code để tùy chỉnh style theo ý của bạn.

Chúc thành công !