Tin mới đăng:

Tạo Recent post đẹp mắt và chuyên nghiệp 3 cột cho các blogger

Đây là thủ thuật được giới thiệu khá nhiều trước đây nhưng mình vẫn muốn chia sẻ lại đến các bạn bởi 2 nguyên nhân: tính thẩm mỹ và tính chuyên nghiệp của nó! Hầu hết các website không thấy dùng Recent post dạng này bởi: không chạy slider và chứa file js. Ảnh hưởng đến tốc độ load! Nhưng với tình hình hiện nay tốc độ mạng đang dần ổn định và khá nhanh nên chuyện ảnh hưởng đến tốc độ load trang các bạn đừng lo lắng nhé. Mình thấy Recent post đẹp mắt và chuyên nghiệp cho các blogger này rất hay!
Hình ảnh minh họa
» Bắt đầu thủ thuật
1. Đăng nhập Blogger
2. Chọn Bố cục
3. Thêm tiện ích HTML/Javascript và dán code bên dưới vào
<style type="text/css">
*{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 13px;
}
#index_news{
width: 689px;
margin: 2px ;
}
#main_content{
width: 689px;
height: auto;
border: 1px solid #C8BBBE;
float: left;
overflow: hidden;
}
#main_content .top_news{
width: 690px;
margin-bottom: 5px;
}
#main_content .top1_news{
width: 280px; /*Độ rộng cột đầu tiên*/
float: left;
margin-top: 6px;
}
#main_content .top1_news .top1_news_image img{
border: 0px solid #9B9292;
padding: 8px;
width:260px; /*độ rộng của ảnh ở cột đầu tiên*/
height:260px; /*Chiều cao của ảnh ở cột đầu tiên*/
}
#main_content .top1_news .top1_news_title{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a{
font-size: 16px;
color: #DC0E0E; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover{
text-decoration: none;
color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
}
#main_content .top1_news p{
text-align: justify;
}
#main_content .top1_news p a{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img{
vertical-align: bottom;
}
#main_content .top2_news{
width: 179px; /*Độ rộng cột thứ 2*/
float: left;
margin-left: 8px;
margin-top: 12px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image{
background: url() no-repeat;
width: 160px; /*độ rộng của ảnh ở cột 2*/
height: 155px; /*chiều cao của ảnh ở cột 2*/
padding: 6px;
}
.top2_news_image img {
width:160px; /*độ rộng của ảnh ở cột 2*/
height:145px; /*chiều cao của ảnh ở cột 2*/
}
#main_content .top2_news h2{
padding-top: 2px;
}
#main_content .top2_news h2 a{
color: #000033;
text-decoration: none;
}
#main_content .top2_news h2 a:hover{
text-decoration: none;
color: #FF0000;}
#main_content .top2_news .dot3x1{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news{
width: 215px; /*Độ rộng cột thứ 3*/
float: right;
background: *fff url() no-repeat;
padding: 5px 1px 0 1px;
}
#main_content .topo_news .topo_news_title{
background: url(https://pbs.twimg.com/media/BK7MdybCUAAVmv6.gif:large) no-repeat;
width: 209px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 12px;
}
#main_content .topo_news ul li{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a{
color: #002392;
font-weight: bold;
font-size: 12px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {
color: #6F0404;
text-decoration: underline;}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sphotos-e.ak.fbcdn.net/hphotos-ak-snc6/264495_109532035922228_837734211_n.jpg";
imgnew = "http://i646.photobucket.com/albums/uu185/vanhoai1111/th_subforum_new.gif";
showRandomImg = true;
aBold = false;
summaryPost = 288; // Số kí tự hiển thị cho phần tóm tắt bài viết
numposts = 14; // Số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
topoTitle = "Bài viết khác";
label = "Thủ thuật"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
home_page = "http://www.xuandoanh.com/"; //thay đổi thành địa chỉ URL blog của bạn
</script>
<script src="https://buixuandoanh.com.vn/js/Z_recent_post.js" type="text/javascript"></script>
4. Save tiện ích lại thế là xong
   Mình đã chú thích ngay bên cạnh các bạn chỉnh lại cho phù hợp nhé.
   Thay link http://www.xuandoanh.com thành địa chỉ bạn muốn hiển thị.
                                           Chúc các bạn thành công
Tạo Recent post đẹp mắt và chuyên nghiệp 3 cột cho các blogger Tạo Recent post đẹp mắt và chuyên nghiệp 3 cột cho các blogger
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật