Cara Menambahkan Related Post Pada Blogspot

Related Post disebut juga sebagai bagian artikel lain yang terkait dengan postingan yang sedang dibaca. Area widget related post ini akan semakin menambah dan mempercantik tampilan blog anda, disamping juga memberikan referensi kepada pembaca untuk melihat potingan lain yang terkait dengan artikel yang sedang dibaca. Seperti tampilan pada gambar di samping. Bagaimana, menarik bukan jika related post tersebut kita letakkan pada bagian blogspot kita.

Area related post biasanya diletakkan pada bagian bawah postingan, harapannya setelah pembaca selesai akan beralih ke artikel lain yang terkait. Lain dari itu, postingan terkait bisa meningkatkandan increase traffic pengunjung blog and, karena dipercaya bisa membuat mesin indexnya google lebih seang dengan tampilan yang ada related potnya.
Bagaimana cara menambahkannya ?

Ikuti urutan steps berikut untuk menambahkan related post:

1. Setelah login ke blog, klik Layout >Edit HTML pada Dashboard blog anda.
2. Back up blog Template sebelum melakukan perubahan!
3. Pastikan untuk klik kotak "Expand Widget Templates" .
4. Search for the tag "head/>".
5. Tambahkan sebelum tag kode HTML di bawah ini dengan copy paste.

<br /><style><br /> #related-posts {<br /> float : left;<br /> width : 540px;<br /> margin-top:20px;<br /> margin-left : 5px;<br /> margin-bottom:20px;<br /> font : 11px Verdana;<br /> margin-bottom:10px;<br /> }<br /> #related-posts .widget {<br /> list-style-type : none;<br /> margin : 5px 0 5px 0;<br /> padding : 0;<br /> }<br /> #related-posts .widget h2, #related-posts h2 {<br /> font-size : 20px;<br /> font-weight : normal;<br /> margin : 5px 7px 0;<br /> padding : 0 0 5px;<br /> }<br /> #related-posts a {<br /> text-decoration : none;<br /> }<br /> #related-posts a:hover {<br /> text-decoration : none;<br /> }<br /> #related-posts ul {<br /> border : medium none;<br /> margin : 10px;<br /> padding : 0;<br /> }<br /> #related-posts ul li {<br /> display : block;<br /> background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2XSeiIqfOhyphenhyphenhKxfDQYGQIrgQk_GTImxl13qBPeKFUCtU6yo1FTpN3hUOTp8zPZDZw5FwaGTyI1rNhPjH-TDvI2Vd60hyphenhyphencQS6doFUVZWKJSQZC0JHe02Q5-7Mjghyphenhyphen4Q37L2ZVChCIIf6s/") no-repeat 0 0;<br /> margin : 0;<br /> padding-top : 0;<br /> padding-right : 0;<br /> padding-bottom : 1px;<br /> padding-left : 21px;<br /> margin-bottom : 5px;<br /> line-height : 2em;<br /> border-bottom:1px dotted #cccccc;<br /> }<br /> </style><br /> <br />

6. Cari kode tag "

". atau "div class='post-body>",
"

"

7. Tambahkan kode di bawah setelahnya.

<br /><b:if cond='data:blog.pageType == "item"'><br /> <div id="related-posts"><br /> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'></b:if></b:loop> </font><br /> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();<br /> </script><br /> </div></b:if><br />

8. Selesai dan simpan HTML template, DONE !!


Selamat mencoba, semoga berhasil.