follow us

Cara Membuat Artikel Terkait Di Dalam Postingan Blogger

Cara memasang atau membuat artikel terkait / related post yang responsive di dalam postingan blogger yang akan saya ulas kali ini merupaka salah satu dari banyak faktor yang akan membuat pageviews blog meningkat drastis. Dari widget artikel terkait yang dibuat berdasarkan label ini akan membuat pengunjung merasa di sambut dengan penuh penawaran ketika berselancar di blog kita sehingga betah untuk berlama - lama dan meningkatkan frekwensi klik di ads yang kita pasang.

Style yang saya sarankan untuk widget artikel terkait / related posts di dalam postingan ini adalah dari arlina sang ahli desain web. Selain responsive , style ini juga terkesan berwarna dan tidak membosankan.

Sekarang ikuti langkah berikut ini untuk membuat related posts dalam postingan. Jangan sampai terlewat satu langkahpun agar tidak terjadi error pada template sobat.

Cara Memasang Artikel Terkait Di Dalam Postingan Blogger

1. Buka Blogger > Template > Klik Tombol Edit HTML > Masukkan kode script berikut sebelum Tag </head> 
<b:if cond="data:blog.pageType == &quot;item&quot;"><script type="text/javascript">//<![CDATA[var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if>

2. Tambahkan kode script CSS berikut sebelum kode ]]></b:skin> atau </style>

/* Related Post Style 2 */.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}.related-simplify a:hover{color:#0383d9;}.related-simplify ul li:nth-child(n+4) {display:none;}@media only screen and (max-width:768px){.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}.related-simplify ul li{padding:5px 0}.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

3. Sekarang ganti kode <data:post.body/> dengan script berikut.

<div expr:id='&quot;post1&quot; + data:post.id'/><div class='related-simplify'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><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/javascript'/></b:if></b:loop></b:if><h4>Baca Juga</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div><script type='text/javascript'>var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>

4. Langkah terakhir Simpan template dan lihat hasilnya.


Bila ada pertanyaan atau saran silakan berkomentas melalui disquz dibawah ya . Salam sukses blogger indonesia.

referensi:sayalupareferensidarimanamungkindariarlinadzgn.com/semogagambaryangsayapakaidiikhlaskansemogayangpunyasitusselamatduniaakhiratselalusehat@google.com/
Iklan dari google yang ditawarkan kepada anda:

Berita Terkait :