Công cụ mình giới thiệu dưới đây giúp bạn tạo nhanh widget bài viết mới nhất cho blogspot, bạn cũng có thể tạo bài viết mới nhất theo nhãn cho blog. Ngoài ra còn có nhiều lựa chọn khác như hiển thị số comments cho một bài viết, hiển thị hình ảnh thu nhỏ, tùy chỉnh màu sắc của từng thành phần trong widget và một chức năng khác đang chờ bạn khám phá.
Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Tìm thẻ ]]></b:skin> (Nhấn F3 Hoặc Ctrl + F) và dán trước nó đoạn code bên dưới :
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #adadad;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;background:#fff;margin-right:10px;height:70px;width:70px}img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}.label_with_thumbs{float:left;width:400px;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#fae1fa;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}.label_with_thumbs a{color:#61d0ff;font-size:12pt;outline:0;text-decoration:none}.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#ff7b00}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}#mdjumplink a:hover{color:#888!important;text-decoration:none}#mdcomments{padding:6px 12px;background:#6bd3ff;color:#FFFFFF!important;font-size:13px;font-weight:800}#mdcomments:hover{background:#F4A557;text-decoration:none}Bước 4: Thêm widget HTML/Javascript mới vào vị trí bạn muốn hiển thị tiện ích Thống Kê Và Dán code bên dưới vào form HTML/Javascript nội dung :
<script type='text/javascript'>//<![CDATA[var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = false;var showpostsummary = false;var numchars = 80;//]]></script>
<script type="text/javascript" src="http://thanhxd1607.googlecode.com/svn/myfile/demo.recent.post.js"></script>
<script type="text/javascript" src="http://www.vietcons.info/feeds/posts/default/-/Thủ.Thuật.Blogspot?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript" src="http://www.vietcons.info/feeds/posts/default/-/Thủ.Thuật.Blogspot?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Bước 5 : Lưu lại và xem thành quả của bạn nhé.
- Chú ý: http://www.vietcons.info : Tên miền của bạn
Thủ.Thuật.Blogspot : Nhãn blogs của bạn
var numposts = 5 : Số bài hiển thị
var numchars = 80 : Số từ mô tả
Chúc bạn thành công.
Tổng hợp + Trollvl
No comments:
Post a Comment