Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot - DP BBM 23

Kumpulan DP BBM Lucu | Bagus | Keren | Kocak | Galau | Romantis | DLL yang Diambil Dari Berbagai Sumber

Breaking

Post Top Ad

Post Top Ad

Sunday, December 3, 2017

Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot

DP BBM 23 adalah sebuah blog gratis, yang menyajikan seputar kata - kata, DP BBM, AdSense, Blogger, Tutorial, Windows 10, ISO, Theme Wind0ws 10, etc! dan sobat saat ini sedang membuka halaman Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot, jika suka jangn sungkan untuk klik, like, share dan subcribe ya gaes!


Loading...

Baca Juga



DP BBM 23 - Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot - Hallo guys... selamat pagi dan selamat berjumpa kembali... pada kesempatan dipagi hari ini admin blog DP BBM 23 akan sedikit mengulas tentang bagaimana caranya membuat Baca Juga Secara otomatis disetiap postingan berdasarkan label... untuk ulasannya simak terus dibawah ini...

Ok next guys... berdasaarkan pengalaman saya pribadi, setiap kali membuat artikel dan ingin memasukan link postingan sebelumnya ke dalam postingan baru, berdasarkan label / atau post serupa dengan yang dibahas, biasanya menggunakan dengan cara manual, yaitu dengan cara memasukan link post satu persatu... namun saya rasa itu kelamaan dan makan waktu, untuk cara mengatasinya kita pasang saja secara otomatis, dengan cara memasangnya kedalam template... dan berikut ini adalah hasil jadinya dari yang mau saya bahas ini... lihat yang saya tandai petunjuk biru... itulah hasil nya !!!


Gimana nih... setelah lihat hasilnya, masih ada yang mau mencobanya ?? jika iya, silahkan lanjutkan membacanya, dan copas semua kodenya, untuk saya sendiri dipasang di awal alias sebelum pembahasan dimulai, untuk sobat sendiri bisa memasangnya ditengah postingan maupun di akhir postingan.... karena disini saya akan memberikan caranya secara otomatis dan manual...

Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot

1. Pertama - tama seperti biasanya... buka dulu Blogger.Com
2. Buka Tab Template lalu Edit HTML dan cari kode </head>
3. Jika sudah ketemu, silahkan copas dan masukan kode dibawah ini, tepat diatas kode </head>

<style type="text/css">
/*Artikel Terkait Tengah Postingan*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
<script type="text/javascript">  
//<![CDATA[  
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
//]]>  
</script>

Nah, jika sudah ( kode diatas di pasang ) selanjutnya pasang kode HTML dibawah ini, untuk menampilkan artikel terkait ( baca juga ) nya...

4. Cari Kode <data:post.body/> kode tersebut lebih dari satu, coba sobat gunakan pada kode kedua dan ganti dengan kode berikut ini...

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='bacajuga'>  
<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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
</b:if>  
</b:loop>  
</b:if>  
<b:if cond='data:blog.pageType == "item"'>  
<h4>Baca Juga</h4>  
<script type="text/javascript">  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>  
</b:if>  
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></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>

Catatan :

Silahkan sesuaikan ( ganti ) nilai max-results=5 dengan jumlah artikel yang ingin sobat tampilkan...


5. Jika tidak tampil, coba cari lagi kode ini <data:post.body/>
6. Yang sekiranya seperti dibawah ini kodenya, cari saja kode yang mirip seperti berikut ini...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

7. Jika sudah ketemu, silahkan sobat ganti kodenya, menjadi seperti dibawah ini...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='bacajuga'>  
<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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
</b:if>  
</b:loop>  
</b:if>  
<b:if cond='data:blog.pageType == "item"'>  
<h4>Baca Juga</h4>  
<script type="text/javascript">  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>  
</b:if>  
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></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>
</b:if>

8. Kalau sudah, jangan lupa Save dan lihat hasilnya... tapi jika masih gagal, berikut ini saya kasih cara manualnya...

Cara Manual Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot

1. Pertama - tama seperti biasanya... buka dulu Blogger.Com
2. Buka Tab Template lalu Edit HTML dan cari kode </head>
3. Jika sudah ketemu, silahkan copas dan masukan kode dibawah ini, tepat diatas kode </head>

<style type="text/css">
/*Artikel Terkait*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
<script type="text/javascript">
//<![CDATA[
function bacajuga(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,a="<li><a href="+n+'" title="'+l+'" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")}
//]]>
</script>

4. Jika pemasangan script diatas sudah selesai, sekarang kita tinggal memasang script disetiap postingan yang ingin dipasangi artikel terkait ( baca juga ) berdasarkan labelnya...
5. Silahkan copas semua kode dibawah ini, dan masukan pada tab HTML Bukan Compose

<div class='bacajuga'> 
<h4>Baca Juga</h4>
<script src="/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga"></script>
</div>

Catatan :

Silahkan ganti terlebih dahulu kata Tutorial dengan label yang ingin ditampilkan, dan sesuaikan juga angka results=5 dengan jumlah angka artikel yang ingin ditampilkan


6. Jika sudah klik publish, dijamin work... hehehe... jika gk tampil juga ??? coba cara ketiga ini...

Cara Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot Sesuka Hati

1. Pertama - tama seperti biasanya... buka dulu Blogger.Com
2. Buka Tab Template lalu Edit HTML dan cari kode </head>
3. Jika sudah ketemu, silahkan copas dan masukan kode dibawah ini, tepat diatas kode </head>

<style type="text/css">
/*Artikel Terkait*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>

4. Klik Save Template... dan masukan kode dibawah ini kedalam postingan yang ingin ditambahkan kotak Baca Juga kedalam mode HTML bukan Compose

<div class="bacajuga">
  <h4>Baca Juga</h4>
  <ul>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
  </ul>
</div>

Catatan :

Silahkan ganti terlebih dulu tanda # ( pager ) dengan link postingan sobat, dan tempatkan kode tersebut sesuai keinginan sobat, mau di awal postingan / tengah maupun akhir postingan

Giamana, sangat mudah dan simple sekali bukan ?? silahkan sobat terapkan cara mana saja yang sekiranya bisa sobat pahami... dan kiranya hanya itu saja yang dapat admin blog DP BBM 23 sampaikan, pada kesempatan pagi ini, mengenai tentang Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot, semoga bermanfaat, selamat pagi dan sampai jumpa kembali !!!!




thumbnail Title : Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot
Posted by : Ocha Pratama
Published : 2017-12-03T02:15:00Z
Rating : 90.5%
Reviewer : 9.998 Votes


Post Top Ad

Loading...