Anak Indonesia, Halo teman - teman kali ini saya akan memposting bagaimana caranya membuat related post yg posisinya berada di bawah postingan. Agar para pembaca lebih mudah untuk mencari artikel lain yang terkait di dalam satu label. Saya akan memberikan contoh gambar related post seperti gambar di bawah.
 |
| Contoh gambar |
Cek juga cara membuat related post gambar dengan HTML/Javascript . Nah di atas adalah contoh gambar related post yang akan kita buat, langsung aja ke cara pembuatannya .
Cara membuat related post
- Log in ke blogger
- Masuk ke dalam dashbor blog kamu
- Pilih Tamplate, lalu edit HTML carilh kode </head> (Gunakan CTRL+F untuk mempermudah kalian untuk mencari kode </head> )
- Setelah kode </head> kalian temukan , copy pastekan kode javascript di bawah ini tepat di atasnya.
<style> #related-posts { float
: left; width : 550px; margin-top:20px; margin-left : 5px; margin-bottom:20px;
font : 11px Arial; 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/AVvXsEhqv5_Y0AMm9F3qrS2PVzLXpgHASN282kEiSgu760_Fjb2yKX8lZ5XZXdrkgdGS4RC_iGVKoCHo1b94pp-6ApKv-xwCHO2Z0mBhQAGbXxnQpu17WqMCmTEaATqs9r_ok5FlJW-aLfN-zfQ/")
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://yourjavascript.com/11631137121/related_post_pelajaran_blog.js'
type='text/javascript'/>
5. Jika sudah mengcopy pastekan text javascript di atas kemudian carilah kode <data:post.body/> , setelah kalian menemukan kode di atas copy pastekan script di bawah ini tepat di bawah kodenya.
<br/><br/><b:if
cond='data:blog.pageType == "item"'>
<div id="related-posts">
<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"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<div id="related-posts">
<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"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
6. Jika sudah selesai maka simpanlah tamplate blog.
7. Maka lihatlah apakah ada perubahan atau tidak dengan blog anda.
Catatan :
Mungkin anda akan menemukan kode <data:post.body/> lebih dari satu . maka cobalah pastekan script di atas dibawahnya secara berurutan, satu per satu hingga terjadi perubahan di blog kalian. Jika gagal di yang pertama cobalah di yag kedua.
Selamat Mencoba dan semoga berhasil teman - teman . Jika ada yang kurang jelas silahkan coret - coret dengan komentar di bawah, tapi ingat jangan SARA dan Negatif.
0 Comments
