Hướng dẫn thiết kế style bài viết Blogger giống các blog Indonesia

Thực sự thì thủ thuật bloging rất thích phong cách thiết kế blog của các blogger Indonexia, Template của họ thiết kế chuẩn seo và chuẩn w3c lại còn rất đẹp nữa, nhất là phầnblog1. Hôm nay mình sẽ hướng dẫn các bạn thiết kế blog1 lại cho đẹp.

Các bạn thực hiện thủ thuật làm đẹp blog 1 theo các bước sau:
B1: Tìm đoạn code sau:
<b:includable id='post' var='post'>
và thay toàn bộ đoạn code <B: includable id = 'post' var = 'post'> ... </b:includable> bằng đoạn code dưới đây:

Code:

<b:includable id='post' var='post'>
  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>    <b:if cond='data:blog.pageType != &quot;item&quot;'>      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>        <div class='blogger-post-part blogger-post-thumbnail-area'>          <b:if cond='data:post.thumbnailUrl'>            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>          </b:if>        </div>      </b:if>    </b:if>
    <div class='blogger-post-part blogger-post-body-area'>
      <h3 class='blogger-post-title'>        <b:if cond='data:post.title'>          <b:if cond='data:post.link'>            <a expr:href='data:post.link'><data:post.title/></a>          <b:else/>            <b:if cond='data:post.url'>              <b:if cond='data:blog.url != data:post.url'>                <a expr:href='data:post.url'><data:post.title/></a>              <b:else/>                <data:post.title/>              </b:if>            <b:else/>              <data:post.title/>            </b:if>          </b:if>        <b:else/>          [Untitled]        </b:if>      </h3>
      <div class='blogger-post-body'>        <b:if cond='data:blog.pageType == &quot;item&quot;'>          <data:post.body/>        <b:else/>          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>            <data:post.body/>          <b:else/>            <b:if cond='data:post.snippet'>              <data:post.snippet/>            <b:else/>              No content.            </b:if>          </b:if>        </b:if>      </div>
      <footer class='blogger-post-footer'>        <div class='blogger-post-footer-line blogger-post-footer-line-1'>          <span class='blogger-post-author vcard'>            <b:if cond='data:top.showAuthor'>              <data:top.authorLabel/> <span class='fn'>              <b:if cond='data:post.authorProfileUrl'>                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>              <b:else/>                <span class='g-profile'><data:post.author/></span>              </b:if>              </span>            </b:if>          </span> <span class='blogger-post-timestamp'>          <b:if cond='data:top.showTimestamp'>            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>          </b:if>          </span> <span class='blogger-post-comment-link'>          <b:if cond='data:blog.pageType != &quot;item&quot;'>            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>              <b:if cond='data:post.allowComments'>                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>              </b:if>            </b:if>          </b:if>          </span>        </div>         <div class='blogger-post-footer-line blogger-post-footer-line-2'>          <span class='blogger-post-labels'>            <b:if cond='data:post.labels'>              <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>              </b:loop>            </b:if>        <b:include data='post' name='postQuickEdit'/>          </span>        </div>      </footer>     </div>  </article></b:includable>

B2: chọn một phong cách mà bạn thích và đặt css của phong cách đó lên trước thẻ ]]></bkin> và lưu lại mấu.
Style 1: Style Post with Round Thumbnail On The Left:

Code:

.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}.blogger-post:after {  content:" "; display:block;clear:both;}.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}.blogger-post-title a{color: #888;}.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://4.bp.
	
blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:-static;}.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}.blogger-post-footer a {color: #888;}.blogger-post-item,.blogger-post-static_page {height:auto}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px}.icon-action {width: 10px;height:10px;}

Style 2: Thumbnails with Title and Post Summary on the right:

Code:

.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}.blogger-post:after { content:" "; display:block; clear:both;}.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}.blogger-post-title a{color: #888;}.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://4.bp.
	
blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:-static;}.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}.blogger-post-footer a {color: #888;}.blogger-post-item,.blogger-post-static_page {height:auto}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px}.icon-action {width: 10px;height:10px;}

Style 3: Blogger Posts Side by Side with Title and Summary Below Thumbnail (Newspaper Style Layout)

Code:

#blog-pager {clear: both;}.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}.blogger-post:after {  content:" ";  display:block;  clear:both;}.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}.blogger-post-title a{color: #777;}.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('https://4.bp.
	
blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:-static;}.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}.blogger-post-footer a{color: #888;}.blogger-post-item,.blogger-post-static_page {width:auto;}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px;}.icon-action {width: 10px;height:10px;}

Theo http://www.heartvietnam.news/​