11/28/16

Cara Membuat Artikel Terkait Simpel Di Bawah Posting

Cara Membuat Artikel Terkait Simpel Di Bawah Posting

Memang untuk mempercantik sebuah blog blogspot atau blogger gak akan pernah ada habisnya selalu ada yang baru dan selalu banyak yang nawarin tutorialnya, salah satunya Artikel terkait (related post) yang posisinya ada di bawah posting blog kita. Tapi tak ada salahnya untuk menggunta-ganti juga, dulu juga saya begitu ada yang baru nyobain pemasangannya gimana, dan akhirnya sedikit-sedikit makin tahu sama kode-kode yang ada di blogger. Jadi curhat nih. he...he..he. mari kita lanjutkan ke topik utama kita.

Terkait : Cara Membuat Related Post Simpel di Blogger

Mungkin diantara sobat semua ada yang kurang puas dengan tampilan related post yang kemarin saya bagikan tutorialnya, dan mungkin juga sobat ada yang menginginkan yang lebih simpel lagi biar fast loading blognya atau juga biar kelihatan simpel tapi terkesan elegant.

Nah, untuk membantu sobat semua maka saya kali ini akan membagikan tutorial cara membuat artikel terkait simpel di bawah posting, tentunya ini lebih simpel dan fast loading blognya dari Related Post yang kemarin. Tanpa panjang lebar lagi mari kita simak sama-sama tutorialnya di bawah ini.

1. Pertama sobat tentunya harus login terlebih dahulu ke blogger.
2. Jangan lupa untuk mem-backup terlebih dahulu template sobat.
3. Selanjutnya sobat pilih 'Templet' lalu klik 'Edit HTML', setelah itu cari kode  '<b:includable id='post' var='post'>'. gunakan (Ctr+F) untuk lebih mudah mencari kodenya. setelah sobat menemukannya, scroll ke bawah pelan-pelan sampai ke sobat menemukan tag penutupnya </b:includable>. Jika sobat telah berada di tag penutup tersebut selanjutnya sobat copy patekan kode dibawah ini tepat sebelum kode tersebut.

<!-- related post by: anditoblog.blogspot.com star -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>   
<h4>Related Post :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/> 
</b:loop>    
<script type='text/javascript'>  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>
</div>  
</b:if>
<!-- related post by: anditoblog.blogspot.com end -->

4. Jika sobat masih bingung cara penyimpananya silahkan lihat screenshot gambar dibawah
Cara Membuat Artikel Terkait Simpel Di Bawah Posting  tutorial1

5. Setelah sobat selesai menyimpannya, selanjutnya sobat cari kode </head> dan copy pastekan kode Javascript di bawah ini tepat sebelum kode yang sobat cari tadi.

<!--Related Posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>  
//<![CDATA[  
var relatedTitles = new Array();  
var relatedTitlesNum = 0;  
var relatedUrls = new Array();
//Simple and fast Related posts by Andito (anditoblog.blogspot.com) 
function related_results_labels(json) {for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href;  relatedTitlesNum++;  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] = relatedTitles[i];}}
relatedTitles = 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((relatedTitles.length - 1) * Math.random());var i = 0;document.write('<ul>');  
while (i < relatedTitles.length && i < 20) {document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;} document.write('</ul>');}  
//]]>  
</script>  
</b:if>
<!--Related Posts End-->

6. Maka hasil penyimpanan kodenya akan seperti screenshot gambar di bawah ini
Cara Membuat Artikel Terkait Simpel Di Bawah Posting Tutorial 2

7. Selanjutnya sobat cari kode ']]></b:skin>' dan copy pastekan kode CSS di bawah ini tepat di atas kode tersebut.

/* Related Posts By : anditoblog.blogspot.com
----------------------------------------------- */
#related_posts {
   margin-top: 1px;
   padding: 0 10px 0 0;
}

#related_posts h4 {
  color: #111;
  font-size: 19px;
  color: #444;
  letter-spacing: -0.5px;
  padding: 15px 0 7px 0;
  border-bottom: solid 1px #fafafa;
  margin-bottom: 5px;
}

#related_posts a {
  color: #00a2e8;
}

#related_posts ul {
  padding: 0;
}

#related_posts ul li {
  list-style: none;
  padding: 9px 5px 9px 14px;
  border-bottom:1px solid #eee;
  line-height: 18px;
  background: url(https://2.bp.blogspot.com/-ipsIvfDpiDA/T4MMjQaiGAI/AAAAAAAAAPE/0Jo4k87vtPc/bullet.png) no-repeat 0 14px;
}
8. Terakhir sobat klik Pratinjau untuk melihat perubahan dan jika sudah ada perubahan maka sobat tinggal klik Simpan /Save.

Jika sobat kurang puas dengan tampilannya silahkan sobat bisa mengaturnya sendiri melalui kode CSS-nya. Happy Blogging! 

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.