Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara mudah menambahkan Related Post / Artikel Terkait bergaya teks di bawah postingan

Sore sahabat blogger, saling keterkaitan antara satu halaman dengan halaman lainnya pada situs web yang dibuat adalah suatu kewajiban agar pengunjung dapat mengunjungi halaman web kita pada situs tersebut. Hal ini juga akan dapat meningkatkan Page Views / tampilan halaman web kita sehingga mengangkat derajat web kita di mata google (hahahaha kayak kerja dipemerintahan aja...).

Cara memasang related post / artikel terkait di blog
Memasang Related Post
Memasang / menambahkan related post / artikel terkait dibawah postingan akan memberi rujukan kepada pengunjung untuk membuka halaman yang lain dalam situs yang isinya berkaitan dengan artikel yang sedang dibacanya. Pada tutor kali ini, saya akan memberikan tips memasang related post di bawah postingan dengan tampilan seperti gambar diatas. Langkah-langkah menambahkan related post di bawah postingan tersebut ada 7 langkah seperti berikut:

1. Buka blogger dashboard anda,
2. Pada blog yang ingin anda edit, klik pilihan Template yang muncul disebelah kanan dari daftar blog anda, seperti gambar berikut:
3. Sehingga muncul tampilan sebagai berikut. Kemudian klik Edit HTML seperti yang ditunjuk oleh tanda panah nomor 3 dibawah ini.
4. Selanjutnya akan muncul tampilan Editor HTML halaman web. kemudian tekan kombinasi tombol Ctrl + F sehingga muncul kotak pencarian seperti yang ditunjukan tanda panah nomor 4 pada gambar dibawah ini.
5. Pada field / kolom pencarian, ketikan </head> kemudian tekan enter selanjutnya anda akan menemukan bagian </head> pada bagian html tersebut. Jika kode </head> telah ditemukan, diatasnya tempelkan / sisipkan kode berikut:
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfiWsPEbch3cS0hA5pGnt5bYn5k2_cBLcsJLYtJM4278sHhEKiAltV8nCzRjOHABd5J96yC7UNqVyKiVJ8ovhSy9KSG1o7evfA0-yjIIdsKeEwq8xUevaeO8QAUkOLNmalmsgvE04OJqI//") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://kabar.kan.su/relatedpost.js' type='text/javascript'/>
6. Langkah ke enam, carilah kode <data:post.body/> , setelah ketemu, dibawah kode <data:post.body/> tempelkan kode berikut ini:
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel yang terkait : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
7. yang terakhir tinggal klik Save / simpan template, dan lihatlah hasilnya.

Itulah 7 langkah mudah menambahkan Related Post / Artikel Terkait bergaya teks di bawah postingan pada web / blog kita. semoga informasi ini dapat berguna dan bila menemui kesulitan silahkan berkomentar.

1 komentar untuk "Cara mudah menambahkan Related Post / Artikel Terkait bergaya teks di bawah postingan"

  1. makasih banyak buat infoya gan,, snagat bermanfaat sekali nih...

    http://goo.gl/KISf4o

    BalasHapus