Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi khanhhlu, 14/1/15.

Lượt xem: 2,907

  1. khanhhlu Mới đăng kí

    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ẻ ]]></b:-skin> và lưu lại mấu.
    Style 1: Style Post with Round Thumbnail On The Left:

    [​IMG]


    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:

    [​IMG]
    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)
    [​IMG]

    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/

    Chỉnh sửa lần cuối: 11/8/15
  2. Làm mấy trò câu view lẻ tẻ này bị ban là phải rồi

Ủng hộ diễn đàn