Widget HTML Atas

cara memasang artikel terkait atau baca juga di dlam postingan

cara memasang artikel terkait atau baca juga di dlam postingan

Memasang artikel terkait, daftar isi,  atau baca juga di tengah postingan blog memang sangat penting, dan juga membuat blog terlihat lebih bagus dan menarik karena berfungsi memunculkan konten dengan judul setiap postingan blog yang akan muncul secara automatis ditengah postingan blog kamu. Hal ini juga tentu dapat memudahkan pengunjung blog kita dan meningkatkan pengalaman bagi para pengguna dalam kemudahan untuk menjelajah isi blog kamu.


Pasti kamu pernah berfikir bagaimana caranya untuk membuat sebuah kotak berisi artikel dengan label "baca juga" yang secara otomatis akan muncul di tengah-tengah postingan blog ? Jika jawabanya iya? Berati kamu sama seperti saya , saya dulu juga pernah berpikir bagaimana si caranya agar di tengah postingan mucul baca juga secara otomatis dan ahirnya saya menemukan caranya ternyata sangat mudah.

Banyak para blogger pemula maupun bloger profesional yang membuat artikel terkait 
(baca juga) di tengah postingannya. hal Ini memang penting dan sangat bermanfaat menurut saya, karena dapat Menurunkan Nilai Bounce Rate Blog. Jadi apabila pengunjung memasuki salah satu artikel blog kamu. Maka secara otomatis Mereka akan melihat artikel artikel lainnya yang masih satu topik "relevan", dengan cara ini tentu pengunjung blog kita akan lebih mengeksplor isi blognya.

Contoh kecilnya di blog saya ini, Saya membuat artikel terkait di tengah postingan blog, dengan judul RELATED, bisa Anda lihat di bawah.

Memang Ada beberapa template yang sudah mempunyai fitur seperti ini, tapi sebagian besar template belum menyediakan fitur ini, jika templat kamu juga belum ada fitur baca juga, jangan khawatir karena pada postingan kali ini Saya akan memberikan cara membuat artikel terkait (baca juga) di tengah postingan blog.

Dari pada kamu ngiler lihat blog orang lain, silahkan simak cara membuat artikel terkait secara otomatis pada blog di bawah ini.

Langkah2 memasang artikel terkait di dalam postingan 

1.Login ke Bloger 》 pilih Template 》 pilih Edit HTML. Tambahkan code di bawah ini sebelum tag </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'><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>

2.Tambahkan kode CSS di bawah ini sebelum kode 
]]></b:skin> atau kode </head>

/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Contoh tampilan widget Artikel Terkait Style 1
Contoh tampilan widget Artikel Terkait Style 1

/* 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}}

Contoh tampilan widget Artikel Terkait Style 2
Contoh tampilan widget Artikel Terkait Style 2

/* Related Post Style 3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.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(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.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}}

Pastikan di blog kamu sudah memasang Font Awesome agar icon tersebut bisa muncul

3.selanjutnya cari dan ganti kode <data:post.body/> dengan kode di bawah ini.

Di dalam template biasanya akan menemukan beberapa kode  <data:post.body/>  tergantung template yang kamu gunakan, coba satu persatu sampai artikel terkait muncul di dalam postingan kamu.

<div expr:id='&quot;post1&quot; + 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 == &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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></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>
4. Jika semua langkah di atas sudah selesai silahkah simpat template dan lihat hasilnya.

Begitu cara memasang widget baca juga sangat mudah bukan. Sekarang kamu sudah tidak report lagi karena sudah secara otomatis widgets baca juga akan menampilkan judul postingan kamu menurut label yg di gunakan. Demikian untuk tutorial cara memasang artikel terkait atau baca jug di dlam postingan .semoga bermanfaat.





No comments for "cara memasang artikel terkait atau baca juga di dlam postingan"

Iklan baca juga

Berlangganan via Email