| Weel Come in My blog, oya sobat maaf ni ya, jika sobat membaca tentang About Me pada link saya yang menjelaskan tentang sebab saya memilih Aneka Ragam Makalah sebagai judul blog, maka teman-teman akan bertanya mengapa saya membuat sebuah artikel yang sama sekali tidak berkaitan dengan tujuan saya yang hanya mencantumkan makalah saja. haal ini saya lakukan ketika ada beberapa teman yang meminta saya untuk memberitahukan bagamana cara membuat Related post di blog. saya dah tunjukkan blog yang membahas tentang hal itu, tetapi teman saya belum paham. akhirnya dengan berpikir selama 24x jam pertemuan saya putuskan untuk menulis sebuah artikel yang saya anggap berguna. salah satunya adalah Tips Pintar Membuat Related Post. Dalam membuat artikel ini, sebelumnya saya telah belajar dari beberapa blog yang berkualitas menurut saya, dan teman akan mengetahuinya pada keterangan paling bawah. |
Oke.., langsung saja tanpa basa basi, mari kita lanjutkan pembahasan kita tentang Tips Pintar Membuat Related Post.
- Temukan menu Layout - Edit HTML di Dashboard blog anda.
- Download Template anda sebelum mengubah HTML untuk menjaga agar template bisa dikembalikan jika ada kesalahan! teman bisa Klik Download Full Template atau bisa copy semuanya dan paste kan di notepad, hal ini jika teman ingin cepat malakukannya.
- Centang atau tandai (Expand Widget Templates)
- Carilah kode ]]></b:skin>
- Tambahkan kode dibawah ini, dan letakkan tepat di atas kode ]]></b:skin>
| <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://sites.google.com/site/rhakateza/rss.png") 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://related-post-untuk-blogger.googlecode.com/files/Related_posts.js' type='text/javascript'/> |
Gimana dah bisakan, ayo kita lanjutkan ke tahap berikutnya:...
- Kemudian cari kode <data:post.body/>. atau pada beberapa template sering dipakai kode <div class='post-body> atau <data:post.body/>. Jika sobat telah memasang Readmore..otomatis maka sobat akan menemukan banyak kode <data:post.body/>, jadi sobat cari saja kode <data:post.body/> yang pertama . untuk memudahkannya sobat bisa tekan ctrl F dan langsung sobat pastekan atau tuliskan kode <data:post.body/> tersebut.
- Tambahkan kode di bawah ini dan pastekan kode tersebut di bawah kode <data:post.body/> atau kode yang sesuai dengan template sobat. adapun kode tersebut yaitu:
| <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> |
- Keterangan: Pada kode yang berwarna merah adalah untuk nama tampilannya, sobat bisa rubah sesuka hati sobat. dan pada kode yang berwarna biru adalah jumlah Related Post nya, sobat bisa rubah sesuai keinginan sobat berapa jumlah Related Post yang ingin di tampilkan. angka lima merupakan jumlah Related Post yang ditampilkan.
- Langkah terakhir adalah dengan menyimpannya dengan mengklik SAVE TEMPLATE. selamat mencobaa...
Tambahan:
Setelah hal diatas Sobat lakukan dengan benar, maka tampilannya akan tampil sempurna, di situ akan tampil sebuah link yang terkait dengan Related Post sobat, kalau kode di atas maka link yang akan tampil adalah Related Post Widget[?] dengan link yang mengarah kepada (http://www.modalgratis.com/2011/04/tutorial-bolg-cara-membuat-related-post.html) atau dengan link-link lainnya.
Jika sobat tidak ingin menampilkannya, maka langkah yang perlu sobat lakukan adalah:
- Silahkan tekan ctrl F dan tuliskan atau pastekan kode ini </head>
- Setelah itu sobat patekan kode di bawah ini dan letakkan tepat di atas kode </head>
| <script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> |
- Setelah itu pada kode yang berwarna biru seperti di bawah ini, silahkan sobat hapus.
- Kemudian silahkan sobat klik SAVE TEMPLATE, dan lihat hasilnya, maka link tersebut telah menghilang.
Sekian penjelasan dari tema kita hari ini yaitu Tips Pintar Membuat Related Post, jika sobat kesulitan untuk melakukannya juga, sobat bisa berikan komentar, dan jika terjadi kesalahan pada penulisan saya, sobat bisa kritik dengan komentar.