Cara Mudah Membuat Readmore Menggunakan Gambar di Blog
Cara Mudah Membuat Readmore Menggunakan Gambar di Blog secara detail akan di jelaskan di sini . Ada baiknya sebelum saat masuk kepembahasan cara pembuatan , sedikit penjelaskan manfaat dari readmore ini.Manfaat utama Membuat Readmore ini yakni membatasi sisi dari tulisan, hingga potongan tulisan selanjutnya bisa dibaca jika mengklik tombol readmore itu. Menggunakan manfaat readmore kita bisa memaksimalkan halaman utama situs (blog), hingga halaman utama bisa menampilkan semakin banyak artikel. sesungguhnya blogger telah memfasilitasi untuk bikin readmore, tetapi banyak yang tidak senang serta ingin memodifikasinya gunakan image/gambar. karenanya, admin akan menjelaskan bagaimana langkah membuat readmore di blog menggunakan gambar/image . Oke langsung aja ;
Cara Membuat ReadMore di Blogger
1. Langkah awal adalah Login ke Akun Blog sobat
2. klik Template / Design
3. Klik Edit HTML
4. Cari kode </head> ( pakai ctrl + f untuk meringankan pencariah )
5. Lalu masukkan kode CSS di bawah ini dibawah kode </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://readmore-otomatis-js.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
6. Langkah setelah itu mencari kode <data:post.body/> atau <p><data:post.body/></p>
bila anda ingin membuat readmore otomatis menggunakan image atau gambar, hapus kode tesebut serta ubah dengan kode di bawah ini
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");
</script> <script src='http://qnando.com/fb.js' type='text/javascript'/>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='URL GAMBAR READMORE DISINI'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/><br/><p align='right'>
<a href='http://qnando.com'>| <em>bisnis online</em> |</a></p></b:if>
serta bila anda pingin menggunakan readmore otomatis cuma berbentuk text atau catatan ubah kode layaknya no. 7 tadi dengan kode di bawah ini :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
8.Klik Pratinjau untuk memastikan bahwa kode tadi sudah bekerja pada blog sobat.
9. Lalu Save/Simpan Template.
Note :Saya tidak bertanggung jawab atas kerusakan/crash karena terjadi kesalahan pribadi dalam penambahan widget yang anda lakukan.Sebelum mencoba kode HTML/CSS diatas ,ada baiknya anda mem-backup template anda terlebih dahulu untuk menghindari hal yang tidak di inginkan.
Nah itulah tadi mengenai Cara Mudah Membuat Readmore Menggunakan Gambar di Blog , semoga dapat bermanfaat bagi sobat-sobat semua , Jika artikel-artikel yang kami terbitkan membantu silahkan tinggalkan komentar ataupun +1 anda (seberapa penting +1 anda buat kami) pada artikel ini dan sobat juga dapat berlangganan artikel dengan siicunn.blogspot.com baik itu melalu RSS Feed ataupun melalu akun email anda untuk mendapatkan pemberitaan postingan lebih cepat dari yang lainnya melalui email anda.
jossss ... iya bagus min .. tapi ga semua template bisa dikasih kode css ini , ga semua template bisa work kalau di kasih ini . tergantung template nya juga min . kalau blog ane ga mendukung kode css ini kaya nya . jadi tergantung template nya.
BalasHapusiya makasih masukkannya sob ..
Hapusbetul seperti yang ente bilang , emang ga kesemua template. dan itu wajar karena terkadang beberapa template sudah ada readmore bawaannya :)