Cara Memasang Artikel Terkait Didalam Postingan - Baca Juga

Menarik Lainnya

H

ai Gaes... Masih ngeblogger kan? Masih mengotak-atik blog Sobat, Kalau masih disini Om Ipoel akan memberikan Tutorial

Cara Memasang Artikel Terkait Di Tengah Posting Secara Otomatis

untuk membuat blog semakin lebih keren dan ajib.

Artikel Terkait yap, Om Ipoel akan memberikan Tutorial Ajib tentang 3 Cara memasang artikel terkait ditengah postingan blog.

1. 1. Cara Memasang Artikel Terkait Di Tengah Posting Secara Otomatis
2. 2. Cara Manual Tapi Otomatis Menampilkan Artikel Dalam Kotak Baca Juga
3. 3. Cara Manual Memasukan Artikel Terkait Kedalam Kotak Baca Juga Dan Menempatkannya Sesuka Hati

Langsung Saja ke Tutorialnya tanpa lama-lama.

Cara Memasang Artikel Terkait Di Tengah Posting Secara Otomatis

• login dulu ke blogger.com
• Pilih Tab Template, Edit HTML
• Selanjutnya Sobat Cari Kode </head> atau </style>
• kalau sudah ketemu, masukan kode berikut di atasnya...

<style type="text/css">
/*Artikel Terkait Tengah Postingan - omipoel.blogspot.com*/
.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 sekarang tinggal pasang kode script HTML untuk menampilkan artikel terkaitnya

Cara Penerapan Script Artikel Terkait ke dalam Template HTML

• Cari kode <data:post.body=""></data:post> Ada lebih dari 1 kode itu, coba Sobat ganti kodenya yang ke 2 dengan kode berikut...

<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 == &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=5&quot;" 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>  
</b:loop></b:if></div>
<div expr:id="&quot;post2&quot; + data:post.id">
<data:post .body=""></data:post></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>
</div>

• Silahkan sesuaikan nilai berikut max-results=5 dengan jumlah artikel yang ingin di tampilkan
• kalau tidak tampil coba cari lagi kode ini <data:post.body="">
• Kira-kira Tampilannya seperti kode dibawah ini atau mirip dengan yang dibawah ini...

Baca Juga :

Membuat Random Post Dengan Style Thumbnail

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

• Sobat Rubah Jadi Seperti 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 == &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=5&quot;" 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>  
</b:loop></b:if></div>
<div expr:id="&quot;post2&quot; + data:post.id">
<data:post .body=""></data:post></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>
</div>
</b:if>

• kalau sudah ketemu, tinggal SAVE dan lihat hasilnya.

Sekarang bagi Sobat yang ingin memasang Artikel Terkait / Baca Juga Berdasarkan Label Di Postingan Blog, tapi ingin menentukan letaknya sendiri entah itu di awal postingan, di tengah postingan atau di akhir postingan.

Gunakan tutorial berikut ini untuk memasangnya, tapi Sobat harus manual memasaukan script dan mengisi label apa yang mau di masukan ke artikel Sobat...
langsung saja mulai ke tutorialnya...

Cara Manual Tapi Otomatis Menampilkan Artikel Dalam Kotak Baca Juga

• Masuk ke Template,Edit HTML
• Selanjutnya Sobat Cari Kode </head> atau </style>
  
• Setelah Ketemu, Masukan Kode Berikut Di Atasnya...

<style type="text/css">
/*Artikel Terkait Tengah Postingan - omipoel.blogspot.com*/
.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>

Pemasangan scriptnya sudah selesai, sekarang Sobat tinggal memasang script di setiap postingan yang ingin di pasang artikel terkait berdasarkan labelnya...

Cara Penerapan Script Artikel Terkait ke dalam Postingan

• Silahkan masuk ke postingan yang ingin di pasang Artikel Terkait
• Selanjutnya pilih tab mode HTML, jangan yang COMPOSE
• Kalau sudah masuk ke tab mode HTML di postingan, Sobat copy kode berikut ke dalamnya
• Silahkan sesuaikan letaknya mau di letakan setelah kalimat / gambar...

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

• Silahkan ganti kata Tutorial Dengan label yang ingin di tampilkan
• Dan Sesuaikan juga angka max-results=5 dengan artikel yang ingin di tampilkan
• kalau sudah, tinggal di publikasikan dan selesai.

Cara Manual Memasukan Artikel Terkait Kedalam Kotak Baca Juga Dan Menempatkannya Sesuka Hati

• Langkah pertama Sobat harus memasang CSS terlebih dahulu
• Kemudian Masukan script dibawah ini tepat di atas kode </head> atau </style>

<style type="text/css">
/*Artikel Terkait Tengah Postingan - omipoel.blogspot.com*/
.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>

• Selanjutnya SAVE TEMPLATE

Nah sekarang Sobat tinggal memasukan kode untuk menampilkan post di postingan dalam kotak baca juga secara manual.

Cara Penerapan Script Artikel Terkait ke dalam kotak Baca Juga di Postingan

• Masuk ke postingan yang ingin di beri kotak baca juga / artikel pilihan
• Masuk ke tab mode HTML, Jangan COMPOSE
  
• Setelah itu copy kode dibawah ini dan masukan kedalamnya...

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

• Silahkan ganti tanda # [Tanda Pagar] dengan link tujuan Sobat
• Masukan Kode Script HTML di atas, di tempat yang Sobat inginkan, entah itu di awal di tengah / di akhir artikel
• Kalau sudah tinggal lanjutkan menulis artikel / publikasikan post Sobat.

Terima kasih dan sekiaan informasi sederhana yang bisa Om Ipoel bagikan mengenai

Cara Membuat artikel terkait di tengah postingan

, semoga artikel ini dapat bermanfaat dan juga sedikit memberikan tambahan wawasan buat Sobat.

Jangan Lupa SHARE dan SUBSCRIBE dibawah ini, untuk agar blog Om Ipoel ini bertambah rajin dan bersemangat dalam memposting artikel-artikel baru lain yang bermanfaat dan berguna buat Sobat Semua.