Cara membuat artikel terkait (baca juga) di tengah postingan blog

Cara yang paling mudah untuk membuat artikel terkait (baca juga ) di tengah postingan blogspot dengan menggunakan kode html khusus untuk membentuk tampilan list postingan yang akan muncul di setiap postingan tepat berada di antara isi konten blog.Itu yang sering di namakan dengan sebuah sebutan artikel terkait.Artikel terkait ini bertujuan untuk mempercantik blog, bisa juga untuk mendapatkan kunjungan blog yang banyak.Karena jika memasang artikel terkait di tengah postingan blog,?Setiap pengunjung blog akan menjumpai isi postingan lainnya yang terkategori sama.Dan tentunya ini sering kamu temukan di blog blog master dengan visitor yang banyak.Artikel terkait juga ternyata bisa membuat blog semakin popular den SEO blog semakin bagus.Artikel terkait juga sering bahkan wajib di miliki oleh setiap blog ,Guna mempermudah dalam mencari visitor blog dan juga memudahkan para setiap pembaca.

Bagaimana dengan kamu yang sudah berkunjung di blog ini? apakah ingin memasang artikel terkait juga di blogmua? jika iya,blog teknob akan menguraikan serta kode html yang di butuhkan,dari satu sampai akhir .Berikut inilah tutorialnya,langsung saja cekidot.

Cara terbaru dan termudah membuat artikel terkait (baca juga) di tengah postingan blogger.
Caranya sangatlah gampang,kamu hanya perlu menyimak ulasan singkat di bawah ini,dari omer satu sampai yang terakhir,dan inilah dia.

(1).Yang pertama,silahkan buka dasbor blogger mu dan pergi theme,klik edit template dan tekan ctrl f ,ketikan tag <head> dan masukan kode di bawah ini tepat di bawah tag <head>.

<b:if cond='data:blog.pageType == "item"'> <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)Jika sudah yang di atas, Langkah selanjutnya ialah memasukan kode html javascript pembentuk related post atau artikel terkaitnya di bawah ini,tepat di bawah tag ]]</b:skin> atau </style> ,ingat ini adalah model artikel terkait yang no 1 .

/* 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)kemudian langkah terakhirnya ialah,mencari tag <data:post.body/> dan jika sudah di temukan ,blok tag tersebut atau bisa saja untuk di hapus langsung dan di gantikan dengan kode html java script di bawah ini.Dan tentunya jika kamu menemukan kode tag <data:post.body/> lebih dari satu,silahkan hapus yang pertama saja.

<div expr:id='"post1" + 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 == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>
Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script> </div>
<div expr:id='"post2" + data:post.id'>
<p>
<data:post.body/></p>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("
");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

(4).jika sudah langsung saja klik save templatemu kembali dan bisa di cek langsung hasilnya ,apakah artikel automatisnya sudah muncul atau tidak,jika tidak ,silahkan kode pertama di pindahkan saja ke bawah tag </head> dan save template.

Nah itulah cara yang bisa kamu lakukan untuk membuat sebuah artikel terkait automatis dengan caption baca juga ,yang sering muncul di tengah postingan blog ,mirip blog orang lain.Cukup mudah buakan? selamat berkereasi geng.

blogsite™

Sunday, December 8, 2019