» » Cara Membuat Related Post Dengan Thumbnail Keren Di Blog Part I

Cara Membuat Related Post Dengan Thumbnail Keren Di Blog Part I

Cara Membuat Related Post Dengan Thumbnail Keren Di Blog Part I

Related Post Dengan Thumbnail KerenRelated Posts Widget With Thumbnails and Summary For Blogger
Created : Admin TG | Label : Trik Blog
Pada kesempatan kali ini saya akan memberikan sedikit trik cara membuat related post dengan thumbnail keren di blog seperti yang ada di blog ini, dan cara melakukannya anda hanya perlu melakukan langkah - langkah di bawah ini :

Contoh # 1
Related V.01

Kode Script Contoh #2
<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* Lebar dan tinggi dari posting bidang terkait - triksgratis.blogspot.com */
    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>

Contoh # 2
Related V.02

Kode Script Contoh #2
<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* Lebar dan tinggi dari posting bidang terkait - triksgratis.blogspot.com */
    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>

Ok. dan untuk cara pemasangannya silalhkan anda ikuti langkah - langkahnya di bawah ini
  1. Silahkan anda login ke blog
  2. Klik [ Template ] >> [ Edit HTML ]
  3. Tekan [ CTRL + F ] Cari Kode [ </head> ]
  4. Kalau sudah ketemu copy kode di bawah ini dan simpan di atasnya
    <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/AVvXsEiF8Cg3tm6JenvAzXmDciWZdYxpF_qAuvdEulijRYr7FiGEt6DFb7t3QPV6pVv0ZUwHq60mGnhOFOTxLiAhgiKCvvILpFgpyfKhfbrePsHcUZAKY_Y1pD7IiNR2jP-72gkO9qwELZcmW5s/s320/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" />
    5.   Ket :
    • Var RelatedPostsNum = Untuk mengubah Jumlah Posting Yang ingin ditampilkan
      •  
    • var Relatedmaxnum = Untuk mengubah jumlah karakter yang akan di tampilkan pada pesan singkatnya
      •  
     
  5. Sekarang Anda tinggal pilih mau Related Post yang [ warna putih ] apa [ warna hitam ] yang di atas kalau sudah di pilih copy kodenya dan simpan di atas [ </head> ]
    6.  
  6. Sekarang anda cari kode di bawah ini
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    7.  
  7. Nah kalau sudah ketemu anda copy kode di bawah ini
    <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>
    8.  
  8. Dan hasilnya akan terlihat seperti ini
    <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    <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>
              </b:loop>
    9.  
  9. Untuk tahap yang terakhir yaitu pemasangan related postnya silahkan cari kode [
    <b:includable id='postQuickEdit' var='post'> ]     atau [ Related Post anda ] yang sudah anda pasang dan ganti kode anda dengan kode di bawah ini
    <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>
    10.  
  10. Klik [Simpan}




http://triksgratis.blogspot.com



Posted by Unknown, Published at 17:00 and have 1 komentar

1 komentar:

  1. Unknown17 November, 2015

    http://istana-ppob.blogspot.co.id/p/cek-pajak-kendaraan-jawa-tengah-online.html

    ReplyDelete
:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Jangan Cuman di Baca aja, Tinggalin Komentar juga ya...!!!