Kumpulan Cara Membuat Related Post Hanya Text (No Thumbnails)

Membuat sebuah link yang bisa mengarahkan pengunjung blog tetap betah juga termasuk trik yang kebanyakan para blogger cari. biasanya related post ini kebanyakn sudah disiapkan secara otomatis oleh template-template yang bisa di unduh gratis. Tapi jika ingin menambahkannya secara manual bisa langsung menggunakan trik ini.
Banyak yang memberikan informasi tentang bagaimana membuat sebuah script dalam menautkan topik antar label, namun kali ini sobat blogger akan mendapatkan langsung beberapa trik yang merupakan kumpulan dari beberapa sumber referensi tentang cara membuat related post. beberapa contoh related post stylist bisa anda lihat di postingan INI

Langsung saja tanpa basa-basi sobat 

Style 1>>

Related Post Text 1

1. Login ke Blogger
2. Masuk ke Layout/Tata Letak
3. Tambah Gadget/Add Gadget (widget) dan pilih HTML/Javascript

cara masuk ke layout dan memilih tambahkan gadget

    5. Copy Script di bawah ini dan pastekan ke dalam Widget tersebut.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

Note : Script berwarna merah di atas jika di dalam template sudah ada maka tidak perlu di masukkan ke dalam widget, jika script berwarna merah tetap di masukkan dan di template sobat sudah ada, maka di halaman home page blog biasanya semua index artikel akan hilang, untuk itu kode merah tersebut tidak perlu di masukkan kedalam widget dengan catatan jika sudah ada dalam template.

Style 2>>

Gambar kiri menggunakan summary dan Gambar kanan hanya title atau judul

 ++Script untuk gambar kiri menggunakan summary :

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://banguet.blogspot.com" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Note : Script berwarna merah di atas ganti dengan URL blog anda, dan warna biru merupakan jumlah artikel yang akan muncul.

++Script untuk gambar kanan tanpa menggunakan summary :

 <div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://banguet.blogspot.com/" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Note : Script berwarna merah di atas ganti dengan URL blog anda, dan warna biru merupakan jumlah artikel yang akan muncul.

Lakukan cara yang sama dengan Style 1 saat akan menambahkan related post pada blog

Demikian sobat PB Blog, semoga tutorialnya bermanfaat

Share this Post :

Related Posts