Hướng dẫn cách tạo bài viết liên quan cực đẹp cho blogspot

Bài viết liên quan

Trên mạng có vô số cách tạo bài viết liên quan cho blogger, rất đơn giản và nhanh chóng, không cần trình độ gì cao siêu cả nên hôm nay mình share tới các anh chị em blogger cách tạo bài viết liên quan cực đẹp. Demo như hình đại diện ở trên, cái màu xanh nhé! Màu đen kia chỉ là background mình chèn thêm cho đẹp thôi. Không lòng vòng nữa! Bắt đầu ngay và luôn.
Bước 1: Tìm code ]]</b:skin> hoặc </styler>
Bước 2: Coppy đoạn code bên dưới rồi dán lên trước code  ]]></b:skin> hoặc </styler>

.related-post { width:98.5%; margin:2em auto 0; font-size:13px; background:#fff; border-radius:4px; margin-top:5px; } .related-post h4 { font-size:14px; margin:0 0 .5em; background:#444; color:#fff; padding:12px 20px 14px 75px; font-weight:normal; position:relative; font-family:Oswald,Arial,Sans-Serif; text-transform:uppercase; border-bottom:5px solid #be4741; } .related-post h4:before { content:&quot; f074&quot; ; font-family:fontAwesome; font-size:22px; font-style:normal; background-color:#be4741; color:#fff; top:0; left:0; padding:13px 20px; position:absolute; } ul.related-post-style-1 { padding-left:0 !important; margin-top:-12px; } .related-post-style-1 li { list-style:none; padding:15px 20px; border-top:1px solid #eceef5; } .related-post-style-1 li a { color:#79798d; text-decoration:none; } .related-post-style-1 li a:hover { color:#d84527; text-decoration:none; } .related-post-style-1 li:before { content:&quot; f08e&quot; ; font-family:fontAwesome; color:#c7cbd4; font-style:normal; top:0; left:0; margin-right:13px; }

Bước 3: Tìm tất cả thẻ <data:post.body/> và thay chúng bằng thẻ

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='related-post' id='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;, numPosts: 5, titleLength: &quot;auto&quot;, containerId: &quot;related-post&quot;, newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script> <script src='https://googledrive.com/host/0B-AwFcTnFgXXSThpN1BnWTJMZ0U' type='text/javascript'/> </b:if>

Các bác lưu ý numPost:5 là số bài viết được hiển thị nha! Tha hồ thay số khác vào theo sở thích nhé!
Bước 4: Coppy đoạn mã bên dưới rồi dán nó lên trước </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Lưu template lại và thưởng thức thôi! Chúc các bác thành công!
Bài viết được tham khảo tại: mdcsite