Cara Pasang Related Post Otomatis Untuk Blogger Versi 1

---

Cara Membuat Related Post atau Artikel Terkait otomatis yang full responsive dengan animasi slide up di Blogger. Related Post atau jika diterjemahkan dalam Bahasa Indonesia adalah Artikel Terkait, merupakan artikel-artikel blog yang masih memiliki hubungan dengan artikel yang sedang dibaca oleh pengunjung. Related Post juga merupakan sebuah custom widget pada blogger yang akan menambah daya tarik sekaligus mempermudah pengunjung blog untuk menemukan artikel yang berkaitan dengan artikel yang sedang dibacanya.

Bagi pengguna Blogger, fitur ini sudah tidak asing lagi bahkan fitur wajib yang harus dipasang pada blog. Related Post sengaja dipasang untuk memudahkan navigasi pengunjung yang ingin membaca artikel yang berhubungan dengan artikel yang sedang dibaca. Dengan semakin banyak jumlah artikel yang dibaca, akan meningkatkan page view blog tersebut. Banyaknya page view pada posting blog merupakan poin yang baik bagi blog tersebut di mata mesin pencari.

Fungsi dari Related Post ini juga merupakan salah satu teknik untuk menambah pageview halaman, sesuai dengan posting artikel yang terkait dengan label secara otomatis.

Widget Related Post memiliki banyak versi mulai dari tampilan yang sederhana hingga memiliki tampilan yang serba animasi. Versi yang lain bahkan menggabungkan teknik animasi tampilan slide show dan tombol backward dan forward. Karena widget Related Post ini sifatnya custom maka masih bisa untuk membuat versi anda sendiri sesuai dengan kebutuhan dari blog anda.

Pada artikel Related Post yang saya buat merupakan versi dengan tampilan horizontal yang dikombinasikan dengan animasi hover slide up sehingga terlihat modern dan kekinian. Boleh dibilang versi Related post ini lumayan bagus dengan loadingnya yang cepat dan tampilan yang atraktif. Related post versi codeflare juga sudah full otomatis untuk mengenali keterkaitan dari artikel yang berhubungan, jadi misalkan terdapat artikel yang belum memiliki keterkaitan (belum banyak) maka widget Related Post ini akan menyesuaikan secara otomatis dengan menampilkan Recent Post (artikel terbaru). Selain itu widget Related Post ini sudah Full Responsive artinya bisa terlihat disemua perangkat dengan sempurna.

Berikut contoh Related Post versi codeflare, seperti yang terlihat dibawah ini.

Informasi Singkat

---

Tampilan halaman (page view) atau tampil-laman, disingkat dalam bisnis menjadi (PV dalam bahasa inggris) dan kadang-kadang disebut tayangan halaman, adalah permintaan untuk memuat satu file HTML (halaman web) dari situs Internet. Di World Wide Web (internet WWW), permintaan halaman akan dihasilkan dari surfer web (browsing) yang mengklik tautan (link) pada "halaman" lain yang menunjuk ke halaman yang dimaksud.

Sebaliknya, klik mengacu pada permintaan untuk file apa pun dari server web. Karena itu, mungkin ada banyak klik per tampilan halaman karena halaman HTML dapat berisi banyak file — gambar, CSS, dll. Secara seimbang, tampilan halaman merujuk ke sejumlah halaman yang dilihat atau diklik di situs selama waktu yang diberikan.

Tampilan halaman dapat dihitung sebagai bagian dari analisis web. Untuk pemilik situs, informasi ini dapat berguna untuk melihat apakah ada perubahan pada "halaman" (seperti informasi atau cara disajikannya) menghasilkan lebih banyak kunjungan. Jika ada iklan pada halaman tersebut, penerbit juga akan tertarik pada jumlah tampilan halaman untuk menentukan pendapatan yang diharapkan dari iklan. Karena alasan ini, ini adalah istilah yang digunakan secara luas untuk pemasaran dan periklanan Internet.

---

Sumber : Wikipedia

Cara Pemasangan

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

Pada langkah pertama ini widget Related Post secara default akan mengacu pada elemen komentar (#comments) sehingga apabila tidak ada kostumisasi lebih lanjut maka Related Post akan terlihat di atas elemen komentar (#comments). Pastikan juga anda sudah memasang framework JQuery pada template blog anda. Cara kostumisasi lebih lanjut ada pada bab selanjutnya, namun dipastikan dahulu anda sudah memasang kode CSS dan Javascript di bawah ini.

Cara Pemasangan Kode CSS dan Javascript :

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <style>
  /* Related Post Style by CodeFlare Blogspot */
  /* Default Setting ----------------------- */
  :root{--rpColor:#0083da;}
  :root{--rpWidth:190px;}
  /* Main Division -------------------- */
  #related_posts{
  background-color: #FFFFFF;
  border: 1px solid var(--rpColor);
  display:inline-block;
  position:relative;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  height:193px;
  overflow:hidden;
  }
  /* List Order --------------------- */
  #related_posts ul,#related_posts li{
  margin:0;
  }
  #related_posts ul{
  list-style:none;
  overflow:hidden;
  padding:5px 2px 0 2px;
  display:inline-block;
  }
  #related_posts li{
  width:var(--rpWidth);
  padding:0;
  list-style:none;
  float:left;
  height:150px;
  overflow:hidden;
  position: relative;
  margin: 2px 0 2px 0;
  }
  #related_posts ul li:before,#related_posts ul li:after{
  content:"";
  padding:0;
  margin:0;
  }
  /* Inner Division ----------------- */
  #related_posts .inner{
  padding:0px;
  margin:0 2px;
  }
  #related_posts .inner strong{
  font-size:16px;
  line-height:1.2em;
  display:block;
  overflow:hidden;
  max-height:100%;
  padding:0 4px;
  text-align:left;
  }
  #related_posts p{
  margin:10px 0 0;
  padding:0 4px;
  position:static;
  text-align:left;
  font-size:14px;
  max-height:100%;
  }
  /* a Link ----------------------- */
  #related_posts a:link{
  color: var(--rpColor);
  text-decoration: none;
  }
  #related_posts a{
  text-decoration:none;
  }
  /* Image ------------------------ */
  #related_posts a img{
  border-width: 0;
  }
  #related_posts img{
  max-width: 100%;
  height: auto;
  width: auto\9;
  }
  #related_posts .imageRP{
  display:block;
  overflow:hidden;
  height:140px;
  padding:4px;
  border:1px solid #D5D5D5;
  }
  #related_posts .imageRP img{
  width:100%;
  height:100%;
  }
  #related_posts li:hover .imageRP,
  #related_posts li:hover .date {
  margin-top:-150px;
  }
  #related_posts .imageRP{
  -webkit-transition:margin-top 0.7s ease;
  -moz-transition:margin-top 0.7s ease;
  -ms-transition:margin-top 0.7s ease;
  -o-transition:margin-top 0.7s ease;
  transition:margin-top 0.7s ease;
  }
  #related-posts-loadingtext{
  display:inline-cell;
  text-align:center;
  font-size:30px;
  padding:40px;
  color:var(--rpColor);
  }
  /* Date Division --------------------- */
  #related_posts .date::after{
  border-color: var(--rpColor) var(--rpColor) transparent transparent;
  right: 0;
  }
  #related_posts .date::before, #related_posts .date::after{
  border-width: 5px 10px;
  border-style: solid;
  top: 100%;
  }
  #related_posts .date::before, #related_posts .date::after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  }
  #related_posts .date::before{
  border-color: var(--rpColor) transparent transparent var(--rpColor);
  left: 0;
  }
  #related_posts .date{
  top: 5px;
  left: 7px;
  background-color: var(--rpColor);
  color: #FFFFFF;
  padding: 5px 3px;
  text-align: center;
  font-size: 9px;
  }
  #related_posts .date{
  position: absolute;
  }
  #related_posts .date strong{
  font-weight: bold;
  }
  #related_posts .date span{
  line-height: 12px;
  padding: 0;
  }
  #related_posts .date strong, #related_posts .date span{
  display: block;
  }
  #related_posts .date{
  -webkit-transition:margin-top 0.7s ease;
  -moz-transition:margin-top 0.7s ease;
  -ms-transition:margin-top 0.7s ease;
  -o-transition:margin-top 0.7s ease;
  transition:margin-top 0.7s ease;
  }
  /* Header Animation --------------------- */
  #related_posts:hover > .rpTitleH2::before, #related_posts:hover > .rpTitleH2:focus::before, #related_posts:hover > .rpTitleH2:active::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);box-shadow:inset 0px 1px 0px 0px #97c4fe;
  }
  #related_posts:hover > .rpTitleH2{
  padding-left:15px;
  }
  .rpTitleH2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0,0,0,.2);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  }
  .rpTitleH2 {
  display: inline-block;
  text-align:left;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  width:100%;
  height:30px;
  box-sizing:border-box;
  background-color:#0083da;
  display:inline-block;
  cursor:pointer;
  color:#fff;
  font-size:110%;
  font-weight:bold;
  padding:4px 10px;
  text-decoration:none;
  box-shadow:inset 0px 1px 0px 0px #97c4fe;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  }
  /* Responsive --------------------- */
  @media screen and (max-width: 525px){#related_posts li{width:50%;}}
  @media screen and (max-width: 700px) and (min-width: 525px){#related_posts li{width:33.3%;}}
  @media screen and (max-width: 900px) and (min-width: 701px){#related_posts li{width:25%;}}
  @media screen and (max-width: 1170px) and (min-width: 901px){#related_posts li{width:20%;}}
  @media screen and (max-width: 1351px) and (min-width: 1171px){#related_posts li{width:16.66%;}}
  </style>
  
  
  KETERANGAN
  Kode CSS di atas bisa juga diletakan didalam CSS Skin Code atau diatas kode </Head> atau bisa juga di dalam postingan artikel dan kotak widget.
  
  Elemen-elemen pada kode CSS tersebut bisa anda sesuaikan lagi agar bisa sesuai dengan template blog yang anda gunakan, seperti elemen warna latar, margin, padding, dimensi gambar dan elemen lainnya.
  
  
  <script>
  /* -- Ajax Related Post or Recent Post || codeflare blogspot -- */
  function relatedPostsWidget(a){
  (function(e) {
  var f = {
  blogURL: "",
  maxPosts: 7,maxTags: 7,maxPostsPerTag: 7,
  listWidth: 175,
  containerIds: "#comments",
  containerSelector:"#related_posts",
  tags: null,
  loadingText: "Loading...",
  loadingClass: "",
  relevantTip: "",
  MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  rlt_summary: 100,
  ShowDate: true,
  relatedTitle: '<i class="fa fa-fire" aria-hidden="true"></i> Related Posts',
  readMoretext: " [...]",
  rlpBlank: "",
  rlt_thumb: 200,
  recentTitle: '<i class="fa fa-fire" aria-hidden="true"></i> Recent Posts',
  postScoreClass: "",
  autoWidth:true,
  onLoad: false
  };
  f = e.extend({}, f, a);
  var k = 0,
  b = null,
  g = null;
  if(!$(f.containerSelector).length){
  $(f.containerIds).before('<div id="'+(f.containerSelector).substring(1)+'"></div>');
  }
  /* -- Auto Post Number
  var x1=Math.floor(($(f.containerSelector).width())/f.listWidth);
  if(x1<=1){x1=2;}
  if(f.autoWidth==true){f.maxPosts=x1;f.maxTags=x1;f.maxPostsPerTag=x1;}
  Auto Post Number -- */
  var c = function(x, r) {
  k++;
  if(x.feed.entry) {
  for(var w = 0; w < x.feed.entry.length; w++) {
  var m = x.feed.entry[w];
  var o, p, C, q, B, n, t, A, v, y, z = "";
  for(var u = 0, s = m.link.length; u < s; u++) {
  if(m.link[u].rel == "alternate") {
  z = m.link[u].href;
  break
  }
  }
  o = ("content" in m) ? m.content.$t : ("summary" in m) ? m.summary.$t : "";
  var l = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
  q = e("<div></div>").append(o.replace(l, ""));
  B = q.find("img");
  if("media$thumbnail" in m) {
  p = m.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + f.rlt_thumb + "-c")
  } else {
  if(B.length != 0) {
  p = B[0].src
  } else {
  p = f.rlpBlank
  }
  }
  o = o.replace(/<\S[^>]*>/g, "");
  if(o.length > f.rlt_summary) {
  o = o.substring(0, f.rlt_summary)
  }
  C = m.title.$t;
  y = m.published.$t.substring(0, 10);
  n = y.substring(0, 4);
  t = y.substring(5, 7);
  A = y.substring(8, 10);
  v = f.MonthNames[parseInt(t, 10) - 1];
  if(location.href.toLowerCase() != z.toLowerCase()) {
  i(z, C, p, o, n, A, v)
  }
  }
  }
  if(k >= f.tags.length) {
  g.attr("class", "");
  e("#related-posts-loadingtext", b).remove();
  if(f.maxPosts > 0) {
  e("li:gt(" + (f.maxPosts - 1) + ")", g).remove()
  }
  }
  };
  var i = function(q, u, w, m, y, v, x) {
  var r = e("li", g);
  for(var p = 0, l = r.length; p < l; p++) {
  var t = e("a", r.eq(p));
  var s = j(t);
  if(t.attr("href") == q) {
  h(t, ++s);
  for(var o = p - 1; o >= 0; o--) {
  var n = e("a", r.eq(o));
  if(j(n) > s) {
  if(p - o > 1) {
  r.eq(o).after(r.eq(p))
  }
  return
  }
  }
  if(p > 0) {
  r.eq(0).before(r.eq(p))
  }
  return
  }
  }
  g.append('<li><div class="inner"><a class="titleRelatedPost" href="' + q + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : "") + '"><span class="imageRP"><img alt="' + u + '" src="' + w + '"/></span><strong>' + u + "</strong></a><p>" + m + '<a title="' + u + '" href="' + q + '">' + f.readMoretext + "</a>" + (f.ShowDate === true ? '<span class="date"><strong>' + v + "</strong><span>" + x + "</span><span>" + y + "</span></span>" : "") + "</p></div></li>")
  };
  var j = function(l) {
  var m = parseInt(l.attr("score"));
  return m > 0 ? m : 1
  };
  var h = function(l, m) {
  l.attr("score", m);
  if(f.relevantTip) {
  l.attr("title", f.relevantTip.replace("\d", m))
  }
  if(f.postScoreClass) {
  l.attr("class", f.postScoreClass + m)
  }
  };
  var d = function() {
  if(f.containerSelector != "#related_posts") {
  var l = e(f.containerSelector);
  if(l.length != 1) {
  return
  }
  b = e('<div id="related_posts"></div>').appendTo(l)
  } else {
  b = e(f.containerSelector)
  }
  if(!f.tags) {
  f.tags = [];
  e('a[rel="tag"]:lt(' + f.maxTags + ")").each(function() {
  var o = e.trim(e(this).text().replace(/\n/g, ""));
  if(e.inArray(o, f.tags) == -1) {
  f.tags[f.tags.length] = o
  }
  })
  }
  if(f.tags.length == 0 && !f.recentTitle) {
  return
  }
  if(f.tags.length == 0) {
  e("<div class='rpTitleH2'>" + f.recentTitle + "</div>").appendTo(b)
  } else {
  if(f.relatedTitle) {
  e("<div class='rpTitleH2'>" + f.relatedTitle + "</div>").appendTo(b)
  }
  }
  if(f.loadingText) {
  e('<div id="related-posts-loadingtext">' + f.loadingText + "</div>").appendTo(b)
  }
  g = e("<ul " + (f.loadingClass ? 'class="' + f.loadingClass + '"' : "") + "></ul>").appendTo(b);
  if(f.tags.length == 0) {
  e.get((f.blogURL === "" ? window.location.protocol + "//" + window.location.host : f.blogURL) + "/feeds/posts/default?max-results=" + f.maxPostsPerTag + "&orderby=published&alt=json-in-script", c, "jsonp")
  } else {
  for(var n = 0, m = f.tags.length; n < m; n++) {
  e.get((f.blogURL === "" ? window.location.protocol + "//" + window.location.host : f.blogURL) + "/feeds/posts/default/-/" + f.tags[n] + "?max-results=" + f.maxPostsPerTag + "&orderby=published&alt=json-in-script", c, "jsonp")
  }
  }
  };
  d();
  })(jQuery);
  }
  $(document).ready(function(){relatedPostsWidget();});
  </script>
  
  KETERANGAN
  
  Berikut keterangan aturan default yang terdapat pada elemen script di atas.
  
  • blogURL
    posisi default adalah kosong yang berfungsi mengambil data yang secara otomatis dari URL blog anda. Apabila anda ingin menggunakan data dari blog lain silakan dituliskan alamat URL blog tersebut.
    
    Contoh : "https://blog-anda.blogspot.com"
  
  
  • maxPosts: 6, maxTags: 6, maxPostsPerTag: 6
    maxPost : merupakan jumlah artikel yang akan ditampilkan.
    maxtags : jumlah tag maksimum dari artikel yang berkaitan.
    maxPostsPerTag : jumlah maksimum dari masing-masing tag yang berkaitan.
  
  
  • listWidth: 175
    ukuran dimensi yang digunakan sebagai pembagi dari lebar elemen Related Article untuk mendapatkan jumlah artikel terkait secara otomatis.
  
  
  • autoWidth:true
    secara default akan menentukan jumlah Related Article yang ditampilkan berdasarkan dimensi listWidth yang sudah ditentukan. Apabila ingin menentukan jumlah Related Article sendiri maka nilai true dirubah menjadi false.
  
  
  • containerIds: "#comments"
    secara default lokasi tampilan Related Post akan ditampilkan diatas elemen #comments apabila lokasi elemen id #related_post tidak ditemukan.
  
  
  • containerSelector:"#related_posts"
    secara default merupakan elemen utama untuk menampilkan widget Related Post.
• Selesai klik tombol "Save" dan lihat hasilnya.

Kustomisasi Widget

Widget Related Post pada settingan awal akan ditampilkan di atas elemen komentar dan tentunya letak dari tampilan tersebut masih bisa disesuaikan sesuai dengan kebutuhan anda. Cara untuk merubah lokasi dari tampilan widget Related Post ini yaitu dengan merubah nilai containerIds yang terdapat pada script di atas.

Cara kedua untuk merubah lokasi tampilan yaitu dengan menempatkan elemen spesifik di dalam kode HTML template blog anda. Berikut elemen kode spesifik yang bisa anda tempatkan dimana saja di dalam kode HTML blog anda.

<div id='related_posts'></div>

Kode HTML di atas bisa anda tempatkan di mana saja pada kode HTML blog, bisa di dalam kotak widget, di dalam postingan artikel atau di lokasi footer blog. Bisa juga digabungkan dengan efek float dan animasi JQuery yang bisa anda sesuaikan sendiri.

Baiklah semoga informasi kali ini bisa memberikan manfaat bagi pembaca artikel blog CodeFLare. Sampai bertemu lagi di postingan artikel berikutnya.

Keyword

Cara, Pemasangan, Memasang, Membuat, Artikel, Terkait, Related, Article, Post, Automatic, Responsive, Blog, Blogger, Blogspot, Responsif, Otomatis, Link, Page, View, Animasi, Script, CSS, JavaScript, JQuery, Widget, Custom, Recent, Code

Incoming Search Term

Cara Memasang Widget Related Post, Cara Menggunakan Related Post, Cara Membuat Related Otomatis, Animasi Slide Up Related Post Blogger, CSS Slide Up Related Post, Cara Pasang Related Post Di Blogger, Related Post Super Keren dan Menarik, Widget Related Post Terbaru 2020, Kode Script Related Post Blogspot, Related Post Simple, Cara Mudah Memasang Related Post Content, Artikel Related Post