2-Bersaudara

Selamat siang sobat 2-Bersaudara, Tidak pernah bosan-bosannya saya menyapa dan selalu tersenyum kepada sobat 2-Bersaudara. Hemmm, tentunya masi ingat kan sama saya harus ingat donk. Okedeh siang hari ini saya akan share tutorial mengenai Cara Memasang Artikel Terkait di Blogger. Cara pemasangannya agak rumit tapi asal sobat ikuti petunjuk yang saya paparkan dibawah dengan benar maka Insya Allah akan berhasil dan sampai dengan selamat.

Warning !!! Kalo ragu jangan dikelola dulu Scrit HTML nya tapi buat dulu Cadangan Script sobat supaya nanti bila terjadi kerusakan tidak caek lagi memperbaikinya.

Sebelum mulai melakukan pemasangan Artikel Terkait atau Related Post seperti judul diatas, terlebih dahulu siapkan dulu peralatan seperti :

Mental sobat "Jangan Kondisi Ngantuk"
Kopi susu kental masis
Rokok "Jika Sobat Merokok"
DLL

Oke deh, untuk yang berminat di akhir posting bisa sobat lihat punya saya, saya juga menggunakan ini atau bisa lihat ScreenShot dibawah ini :

Kita langsung mulai saja turorialnya :

Tahap I : Pemasangan Script JavaScrit

Buka Template HTML sobat
Tekan ctrl + f dan cari script </head>, jika sudah ketemu copy semua script dibawah ini dan letakkan tepat di atas scrit </head>

<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/AVvXsEjHRpi7jgnqC9gYCtmYQPJ4kryNTuMn4dTLTHmSixqujYg5xBhEHgBwa4b7Zq-ara1YN8ZZ85auZHxa4Skb9hJhXDsm0vpVUyFwoiPd3bL2YwLQ7jOvihS34xbUf8BRKv5or80bk3RKbCbq/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" />

Catatan :

var relatedPostsNum = Jumlah posting yang ingin sobat tampilkan

var relatedmaxnum = Jumlah karakter teks yang ingin sobat tampilkan

var relatednoimage = Gambar Thunambil jika entri sobat tidak ada gambar nya "No Image"

Tahap II : Pemasangan Script CSS

Versi I : Warna silver, lihat ScreenShot nya

Cari script ]]></b:skin>, jika sudah ketemu copy semua script dibawah ini dan letakkan tepat di atas scrit ]]></b:skin>

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

Versi II : Warna hitam, lihat ScreenShot nya

Cari script ]]></b:skin>, jika sudah ketemu copy semua script dibawah ini dan letakkan tepat di atas scrit ]]></b:skin>

<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 #0A0A0A;
  display: inline-block;
}

.relatedsumposts:hover {
  background-color: #0A0A0A;
}

.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 #000;
  background: #282828;
  -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 #0A0A0A;
  border-bottom: 1px solid #0A0A0A;
  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: #121212;
  height: 200px;
 /* related posts container */
  padding: 5px;
  width: 100%;
}

.relatedpoststitle {
  font-size: 19px;
  font-weight: bold;
  border-top: 3px solid #FB8227;
  color: #ccc;
  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>

Tahap III : Penambahan script

Cari script dibawah ini.

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

Jika sudah ketemu, letakkan script dibawah ini tepat dibawah kode diatas.

<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 Bernas hasilnya akan seperti ini gambar dibwah ini

Tahap IV : Peletakan tampilan Related Post

Cari scrit dibawah ini

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Lalu letakkan Script dibawah ini tepat diatas script </b:includable>

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

Untuk lebih jelas silahkan lihat gambar dibwah ini.

Memasang Artikel Terkait Keren di Blogger

Diposting oleh : D E B I Posted on Selasa, 23 Desember 2014 - 10:56 PM with 4 comments

4 komentar:

Telusuri Blog

Berlangganan via Email

Fans Page Facebook ME

Popular Posts