News Update :

Memasang Artikel Terkait Keren di Blogger

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

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 = "http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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 :
  1. var relatedPostsNum = Jumlah posting yang ingin sobat tampilkan
  2. var relatedmaxnum = Jumlah karakter teks yang ingin sobat tampilkan
  3. 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 != &quot;true&quot;'>,</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.
          Share this Article on :
          Memasang Artikel Terkait Keren di Blogger
          Item Reviewed: Memasang Artikel Terkait Keren di Blogger 9 out of 10 based on 10 ratings. 9 user reviews.

          4 komentar:

           

          © Copyright 2-Bersaudara 2015 | Design by Herdiansyah Hamzah | Editing by 2-Bersaudara.