Hướng dẫn thiết kế bài viết theo phong cách E-magazine trong Blogspot

Trong bài viết E-magazine: Xu hướng phát triển tất yếu của báo điện tử ngày nay nếu bạn đã đọc qua bạn có thể thấy tầm quan trọng của bài báo được thiết kế theo dạng này. Thông thường đây là bài viết chuyên sâu dài mỗi tuần hoặc mỗi tháng mới được xuất bản một bài do yếu tếu thiết kế cầu kỳ mất nhiều thời gian...

Hiện nay đa số các trang báo mạng dạng tin tức đều sử dụng dạng bài này như Zing, Kênh 14, SaoStart, Ngôi Sao.... Áp dụng vào nền tảng Blogspot nếu Blog của bạn cũng viết về chủ đề tin tức thì bạn có thể thiết kế bài viết theo phong cách E-magazine.

Bài này mình chỉ giới thiệu qua sơ lược về cách thực hiện còn thiết kế tùy theo sở thích của mỗi người mà có cách thiết kế khác nhau. Trước tiên bạn cần phân loại trong bài viết được chia ra các mục

+ Đoạn văn bản chữ viết
+ Ảnh, Video, Âm thanh...

Ảnh là yếu tố quan trọng hàng đầu đòi hỏi phải có kỹ thuật đồ họa như ghép ảnh, lồng text, hiệu ứng làm nổi bật bài báo và lưu ý ảnh phải đặt kích thước chuẩn trước khi up ảnh lên bài viết.

Phần thiết kế bài viết phần chữ mỗi đoạn văn bản khi ngắt dòng phải được đặt trong cặp thẻ <p>...</p> và không sử dụng thẻ <br /> ngắt dòng. Với ảnh tùy vào kích thước độ rộng của ảnh có thể xếp ảnh ngay giữa hoặc nếu độ cao lơn hơn độ rộng sắp xếp bên trái hoặc bên phải.

Đặt style bài viết có thể đặt trước tiếp trong bài viết ở cuối bài hoặc có thể đặt trong mẫu sử dụng điều kiện. Nếu đặt style trong mẫu sử dụng 2 điều kiện sau:

+ Nếu đặt style trên </head> sử dụng điều kiện Url

Copy

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "url 1" or data:blog.url == data:blog.canonicalHomepageUrl + "url 2" or data:blog.url == data:blog.canonicalHomepageUrl + "url 3" or data:blog.url == data:blog.canonicalHomepageUrl + "url n"'>

<style>

// CSS

</style>

</b:if>

Trong đó url 1, url 2,..url n là các Url bài viết ví dụ 2018/06/e-magazine-xu-huong-phat-trien-tat-yeu-cua-bao-dien-tu-ngay-nay.html

+ Nếu sử dụng điều kiện post.ID phải đặt điều kiện trong widget Blog1

Copy

<b:if cond='data:post.id == "postID 1" or 'data:post.id == "postID 2" or 'data:post.id == "postID n"'>

<style>

// CSS

</style>

</b:if>

Trong đó postID 1, postID 2,...postID n là ID bài viết mà khi soạn bài ID nằm trên địa chỉ trình duyệt ví dụ: 2491374523349314254

Một điều lưu ý vì dạng bài magazine chỉ hiển thị trên màn hình lớn không sử dụng cho di động nên đặt css trong màn hình ví dụ nhỏ nhất 860x nên các có thể viết css như sau:

Copy

<style>

@media (min-width:860px){

//CSS

}

</style>

Ví dụ minh họa về mẫu bài viết:

Copy

@media screen and (min-width:860px){

body{background-color: #fff;}

.main-wrapper{background:unset;border: none;}

.box{float:none;width:100%}

#container,.main,.post-body{padding:0}

#taskbar,#header-wrapper,.printBtn,.breadcrumbs,.knc-menu-nav,.klw-new-content .related-post,.sidebar-wrapper{display:none}

.kbwc-header,.klw-new-content{max-width:660px;margin:15px auto 0}

.post-meta{font-family:Arial;display:block;font-size:16px}

.post-metaDescription{font-family:Arial;font-size: 18px;line-height: 1.5;margin-bottom: 20px;padding:0}

.post-body .article-title{font-family: Arial;font-size:28px;line-height:1.3;font-weight: bold;text-align: center}

.post-body .separator {margin:auto}

.post-body .fullscreen {max-width:1600px}

.post-body .title {max-width:660px}

.post-body .item {max-width:980px}

.post-body .tr-caption{background:unset;padding:10px 0}

.post-body .right{float:right;width:50%}

.post-body .right img{max-width:350px;margin:0 -50px 0 20px}

.post-body .left {float:left}

.post-body .left img{max-width:350px;margin:0 20px 0 220px}

.post-body .item .tr-caption{float:left;max-width:300px;margin:0 -50px 0 40px;background:unset;padding:8px 0}

.post-body blockquote{max-width:660px;border-left:5px solid #ccc;padding-left:20px;margin:20px auto;font-size:24px;margin-bottom:5px;font-weight:bold;line-height:1.42857}

.post-body blockquote b{color:#8c8c8c;font-size:19px;font-weight:400;line-height:1.618}

.fb-comments,.lien-quan{max-width:660px;margin:0 auto}

#related-posts{max-width:1000px;margin:0 auto}

#related-posts h3{text-align:center;padding:30px 0;color:#222;font-size:27px;font-family:Arial;font-weight:normal}

#related-posts .related_img{height:200px}

.lien-quan{display:block;margin-top:20px}

.social-sharing-widgets{max-width:660px;margin:auto;padding:25px 0 15px 0}

.keywords{max-width:660px;margin:0 auto}

}

.post-body p{font-family:Arial;font-size:18px;line-height:1.5;padding:0;max-width:660px;margin:20px auto}

.post-body img{max-width:unset}

</style>

Nội dung chính