Cara Membuat Readmore Otomatis dan Artikel Terkait

Disini saya hanya memposting yang terkait dengan blog ini. Diantaranya adalah membuat readmore otomatis seperti yang ada di blog ini. Pada dasarnya banyak cara untuk membuat readmore di blog yang bisa di jumpai di berbagai blog. Namun, disini hanya menuliskan kembali (repost) cara membuat readmore yang otomatis. Berikut langkah-langkahnya :

1. Masuk (login) ke account blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda centang pada "Expand Widget Template".

2. Cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 

Keterangan tulisan berwarna merah :

Summary noimg 430 adalah tinggi artikel terpenggal tanpa image
Summar img 430 adalah tinggi artikel terpenggal dengan image

3. Cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

GANTI kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160; READMORE... </a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : perhatikan tulisan berwarna merah !!

Tulisan READMORE.. bisa diganti dengan yang lainnya seperti "Baca selengkapnya" atau "Baca lebih lanjut" dan sebagainya.

MEMBUAT ARTIKEL TERKAIT 

Untuk membuat artikel terkait diblog juga memiliki banyak cara, namun diblog saya menggunakan layanan widget dari situs http://www.linkwithin.com/ karena cukup simple dan tampilannya pun menarik (menampilkan gambar) sebagaimana tampilan di blog ini.

Tampilan readmore dan artikel terkait (4 artikel)

Langkah-langkahnya :

1. Buka http://www.linkwithin.com

2. Isikan kolom yang ada seperti email, alamat blog (link blog), pilih platform  yaitu blogger, dan tentukan berapa artikel yang akan di tampilkan. Diblog ini hanya menampilkan 4 artikel (lihat gambar). Kemudian klik Get Widget!.

3. Berikutnya akan ada petunjukan tentang bagaimana memasangnya di blog. Langkah-langkahnya simple, klik click Install Widget dan ikut terus petunjuknya hingga terpasang di blog.

Cara lainnya, bisa dengan berikutnya ini :

1. Masuk (login) ke akun blogger
2. Klik design kemudian edit HTML
3. Centang dibagian "Expand Widget Templates"
4. PERHATIAN !!! Untuk menghindari kesalahan sebaiknya download full template terlebih dahulu, agar jika semisalnya terjadi kesalahan, bisa di kembalikan lagi dengan meng-upload template yang semula.

5. Setelah itu letakkan kode berikut di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Jika sudah, langkah berikutnya adalah mencari kode berikut :

<div class='post-footer-line post-footer-line-1'>

Kemudian, copy kode di bawah ini dan letakkan di bawah kode diatas,

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href=' http://www.kutulis.com/2012/04/cara-membuat-artikel-terkait-dengan.html ' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Related Posts with Thumbnails Code End-->

Setelah selesai, silakan disimpan !!!.