Bao gồm tùy chọn Bài đăng nổi bật trong Blogger giúp việc viết blog trở nên chuyên nghiệp và thiết thực hơn. Do đó, chúng tôi có thể giữ bài đăng dính hoặc được ghim để quảng cáo bài đăng cụ thể với tiêu đề, hình thu nhỏ, URL bài đăng như Wordpress hoặc nền tảng khác.
Theo mặc định, bố cục và thiết kế không quá phổ biến đối với tất cả mọi người. Chúng tôi cần tùy chỉnh bài đăng nổi bật và hướng dẫn này sẽ giúp bạn làm trong vài phút.
Để tùy chỉnh bài đăng nổi bật của bạn, hãy làm theo các bước dưới đây.
BƯỚC 1: TẠO MỘT PHẦN MỚI
Sẽ tốt hơn nếu tạo phần mới để thêm tiện ích Bài đăng nổi bật. Sau đó cố gắng tùy chỉnh sẽ có kết quả tốt hơn. Vì vậy, trước tiên hãy tạo một phần mới (Đề xuất: Trước phần chính). Dưới đây là hướng dẫn cách tạo phần mới trong mẫu Blogger.
BƯỚC 2: THÊM TIỆN ÍCH BÀI ĐĂNG NỔI BẬT
Nếu bạn đã thêm Bài đăng nổi bật, sau đó xóa bài này.
Bây giờ thêm mã sau trong phần mới được tạo.
<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1'>
<b:includable id='main'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
<b:include name='quickedit'/>
</b:includable>
<b:includable id='content'>
<div class='feature-post-summary'>
<b:if cond='data:showPostTitle and data:postTitle != ""'>
<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
</b:if>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<a expr:href='data:postUrl'><img class='feature_image' expr:src='data:postFirstImage'/></a>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != ""'>
<p>
<data:postSummary/><br/>
<span class='feature_readmore' style='text-align:center;'><a expr:href='data:postUrl'>Continue Reading</a>
</span>
</p>
</b:if>
</div>
</b:includable>
</b:widget>
BƯỚC 3: TÙY CHỈNH VỚI CSS
Đặt mã CSS sau ngay trước đó ]]></b:skin>
/************Featured Post CSS************/
.feature_image {}
.feature-post-summary{}
.feature-post-summary h3{}
.feature_readmore{}
.feature_readmore a{}
.feature_readmore a:hover{}
.FeaturedPost1 p{}
Và tùy chỉnh với sự lựa chọn của riêng bạn.
BƯỚC 4: THÊM BÀI ĐĂNG CỤ THỂ VÀO TÍNH NĂNG
Chuyển đến Bảng điều khiển Blogger → Bố cục → Chỉnh sửa FeaturePost1. Chọn bài đăng cụ thể và lưu.
Font Awesome 4.3.0 Icons
Add all 519 FontAwesome icons inside post by typing icons name/shortcode
This is Twitter icon short code example [sly fa-twitter]
This is WordPress icon short code example [sly fa-wordpress]
This is Xing icon short code example [sly fa-xing]
This is Xing icon short code example [sly fa-vk]
This is Vimeo icon short code example [sly fa-vimeo]
This is Apple icon short code example [sly fa-apple]
Dropcap
Go Compose tab when you write post, then add this code (copy below code) inside post when Compose mood.
<span class="dropcaps">G</span> iang dong ha Hi! My friends. Good luck to you....
Tabs or Accordion
Go Compose tab when you write post, then add this code inside post when Compose mood.
<div id="sly-post-tab">
<ul>
<li><a href="#tab-1">Tab One Name</a></li>
<li><a href="#tab-2">Tab Two Name</a></li>
<li><a href="#tab-3">Tab Three Name</a></li>
</ul>
<div id="tab-1">
Tab One info here
</div>
<div id="tab-2">
Tab Two info here
</div>
<div id="tab-3">
Tab 3 info here
</div>
</div>
Columns
Post Columns inside your posts, now copy and paste code on post editor Compose tab when you write post (Compose mood). now replace your texts.
<div id="column1">
Column1 of 3 info here
</div>
<div id="column2">
Column2 of 3 info here
</div>
<div id="column3">
Column3 of 3 info here
</div>
</div>
2 Columns Code Below
<div id="column1_of2">
Column1 of 2 info here
</div>
<div id="column2_of2">
Column2 of 2 info here
</div>
Message
Copy and paste code on post editor Compose tab when you write post (Compose mood).
now replace your texts.
<div id="note">Your Text Here</div>
