Membuat Readmore "Baca lebih/Selanjutnya"

Banyaknya Artikel Cara Pembuatan Read More Blog. Agar tidak lupa maka saya mempostingkan ini juga, Nah Untuk itu Saya Akan Berikan Tutorial Pembuatan Berbagai Macam Readmore .
1. Masuk Blogger pilih Template
2. Centang Expand Template Widget
3. Cari kode </head> Supaya cepat klik Ctrl F dan tuliskan </head>
4. Masukkan kode dibawah ini tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; 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'/>

5. cari kode <data:post.body/> dan Ganti dengan kode dibawah 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 :
READ MORE : bisa diganti sesuai selera
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img = 340; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height = 100; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width = 120; adalah ukuran lebar thumbnail, bisa diganti sesuai selera
Dan apabila anda ingin memasukkan gambar, anda tinggal masukkan link Dibawah ini dan mengantikan kata Readmore dengan link gambar anda

<img class='img_getar' onclick='top.focus()' onmouseout='stoprattle(this);top.focus()' onmouseover='init(this);rattleimage()' src='http://i1230.photobucket.com/albums/ee498/filiex/filiex/readmorefiliex.png' style='float:right; width:150px; height:30px;'/>


 atau Anda ingin membuat Readmore otomatis tanpa Javascript

Cari kode <data:post.body/>

kemudian ganti dengan kode di bawah ini;

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Jika ada lebih dari 1 (satu) kode <data:post.body/> , pilih yang pertama. 


 Untuk tampilan di blognya silakan masukkan kode css di bawah ini, tepat diatas kode ]]></b:skin>

thumb img {float: left; margin: 0 10px 5px 0;}

Cari kode kemudian ganti dengan kode di bawah ini;

Jika ada lebih dari 1 (satu) kode , pilih yang pertama. 4. Untuk tampilan di blognya silakan masukkan kode css di bawah ini, tepat diatas kode ]]> thumb img {float: left; margin: 0 10px 5px 0;}

Artikel Terkait: