CARA MUDAH MEMBUAT RELATED POST/ARTIKEL TERKAIT DI BAWAH POSTINGAN

Cara mudah membuat Related Post Di Bawah Postingan. Topik yang akan saya informasikan kali ini masih ada hubungannya dengan system navigasi yang akan mempermudah pengunjung untuk mencari artikel-artikel yang topiknya masih terkait satu sama lainnya. Dengan adanya Related Post yang biasanya ditempatkan di bawah postingan adalah salah satu cara untuk meningkatkan Pageview laman Blog, yang sesuai dengan postingan artikel yang terkait sesuai label secara otomatis.
Related Post ini sangat ringan dan sehingga tidak akan mempengaruhi kecepatan loading blog karena hanya menggunakan CSS yang kecil. Dan untuk memasangnya di template blog hanya diperlukan waktu beberapa menit saja dan hanya menampilkan judul artikel. Jika anda berminat untuk mencobanya silahkan anda ikuti petunjuk cara memasangnya di template blog anda.

1.Login kea kun blogger anda.

2.Klik tombol Template ( Sebaiknya anda backup dahulu template anda untuk menghindari kemungkinan kesalahan.)

3.Edit HTML

4.Kemudian anda cari kode ]]></b:skin> ( untuk mempermudah pencarian gunakan Ctrl + F  akan muncul box search dan masukkan kode tadi lalu enter )

Setelah anda menemukan kode ]]></b:skin>, copy dan pastekan kode di bawah tepat di atas kode ]]></b:skin>

/* RELATED POST----------------------------*/

#related-postku{float:left;width:100%;margin-top:5px;margin-left:0px;font-

Size:13px;font-family:Times, Arial, Verdana;margin-bottom:0px;}

#related-postku a{text-decoration;none;}

#related-postku a:hover{text-decoration:none;}

#related-postku ul{border:medium none;margin:10px 0px 10px;padding:0;}

#related-postku ul li{display:block;background:url (“https://1h3.googleusercontent.com/-

6iznc81V_pq/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png”)

No-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:

30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted

#cccccc;}

Tulisan yang berwarna merah adalah link gambar rss dan anda bisa menggantikannya dengan link gambar anda sendiri sesuai keinginnan.

Selanjutnya anda cari kode </head> dan kopy paste kode di bawah tepat di atas kode </head>.

<!--- Artikel Terkait Dimulai---!>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<script type-‘text/javascript’>

//< ! [CDATA]

Var relatedTitles=new Array( );var relatedTitleNum=0;var relatedUrl=new Array( );

Function related results labels (json) {for (var i=0;i<json.feed.entry.length;i++) {var entry=json.feed.

Entry [i];relatedTitles[relatedTitleNum]=entry.title.$t;for (var k=0;k<entry.link.length;k++) {if(entry.

Link [k] .rel == ‘alternate’) {relatedUrls [relatedTitleNum]=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+=;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>

</b:if>

< !--- Artikel Terkait Berakhir ---!>

Kemudian langkah terakhir anda cari kode <div class=’post-footer’>, biasanya kode tersebut ada dua. Yang pertama adalah untuk versi mobile dan yang kedua untuk versi Web. Copy paste kode di bawah tepat di atas kode yang kedua.

<b:if cond=’data;blog.pageType == &quot;item&quot;’>

<div id=’related-postku’>

<font style=’font-size:19px;color:# FFFF00;font-family:Times; ‘><b>Artikel Terkait : </b>

</font><font color=’#fff’><b:loop values=’data.labels’ var ‘lbel’><data;label.name/>

<b:if cond=’data;label.isLast != &quot;true&quot;’/>

<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-result=5&quot;’

type=’ text/javascript’ />

</b:if></b:loop></font>

<script type=’ text/javascript’> removeRelatedDuplicates ( );

printRelatedLabels ( ) ;</script>

</div>

</b:if>

<p class="MsoNormal" style="text-align: justify; text-indent:

0.5in;">

Anda perhatikan tulisan yang berwarna di dalam kode tersebut. Yang berwarna hijau adalah untuk ukuran hurufnya, yang berwarna abu-abu adalah untuk kode warnanya, yang berwarna merah adalah Artikel Terkait dan yang terakhir yang berwarna biru adalah jumlah tampilan artikel postingan.

Setelah semua rangkaian cara mudah membuat Related Post anda lakukan dengan benar dan hati-hati sebaiknya anda lihat dahulu hasilnya melalui pratinjau. Setelah yakin telah berhasil maka silahkan langsung anda Save Template.

Demikianlah akhir dari Cara Mudah Membuat Related Post Di Bawah Postingan . Selamat mencoba dan bermanfaat bagi kita semua.

Judul: CARA MUDAH MEMBUAT RELATED POST/ARTIKEL TERKAIT DI BAWAH POSTINGAN ; Ditulis oleh Unknown ; Rating Blog: 5 dari 5

Posted in: Tips Blog