ADS alt và title image am-sieu-toc Bài Đăng Mẫu Bài Viết bep-hong-ngoai bep-tu Blogger Template Blogger Templates Blogspot Blogspot cơ bản Breadcrumb cay-nuoc-nong-lanh Chảo ceramic Chảo đáy từ Chảo thường chia sẻ templates Chuyên nghiệp Chữ đổi màu CNTT Code Đếm Blogspot Code Spam Comments Contact Form Coupon Công cụ web CSS Data den-suoi-nha-tam description Design Domain đồ gia dụng Ebook Ebook-SEO Facebook Giải Trí Giao diện bán hàng Giao Diện Blogspot Giao diện có phí Giao Diện Mobi Giao diện tin tức Google Adsense Hàng gia dụng HTML & CSS Hướng dẫn IFTTT Javascript jQuery Kéo Kho templates Kiếm tiền online Kiến thức Label Lập trình blogspot Lập Trình Web lo-nuong lo-vi-song Máy sấy quần áo may-hut-bui Mẹo vặt miễn phí Món ngon mô tả New Member Nghe Nhạc nhật kí template noi-ap-suat-dien Nồi p Photoshop PHP Popular Posts quat-suoi recent post Responsive SEO Bài Viết SEO Blogspot SEO On Page SEO Settings SEO-Blogspot Share Slide Slider Ảnh tabber Tap chi thiet ke web Tặng Template Bán Hàng Template Chuẩn SEO Template có phí tuyệt vời Template Free Template Responsive Template Tin Tức Template Video Template-Vip Templates In Ấn Thiet ke bammer Thiết Kế Template Thiết kế web Thủ Thuật Blogger (Blogspot) Thủ thuật blogspot Thủ thuật Facebook Thủ thuật máy tính Thủ thuật seo Thủ Thuật Youtube thumbnail Tin mới nhất - VnExpress RSS Tin tức Tivi Tooltip Tổng Bài Đăng. Tổng Hợp tu-dong tu-mat tu-say-quan-ao Vào bếp Video Hót Web Design Widget Wordpress-Series Xem Phim XML Xóa JS Mặc Định Blogspot Youtube

Bài đăng phổ biến hay còn gọi là Recent Posts thì hầu như Blogspot nào cũng có, nhưng đôi khi những template blogspot lại có Recent Posts mặc định thấy không vừa mắt cho lắm. Muốn thay đổi mà không biết làm cách nào, vì lẽ đó nên hôm nay Hồng Designer chia sẻ Bài viết phỏ biến 3 cột có thumbnail cho Blogspot đẹp.
Bài viết phỏ biến 3 cột có thumbnail cho Blogspot

Bài viết phổ biến 3 cột có thumbnail cho Blogspot

Các bạn vào Bố cục→Thêm tiệc ích HTML→Thêm đoạn code sau:
<style type="text/css">
#vanvietblog-rc-3cot {width:350px;}
table#vanvietblog-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:8px 0 2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px arial;}
#vanvietblog-rc-3cot h2 {background:#098047;
padding:5px 0 14px 15px;
font:bold 15px Arial;
margin:0px;
color:#fff;
text-align: center;
}
</style>
<script type="text/javascript">
home_page = "http://vanvietblog.blogspot.com/";
label = "Blogger";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "URL_ảnh";
showRandomImg = true;
</script>
<div id="vanvietblog-rc-3cot">
<h2>Blogger</h2>
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuSVh3anQyOFhEU28" type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px">Xem thêm về<a href="http://vanvietblog.blogspot.com/search/label/Blogger?&max-results=20"> Blogger»</a></p>
</div>

Trong đó các bạn cần phải chỉnh sửa những mục sau cho phù hợp. 

  • Home_page = "http://vanvietblog.blogspot.com/"; Thay http://vanvietblog.blogspot.com/ thành URL Blog của bạn.
  • Label = "Blogger"; Thay Blogger thành Label bạn muốn hiển thị
  • Numposts = 9; số bài viết hiển thị
  • SumTitle = 24; Kí tự của tiêu đề bài viết
  • #vanvietblog-rc-3cot {width:350px;} thay 350px thành độ rộng mà bạn muốn, nhờ đó mà bạn có thể đặt widget này bất cứ nơi nào trên Blog của mình.
  • Imgr[0] = "URL_ảnh"; Thêm Url ảnh mặc định đối với bài viết không có ảnh
  • Điều quan trọng: bạn hãy tải file này về up lên host riêng để sử dụng nhé! "https://www.googledrive.com/host/0B1EJGJ56bNPuSVh3anQyOFhEU28"
  • <p style="float:right;margin:0;padding:3px">Xem thêm về<a href="http://vanvietblog.blogspot.com/search/label/Blogger?&max-results=20"> Blogger»</a></p> Ở đoạn này, bạn thay Blogger thành nhãn hiển thị của widget để người đọc có thể xem thêm các bài viết từ nhãn đó.
Các bạn có thể tùy chỉnh giao diện cho bắt mắt hơn nhé, chúc các bạn thành công.

Đăng nhận xét

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.