--///quang cao tren bai viet ///----
Sau đây là cách hiển thị rất mới mẻ cho những ai dùng
blogspot bằng việc áp dụng
Responsive Css Timeline với hiệu ứng 3D cho bài viết trên trang
blogspot . Chúng ta sẽ có bài viết thể hiện trên trang home page như một dòng thời gian với hiệu ứng và hình ảnh rất đẹp mắt.
Các bạn có thể xem Demo tại đây:
Click Here Hướng Dẫn: Bước 1: Vào quản lý
blogger >
Template > Click vào
EDIT HTML
Bước 2: Click vào bất kỳ chỗ nào trong khung code template và nhấn tổ hợp phím Ctrl + F
Bước 3: Tìm thẻ </head> và thêm vào trước nó đoạn code sau:
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><ul class='timeline'><li class='event'><input checked='checked' name='tl-group' type='radio'/><label/><b:if cond='data:post.thumbnailUrl'><img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></b:if><div class='thumb'><b:if cond='data:post.dateHeader'><span><data:post.dateHeader/></span></b:if></div><div class='content-perspective'><div class='content'><div class='blog-post-body'><h3><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></h3><p><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><data:post.snippet/></b:if></b:if></p></div></div></div></li></ul></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> Bước 5: Lưu lại và chiêm ngưỡng nhé.Chú ý: bạn sẽ phải tùy chỉnh lại thông số để bài viết xuất hiện chuẩn theo yêu cầu. Tới phần Layout (Bố cục) sau đó edit phần Blog posts area (Bài đăng trên blog) theo như hình sau và lưu lại. Chúc các bạn thành công nhé !
0 comments