membuat versi Related Post/Artikel terkait blogger

Cara membuat artikel terkait untuk blogger V1

Related Post adalah suatu navigasi yang memungkinkan pengunjung untuk menjelajahi blog/website anda lebih lanjut dengan membaca artikel terkait. Pada suatu template yang terpasang di sebuah blog, ada template yang langsung meng-include-kan fitur ini, dan ada pula yang tidak. Jika template anda tidak terpasangkan Related Post/Artikel terkait, silahkan baca thread ini lebih lanjut.

Related Post/Artikel terkait adalah salah satu unsur penting yang mempengaruhi Search Engine Optimization (SEO) blog, percaya tidak percaya, navigasi yang satu ini dapat meningkatkan Pageview (PV) anda sebanyak 20-40%, angka ini akan semakin meningkat seiring dengan banyaknya artikel yang memiliki kesamaan topik di blog anda. Berikut adalah fungsi lain Related Post yang perlu anda ketahui:

Meningkatkan pageview (PV)
Mempercantik tampilan blog
Memfasilitasi pengunjung untuk mempermudah mereka mencari artikel lain yang memiliki kesamaan topik
Menjadi salah satu syarat yang harus dipenuhi blogger jika ingin menjadi publisher adsense (Kategori Navigasi)

Pemasangan related post sendiri tidak terlalu sulit, dimana anda hanya harus melakukan copy-paste pada script yang saya berikan dibawah ini.

Pada kesempatan kali ini, saya akan memberikan sejumlah script dengan berbagai style, mulai dari related post yang hanya memperlihatkan tulisan (judul) ataupun gaya yang menampilkan gambar. Jadi, silahkan pilih style related post yang sesuai dengan selera anda. Berikut adalah beberapa style related article yang kami sediakan:

Style 1 - Related Post Polosan -

Style related post pertama yang ingin saya perkenalkan adalah Related Post polosan, dimana style ini adalah style paling ringan & responsive diantara semua style yang saya bagikan, namun sebagai gantinya, tampilan dari style ini dirasa tidak begitu menarik karena hanya menampilkan judul artikel terkait. Berikut cara pemasangannya:

Login ke Dashboard Blog Anda
Pilih menu Template--> Edit HTML
Tekan CTRL+F dan cari kode <data:post.body/>

Copy-paste script dibawah ini dibawah kode <data:post.body/> (biasanya kode tersebut lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)

Code:

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h3&gt;Artikel Terkait:&lt;/h3&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='" rel="nofollow">https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Simpan template

Style 2 - Related Post dengan Thumbnail (Gambar)

Berbeda dengan style pertama, style kedua ini tampil lebih cantik dengan tampilan gambar kecil/thumbnail untuk menarik perhatian pembaca untuk mengklik artikel terkait yang anda miliki. Berikut cara pemasangannya:

Login ke Dashboard Blog Anda
Pilih menu Template--> Edit HTML
Tekan CTRL+F dan cari kode </head>

Copy-paste script dibawah ini diatas kode </head>

Code:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Tekan CTRL+F dan cari kode <data:post.body/>

Copy-paste script dibawah ini dibawah kode <data:post.body/> (biasanya kode tersebut lebih dari 2, silahkan pilih kode yang terakhir atau coba satu per satu)

Code:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Simpan template

Style 3 - Related Post dengan Thumbnail (Gambar)

Style ke-3 ini adalah salah satu style yang paling saya suka, selain karena design/tampilannya yang menarik perhatian pengunjung, style ini juga berisi animasi CSS, dimana ketika anda mengarahkan kursor anda ke Related Post, tampilan related post akan memperlihatkan animasi yang menarik (gambar thumbnail menjadi berputar).

Tidak hanya itu, script ini juga memungkinkan anda untuk membuat related post dengan summary (kutipan dari artikel terkait). Berikut cara pemasangannya:

Login ke Dashboard Blog Anda
Pilih menu Template--> Edit HTML
Tekan CTRL + F dan cari kode </head>

Copy-paste script dibawah ini diatas kode </head>

Code:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEETkIAw1XSBwYfs-kJl6YJw25Bv1P4IsG8pppmkk6_CK0ibwRDbQcXmvHD1L0qDfg1bSvuiDTvBqqEnV1jkhX3Q3wlZnSMHY_8WZBozkaMFDpzFDjjHsNuhMZMrOF3p-P5XAP-KnmL3O/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />

Sekali lagi, copy-paste script dibawah ini diatas kode </head>

Code:

<style>
.relatedsumposts {
  float: left;
  padding: 0px 10px;
  overflow: hidden;
  text-align: center;
/* width and height of the related posts area */
  width: 120px;
  height: 200px;
  border-right: 1px solid #E5E5E5;
  display: inline-block;
}

.relatedsumposts:hover {
  background-color: #F7F7F7;
}

.relatedsumposts img:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

.relatedsumposts a {
/* link properties */
  color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}

.relatedsumposts img {
/* thumbnail properties */
  margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
  border: 1px solid #fff;
-webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  overflow: hidden;
}

.relatedsumposts h6 {
/* title properties */
  display: table-cell;
  height: 3em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
/* summary properties */
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}

#relatedpostssum {
  background: #F3F3F3;
  height: 200px; /* related posts container */
  padding: 5px;
  width: 100%;
}

.relatedpoststitle {
  font-size: 19px;
  font-weight: bold;
  border-top: 3px solid #FB8227;
  color: #777;
  display: inline-block;
  padding: 5px 10px;
  width: 190px;
  float: left;
  margin: 0px -200px 0px 20px;
  transform: rotate(90deg);
  transform-origin: left top 0;
  -ms-transform: rotate(90deg); 
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:left top 0; 
  font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Tekan CTRL +F dan cari kode <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> atau <a expr:href='data:label.url' rel='tag'><data:label.name/> (kadang terjadi perbedaan tanda titik (.) atau koma (,) Jadi disarankan untuk mencari kode kedua)

Setelah anda menemukan kode <a expr:href='data:label.url' rel='tag'><data:label.name/>, copy-paste script dibawah ini tepat dibawah baris kode tersebut

Code:

<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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

Jika anda sudah menyelesaikan langkah nomor 6 dan 7, pastikan script yang dihasilkan mirip dengan script dibawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:if>
Click to expand...
Tekan CTRL+F dan cari kode </b:includable>

Tepat diatas kode </b:includable>, tambahkan script berikut ini:

Code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Simpan Template

Style 4 - Related Post by Kang Ismet

Seperti namanya, style ini saya dapatkan setelah nyolong dari salah satu web designer ternama asal Indonesia, yakni Kang Ismet. Related Post ala kangismet ini memiliki background warna hijau flat ui, jadi, tampilannya cukup enak dilihat dan cukup untuk mempercantik blog anda. Berikut tutorialnya:

Login ke Dashboard Blog Anda
Pilih menu Template--> Edit HTML
Tekan CTRL+F dan cari kode </head>

Copy-paste script dibawah ini diatas kode </head>

Code:

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Sekali lagi, copy-paste script dibawah ini diatas kode </head>

Code:

<style>
.related-post{margin:2em auto 0;font-size:13px;background:#fff;border-radius:4px} .related-post h4{margin-bottom: 15px !important; font-size:14px;margin:0 0 .5em;background:#9dcb63;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase} .related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#8db857;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:8px 20px;position:absolute} ul.related-post-style-1{padding-left:0!important;margin-top:-12px} .related-post-style-1 li{list-style:none;padding:15px 20px;border-top:1px solid #eceef5} .related-post-style-1 li a{color:#79798d;text-decoration:none} .related-post-style-1 li a:hover{color:#33aea5;text-decoration:none} .related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:13px}
</style>

Tekan CTRL+F dan cari kode <data:post.body/>

Copy-paste script dibawah ini dibawah kode <data:post.body/> (mungkin akan ada lebih dari 1 kode <data:post.body/>, silahkan copy-paste script dibawah ini tepat dibawah kode<data:post.body/> terakhir atau coba satu per satu)

Code:

<!-- Related Post Widget Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div id='related-post' class='related-post'/>   <script type='text/javascript'>   var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: &quot;<data:blog.homepageUrl/>&quot;, widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;, numPosts: 5, titleLength: &quot;auto&quot;, containerId: &quot;related-post&quot;, newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script>   <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/> </b:if> <!-- Related Post Widget End -->

Simpan Template

Style 5 - Related Post 6 Thumbnail

Ini adalah style yang cocok bagi kamu yang mempunyai blog download anime, streaming, atau mungkin blog blog yang didalamnya banyak berisi gambar. Dengan tampilan 6 Tumbnail dengan ukuran yang cukup menarik perhatian para pembaca, saya pikir related post ini cukup efektif untuk meningkatkan PV blog anda. Berikut cara pengamasangannya:

Masuk ke Dashboard Blog Anda
Pilih menu Template--> Edit HTML
Tekan CTRL+F dan cari kode </head>
Copy-paste script dibawah ini tepat diatas kode </head>

<style>
#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px!important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }
</style>
Click to expand...
NOTE: Kode berwarna biru menunjukan lebar dan tinggi tumbnail per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
Sekali lagi, letakan script dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Note: Jika ada script sejenis/mirip, anda dapat melewati langkah ke-5 ini.
Sekali lagi, letakan script dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry;relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/-QjSndGbF0..._Oy306rc/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls)){tmp.length+=1;tmp[tmp.length-1]=relatedUrls;tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles;tmp3[tmp3.length-1]=thumburl}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls==currentposturl)||(!(relatedTitles))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write| |style||size|8px|text|net|center|color|616469|font| | |div|sekolahblogger|www|http|href|br|align'.split('|'),0,{}))}
//]]>
</script>
Click to expand...
NOTE: Kode berwarna biru menunjukan lebar dan tinggi judul postingan per image. Silahkan sesuaikan dengan ukuran tersebut dengan template yang anda gunakan (jika anda tidak tahu persis bagaimana cara penyesuaiannya, silahkan dilewati saja)
Tekan CTRL+F dan cari kode <data:post.body/>
Copy-paste kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
Click to expand...
Simpan Template

Untuk saat ini, mungkin hanya itulah beberapa script yang bisa saya bagikan. Jika anda ingin merequest script script ataupun tutorial lainnya, silahkan kirimkan saya pesan ataupun comment langsung pada thread ini. Sekian dan terimakasih.