Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Tạo bài viết trên trang chủ blogger theo phong cách website tin tức

Share Button

Tạo bài viết trên trang chủ blogger theo phong cách website tin tức

Hướng dẫn tạo danh sách bài viết mới trên trang chủ cho blogger theo phong cách của các website tin tức, báo chí.


Hướng Dẫn :

   Mặc định khi bạn viết bài mới trên trang chủ của blogger thì sẽ hiện ra danh sách các bài viết mới nhất của bạn. ( Thường thì 10 bài ) Nhìn giống hệt nhau về cách sắp xếp. Trông rất là đơn điệu.

   Khi bạn truy cập vào các trang website báo trí, tin tức thì bài viết đầu tiên bao giờ cũng nổi bật nhất, Hiển thị hình ảnh to nhất. Nhất mạnh cho đọc giả đây là bài viết mới nhất.

   Tôi sẽ hướng dẫn cho bạn tạo phong cách hiển thị bài viết trên hệ thống của blogger giống như các trang website tin tức, Báo trí.

Ví dụ Cụ thể cho bạn dễ hình dung :

Tạo bài viết trên trang chủ blogger theo phong cách website tin tức

Bạn thấy bài viết mới nhất  của tôi nằm ở trên đầu, độc lập và hiển thị to hơn so với những bài viết cũ hơn.

Hướng Dẫn Chi Tiết :

   Đầu tiên bạn vào chỉnh sữa HMTL của Chủ Đề tìm cho Tôi đoạn mã code :

<data:post.body/>

Sau khi tìm được đoạn mã trên bạn tiến hành xóa đoạn mã trênthay cho Tôi bằng đoạn mã code :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><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='&quot;summary&quot; + data:post.id'><data:post.body/></div>
 <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Xem Chi Tiết</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Chú Ý Vô Cùng Quan Trọng :

  Trong giao diện của bạn có thể có 1 hoặc nhiều mã code <data:post.body/> Bạn sẽ phải thay hết tất cả.

   Bạn thử tìm hết tất cả xem có bao nhiêu mã <data:post.body/> rồi nhớ lấy. Và tiến hành thay hết mã code <data:post.body/> bằng code trên dưới.

   Vì bản thân code trên cũng có mã code là <data:post.body/> cho nên. Nếu bạn không nhớ thì rất có thể bạn sẽ thay nhầm.

Lời khuyên : Nên copy tất cả code của giao diện và lưu vào NotePad trước. Nếu Chẳng may bị lỗi thì bạn có thể thay lại như cũ rồi làm lại.

Tiếp Theo Bạn tìm cho Tôi đoạn mã code :

<b:include data='post' name='post'/>

Bạn xóa nó đi và thay bằng mã Code Sau :

<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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
 <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><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'>Xem Tất Cả</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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ạn nên tìm trước trong Chủ Đề của bạn xem có bao nhiêu mã <b:include data=’post’ name=’post’/> nhé. Thường thì có 1 thôi. Nhưng nếu nhiều hơn thì bạn phải thay hết bằng code dưới

Tiếp Theo bạn lại tìm tiếp cho tôi đoạn mã code :

</head>

Và bạn tiến hành dán code dưới đây lên phía trên của nó

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</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 != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */
}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
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 { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* Background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* Color on mouseover for the Small Posts Title */
color: #005B77;
}
h2.date-header { /* Hide the post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}
 
.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link { /* Style for the comment bubble of posts below */
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{ /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Ví dụ như sau :

code copy ở trên
</head>

Và bạn có thể thay đổi nội dung màu đỏ.

posts_no_thumb_sum = 290;   Số chữ hiển thị bài viết nhỏ  ( không ảnh )
posts_thumb_sum = 240;   Số chữ hiển thị bài viết nhỏ( có ảnh )
img_thumb_height = 80;   Kích thước hình ảnh bài viết nhỏ ( chiều cao )
img_thumb_width = 80;   Kích thước hình ảnh bài viết nhỏ ( chiều rộng )
first_no_thumb_sum = 600;  Số chữ hiển thị bài viết lớn ( không ảnh )
first_thumb_sum = 540;  Số chữ hiển thị bài viết lớn ( có ảnh )
img_thumb_height1 = 145;  Kích thước hình ảnh bài viết lớn ( chiều Cao )
img_thumb_width1 = 165;   Kích thước hình ảnh bài viết lớn ( chiều rộng )

 

Bạn có thể tăng hoặc giảm để phù hợp với sở thích và website của bạn.

Mọi thắc mắc bạn có thể để lại bình luận phía dưới nhé.

Chúc bạn thành công.

Share Button

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme