Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Wednesday, March 5, 2014

widget hay cho blog
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 tooltipmô 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:


widget bài viết mới theo nhãn

Cách làm:

1. Đăng nhập vào blog
2. Chọn Mẫu
3. Chọn Chỉnh sửa HTML
4. Dãn trước thẻ ]]></b:skin> đoạn mã sau:

/*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://lh5.googleusercontent.com/-SX38Jpw5tnU/UxVwp04Ds-I/AAAAAAAALec/rrzOhghDCP4/s1600/mmoforfun-blogspot-com.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;}

5. Lưu mẫu.
6. 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="https://googledrive.com/host/0Bz_65BAr9KCZS2ppVjQtTTJyLUU" 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://thegioiblogs.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='http://1.bp.blogspot.com/-PDG6t2PnV94/UQPNQUyEBKI/AAAAAAAAKHM/6j7xQg6yw3I/s1600/loading.gif'/></div>
<script src="https://googledrive.com/host/0Bz_65BAr9KCZVmI1OEpuVXRQa1E" type="text/javascript"></script>
</div>

Lưu ý:
- 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:

0 comments:

Post a Comment

Popular Posts