Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot

Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot. Cách thêm Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot.hướng dẫn cách tạo widget Bài Mới Nhất Hiển Thị 2 Cột khi rê chuột vào bài viết sẽ có hiệu ứng toolip mô tả về bài viết đó nhìn rất bắt mắt



Tác giả của thủ thuật này là bác FanDung - Fandung.blogspot.com .Sau đây mình xin chia sẻ bài cách thêm Widget bài viết mới theo nhãn hiển thị hai cột có ảnh

Bài viết này mình sẽ hướng dẫn cách tạo widget Bài Mới Nhất Hiển Thị 2 Cột khi rê chuột vào bài viết sẽ có hiệu ứng toolip mô tả về bài viết đó nhìn rất bắt mắt. Đặc biệt tốc độ load của tiện ích này cũng khá nhanh. Mời bạn xem demo ở bên dưới để hiểu rõ hơn về thủ thuật này

Cách thực hiện : 

Bước 1: Vào blogger → Mẫu → Chỉnh Sửa HTML

Bước 2: Dán code bên dưới vào trước thẻ  ]]></b:skin> sau đó lưu lại template

/*Tooltip*/
#osdhtmltooltip{border: #999 1px solid;padding: 4px;font-size: 10pt;z-index: 100;left: -300px;visibility: hidden;width: 350px;font-family: Arial;position: absolute;background-color: #fcfee4;text-align: left;}

#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4dSYcnL0kvG-GmIB1cDIL7Ui9-zjn-KmflelMS4nbF7mVChiNz754Nq9gadQ0O2OHTZVhCpUrfz7Cc5q9aNSL0vqYyCrz7hRTQJmQBUNLMnky5ad6GazrVZzBjC1xgsMl_Ofb6vL-8C0/s1600/recent-bg.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:12px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float: left;width: 40px;height: 40px;border: 1px solid #ccc;margin:5px;padding: 1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}


Bước 3: Vào blogger → Bố cục → Thêm một widget HTML/Javascript mới sau đó dán vào phần nội dung code bên dưới rồi lưu lại để hoàn thành thủ thuật


<script src="http://dl.dropbox.com/u/66348944/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Thủ Thuật Blogspot"; //Tên nhãn
home_page = "http://bittuot.blogspot.com/";// Link blog của bạn
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Blogspot</h3><div id="rc-posts-loading"><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9WJ5kFOUTD1bgfhyphenhyphen6XSTrdCDI1UwV3QxYk4idOzo2hwrEnSimqE8YLxVDn29N99_5X7knTx5J60N5VvanSgyCVkJFTBybtoMsFCg6aGF9v_5nGgnt0AGZ4-E8ciQS8A_n1wrYlORkMATj/s1600/loading.gif'/></div>
<script src="http://dl.dropbox.com/u/66348944/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Chú ý: 

• Thay đổi những thông số sao cho phù hợp với blog của bạn
• Download 2 file .js về để sử dụng lâu dài
• Bạn hãy dựa theo hướng dẫn của bài viết này để tự tạo cho mình một style riêng nhé!

Nguồn: Fandung.blogspot.com

Đừng quên nhấn LIKE và Chia Sẻ để ủng hộ Bít Tuốt nếu bài viết có ích !

Tài liệu tham khảo thêm

6 Stylish recent post widgets thiết kế blogger - Blogspot

Thêm tiện ích bài viết gần đây (Recent Posts) dạng trượt ngang cho Blogspot Version 1

Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery
Tiện ích bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net
Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển

Tiện ích Bài viết mới nhất có ảnh đại diện bản full

[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1
Tiêu đề bài đăng mới với hiệu ứng chạy ngang
Tạo recent post theo dạng hình ảnh 3 cột cho blogger

Tạo Recent Posts có hiệu ứng load đổi bài viết liên tục dành cho Blogspot

BÀI VIẾT THEO NHÃN HIỂN THỊ DẠNG TIN TỨC Ở TRANG CHỦ
Thêm bài viết mới nhất và các bài viết cũ hơn cho nhãn và bài viết
Widget bài viết mới theo nhãn hiển thị hai cột có ảnh cho blogspot

Tooltips Recent Post Widget For Blogger With Thumbnail

New and Flexible Recent Posts Widget With Thumbnail for Blogger
Cách tạo tab widget bài viết mới nhất theo từng label blogspot
Widget bài viết mới với hiệu ứng load bài viết liên tục cho Blogspot

Slider bài mới nhất trượt ngang với thumbnail ảnh cho blogspot

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot
Retrieving Recent Posts Titles
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot

Slide tab recent Post (Jquery)

Slider Carousel - Thủ thuật bài viết kiểu Slider trượt ngang cho Blogger
Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot

Bài viết mới nhất cuộn lên với Jquery cho Blogspot

Slider bar - Dạng bài đăng trượt ngang
Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện
Recent Posts với Thumbnails Widget cho một Blogger / Blogspot
Recent Posts - Thủ thuật tạo bài viết mới nhất giống trang báo chí cho Blogger
Tiện ích Recent post(Bài viết mới) thông minh cho Blogger
Kiểu cách Animated Blogger dành cho Recent Posts Widget

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..