kynangblogBài viết liên quan - Tiện ích Magazine Recent Posts cho Blogger

Tiếp tục chủ đề tạo tiện ích Recent Posts cho Blogger, bài viết này iTechPlus sẽ tổng hợp những style Recent Posts đẹp mắt mang phong cách báo chí, được phát triển bởi Fandung – một blogger trẻ tiềm năng trong giới Blogger Việt Nam.

Do Fandung phát triển nhiều Style cho tiện ích Magazine Recent Post, nên namkna sẽ giới thiệu từng Style một, update thường xuyên ( cho đến hết ), và nếu các bạn biết thêm một style nào khác ( của tác giả khác ) vui lòng để lại comment bên dưới để chúng ta cùng trao đổi và học hỏi nhé !

Style 1 : Recent Post theo Label ở Homepage

Recent Post theo Label ở Homepage - Tiện ích Magazine Recent Posts cho Blogger - by: http://namkna.blogspot.com/

Hình minh họa | Xem DEMO

Thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<style type="text/css">    
#cotent-news {     
border:#999 solid 1px;     
width: 650px;      }     
#top-news {     
width: 440px;      
height:166px;       padding:5px;     
border:#bbb solid 1px;     
background:#eee;     
font-size:12px;     
}     
#bottom-news {     
width: 444px;      padding:5px;     
}     
#bottom-news-item {     
width: 106px;     
margin-right:5px;     
float:left;     
}     
#left-news {   
width: 200 px;  
padding:5px;     
border-left:2px dotted #ccc;     
}     
</style>     
<script language="JavaScript">     
imgr = new Array();     
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij3eUGaKUBe3hZaML3_yt78PdyUTcNCuq8uoh0hClB64IjY9vIeIOpiCCN4jrPcB5alRMEjhkA7NgA1aeSB2c5UQn7XMIrPRmpj7Us8r9D8EiJNaywqW8qlld6-r1yOr8xUMssEhjgQy4-/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";     
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4F_-05JfizVByefuCEo1r9ucgoHxp_CRYF3Vq-gZjMiTp8Da1qwT4zPxN-Hr6bkTAxxMM_3-TSzd5aLTM26g5tt_tRsV4SgM3YEKybzKbqsR1VaCXR9YIIDE3VW65r6L6fu3T303WhQa9/s1600/icom-left-news-namkna-ngoctra.gif";     
showRandomImg = true;     
topwidth = 160;      
topheight = 160;     
botheight = 100;      
botwidth = 100;     
fntsize = 12;     
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"     
acolor = "#555";     
cmcolor = "#555";     
topcolor = "#f00";     
aBold = true;     
text = "comments";     
showPostDate = true;     
summaryPost = 250;     
summaryFontsize = 12;     
summaryColor = "#000";     
botnum = 4;     
numposts = 14;     
label = "Phim";      home_page = "http://namkna.blogspot.com/";     
</script>     
<script
 
src="https://sites.google.com/site/namknablog/vne-recent-adv.txt"
 type="text/javascript"></script>

* Trong đoạn code trên :

width: 650px; : chiều rộng của widget
botnum = 4; : số bài viết hiển thị ở class bottom-news
numposts = 14; : số bài viết hiển thị ở class left-news
label = "Phim"; : nhãn/ trương mục ( Label ) sẽ được hiển thị lưu ya nhãn này phải ghi chính xác nếu không xẽ không hiển thị)

Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget :

Bấm vào hình để phóng to

* Cách tính chiều rộng :

bottom-news = 4x(botwidth + 2px + 4px) + 4x5px = 444px
bottom-news-item = botwidth + 2px + 4px = 106px

Các bạn nên để nó trên phần bài đăng của blog và tham khảo cách chỉ để Widget ở trang chủ TẠI ĐÂY

* Nếu bạn muốn widget hiển thị những bài mới nhất trên blog thì thay code

https://sites.google.com/site/namknablog/vne-recent-adv.txt

Thành >>>

https://sites.google.com/site/namknablog/vne-recent-adv-all-posts.txt

Chú ý: bạn nên Download 2 File .TXT trên về TẠI ĐÂY và Upload lên Host riêng để tránh bị Die host

Style 2 : Recent Post mang phong cách VNExpress

Demo for Post

Recent Post mang phong cách VNExpress - Tiện ích Magazine Recent Posts cho Blogger - by: http://namkna.blogspot.com/

Thực hiện :

1. Vào Thiết kế > Chình sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type='text/css'>    
.fl {float:left;}     
.fr {float:right;}     
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}     
.folder-content {background-color:#ffffff;}     
.other-folder {width:100%;}     
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}     
.folder, .folder-title, .folder-bottom {width:500px;}     
.folder-bottom
 {background:#f5f5f6 
url(&#39;http://vnexpress.net/Images/Background/bg_vne.gif&#39;)
 repeat-x 0px -73px;}     
.folder {margin-bottom:5px;}     
.folder-title {height: 21px;}     
.folder-active, .subfolder {height: 17px;}     
.folder-title
 {font:11px arial; color:#868d9d; background:#f5f5f6 
url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;)
 repeat-x scroll 0px 0px;}     
.folder-active {padding: 2px 9px; 
background:#f5f5f6 
url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;)
 repeat-x 0px -23px;}     
.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}     
.folder-bottom {height:5px;}     
.folder-topnews {width:298px; padding-right:20px;}     
.folder-othernews {width:160px;}     
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}     
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}     
.subfolder {padding: 3px 5px 1px;}     
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}     
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}     
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}     
.link-title:visited {color:#004080;}     
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}     
.link-othernews:visited {color:#004080;}     
.link-othernews:hover {text-decoration:underline;}     
.folder-content p{margin-top:0px;margin-bottom:4px;}     
.folder-content ul {list-style:none;margin:0;padding:0;}     
.folder-content li {     
padding-left:6px;     
background-image:url(&#39;http://vnexpress.net/Images/Background/black-square.gif&#39;);
 background-repeat:no-repeat;     
background-position: 0 7px;     
}     
.other-folder {margin-bottom:5px;}     
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}     
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}     
.folder-activeleft{width:2px;
 height:21px; background:#f4f5f6 
url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;)
 no-repeat -5px -0px;}     
.folder-activeright{width:2px; 
height:21px; background:#f4f5f6 
url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;)
 no-repeat -5px -23px;}     
.Lead1 { font-family: &#39;Arial&#39;; font-size: 11px; color: #919090; font-weight: bold }     
</style>     
&lt;script type=&#39;text/javascript&#39;&gt;     
rdlabels = new Array(3);     
//Nhãn thứ 1 : Kiến thức căn bản     
rdlabels[0] = &quot;\&lt;script\&gt;label = &#39;OSystemK&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 2 : Thủ thuật     
rdlabels[1] = &quot;\&lt;script\&gt;label = &#39;OSystemT&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 3 : Phần mềm     
rdlabels[2] = &quot;\&lt;script\&gt;label = &#39;Download&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 4 : Phần mềm bản quyền     
rdlabels[3] = &quot;\&lt;script\&gt;label = &#39;License&#39;\;\&lt;/script\&gt;&quot;;     
index = Math.floor(Math.random() * rdlabels.length);     
&lt;/script&gt;

3. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<div class="folder">    
<div class="folder-title">     
<div class="folder-activeleft fl"></div>     
<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div>     
<div class="folder-activeright fl"></div>     
<div class="subfolder fl">     
<a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemK?max-results=10">Kiến thức</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemT?max-results=10">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?max-results=10">Phần mềm</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/License?max-results=10">Free License</a>     
</div>     
<div class="folder-titleright fr"></div>     
</div>     
<div class="folder-content" id="tdHomeFolder2">     
<script type="text/javascript">     
document.write(rdlabels[index]);     
</script>     
<script language="JavaScript">     
imgr = new Array();     
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";     
showRandomImg = true;     
aBold = false;     
summaryPost = 247;     
sumPost = 147;     
numposts = 6;     
home_page = "http://www.itechplus.info/";     
</script>     
<script
 
src="https://sites.google.com/site/itechroot/javascripts/VnE-recent.txt"
 type="text/javascript"></script>     
</div>     
<div class="folder-bottom"></div>     
</div>

Bạn nên Download File TXT TẠI ĐÂY và File ảnh về Upload lên Host riêng
Trong 2 đoạn code trên :

width:500px; : chiều rộng của cả widget
width:478px; : chiều rộng phần nội dung widget
width:298px; : chiều rộng phần nội dung bên trái
width:160px; : chiều rộng phần nội dung bên phải
height:100px; : chiều rộng ảnh bài viết mới nhất
width:53px; height:53px; : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải
rdlabels[x] : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.
summaryPost = 247; : số ký tự đoạn mô tả bài viết chính
sumPost = 147; : số ký tự tiêu đề bài viết
numposts = 6; : tổng số bài viết được hiển thị trên mỗi widget

Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :

Bấm vào hình để phóng to | Xem DEMO

Style 3 : Recent Post mang phong cách Quantrimang

Demo for Post

Thực hiện : xem Tại đây

1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :

<style type="text/css">      
.wbox {background-color:#ffffff;width:auto;height:auto;}       
.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}       
.wbox .tl {       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;       
    padding-left:3px;       
}       
.wbox .tr {       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;       
    padding-right:3px;       
}       
.wbox .tc {       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;       
    height:23px;       
    color:#246296;       
    font-size:12px;       
    text-transform:uppercase;       
    font-weight:bold;       
    padding-top:5px;       
    padding-left:7px;       
}       
.wbox .tc a {text-decoration:none;color:#246296;}       
.wbox .ml {       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;       
    padding-left:3px;       
}       
.wbox .mr       
{       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;       
    padding-right:3px;       
}       
.wbox .mc {background-color:#FFFFFF;}       
.wbox .bl       
{       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;       
    padding-left:3px;       
    height:5px;       
}       
.wbox .br       
{       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;       
    height:5px;       
    padding-right:3px;       
}       
.wbox .bc       
{       
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;       
    height:5px;       
    font-size:0;       
    line-height:5px;       
}       
.Tin_lienquan ul,.Tin_lienquan li {list-style:none}       
.Title_article {       
    color:#246296;       
    font-size:12px;       
    font-weight:bold;       
    padding-top:10px;       
    padding-bottom:10px;       
    padding-left:5px;       
}       
.Title_article {text-decoration:none;color:#246296;}       
.Title_article a {text-decoration:none;color:#303030;}       
.Title_article a:hover {color:#990000;  text-decoration:none;}       
.imgModule {padding-left:5px;}       
.imgModule img {width:120px; margin-right:5px;}       
.imgModule a {text-decoration:none;}       
.Tin_lienquan {       
    color:#797979;       
    font-size:11px;       
    padding-top:15px;       
    font-family:Tahoma;       
    padding-left:5px;       
}       
.Tin_lienquan a {text-decoration:none;  color:#004784;}       
.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}       
</style>       
      <script type="text/javascript">       
                  home_page = "http://itechplus.info/";       
                  label = "Office";       
                  numposts = 6;       
              list1 = 1;       
                  sumPosts = 268;       
              mode = "label";       
      </script>       
<div class="wbox Cat">       
<!-- Header widget -->       
<div class="tl"><div class="tr"><div class="tc"><a href="http://itechplus.info/search/label/Office">Tin học văn phòng</a></div></div></div>       
<!-- END Header widget -->       
    <div class="ml">       
        <div class="mr">       
            <div class="mc">       
<!-- noi dung cua tien ich -->       
    <script type="text/javascript" src="https://sites.google.com/site/itechroot/javascripts/rc-post-qmt.txt"></script>       
<!-- END noi dung cua tien ich -->       
            </div>       
        </div>       
    </div>       
<!-- Footer widget -->       
    <div class="bl"><div class="br"><div class="bc"></div></div></div>       
<!-- END footer widget -->       
</div>

Thay đoạn code in đậm cho phù hợp với Blog bạn,
cần lưu ý : nên Download File .TxT về và upload lên Host riêng để lấy linh

- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn

- mode :

mode=”label” : áp dụng cho Label
mode=”blog” : áp dụng cho cả Blog

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

Chủ đề:

KỸ NĂNG BLOG

23 tháng 6, 2012

Bài viết liên quan - Tiện ích Magazine Recent Posts cho Blogger

0 nhận xét:

Đăng nhận xét

Về đầu trang

TÌM KIẾM MỘT CHÚT IN 1000 BÀI

Auto reload

Featured Video

Xem nhiều tuần qua

Lưu trữ Blog

Time

Slide show

Online

Online

LIÊN KẾT BẠN BÈ

Người theo dõi

Đến tuần

Liên kết