Thủ thuật tạo bài viết giống trang dantri.com.vn hoàn chỉnh. ~ Hà Nam Thủ Thuật

Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (Design)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào sau thẻ <head>

function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}

</script>

<style>

.first_post {font-family:arial;font-size:12px;color:#333;line-height:1.5em;}

.first_post {line-height:1.5em;}

.first_post img{width:150;height:100px;float:left; margin-right:10px; padding:2px; border:solid 1px #DEDEDE;}

.first_post h2{line-height:1.3em;font-size:14px;font-weight:bold;margin:0 0 5px;}

.first_post h2 a{color:#034c91}

.first_post h2 a:hover{color:#333}

.readm a{

color:#f00;

font-size:12px;

margin-right:10px;

margin-top:8px;

float:right;}

.readm a:hover{

color:#766162;}

.repost{

color:#3366ff;

font-family:arial;}

.repost a{

color:#000066;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OxWMqnoHM_XBdpTSm0hD2D_J3e4Oqe4L-83rrfl9rgsjSbsW1MV79yjsEVvfRyO6VPAEzHqTnP_EO5_XCYwvMMCsdBFJBBgThkuKWe6dHItbC2noWe0wLYQkT4K5xQR_bkZKLe8DjRIC/) no-repeat left;

padding-left:10px;}

.repost a:hover{

color:#bf9798;}

.tab {

font-size:13px;

padding:0px 5px 5px 5px;

width:550px; /*độ rộng của bài viết*/

}

.dpost a{

padding:0 2px;

font: 11px/22px Arial;

color:#000;

float:left;

height:20px;}

.dpost li{

float:left;

height:20px;

overflow:hidden;}

.dpost li.active{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWYXRYdL7uJ5TWcLtjvAysEGfEEFcvgkSoqbc8BhdqsgQfFlXQOC-uANXIOP5Wmjk-Uodw4CGDbWTLaKva0aAYzH_2WpAo7JBNNVh52nZRW1xkumjaGS52emaSm4LERMFLDCU1yKCA1xm/) right no-repeat; /*màu nền của chủ đề chính */

position:relative;

top:1px;

}

.dpost li.active a{

font-size:10px;

font-weight:bold;

color:#fff;

text-transform:uppercase;

padding-right:25px;}

.iframpost{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H3dEyGgpiEuzQd6OqE3OfZjEML13h63uAFs1x2Y1gDZkEXEfLLVUOBCBM2TWNY6EJXA7tyMhm2nb3dKofIm5fcFjhga2Ab4QmSm_wwDoxTpF-MrrqN59nnRM3coebcW3olUe4vLiMOVq/) no-repeat; /*màu nền của tiện ích*/

height:25px;

}

*{margin:0;padding:0px 0px 0px 0px;}

</style>

5. Save template lại và trở về phần tử trang (Page Elements)

6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE

summaryPosts = 350; // số kí tự hiển thị ở phần mô tả

dtnumposts = 4; //số bài viết hiển thị trong phần bài viết liên quan

dthome_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn

</script>

<li class="active"><a href="#">Thủ thuật blogger</a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>

</div>

dtlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị

document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>

</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code.

7. Cuối cùng save tiện ích lại là xong

Mở rộng thủ thuật

Để lặp lại tiện ích cho các nhãn khác trên blog của mình thì bạn chỉ cần lặp lại đoạn code như bên dưới và chỉnh sửa phần số màu đỏ lại cho phù hợp

<li class="active"><a href="#">Thủ thuật blogger</a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>

</div>

dtlabel = "Templates"; // Thay thành tên nhãn bài bạn muốn hiển thị

document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>

</div>

nguồn: traidatmui.com

Xem bài viết trên phiên bản di động