Cara membuat related post ringan sangat di blog / blogger / blogspot
Membuat artikel terkait di Blogger yang keren dan nyaman dilihat di Blogger anda. Manfaatnya di sini adalah mengarahkan para pengunjung bahwa inilah artikel yang bertemakan sesuai dengan artikel yang dibaca dan dicari oleh pengunjung. Misal yang dibaca pengunjung tentang kesehatan, maka artikel terkaitnya juga tentang kesehatan saja. Jika anda ingin menggunakan atau memasang artikel terkait ini di Blogger anda, silahkan lanjutkan dalam membaca artikel cara memasang artikel terkait di Blogger. Silahkan mempraktekkan langkah Membuat Artikel Terkait di Blogger :
1. Buka Blogger.com dan masuk/login dengan akun anda.
2. Masuk ke menu Template.
3. Lalu pilih Edit HTML dan langsung saja untuk mempermudah pencarian tekan Ctrl + F,
3. Cari kode di </head>
4. Di atas </head> paste kode di bawah ini :
<!--Script Related-Post-->
<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>
<!--Script Related-Post-->
5. Selanjutnya cari salah satu kode <data:post.body/>
Keterangan :
Biasanya kode di <data:post.body/> ada banyak, antara 2 hingga 4 tergantung template anda, Tapi biasanya template menggunakan yang ke-2 untuk mobile dan ke-1 untuk computer. Saya tambahkan sedikit saja, jika anda mempunyai tombol share, biasanya di dekat tombol share tersebut ada kode <data:post.body/>, maka letakkan saja script tombol share di bawah kode <data:post.body/>. Hanya untuk mempermudah pencarian anda saja.
6. Jika sudah dilakukan maka pastekan kode selanjutnya, di bawah kode <data:post.body/> tersebut :
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h5>Related Post</h5>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Keterangan : Ganti yang berwarna biru sesuai keinginan anda. Dan berwarna merah adalah jumlah artikel terkait yang ingin ditampilkan.
Hasilnya akan muncul artikel terkait / related post di bawah post utama anda.
7. Simpan dan selesai. Semoga bermanfaat.
Cara Membuat Artikel Terkait Blogger 1
Cara Membuat Artikel Terkait Di bawah Postingan Blogspot/Blogger
catatan: selanjutnya Blogspot/Blogger akan di sebut Blogger saja.
Untuk membuat related post (artikel terkait atau artikel yang berhubungan) tepat di bawah postingan ada banyak macamnya. Ada yang suka dengan tampilan bergambar, ada pula yang hanya menyukai tulisan saja.
Modelnya pun cukup beragam, ada yang berbaris ke samping, ada pula artikel terkait yang memanjang ke bawah. Untuk tutorial kita kali ini, kita akan membuat related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.
target: related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.
Cara membuatnya cukup mudah, ikuti langkah-langkah berikut ini.
Langkah 1
Pertama-tama login ke akun Blogger Anda, lalu pilih Template > Edit HTML.
Setelah terbuka cari kode </head>. Agar mudah mencarinya tekan Ctrl F dan jika telah bertemu, copy script berikut ini tepat di bawah 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>
Langkah 2
Jika selesai, cari lagi kode <data:post.body/>, lalu copy kembali script berikut ini tepat dibawah kode <data:post.body/>. Jika Anda menemukan ada dua <data:post.body/> letakkan script di bawah kode yang pertama (untuk web version) dan kode yang kedua (untuk mobile version).
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Khusus tulisan berwarna merah pada script bisa diganti sesuai keinginan. Setelah selesai, segera menyimpannya dengan menekan tombol Save Template, lalu kembali ke blog Anda. Refresh dan kini related post atau artiker terkait akan segera muncul.
Jika ingin berkomentar, silahkan.
Semoga bermanfaat.
catatan: selanjutnya Blogspot/Blogger akan di sebut Blogger saja.
Untuk membuat related post (artikel terkait atau artikel yang berhubungan) tepat di bawah postingan ada banyak macamnya. Ada yang suka dengan tampilan bergambar, ada pula yang hanya menyukai tulisan saja.
Modelnya pun cukup beragam, ada yang berbaris ke samping, ada pula artikel terkait yang memanjang ke bawah. Untuk tutorial kita kali ini, kita akan membuat related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.
target: related post yang bentuknya memanjang ke bawah dengan maksimal 5 tulisan.
Cara membuatnya cukup mudah, ikuti langkah-langkah berikut ini.
Langkah 1
Pertama-tama login ke akun Blogger Anda, lalu pilih Template > Edit HTML.
Setelah terbuka cari kode </head>. Agar mudah mencarinya tekan Ctrl F dan jika telah bertemu, copy script berikut ini tepat di bawah 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>
Langkah 2
Jika selesai, cari lagi kode <data:post.body/>, lalu copy kembali script berikut ini tepat dibawah kode <data:post.body/>. Jika Anda menemukan ada dua <data:post.body/> letakkan script di bawah kode yang pertama (untuk web version) dan kode yang kedua (untuk mobile version).
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
Khusus tulisan berwarna merah pada script bisa diganti sesuai keinginan. Setelah selesai, segera menyimpannya dengan menekan tombol Save Template, lalu kembali ke blog Anda. Refresh dan kini related post atau artiker terkait akan segera muncul.
Jika ingin berkomentar, silahkan.
Semoga bermanfaat.
Subscribe to:
Posts (Atom)