Editor
 |
| 3 Cara Menampilkan Artikel Baca Juga Di Tengah Postingan Termudah |
Baca Juga
Saya membuat artikel ini dikarenakan saya terinspirasi dari pertanyaan pada suatu blog yang bertanya
" Bagaimana cara menampilkan related post di tengah artikel? Apakah dalam memasangnya susah? "
Dari pertanyaan diatas saya iseng-iseng mencari di pencariaan dengan menggunakan keyword cara mudah memasang artikel baca juga dalam postingan. Ternyata keluar banyak sekali artikel yang membahas tentang artikel baca juga.
Saya banyak membaca dari macam-macam artikel, akan tetapi cara memasangnya susah menurut saya. Sampai pada salah satu blog saya menemukan 3 cara menampilkan artikel baca juga dengan mudah.
Apa saja 3 cara menampilkan artikel baca juga dengan mudah itu?
Untuk 3 cara menampilkannya cukup mudah kok sob. Saya akan jelaskan satu persatu cara untuk menampilkannya dibawah ini yaa.
3 Cara Menampilkan Artikel Baca Juga Di Dalam Postingan
Setelah saya mencari dan membaca banyak artikel saya akan membagikan 3 cara mudah dalam menampilkan menurut saya. 3 cara tersebut diantaranya adalah
- Dengan cara otomatis. Maksud dari otomatis ini kita cukup satu kali pasang dan akan tampil pada semua artikel blog kita. ( Cara 1 )
- Dengan cara otomatis. Cukup satu kali pasang dan akan tampil pada beberapa artikel blog kita. Cara ini cocok untuk sobat yang ingin menampilkannya sesuai label blog saja.( Cara 2 )
- Dengan cara manual. Cara ini saya rekomendasikan untuk dipake, karena kita bisa mengatur artikel mana saja yang ingin kita tampilkan. ( Cara 3 )
Cara 1 ( Cukup Satu Kali Pasang Akan Tampil Di Semua Artikel )
- Login dahulu ke blogger.com
- Setelah login, cari menu Template , Edit HTML , Lalu cari kode /head dengan cara CTRL + F agar memudahkan dalam mencari.
- Jika sudah ketemu masukkan kode HTML dibawah ini dengan menaruh di atas kode /head Kode Pembungkus HTML
<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>
<div expr:id='"post1" + 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&callback=related_results_labels&max-results=6"' 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='"post2" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div expr:id='"post1" + 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&callback=related_results_labels&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='"post2" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
</b:if>
Cara 2 ( Satu Kali Pasang, Muncul Di Beberapa Artikel Saja Atau Muncul Sesuai Label )
- Sama seperti diatas cari menu Template , Edit HTML , Lalu cari kode /head dengan cara CTRL + F agar memudahkan dalam mencari
- Setelah ketemu masukkan kode dibawah ini diatas /head Kode Pembungkus HTML
<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>
<div class='bacajuga'>
<h4>Baca Juga</h4>
<script src="/feeds/posts/summary/-/Template?max-results=7&alt=json-in-script&callback=bacajuga"></script>
</div>
Cara 3 ( Dengan Cara Manual. Bisa Di Tempatkan Dimana Saja )
Jika sudah memasukkan kode CSS diatas /head tinggal save template
Sekarang tinggal kita masukkan kode di dalam postingan artikelnya untuk menampilkannya.
Masuk kedalam postingan cari HTML dan taruh kode HTML dibawah ini
Kode Pembungkus HTML Tinggal ganti tanda "#" dengan link tujuan artikel yang anda inginkan. Kode diatas bisa anda taruh dimana saja. Bisa ditaruh setelah kalimat maupun sebelum kalimat. Bebas, terserah sobat.
Jika sudah tinggal publikasikan artikelnya dan lihat hasilnya ..
- Sama seperti diatas cari menu Template , Edit HTML , Lalu cari kode /head dengan cara CTRL + F agar memudahkan dalam mencari
- Langkah selanjutnya kita masukin dahulu CSS nya
- Kode CSSnya bisa dilihat dibawah ini. Masukin diatas /head Kode Pembungkus CSS
<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>
<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>
Kesimpulan Dalam Menampilkan Artikel Baca Juga Pada Blogspot
Untuk memasang kode HTML maupun kode CSS yang perlu di perhatikan adalah ketelitian dalama memasangnya jika kita salah sedikit saja dalam menaruh kodenya, maka hasilnya tidak akan terlihat. Dan yang paling terpenting setiap template pastinya berbeda-beda dalam script.
Jangan kuatir, cari saja kode-kode yang hampir sama dalam langkah-langkah tutorial diatas.
Untuk yang masih bingung dan ingin bertanya-tanya, bisa tulis di kolom komentar dibawah ya. Atau ingin memberi masukan bisa kolom komentar dibawah ya sob. Sekian tutorial blogger 3 Cara Menampilkan Artikel Baca Juga Di Tengah Postingan Termudah yang bisa saya bagikan, untuk tutorial selanjutnya bisa dilihat lagi di blog ini. Salam Pecintateknologi.
Sumber : Terimakasih banyak kepada Mas Teja atas inspirasi artikelnya
EmoticonEmoticon