komputerdia.com - Related post atau Artikel terkait merupakan salah satu element penting yang harus kalian terapkan pada blog atau website. Pasalnya artikel terkait ini merupakan salah satu cara yang paling dianjurkan untuk sanggup mendongkrak popularitas blog yang kalian kelola.
Related Post juga merupakan salah satu cara yang sanggup kalian lakukan untuk menciptakan SEO onpage pada sebuah blog, sebab dengan adanya related post ini, para pengunjung blog kalian akan merasa sangat nyaman dalam meng-Eksplore selluruh isi blog kalian
Dalam artikel ini, saya akan menjelaskan bagaimana cara menciptakan artikel terkait otomatis di tengah-tengah postingan blog dengan gaya yang sangat menarik
Baca Juga Artikel Menarik Lainnya :
- 5 Cara Membuat Multi Related Post Otomatis di Postingan Blogger
- Cara Mengganti Warna Adress Bar Browser Smartphone Sesuai Dengan Warna Blog
- Cara Direct atau Meneruskan Page Not Found 404 Ke Halaman Lain di Blogger
Cara Membuar Artikel Terkait Otomatis di Postingan Blog
- Masuk ke akun blogger kalian, buka sajian Tema kemudia klik tombol Edit HTML
- Cari instruksi </head> dan letakkan instruksi dibawah ini sempurna diatas kode </head>
<b:if cond='data:blog.pageType == "item"'> <script type='text/j4vascript'> //<![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> - Pastikan dalam blog kalian sudah memasang script Font Awesome biar script ini sanggup bekerja dengan baik
- Jika belum terpasang, kalian letakkan instruksi dibawah ini sempurna diatas instruksi </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
- Langkah selanjutnya silahkan kalian cari dan ganti instruksi <data:post.body/> dengan instruksi dibawah ini
- Jika terdapat banyak instruksi <data:post.body/> , silahkan kalian cari instruksi tersebut pada penggalan tag kondisional postingan ibarat <b:if cond='data:view.isPost'> … </b:if> atau <b:if cond='data:blog.pageType == "item"'> … </b:if>. Penempatan instruksi ini terkadang berbeda, tergantung dari template yang kalian gunakan, maka dari itu silahkan kalian coba satu persatu
<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/j4vascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</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> - Langkah terakhir silahkan kalian letakkan instruksi di bawah ini, sempurna diatas instruksi </style> atau instruksi ]]></b:skin>
/* Related Post Style 1 */ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}} - Simpan template kalian dan lihat hasilnya
- Selesai dan semoga bermanfaat untuk kalian semuanya