• Internet, Browsing, IT dan Teknologi

    Jumat, 30 Maret 2018

    Cara Membuat artikel terkait di dalam Posting Blog


    Bismillah...

    Hai sobat, selamat malu (malam menjelang dalu) dalu dalam bahasa kami (Palembang), yang artinya hampir larut malam :D sudah pukul 10.30, masih semangat aja ni saya blogging, wekekeke, biasa bro, kejer target hahah, bercanda sobat. Alhamdulillah masih walau sudah malam begini, saya masih sempatkan diri untuk membagikan informasi yang mudah-mudahan bermanfaat bagi sobat semua. Pada artikel kali ini saya akan membahas tentang pemasangan artikel terkait pada postingan blog sobat. Sebenarnya saya baru mendapatkan inspirasi artikel ini setelah saya googling dan mencobanya sendiri pada blog ini, alhasil taaaddaaaa ! berhasil sobat. Saya mendapat inspirasi dari : https://www.arlinadzgn.com. Bagaimana langkah-langkah yang dapat sobat lakukan, akan saya jelaskan pada artikel ini.
    https://4.bp.blogspot.com/-yaESb3lGi_I/WI2mmrMUJrI/AAAAAAAAEtQ/S7FEuyajeS4Mx8IhXSNcBt5oPL4FMqwHQCLcB/s1600/Contoh%2Btampilan%2Bwidget%2BArtikel%2BTerkait%2BStyle%2B1.png

    Cara / Langkah-langkah yang harus dilakukan

    1. Buka blogspot.com / Blogger sobat
    2. Pilih Template, Klik tombol HTML, tambahkan kode ini sebelum tag </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. Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

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

    4. Selanjutnya cari kode <data:post.body/> dan ganti dengan kode dibawah ini, biasanya terdapat banyak kode tsb di dalam HTML blog sobat, coba saja satu-satu sampai pada akhirnya 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=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>
     
    5. Simpan template dan lihat hasilnya 

    Tidak ada komentar:

    Posting Komentar

    Saran dan masukan anda sangat berharga bagi kami

    NEGARA PENGUNJUNG

    Flag Counter