MASIGNALPHA101
3265514337768207251

Cara Membuat Baca Juga Keren Di Tengah Postingan Di Blogspot

Cara Membuat Baca Juga Keren Di Tengah Postingan Di Blogspot
Cara Membuat Baca Juga Di Tengah Postingan Di Blogspot- Dulu saya sempat merasa bingung saat ingin membuat judul artikel terkait di blog saya agar seperti punya kawan-kawan blogger yang sudah mahir ngeblog, namun kendala saya tidak mengetahui apa itu namanya yang ada di dalam post, hanya yang saya ketahui tuisan Baca Juga dan di bawah nya ada nama artikel yang aktif dari 3-5 post.

Dan saya berfikir, apakah itu cara memasang nya secara manual atau otomatis ? jika manual apa gak capek jika harus menulis setiap membuat postingan, belum lagi jika artikel yang di pasang sudah di hapus atau yang lain nya, tambah repot, dan jika cara memasang nya secara otomatis terus itu namanya apa saat saya ingin mencari tutorial nya di google.

Cara Membuat baca juga di blog

Akhir nya saya ketikan saja di Google Cara Membuat Baca Juga di Blog, namun yang muncul cara memasang artikel terkait, di sini saya masih bingung, yang muncul ini sepertinya cara memasang artikel terkait di bawah postingan blog, dan saya mencari lagi dengan kata kunci Cara Membuat Baca Juga di Tengah Postingan Blog, lagi lagi yang muncul cara membuat artikel terkait di tengah postingan.

Dari sini saya mulai berfikir apakah yang saya cari (baca juga) itu adalah postingan terkait ? dan setelah saya baca-baca oh ternyata benar itu namanya postingan terkait di tengah artikel, dan akhirnya saya mulai menerapkan nya di blog saya dan alhamdulillah berhasil.

Namun aneh nya saat saya pasang di blog yang membahas tentang spek hp dan otomatis blog tersebut menggunakan Tabel, namun hasil nya kok terkadang malah bikin acak-acakan Tabel saya ya? namun ya suah lah ga papa, namun saya otak atik lagi sepertinya lebih bagus saya pasang artikel terkait itu di akhir artikel saya.

Nah kawan-kawan setelah melihat pengalaman buruk saya di atas kali ini saya ingin berbagi tentang Cara Membuat Baca Juga atau Artikel Terkait ataupun Recent Post di tengah Postingan, di Akhir Postingan dan di Awal Postingan pada Blogger atau Blogspot,

Tujuan Menambahkan Related post atau Arikel Terkait di Blog

kalau menurut saya sendiri tujuan nya tak lain adalah agar pengunjung bisa mengetahui artikel-artikel blog yang lain nya saat pengunjung sedang membaca artikel kita, dan mereka akan mengklik judul artikel yang telah kita pasang tadi.

Dan di sini Masmient pun akan memberikan tutorial cara memasang artikel terkait dengan cara otomatis dan kita tidak perlu repot-repot memasang nya secara manual, dan mari simak cara memasang related post di bawah ini.

Cara Memasang Artikel Terkait "Baca Juga" di Blogspot


1. Masuk Blog > Template > Edit Tenplate dan cari kode </head> 
*Tekan ctrl+f untuk mempermudah pencarian

2. Letakan kode di bawah tepat di atas kode </head> tadi

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

3. Lalu Letakan  kode Css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

Contoh 1
Cara membuat Artikel terkait
/* Tidak Berguna */
.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}

Abaikan Blank di atas
Kode 1
/* Related Post Style 1 */
.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 2
Cara membuat Artikel terkait

Kode 2
/* Related Post Style 2 */
.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 3
cara membuat related post

Kode 3
/* 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}}
*Pilih salah satu kode saja
*Seiap kode di atas berbeda-beda model tampilan related post nya

4. Lalu Cari kode <data:post.body/>

5. Ganti kode <data:post.body/> dengan kode di bawah ini

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

Ket:
  • Pastikan template kawan sudah terpasang font awesome biar kode di atas bisa muncul
  • Ada lebih dari 1 kode <data:post.body/>
  • Pilih salah satu nya saja atau coba satu persatu
  • Biasanya yang berfungsi kode yang terakhir
  • Tekan Ctrl+f untuk mempermudah pencarian



5. Terakhir Simpan Template kawan dan lihat hasilnya

Dengan menerapkan tutorial di atas maka kawan kawan sudah membuat related post di tengah postingan blog kawan, namun terkadang akan acak-acakan dan terlihat tidak rapi karena post-post biasa nya akan i tabrak oleh css baca juga tersebut.

Namun masih ada solusi nya, yaitu kita tetep masih bisa meletakan postingan terkait di awal artikel atau pun di akhir artikel, dengan cara berikut :

Cara Memasang artikel terkait Di Awal Artikel


1. Terapkan langkah di atas dari nomor 1 sampai nomor 3

2. Jika sudah cari kode <data:post.body/> dan letakan kode di bawah ini tepat di atas kode <data:post.body/>

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

3. Simpan Template

Cara Memasang artikel terkait Di Akhir Artikel


1. Terapkan Langkah di atas dari nomor 1 sampai nomor 3

2. Jika sudah Cari kode <data:post.body/> dan  Letakan Kode di bawah ini tepat di Bawah kode <data:post.body/>

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

3. Simpan Template

Sumber kode : Arlinadzgn.com

Nah sampai di sini semua keluahan kawan tentang cara membuat baca juga di blog insya alloh sudah bisa teratasi ya, dan jika ada pertanyaan silahkan berkomentar di bawah ini guna untuk mempermudah atau mencari solusinya bersama dengan pembahasan artikel di atas.

Sekian dari saya selamat menerapkan nya dan sampai jumpa kembali... Terimakasih kawan !
Masmient

Jangan sia-siakan masa sekarang, karna masa depan belum pasti ada kesempatan yang kedua.. Manfaatkan Kesempatan kita

"Jika ada pertanyaan tinggalkan komentar Anda di bawah ini"