Cara Membuat Related Post di Bawah Postingan

Cara Membuat Related Post di Bawah Postingan | Untuk mempercantik blog Anda kta harus mengutak atik scrip yang ada didalamnya, tapi sebelumnya Anda harus membackup dulu sebelum langkah tersebut Anda lakukan, karena untuk menjaga hal-hal yang tidak diinginkan terjadi.
Okelah kita langsung eksekusi saja bagaimana Cara Membuat Related Post di Bawah Postingan, langkah - langkahnya sebagai berikut :

Langkah Pertama  | Silahkan login ke blogger, sukses masuk ke Dashboard, langsung ke Template lalu klik Edit HTML, Contoh gambar seperti dibawah ini :

 

Langkah Kedua |  Klik kiri mouse di dalam area HTML blog Anda dan kemudian silahkan tekan CTRL + F untuk memunculkan kolom pencarian.

 

Langkah Ketiga |  Ketik kode ' </head> 'di dalam kolom pencarian, kemudian copy kode dibawah ini dan paste kan tepat diatas kode </head> :

<Script type = 'text / javascript'>
// <! [CDATA [
relatedTitles var = new Array ();
relatedUrls var = new Array ();
var relatedpSummary = new Array ();
var relatedThumb = new Array ();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // Jumlah entri yang akan ditampilkan var relatedmaxnum = 75; // Jumlah karakter ringkasan var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFl2cvJjix0SGL0Yfa8s0YUT7DBayujhZsoMT0K5dY9SgUrG57aIVyg34V5lyWPpOinuzJTXeCEvxNTiJ5OXi0jcB0SeF3ZrgHMLKE1-cEpEvQgrshYKv4XnF-RmuYnkMjkoe45z6HctX/s1600/no_image.jpg"; // Gambar default untuk postingan tanpa jpg //]]>
</ Script>
<Script src = "http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbs-and-summaries.js" />

 Keterangan warna Script :

1. Untuk merubah jumlah postingan yang ingin Anda tampilkan pada warna biru
2. Untuk merubah jumlah karakter kalimat yang ingin anda tampilkan pada warna Merah
3. Untuk merubah jpg defautl bila tidak ada gambar dalm postingan Anda warna Coklat

Kemudian tambahkan Script dibawah ini sama persis di atas kode head

<Style>
.relatedsumposts {
float: kiri;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/ * Lebar dan tinggi dari postingan Anda * /
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 * /
Warna: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}

.relatedsumposts img {
/ * humbnail * /
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px # fff padat;
-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-transisi-durasi: 0.8s;
-o-transisi-durasi: 0.8s;
Transisi-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transisi-properti: -moz-transform;
-o-transisi-properti: -o-transform;
Transisi-properti: transform;
overflow: hidden;
}

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

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

#relatedpostssum {
background: # F3F3F3;
height: 200px; / * Postingan terkait * /
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: kiri;
margin: 0px 0px 20px -200px;
transform: rotate (90deg);
mengubah-asal: kiri atas 0;
-MS-transform: rotate (90deg);
-MS-transform-asal: kiri atas 0;
-webkit-transform: rotate (90deg);
-webkit-transform-asal: kiri atas 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</ Style> 

Keterangan warna Script :

1. Warna merah adalah penyesuaian lebar Related Post
2. Warna Biru Adalah untuk warna tulisan Link
3. Warna Violet Untuk merubah ukuran Jpg
4. Warna Coklat untuk menetkan besar kecilnya garis lingkaran
5. Warna Hex untuk menyesuaikan tampilan postingan #summarycolor;
6. Waran Biru Muda untuk merubah tinggi dan lebar kotak Related Post.

Langkah Kempat | Masukkan lagi kode dibawah ini di dalam kom pencarian

<a expr:href='data:label.url' rel='tag'> <data: label.name/> </a> <b: if cond = 'data:! label.isLast = & quot; benar & quot;' >, </ b: if>

Setelah menemukan kode diatas, silahkan copy kode dibawah ini kemudian pastekan tepat dibawah kode diatas :

<B: if 'data: blog.pageType == & quot; item yang & quot;' = cond>
<Script expr: src = '& quot; / feed / posts / default / - / & quot; + Data: label.name + & quot; alt = json-in-script & amp; callback = readpostlabels & amp; max-results = 50 & quot; ' ketik = 'text / javascript' />
</ B: if>

Bila sudah Anda Pastekan maka akan terlihat seperti dibawah ini :

<B: 'data: post.labels' nilai lingkaran = 'label' var =>
<a expr:href='data:label.url' rel='tag'> <data: label.name/> </a> <b: if cond = 'data:! label.isLast = & quot; benar & quot;' >, </ b: if>
<B: if 'data: blog.pageType == & quot; item yang & quot;' = cond>
<Script expr: src = '& quot; / feed / posts / default / - / & quot; + Data: label.name + & quot; alt = json-in-script & amp; callback = readpostlabels & amp; max-results = 50 & quot; ' ketik = 'text / javascript' />
</ B: if>
</ B: lingkaran>

Langkah Kelima | Cari kode yang mirip dibawah ini :


</ B: includable>


Bila sudah menemukan silahkan pastekan kode di bawag ini tepat di atas kode '  </ B: includable>  '

<B: if 'data: blog.pageType == & quot; item yang & quot;' = cond>
<Div class = 'post-footer-line post-footer-line-4'>
<Div class = 'relatedpoststitle'> POS TERKAIT </ div>
<Div id = 'relatedpostssum'>
<Script type = 'text / javascript'> showrelated (); </ script>
</ Div>
<Div style = "clear: both; '/>
</ Div>
</ B: if> 

Langkah terakhir | klik tombol save untuk menyimpan perubahan dan selesai !

Teguh 1978

Ojo Dumeh Eling Lan Waspodo

Share this post