Jumat, 30 September 2016

Cara Membuat Releaded Post Di Blog Dengan Gambar

  Tidak ada komentar
Cara Membuat Releaded Post Di Blog Dengan Gambar - Kali ini blogriby mau posting tentang membuat related post, karena banyak belum tahu cara buat related post di blog, karena itu mimin mau praktekan cara nya bikin related postnya kalian bisa simak cara nya baik-baik bila ada yang kesusahan kalian bisa berkomentar di bawah.

1.Kalian masuk ke blog masing-masing.
2.Klik Tempelate => Klik Edit HTML.
3.Cari kata kunci </head> copy kode di bawah ini dan paste kode nya di atas kode </head> .
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:100px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->

Keterangan:
Kode berwarna Biru adalah ukuran gambar yang akan di tampilkan pada related Post, Kalian ubah sesuai selera kalian masing-masing.

4.Cari kata kunci <div class='post-footer'> copy kode di bawah ini dan paste di atas kode <div class='post-footer'> .
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'>
<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=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan:
Kode berwarna Biru adalah jumlah related post kalian bisa ubah sesuai selera kalian.

Mungkin itu saja yang bisa mimin bagi jika mimin ada waktu lowong akan mimin berikan demo nya :) Oiya disini mimin gak pake Related Post karna akan memperlambat loading blog mimin ^_^

Tidak ada komentar :

Posting Komentar