√ Cara Menciptakan Artikel Terkait Di Tengah Postingan

Cara Membuat Artikel Terkait di Tengah Postingan - Memasang related post atau artikel terkait di dalam postingan blog tepatnya di tengah artikel yaitu salah satu cara untuk menarik perhatian pengunjung untuk membaca artikel lainnya yang ada pada blog Anda. Salah satu alasan memasang artikel terkait di tengah postingan yaitu untuk menggantikan artikel terkait atau related post yang dipakai oleh iklan adsense, kita ketahui bahwa ada beberapa blogger yang sudah memakai iklan dengan format menyerupai artikel terkait atau related post ini yaitu jenis iklan "Matched Content".

Iklan adsense matched content ini mempunyai gaya atau tampilan menyerupai artikel terkait, oleh alasannya itu memasang artikel terkait di dalam postingan blog merupakan solusi untuk menggantikan bab artikel terkait yang dipakai atau diubah menjadi iklan matched content tersebut.

Baca juga: Cara Memasang Iklan Adsense di Tengah Postingan

Cara menciptakan artikel terkait atau related post di tengah-tengah postingan tidak jauh beda dengan tutorial cara memasang iklan adsense di tengah postingan yang sudah aku jelaskan pada artikel sebelumnya. Disini kita hanya perlu menambahkan beberapa instruksi JavaScript pemanis dan instruksi CSS untuk menampilkan widget related post tersebut.

Banyak orang-orang yang bertanya gimana cara memasang atau menciptakan Artikel Terkait, Related Post, Baca Juga di tengah postingan blog? Dan pada kesempatan kali ini aku akan mencoba untuk menjelaskannya cara menciptakan artikel terkait ditengah postingan blog.

Cara Membuat Artikel Terkait di Tengah Postingan Blog

1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Cari instruksi </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; (gunakan ctrl + f untuk mempermudah)
4. Copy instruksi dibawah ini, lalu Paste diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /* related and ads on middle postpage */ #inline_wrapper{display:block;padding:0;margin:0 auto} .related_inline_wrapper{width:100%;display:block;overflow:hidden} .related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative} .related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0} .related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700} .related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important} .ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;} .ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;} @media screen and (max-width:600px){.related-post-by-title{width:100%;}} </style>  <script type='text/j4vascript'> //<![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<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;} i++;} document.write('</ul>');document.write();}; //]]> </script> </b:if>

5. Cari instruksi yang menyerupai mirip instruksi dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='artbody' itemprop='articleBody'><data:post.body/></div> </b:if>

Catatan:
Untuk mempermudah mencari instruksi yang menyerupai mirip diatas silahkan cari instruksi <data:post.body/> (kode menyerupai ini di setiap template berbeda-beda dan mungkin lebih dari 2, silahkan pilih instruksi yang ke 2).

6. Setelah ketemu instruksi tersebut (nomor 5), silahkan ganti dengan instruksi dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div> </b:if>

7. Lalu tambahkan instruksi ini dan letakan dibawah instruksi (nomor 6)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='inline_wrapper' id='inline_wrapper'> <div class='related_inline_wrapper' id='related_inline_wrapper'> <!-- Related posts inline --> <div class='related-post-by-title' id='related-post-by-title'> <h4>Baca juga:</h4> <b:loop values='data:post.labels' var='label'> <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-results=3&quot;' type='text/j4vascript'/></b:if> </b:loop> <script type='text/j4vascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <!-- Related posts inline --> </div> </div> <script type='text/j4vascript'> function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}} var middleads = document.getElementById(&quot;inline_wrapper&quot;);var sasaran = document.getElementById(&quot;widget-middle&quot;); var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);} var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);} var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);} </script> </b:if>

8. Lalu klik Simpan tema

Catatan:
1. Lihat pada instruksi diatas (nomor 7) disana ada kode max-results=3 angka 3 yaitu jumlah artikel terkait yang ingin ditampilkan.
2. Lihat pada instruksi di atas (nomor 7) disana ada kode [3], [0], dan [0] ini yaitu opsi untuk meletakan posisi widget artikel terkait di dalam postingan, semakin tinggi nilainya maka akan semakin kebawah.

Itulah tutorial mengenai cara menciptakan related post di tengah postingan, memakai artikel terkait di tengah postingan mempunyai banyak manfaat diantaranya yaitu untuk meningkatkan pageview blog dan juga dapat memperkecil bounce rate blog Anda. Kalau aku masih memakai cara manual untuk menawarkan artikel terkait dan tentunya lebih relevan dibandingkan cara otomatis ini.
Sumber http://www.caramanual.com