Thursday, 6 December 2018

Cara Memasang Artikel Terkait di Tengah Posting

Tags

cara memasang artikel terkait

Cara Membuat Artikel Terkait di Tengah Posting

Udah beberapa hari gak fokus untuk posting artikel di blog ini sobat, maklum blogger newbie jadi materi yang mau dijadikan sebuah tulisan yang bagus dan bermanfaat lagi minim banget. Tapi daripada lama gak update blog mungkin ada baiknya kali ini coba memberi tips blog, sapa tahu bermanfaat buat blogger newbie kayak saya.

Kali ini saya mo update informasi mengenai "Cara Membuat Artikel Terkait di Tengah Posting", tulisan yang saya posting ini terinspirasi dari beberapa sobat blogger yang masih belum bisa memasang artikel terkait atau sudah mencoba pasang namun hasilnya belum bisa tampil di blog. Saya sendiri juga beberapa kali mencoba memasang artikel terkait di tengah posting ini tapi hasilnya nihil. Nah setelah mencoba lagi ternyata kali ini berhasil dengan sempurna dan tampilannya sedikit saya edit biar kelihatan lebih keren.

OK, kalo sobat mau tahu cara memasang atikel terkait keren ini silahkan ikuti langkah-langkahnya secara pelan-pelan. Oh ya, sebelum memulai sebaiknya kamu back up dulu templatenya agar kalo terjadi kesalahan editing bisa dikembalikan lagi seperti semula.


Yuk lanjut lagi langkah-langkah memasang artikel terkait ditengah posting, oh ya tampilan widget artikel terkait kurang lebihnya seperti berikut :

Cara Memasang Artikel Terkait di Tengah Posting

1. Login blogger kamu dulu terus masuk ke menu Layout >> Edit HTML
2. Cari kode </head>, untuk mudahnya silahkan tekan Ctrl+F, kalo sudah ketemu sisipkan kode dibawah ini tepat diatas kode </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>

3. Langkah selanjutnya adalah cari kode seperti berikut <data:post.body/>, biasanya ada kode yang sama dengan kode tersebut lebih dari 2. Kalo sudah ketemu kode <data:post.body/> kemudian ganti kode tersebut dengan kode dibawah ini, silahkan coba ganti satu persatu sampai kotak artikel terkait muncul.


<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Content</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>

Kalo sudah terpasang semua agar kotak artikel terkait terlihat lebih keren langkah selanjutnya adalah cari kode */]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode tersebut.

Kode sudah sedikit saya edit agar tampilan kotak artikel terkait lebih keren dan beda dari yang lain.

/* Related Post Style */
.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:#809FFE;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;border-radius: 0px 20px 0px 20px;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}}

OK itulah tips blog cara memasang artikel terkait ditengah posting, yang pasti saya sudah mencoba tips ini di beberapa blog saya dan 100% work.

Mungkin kalo ada sobat yang masih kesulitan memasang artikel terkait ditengah posting bisa bertanya lewat kotak komentar yang tersedia. Terima kasih sudah berkunjung di blog sederhana ini semoga artikel ini bisa membantu kesulitan sobat.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Mohon komentar yang relevan dengan tema artikel, komentar SPAM, Live link tidak akan muncul..!!