Cara memasang related posts ke dalam template terbaru blogger

Memasang related posts ke dalam template blogger terbaru itu sama sekali tidak ribet, bahkan jauh lebih mudah berkat struktur template modern yang cenderung simple, dan lebih dominan menggunakan dan mengoptimalkan CSS. 

Coba bayangkan, diantara 4 varian template blogspot terbaru kecuali emporio, tiga yang lain hanya terdapat satu tag <data:post.body/> di halaman editor HTMLnya tag bodynya juga sederhana demikian juga tag tag conditionalnya sangat mudah dibaca dan logikanya sederhana, betul tidak? 

Karena umumnya pada bagian bagian itulah yang paling banyak kita urus dalam hal memodifikasi template. 

Memanglah dalam memasang widget apapun tidak selalu berhasil jika template yang dipergunakan tidak memenuhi kesesuaian, itu bisa terjadi karena versi template berbeda, telah di oprek, atau buatan pihak ke tiga.  Untuk pemasangan widget tertentu pada template bawaan (default) blogger sendiri cara dan hasilnya tidak akan sama.

related posts blogger stylish
Contohnya template versi lama dengan layout versi ke dua tidak akan sama dengan template versi baru blogger dengan layout versi ke 3. Ada perbedaan penulisan sintaks, perbedaan tag conditonal, hingga versi bahasa penulisan yang berbeda meskipun sama sama di tulis dalam bahasa mark-up yang sama: HTML. 

Eh memang HTML itu tidak masuk bahasa program, lho, itu memang hanyalah bahasa mark-up. Bahasanya para kuli 'front end'. Maaf, maaf...saya juga termasuk kok.

Nah bisakah widget tua di pasang ke template versi terbaru? Bisa banget, tinggal modifkasi, perbaharui dan perhatikan struktur penulisan template terbaru untuk di sesuaikan. Kedengarannya saja ribet, padahal gampang sekali lho. Tinggal rajin rajin pelototin kode ya...

Begini saya baca artikel dari blog Dewa Pokis, tentang cara pemasangan related post yang sebenarnya di tujukan untuk di letakan di tengah tengah artikel. Entah mengapa saya tidak setuju dengan ini. Soalnya bagi blog tutorial, meletakan widget apapun di tengah artikel termasuk adsense akan memotong kode kode yang sedang kita tampilkan dan menyulitkan pembaca mengkopinya. Namanya kita berbagi maka setiap kode harus dapat dengan mudah di copy-paste oleh pengguna atau pengunjung blog.

Saya mencobakan memasang related post tersebut ke dalam template Essential, dan Anda tahu template Essential adalah versi terbaru blogger. 

Caranya sama dengan cara cara terdahulu pada umumnya kita harus masuk ke pengaturan atau dasbor blogger:
  • Pilih Tema
  • Pilih Edit HTML

1. Langkah Pertama

Di dalam halaman editor HTML cari kode </head> dan letakan kode berikut tepat di atasnya:
<style>/* dp baca juga 3 */
.bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:87%;background:pink;border:4px double rgba(0,0,0,0.2)}
.bacajuga h4{background:#ca4444;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#fff;border-radius:20px;top:-21px;left:2.5%}
.bacajuga ul{margin:0;padding:0}
.bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.bacajuga ul li:before{content:&#39;*&#39;;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}
.bacajuga ul li:hover:before{content:&#39;\f02b&#39;;font-family:fontawesome;color:#0383d9;}
.bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.bacajuga a:hover{color:#0383d9;}
.bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.bacajuga a{font-size:14px;margin:0}.bacajuga a:hover{color:#e74c3c}
.bacajuga ul li{padding:5px 0}
.bacajuga ul li:before,.bacajuga ul li:hover:before{display:none}}</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var Bacajuga=new Array,BacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];Bacajuga[BacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[BacajugaNum]=r.link[t].href,BacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=Bacajuga[r]);Bacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((Bacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<Bacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+Bacajuga[e]+"</a></li>"),e<Bacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if> 

2. Langkah kedua.

Masih di dalam halaman editor HTMl cari kode <data:post.body/> dan letakan kode berikut tepat di bawahnya:
<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 == &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>
Save template

Bagaimana, mudah bukan? 

Pada tutorial halaman dewa plokis pengguna mengeluh kode tersebut tidak bekerja dan ada juga yang kebingungan karena ternyata kode <data:post.body/> di dalam template yang sedang Dia pergunakan hanya ada satu. Sementara kode langkah kedua mengharuskan kita menghapus kode <data:post.body/> yang ke dua atau yang ketiga. 

Akan tetapi tutorial halaman dewa plokis sebenarnya sangat lengkap jika diterapkan ke dalam template versi kedua yang sesuai.

Saya berasumsi itu pasti template tua alias template lama...Nah jika Anda kebetulan blogging zaman now, demikianlah cara memasang related posts ke dalam template terbaru..

Kesimpulan:

Memasang widget apapun pada template terbaru dengan versi ketiga pada umumnya relatif lebih sederhana. Karena kecenderungan teknologi web adalah kemudahan dan kesederhanaan. 

Diantara pekerjaan yang telah kami lakukan adalah:
  1. Memasang breadcrumb
  2. Memasang tombol widget beranimasi
  3. Memasang menu navigasi 
  4. Memasang related posts
  5. Mengganti dan memasang header baru
  6. Memasanga atau menambahkan avatar otomatis ke bagian atas setiap postingan.
  7. Dan masih banyak lagi. 
Dalam banyak kasus mengapa pemula merasa kesulitan adalah karena belum familiar dan belum terbiasa. 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak