[Blogger Tips] Tạo Recent Post cho Blogspot chuyên nghiệp, Chia sẻ code Recent Post RinBlog đang dùng.

Như tiêu đề đã đăng, tớ sẽ chia sẻ đoạn code mà tớ dùng để tạo widget recent post đang áp dụng cho RinBlog. Cách làm cực kỳ đơn giản và hoàn toàn không đụng tới code chính của template.

Bước 1: Các bạn vào trang quản trị blogger, tiếp đó vào trang blog của cácbạn.

Bước 2: Các bạn chọn Bố cục (layout) rồi sau đó chọn thêm tiện ích (Add widget)

Bước 3: Trong giao diện của sổ hiện ra các bạn chọn loại widget là HTML/JAVASCRIPT

Bước 4: Copy và paste toàn bộ đoạn code sau vào ô nội dung, ô tiêu đề các bạn có thể tùy chọn theo ý riêng của các bạn.

Code:

<style type="text/css">

/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;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:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#000000;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:normal;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:normal;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:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:normal}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style><script type="text/javascript" src="http://dl.dropboxusercontent.com/s/lvcqh2soqpa5tty/animated-recent-posts-ycode-5.js"></script>
<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 src='http://doanthieuda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

Hết code.
Trong đoạn code trên, các bạn tùy chỉnh như sau:

var numposts = 5;  ----------------------- 5 là số bài viết các bạn muốn hiển thị
var showpostthumbnails = true;  ---------- Hiện ảnh thu nhỏ: true là có, false là không hiện ảnh
var displaymore = true;  ------------------ Hiện nút đọc thêm (readmore), true là có, false là không hiện
var showcommentnum = true; ------------ Hiện số bình luận (comment), true là có, false là không hiện
var showpostdate = false; ---------------- Hiện ngày viết, true là có, false là không hiện
var showpostsummary = false; ----------- Hiện đoạn tóm tắt,  true là có, false là không hiện
var numchars = 80; ---------------------- 80 là số ký tự trong đoạn tóm tắt

http://doanthieuda.blogspot.com/ ---------Thay địa chỉ này bằng địa chỉ trang blogspot của các bạn.

Bước 5: Lưu lại và xem thành quả.

Chúc các bạn thành công

Category: Blogger tips, Blogger Widget, New