Cara Memasang Related Post di Dalam Postingan

label
label
label
label
Cara Memasang Related Post di Dalam Postingan

Cara Memasang Related Post di Dalam Postingan - Nah, mungkin teman-teman sudah tidak asing lagi dengan artikel terkait atau bahasa kerennya related post. Related post merupakan sebuah widget yang berfungsi menampilkan sejumlah artikel sesuai label dari artikel yang sedang dibaca. Bentuk dari related post ini bisa berupa link dan thumbnail artikel, atau berupa link saja.

Manfaat yang bisa kita dapatkan dari memasang widget ini adalah meningkatnya kualitas internal link dan pengunjung blog pun bertambah, ini karena pengunjung akan tertarik begitu melihat artikel terkait yang ditampilkan relevan dengan artikel yang sedang dibaca. Pengunjung kamu bisa betah berlama-lama di blog kamu dan efeknya bagus sekali terhadap perkembangan blog.

Widget artikel terkait yang saya bagikan ini saya dapatkan dari blog Arlina Design.

Cara Memasang Related Post di Dalam Postingan

  1. Buka Blogger - Template/Tema - Edit HTML. Kemudian tambahkan kode dibawah ini sebelum tag </head>.
  2. <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. Lalu tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>. Berhubung ada 2 style, silahkan pilih salah satu saja yang kamu suka.
    Cara Memasang Related Post di Dalam Postingan
    Style 1

    Cara Memasang Related Post di Dalam Postingan
    Style 2
  4. /* 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)}}

    /* 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}}

  5. Berhubung related post ini memakai Font Awesome, silahkan pasang kode dibawah ini diatas tag </head>. Kalau di blog kamu sudah terpasang script Font Awesome, abaikan langkah yang ini.
  6. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

  7. Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode dibawah ini.
  8. <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>

      Perlu diingat bahwa ada beberapa kode <data:post.body/> tergantung dari template yang digunakan. Silahkan coba kode nya satu persatu sampai related post muncul.

  9. Terakhir, Simpan Template lalu lihat hasilnya.
loading...
Share This :

Related Post

avatar

Wah...baru nemu ane caranya thanks gan tutor nya langsing ane coba buat blog ane

delete 7/3/17
avatar

Cocok banget nih min. Ane belum buat pas banget lagi pengen buat. Thanks

delete 7/3/17
avatar
Pan

AKhirnya yang ane cari-cari ketemu juga, Langsung ane praktekin dah makasih gan

delete 8/3/17
avatar

wihhh terimakasih nih gan jadi mau coba nih heheh

delete 8/3/17
avatar

Nice tutor. Mungkin nanti bisa diterapin di blog ane juga

delete 8/3/17
avatar

butuh SS mas admin

delete 8/3/17
avatar

Mantab infonya gan

delete 8/3/17
avatar

Pngen gue pake ah di blog gue, thanks yak tutorialnya...

http://renseo.blogspot.com/2017/02/investasi-apartemen-di-signature-park-grande.html

delete 9/3/17
avatar

Silahkan deh gan dicoba :D

delete 9/3/17
avatar

Sama-sama hihi semoga bermanfaat :D

delete 9/3/17
avatar

Itu udah ada kok ss nya? Mungkin nanti saya bikin demo nya aja hihi

delete 9/3/17
avatar

owalah gini toh cara masang related post akhirnya masalah ane terselesaikan -,-

[Download Game PC & Android] {Free}
www.stasiunapk.com

delete 10/3/17



sentiment_satisfied Emoticon