hoangraiper

Các bước thực thiện: 1 Đăng nhập vào tài khoản Blogger 2. Vào phần Mẫu (Template) 3. Chọn Chỉnh sửa HTML (Edit HTML) - Tiếp tục Để hiển thị bài viết theo kiểu trích ngang bạn phải thêm class post-thumbnail để hiển thị các hình ảnh Có các kiểu hiển thị hình ảnh như sau: Hình ảnh hiển thị bên trái: Thêm đoạn mã dưới đây vào bên trên thẻ

]]></b:skin>:
.post-thumbnail{float:left;margin-right:20px}

Hình ảnh hiển thị bên phải: Thêm đoạn mã dưới đây vào bên trên thẻ

 ]]></b:skin>:
.post-thumbnail{float:right;margin-left:20px}

4. Các kiểu hiển thị bài biết trong blogspot: .Hiển thị trích ngang và hình ảnh cho bài viết

Thay thế <data:post.body/> bằng đoạn mã dưới đây: 
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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>

.Hiển thị trích ngang và hình ảnh mặc định cho bài viết không có ảnh

<b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='data:post.hasJumpLink'>       <div class='jump-link'>        <a expr:href='data:post.url + &quot;#more&quot;' 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>

.Không hiển thị trích ngang với bài viết mới nhất Thay thế <> bằng đoạn mã dưới đây:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='data:post.hasJumpLink'>       <div class='jump-link'>        <a expr:href='data:post.url + &quot;#more&quot;' 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>

Hhiển thị ảnh mặc định cho bài viết không có ảnh, không hiển thị trích ngang với bài viết mới nhất: Thay thế <> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>   <b:if cond='data:blog.url == data:blog.homepageUrl'>    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>     <data:post.body/>      <b:if cond='data:post.hasJumpLink'>       <div class='jump-link'>        <a expr:href='data:post.url + &quot;#more&quot;' 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/AVvXsEgAJFu_stn8ZAcaQG0lCWuYCkhckq9jZsonswyClj739VLr_k8CcR-Jhc98aT0-2hesnm_MQCkckiWtRqy_UzN_hshssHJP6MN_IfG-L2EfifCMFsuBT3TfJlGWLGjipn5l2iNV_O3BfC8e/' 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/AVvXsEgAJFu_stn8ZAcaQG0lCWuYCkhckq9jZsonswyClj739VLr_k8CcR-Jhc98aT0-2hesnm_MQCkckiWtRqy_UzN_hshssHJP6MN_IfG-L2EfifCMFsuBT3TfJlGWLGjipn5l2iNV_O3BfC8e/' 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>