Home / Blogger

Cara Otomatis Membuat Baca Juga Berdasarkan Label Didalam Postingan Blogger Blogspot

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 !!!!




Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
    • '