Related posts yang ringan dan cepat loadingnya sangat penting pada suatu blog , karena selain bisa menunjang fungsi SEO , related posts juga berfungsi untuk memudahkan pengunjung untuk memermudahkan mengakses artikel kita yang berkaitan dengan artikel yang sedang di baca oleh pengunjung.
Dengan artikel berkaitan yang simple dan cepat loading, maka pengunjung lebih bisa berlama-lama menelusuri blog kita, dan tentunya dengan Related Posts Di Bawah Artikel ini akan menunjang profesionalitas blog kita.
Dibawah ini Priview tampilan dari related posts nya :
Membuat/Menampilkan Related post (artikel Terkait)
A.Kode CSS untuk related Post
1.Log in ke blogger dengan akun yang anda miliki.
2.Klik rancangan.
3.Edit Html
4.Cari kode </head>
5.letakkan kode dibawah ini sebelum kode </head> yang anda temukan.
<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/AVvXsEi5P6fTw_YrP_GJuc0VTBuolv1l8rquk6LZkY26qJ1w2OgJvPFmLskREW1471yjO3VPEvonliIMemqs88hUyKXLwLC5079k6MUcsrggNfR4xdgHbl-oYCcsn3OwBd43EwGdQvLF0rwev0U/") 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='https://sman2siakkecil.sch.id/terkait.js' type='text/javascript'/>
B.Kode Source HTML Artikel terkat
Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan terjadi pada langka ini. So perhatikan baik-baik...
Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa pilih salah satu opsi berikut.
Cara pertama untuk memnampilkan related post ini adalah cari kode <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini tepat dibawah kode <data:post.body/> tersebut.
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </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"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Jika anda belum berhasil membuat artikel terkait atau related post dengan cara tersebut, maka alternatif selanjutnya adalah pada <data:post.body/>, coba kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>):
5.letakkan kode dibawah ini sebelum kode </head> yang anda temukan.
<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/AVvXsEi5P6fTw_YrP_GJuc0VTBuolv1l8rquk6LZkY26qJ1w2OgJvPFmLskREW1471yjO3VPEvonliIMemqs88hUyKXLwLC5079k6MUcsrggNfR4xdgHbl-oYCcsn3OwBd43EwGdQvLF0rwev0U/") 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='https://sman2siakkecil.sch.id/terkait.js' type='text/javascript'/>
B.Kode Source HTML Artikel terkat
Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan terjadi pada langka ini. So perhatikan baik-baik...
Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa pilih salah satu opsi berikut.
Cara pertama untuk memnampilkan related post ini adalah cari kode <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini tepat dibawah kode <data:post.body/> tersebut.
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </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"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Jika anda belum berhasil membuat artikel terkait atau related post dengan cara tersebut, maka alternatif selanjutnya adalah pada <data:post.body/>, coba kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>):
contohnya:
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </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"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Akirnya anda Berhasil membuat Related Posts dan coba lihat hasilnya. oke ya saran saya anda jangan cepat menyerah bila terdapat kesalahan dalam pembuatannya, karena blogger harus tetap berinovasi ....Tetap semanagat dan saya yakin jika anda bisa membuat blog, maka telated post juga pasti bisa oleh anda. selanjutnya jangan lupa baca juga tentang cara membuat kotak informasi penulis dibawah artikel serta cara membuat halaman daftar isi blog.
Sekian tutorial singkat tentang Cara Membuat Related Posts semoga bisa bermanfaat bagi kita semua. Bila masih ada kesulitan tentang cara membuat Artikel yang berkaitan dibawah artikel ini, jangan sungkan -sungkan bertanya dikotak komentar.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </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"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Akirnya anda Berhasil membuat Related Posts dan coba lihat hasilnya. oke ya saran saya anda jangan cepat menyerah bila terdapat kesalahan dalam pembuatannya, karena blogger harus tetap berinovasi ....Tetap semanagat dan saya yakin jika anda bisa membuat blog, maka telated post juga pasti bisa oleh anda. selanjutnya jangan lupa baca juga tentang cara membuat kotak informasi penulis dibawah artikel serta cara membuat halaman daftar isi blog.
Sekian tutorial singkat tentang Cara Membuat Related Posts semoga bisa bermanfaat bagi kita semua. Bila masih ada kesulitan tentang cara membuat Artikel yang berkaitan dibawah artikel ini, jangan sungkan -sungkan bertanya dikotak komentar.
