<b:widget [các thuộc tính] />trở thành
<b:widget [các thuộc tính]>Lưu ý là giữa 2 thẻ <b:widget> và </b:widget> có thể chứa nhiều nhóm <b:includable> và </b:includable>
<b:includable>
...
</b:includable>
</b:widget>
.boxhome{width:700px}Lưu ý:
.boxhome ul {margin:0; padding:0}
.box1{overflow:hidden;}
.box1-left{width:380px; float:left; height:400px; border-right:1px solid #777; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:250px; width:380px}
.box1-right{height:49px; width:279px; float:right; padding: 10px; line-height:23px; border-bottom:1px solid #777; }
.box2-right:hover, .box1-right:hover {background:#999}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:49px; width:72px; margin-right:10px}
.box2{margin-top:10px; overflow:hidden}
.box2-left{width:380px; float:left; height:140px; padding:10px; border-right:1px solid #777; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:29px; width:289px; float:right; border-bottom:1px solid #777; padding:5px; line-height:15px;}
.box2-right img {float:left; height:29px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu li:first-child a::after{border-left-color: #888;}
.menu li:first-child a:hover{background:#444; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #444;}
.menu a:hover{background: #aaa;}
.menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #aaa;}
Mặc định box này được đặt trong class boxhome có chiều rộng 700px. Bạn cần thay đổi chiều rộng này lại cho phù hợp với mẫu template trên blog của bạn.2. Chèn đoạn code sau phía trên thẻ </head>
Ở bước 1 mình đánh dấu các đoạn code màu đỏ là chiều rộng của các thành phần bạn thay đổi lại cho phù hợp với blog của bạn.
Nếu có chổ nào không hiểu bạn để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể.
<b:if cond='data:blog.url == data:blog.homepageUrl'>imgr: link ảnh thumbnail mặc đinh cho những bài viết không có ảnh.
<script type='text/javascript'>
var imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"],
summary_post_box1 = 300,
summary_title_box1 = 0,
summary_post_box2 = 280,
summary_title_box2 = 0;
</script>
<script src='http://rumfyblog.googlecode.com/files/post_homepage_fix.js' type='text/javascript'/>
<style type='text/css'>
.main.section {display:none}
</style>
</b:if>
<b:section class='mainpost' id='mainpost' showaddelement='no'>Chèn đoạn code sau phía trên đoạn code vừa tìm được.
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='boxhome'>Trong đoạn code trên mình tạo 1 box lớn là Box1 (hiển thị các bài viết mới nhất) và 2 box con là Box2 cho 2 chuyên mục). Đề tạo thêm các chuyên mục bạn tạo thêm các mục box2 là được.
<div class='box1'>
<script src='/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=box1'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='http://template.voquocan.com/'>Blogger Template</a></li>
<li><a href='http://template.voquocan.com/p/magazine-template.html'>Magazine Template</a></li>
<li><a href='http://template.voquocan.com/p/shopping-template.html'>Shopping Template</a></li>
<li><a href='http://template.voquocan.com/p/movie-template.html'>Movie Tempalte</a></li>
</ul>
<script src='/feeds/posts/default/-/Label1?max-results=5&orderby=published&alt=json-in-script&callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='http://www.voquocan.com/'>Thủ Thuật Blog</a></li>
<li><a href='http://www.voquocan.com/search/label/Blogger?max-results=5'>Blogger</a></li>
<li><a href='http://www.voquocan.com/search/label/css-html?max-results=5'>CSS - HTML</a></li>
<li><a href='http://www.voquocan.com/search/label/Tổng Hợp?max-results=5'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-/Label2?max-results=5&orderby=published&alt=json-in-script&callback=box2'/>
<div style='clear:both;'/>
</div>
</div></b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
</b:if>
</b:loop>
</div>
<b:else/>
<div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a href='#'><span> Unlabelled</span></a>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageName == ""'>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
<a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
/* Breadcrumbs6. Lưu lại là xong!
---------------------------------------------------------*/
.breadcrumbs {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84wA9JJfPn2_ZuIAyue7IRcph22Y682yNAhWhFR6IbOtb_mRSVeuvS4cYzuSLV7Y5cERteP-wibTjnYZdXPRV1pPGmYG7_XcrXygl3_sMHp9bjnQ4F9VcMmk4rqQyLD5K2TJ6gZi1GTQ/s1600/breadcrumbs_bg.png") repeat scroll 0 0 transparent;
list-style: none;
margin-bottom: 10px;
}
.breadcrumbs a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84wA9JJfPn2_ZuIAyue7IRcph22Y682yNAhWhFR6IbOtb_mRSVeuvS4cYzuSLV7Y5cERteP-wibTjnYZdXPRV1pPGmYG7_XcrXygl3_sMHp9bjnQ4F9VcMmk4rqQyLD5K2TJ6gZi1GTQ/s1600/breadcrumbs_bg.png");
background-position: 100% 0;
background-repeat: no-repeat;
color: #666666;
display: inline-block;
font-size: 12px;
height: 29px;
line-height: 29px;
margin-right: -20px;
padding: 0 25px;
position: relative;
text-decoration: none;
vertical-align: top;
z-index: 1;
}
.breadcrumbs a:hover {
background-position: 100% -48px;
color: #333;
}
.breadcrumbs .first , .breadcrumbs .first:hover {z-index: 30 !important;}
.breadcrumbs .first span {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84wA9JJfPn2_ZuIAyue7IRcph22Y682yNAhWhFR6IbOtb_mRSVeuvS4cYzuSLV7Y5cERteP-wibTjnYZdXPRV1pPGmYG7_XcrXygl3_sMHp9bjnQ4F9VcMmk4rqQyLD5K2TJ6gZi1GTQ/s1600/breadcrumbs_bg.png");
display: inline-block;
height: 29px;
margin-left: -25px;
padding-left: 12px;
z-index: 12 !important;
}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
background-position: 0 -48px;
color: #333;
}
.breadcrumbs a:nth-child(3) {z-index:28 !important;}
.breadcrumbs a:nth-child(4) {z-index:27 !important;}
.breadcrumbs a:nth-child(5) {z-index:26 !important;}
.breadcrumbs a:nth-child(6) {z-index:25 !important;}
.breadcrumbs a:nth-child(7) {z-index:24 !important;}
.breadcrumbs a:nth-child(8) {z-index:23 !important;}
.breadcrumbs a:nth-child(9) {z-index:22 !important;}
.breadcrumbs a:nth-child(10) {z-index:21 !important;}
.breadcrumbs a:nth-child(11) {z-index:20 !important;}
.breadcrumbs a:nth-child(12) {z-index:19 !important;}
.breadcrumbs a:nth-child(13) {z-index:18 !important;}
.status-msg-wrap{
display:none;
}
<b:if cond='data:navMessage'>> Xong!
<div class='status-msg-wrap' style='width:100%'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
<b:if cond='data:navMessage'>Bằng đoạn code dưới đây:
<div class='status-msg-wrap' style='width:100%'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
<b:if cond='data:navMessage'>Lưu lại là xong. Vấn đề của bạn đã được giải quyết.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "archive"'>
<div class='status-msg-wrap' style='width:100%'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</b:if>
.post img {Bạn có thể sửa lại giá trị của max-width và max-height cho phù hợp với blog của bạn. Còn nếu bạn muốn hình ảnh của bạn khi hiển thị ra có kích thước cố định là 500x400 thì các bạn để đoạn code sau
max-width:500px; /* Chiều rộng lớn nhất của ảnh */
max-height:400px; /* Chiều cao lớn nhất của ảnh */
}
.post img {Hoặc nếu bạn chỉ muốn resize cái ảnh nào có chiều rộng quá lớn thì chỉ cần để 1 giá trị là max-width hoặc width.
width:500px; /* Chiều rộng của ảnh */
height:400px; /* Chiều cao của ảnh */
}
.post img {hoặc
max-width:500px; /* Chiều rộng lớn nhất của ảnh */
}
.post img {Cái khác nhau giữa max-width và width ở đây là:
width:500px; /* Chiều rộng của ảnh */
}
<script type="text/javascript">Chèn đoạn code trên vào trước thẻ </head> là được. Các tham số tuỳ biến có ý nghĩa như sau:
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 90,
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0UUj2HrYF0HqixsTZLbRwotkpq-ZVj33f_ZrDv91rT5l6ONF4bl2rhrH1-TgpgfxZPIPxgEMMsF0w-J0Enw3gCoihitjuHn4miVYiDFWTxooNUPlMozda5lIovLXMC0cYRtxtzb5tyU/s1600/no-thumb.jpg',
words: 65,
wordsNoImg: 80,
skip: 0,
showHome: true,
showLabel: true
};
</script>
<script type="text/javascript" src="http://rumfyblog.googlecode.com/files/summary.rm.test.js"></script>
<data:post.body/>sửa thành:
<span expr:id='data:post.id'><data:post.body/></span>Sau khi cài đặt, các bạn hãy thử nghiệm thay đổi giá trị của các tùy chọn trên cho phù hợp với blog của mình.
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
</b:if>
</b:if>
.post-thumbnail{float:left;margin-right:20px}2. Hiển thị hình ảnh bên phải: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin>:
.post-thumbnail{float:right;margin-left:20px}
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4g09pL4orsvFoCVmsMSAd23ff_D9X3N7irYiRG337GqK0BggeHQM8FANzPWpdFuojcUX1KpCxDvfAM5_KU_k3LilLdHHRgUlHhPj8_CgYrHn7EWcNVRN6ATNdiBS-l16yXk_vlYd-lOT-/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4g09pL4orsvFoCVmsMSAd23ff_D9X3N7irYiRG337GqK0BggeHQM8FANzPWpdFuojcUX1KpCxDvfAM5_KU_k3LilLdHHRgUlHhPj8_CgYrHn7EWcNVRN6ATNdiBS-l16yXk_vlYd-lOT-/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4g09pL4orsvFoCVmsMSAd23ff_D9X3N7irYiRG337GqK0BggeHQM8FANzPWpdFuojcUX1KpCxDvfAM5_KU_k3LilLdHHRgUlHhPj8_CgYrHn7EWcNVRN6ATNdiBS-l16yXk_vlYd-lOT-/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}- Thay float:left; thành float:right; nếu muốn nó hiển thị bên phải
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<b:if cond='data:blog.pageType != "item"'>Xong. Giờ hãy vào blog của bạn để xem thành quả nhé. Chúc bạn thành công!
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>