Lapaklama.com » Cara Membuat Realated Post di Tengah Artikel
Didalam mengelola sebuah blog kita tidak hanya dituntut untuk selalu menciptakan artikel saja. dan jikalau kau ingin blog yang kau kelola dapat berkembang ke hal yang lebih baik. maka kau juga harus dapat menggoda seseorang untuk membaca artikel yang sudah kau buat.
Jika kau mempunyai 1 atau lebih artikel yang sudah cukup popular / yang berada dihalaman pertama mesin pencari, kau dapat memanfaatkan artikel tersebut untuk Membuat Realated Post di Tengah Artikel. alasannya ialah dengan begitu kemungkinan artikel gres yang kita buat akan dibaca orang lain sangatlah besar.
Bang kan biasanya template sudah dilengkapi dengan fitur realated post disetelah artikel?
Memang benar hampir semua template mempunyai fitur realated post, namun penempatannya tidaklah di tengah artikel melainkan dibawah artikel. namun ada juga template yang sudah dibekali dengan fitur realated post di tengah artikel ibarat template VioMagz buatan mas sugeng itu.
Bang Realated Post itu apa?
Realated post ialah fitur yang sangat menarik yang ada pada blog/blogger untuk menampilkan daftar artikel terkait dengan artikel yang sedang dibaca. sebagai referensi artikel terkait itu ibarat dibawah ini.
Baca Juga:
Namun tentunya realated post yang akan kita buat ini tampilanya jauh lebih keren dari referensi realated post diatas. Oke pribadi saja ikuti tutorial dibawah ini.
Cara Membuat Realated Post di Tengah Artikel
- Silahkan masuk kehalaman dasboard blogger kamu.
- Kemudian pilih sajian Tema kemudian klik tombol Edit HTML
- di Halaman edit HTML silahkan cari arahan
</head> (Gunakan kombinasi tombol CTRL + F untuk mempermudah menemukan arahan tersebut).
- Jika arahan tadi sudah kau temukan. copy arahan dibawah ini dan letakan di bawah kode
</head>. <b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
</style>
</b:if>
<b:if cond='data:blog.pageType != "index"'>
<script type='text/j4vascript'>
//<![CDATA[
// Related Post Inline
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>
- Kemudian cari lagi kode <data:post.body/> dan ganti arahan tersebut dengan arahan berikut ini.
<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=5"' type='text/j4vascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Also Read</h4>
<script type='text/j4vascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/j4vascript'>
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("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
Jika kau menemukan lebih dari 1 arahan <data:post.body/> silahkan ganti arahan yang terbungkus dengan tag kondisional halaman artikel.
- Sampai langkah ini bahwasanya kau tinggal klik simpan template untuk menyimpan perubahan tersebut. dan realated post ada di tengah artikel kamu.
- Namun jikalau kau ingin menciptakan posisi realated post sejajar dengan isi artikel. maka tambahkan arahan CSS dibawah ini.
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Related Post Inline */
.related-simplify{display:inline-block;background:#fff;position:relative;padding:0;margin:32px 20px 20px auto;width:50%;float:left;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #f22830}.related-simplify:hover{box-shadow:0 0 15px -5px rgba(0,0,0,0.5)}.related-simplify h4{background:#f22830;padding:4px 15px;position:absolute;margin:0;font-size:13px;font-weight:500;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17)}.related-simplify ul{margin:0;padding:0}.related-simplify ul li{position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}.related-simplify a{color:#222;font-size:14px;font-weight:500}.related-simplify a{display:block;color:#222;font-size:14px;font-weight:500;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.related-simplify ul li:nth-child(n+5) a{margin:0 auto 10px auto;}.related-simplify ul li:first-child a{margin:15px auto 0 auto;}.related-simplify ul li:nth-child(n+5) a:hover,.related-simplify ul li:first-child a:hover,.related-simplify a:hover{color:#aaa;padding-left:18px}.related-simplify ul li:nth-child(n+6){display:none}
@media screen and (max-width:768px){.related-simplify{margin:36px auto 26px auto;width:100%}}
</style>
</b:if>
Sekian artikel kali ini ilahkan ikuti panduan diatas jikalau kau berminat menciptakan realated post di tengah artikel blog. terimakasih supaya bermanfaat untuk kita semua.
Sumber aciknadzirah.blogspot.com