Cara Memasang Link Artikel Baca Juga Di Dalam Postingan

Postingan pada kali ini yaitu mengenai Cara membuat dan memasangkan sebuah link dengan model susunan link yang mempunyai caption keterangan Artikel terkait atau Baca Juga.Ini sering di sebut dengan artikel terkait,yang mengakitkan satu postingan ke postingan yang lainnnya.Cara ini cukup ampuh untuk membuat sebuah blog tetap ramai dan memiliki time visitor yang tinggi.Untuk pengguna blogger ,Cara ini merupakan sebuah cara untuk membuat blog agar semakin mempunyai rank yang lebih optimal.Jika kamu adalah seorang blogger pemula,kamu bisa mengandalkan sebuah kata kunci atau judul postinga yang semenarik mungkin agar rank blogmu meningkat,di samping itu,Dengan memanfaatkan fitur widget / gadget artikel terkait,yang sudah kamu pasangkan secara automatis melalui halaman edt html blogger.

Hey kawan ? Pernahkaah kamu mengunjungi sebuah web blog dan kamu menemukan sebuah link tiga susun bahkan lebih dan dengan kalimat "baca juga" yang ada di atas nya dan di tambahkan juga sebuah border.? ,Jika kamu pernah menemukanya,itulah  yang di makanai dengan sebuatan untuk artikel terkait di tengah postingan.





Jika kamu mempunyai sebuah blog yang ingin di pasangkan konten widget semacam itu ? Kamu mungkin bisa mencoba menggunakan kode html yang ada pada blog ini,Dan tentunya kode yang ada di blog ini di ambil dari berbagai website / blog,Jika tidak berhasil kamu bisa mencoba salah satunya ,dan berikut ini adalah kode htmlnya beserta cara - caranya.

Kumpulan Cara membuat dan memasang artikel terkait baca juga di tengah postingan untuk blogger.
Untuk tutorialnya,silahkan simak di bawah ini lengkap dengan kode htmlnya.

1.Cara yang pertama.

-Buka aku bloggermu > kemudian pilih tema > dan langsung klik edit html.
-Pada halaman edt html,tekan ctrl f dan masukan tag </head>,pastekan kode di bawah ini.

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>
'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>
');}
//]]>
</script> </b:if> 

-Kemudain juga kode di bawah ini,Namun hapus tag </head> tadi ,,kemudian ganti dengan tag ]]></b:skin>atau </style> dan tekan enter di kotak kecil ctrl f,Jika sudah ketemu tagnya,copy kode di bawah ini da paste tepat di atas tag ]]></b:skin>.

/* Related Post Style 2 */ .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)} .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;} .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}} 

-Jika sudah,ada kode html lainnya juga yang perlu di tambahkan yaitu,dengan cara memasukan tag <data:post.body/> dan tekan enter pada kotak kecil find ctrl fnya,kemudian hapus kode tag <data:post.body/> yang muncul dengan kode html di bawah ini.

<div expr:id='"post1" + data:post.id'/>
<div class='related-simplify'>
<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=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>
Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script> </div>
<div expr:id='"post2" + data:post.id'>
<p>
<data:post.body/></p>
</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("
");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script> 

-Jika sudah semua,klik simpan tema,dan lihat hasilnya di blogmu,apakah sudah bisa muncul work atau tidak.?

2.Cara yang Kedua
Ini merupakan cara kedua jika cara pertama tidak berhasil,Dan silahkan hapus semua kode yang sudah di tempel pada templatemu,Maksudnya kode artikel terkait yang sudah kamu pasang di bagian tag </head>,]]></b:skin> dan  tag <data:post.body/>.Karena akan ada kode html yang lain,yang mungkin bisa kamu coba,dan inilah kode htmlnya.

-Buka blogger mu dan klik edit tema > edit html
-Kemudan tekan ctrl f dan masukan tag </head> ,jika sudah,masukan kode di bawah ini.

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

-Jika suah di paste kode di atas,lanngsung juga cara kode tag <data:post.body/> dan masukan kode html di bawah ini.Ingat,ganti kode tag <data:post.body/> dengan kode di bawah ini.pastekan saja.

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

-jika sudah,jangan lupa klik simpan templatenya,dan lihat hasilnya di blogmu.





Nah itulah dua cara yang bisa kamu gunain untuk membuat sebuah artikel terkait secara automatis untuk blogger,tepat berada di tengah postingan.Untuk masalah hasil berhasil atau tidaknya,kemungkinan karena efek template yang di gunakan.

√ Baca Juga Artikel Terkait ☟☟

loading...