Senin, 10 September 2012

Membuat "read more" link/bergambar di Blog/Blogspot

Banyak kita jumpai "read more" atau "baca selanjutnya" di blog-blog ataupun situs tertentu. Hal ini dilakukan untuk mempersingkat postingan kita agar tidak terlalu panjang dan tidak memakan tempat serta akan terlihat rapi di blog. Tidak sulit sebenarnya untuk memasang "read more" di blog, tapi tetap menggunakan kode untuk membuatnya. Berikut cara memasangnya :

1. Login dulu tentunya pada blog anda.
2. Masuk pada Edit HTML kemudian cari kode </head> agar mempermudah pencarian gunakan F3 pada keyboard anda dan ketikan kode yang ingin anda cari pada kotak search yang tersedia. Setelah menemukan kode </head> silahkan anda letakkan kode berikut tepat diatas 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://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Kode diatas bisa dilakukan perubahan sesuai selera anda. Berikut kode yang dapat anda rubah :
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

Setelah itu cari lagi kode <data:post.body/> dan ganti kode tersebut dengan kode berikut :

<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;read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan read more bisa anda ganti sesuai keinginan anda. Kalau sudah silahkan simpan.

Jika anda menginginkan tulisan readmore menjadi sebuah image silahkan copy script dibawah ini untuk menggantikan kode <data:post.body/>

<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'>
<img src="GANTI DENGAN URL IMAGE ANDA"></img></a></span>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Selamaat mencobaa !!
silahkan tinggalkan komentar anda dan jangan lupa likenya yaa :)
Terima kasiih


Related Post About Blog


  >>Lihat Juga<<

Cara Mudah Membuat Blog
Cara Mudah Membuat Spoiler di Blog/Blogspot
Cara Menambahkan Link pada Blog Terbaru
Mengganti Email Login Blogspot dengan Mudah
Membuat "ReadMore" diBlog/Blogspot
Membuat Scroll Box dengan Mudah di Blog
Cara Mengetahui PageRank Blog/Blogspot
Cara Membuat Link Terbuka di Tab Baru
Membuat Efek Gerakan Sederhana dengan Photoshop
Membuat Kartu Ucapan Selamat Ulang Tahun dengan Photoshop
Membuat Animasi Bergerak dengan Photoshop
Membuat Efek Tulisan Timbul Sederhana dengan Photoshop
Cara Mudah Mendapatkan Banyak Jempol di Facebook
Membuat Efek Salju Berjatuhan/Berguguran di Blog (part I)
Membuat Efek Salju Berjatuhan/Berguguran di Blog (part II)
Daftar Kode Warna HTML
Cara Membuat Lebel Produk dengan Mudah
Cara Mudah Mmebuat Teks Mengelilingi Cursor
Lari Sprint (jarak pendek)
Sikap Start Aba-aba saat Lari Sprint
Sikap Saat Lari Sprint
Manfaat Lari
Cara Tepat Membentuk Perut Six Pack
Jenis dan Type Jerawat
Cara Cepat Menghilangkan Bekas Jerawat Secara Cepat dan Alami
Membuat Bata Press dari Plastik

Tidak ada komentar:

Posting Komentar

W A R N I N G !!!
=Pembaca yang Baik selalu Meninggalkan Komentar=

~ Berkomentarlah secara baik dan sopan maka admin akan merespon
~ JANGAN ANONIM
~ Komentar Sesuai dengan Topik Pembicaraan
~ Tidak Menyertakan Link Aktif
~ Dilarang Promosi dalam Bentuk Apapun !

Related Posts Plugin for WordPress, Blogger...