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 OlieVN 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>
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:" f074" ; 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:" f08e" ; 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 == "item"'> <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'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4>Artikel Terkait:</h4>", numPosts: 5, titleLength: "auto", containerId: "related-post", 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>
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'/>
No comments:
Post a Comment