Tutorial Cara Menambahkan Artikel Terkait / WidgetBaca Juga Berdasarkan Label Di Tengah Postingan Blog, pada tutorial kali ini aku akan memperlihatkan trik semoga artikel / postingan blog terdapat Artikel terkait / widget related post menurut label di semua postingannya secara otomatis atau manual .
Sebelumnya artikel ini terinspirasi dari grup blogger yang menanyakan bagaimana cara menciptakan kotak artikel / baca juga di tengah postingan blog, menyerupai padawebsite jalan tikus .
setelah sekian menit kesudahannya mamang menemukan cara alternatif agar artikel terkait ini sanggup berada di tengah postingan blog menurut label.. Kalian sanggup liat tampilan demonya di blog berikut ini Demo Tampilannya
Langsung saja ke tutorial cara pemasangan artikel terkait menurut label di tengah postingan blognya gan... Ada tida tutorial untuk menampilkan artikel terkait atau kotak baca juga / kotak artikel pilihan, silahkan pilih sesuai dengan impian kalian.
Tutorial Memasang Kotak Artikel Terkait Di Tengah Postingan Blog
- Seperti biasa, login dulu ke blogger.com
- Pilih Tab Template , Edit HTML Terus Kalian Cari Kode </head>
- kalo sudah ketemu, masukan arahan berikut di atasnya
<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 kini tinggal pasang arahan html untuk menampilkan artikel terkaitnya
- Cari kode <data:post.body/> Ada lebih dari 1 arahan itu, coba kalian ganti kodenya yang ke 2 dengan arahan berikut.
<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>NOTE : Silahkan sesuaikan nilai berikut max-results=5 dengan jumblah artikel yang ingin di tampilkan.
Kalo tidak tampil coba cari lagi arahan ini <data:post.body/>
Kira Kira Tampilannya menyerupai ini, cari aja arahan yang hampir mirip
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if>Kalian Rubah Kaprikornus Seperti Ini
<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>Kalo sudah ketemu, tinggal save dan lihat hasilnya.
Sekarang bagi kalian yang ingin memasang Artikel Terkait / Baca Juga Berdasarkan Label Di Postingan Blog, tapi ingin memilih letaknya sendiri entah itu di awal postingan, di tengah postingan atau di tamat postingan.
Gunakan tutorial berikut ini untuk memasangnya, tapi kalian harus manual memasaukan script dan mengisi label apa yang mau di masukan ke artikel agan... pribadi saja kita mula ke tutorialnya.
Cara Manual Memasukan Artikel Terkait Ke Postingan Blog
#Cara manual tapi otomatis menampilkan artikel dalam kotak baca juga
- Pilih Tab Template , Edit HTML Terus Kalian Cari Kode </head>
- kalo sudah ketemu, masukan arahan berikut di atasnya
<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=" Cara Otomatis Menambahkan Artikel Terkait Di Tengah Postingan Dengan Mudah" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")} //]]> </script>Pemasangan scriptnya sudah selesai, kini kita tinggal memasang scrip di setiap postingan yang ingin di psang artikel terkait berdaasrkan labelnya .
Silahkan masuk ke postingan yang ingin di pasang, terus pilih tab HTML, jangan console
Kalo sudah masuk ke tab html di postingan, kalian copy arahan berikut ke dalamnya, silahkan sesuaikan letaknya mau di letakan sehabis kalimat / gambar apa
<div class='bacajuga'> <h4>Baca Juga</h4> <script src="/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga"></script> </div>Silahkan ganti kata ini Tutorial dengan label yang ingin di tampilkan dan sesuaikan juga angka ini results=5 dengan artikel yang ingin di tampilkan
kalo sudah, tinggal di publikasikan n selesai deh :v
Done dan selesai
kalo sudah tinggal lanjutkan menulis artikel / publikasikan post kalian. Cukup sekian dan terima kasih, semoga artikel wacana Tutorial Cara Menambahkan artikel terkait di tengah postingan Blog.