Cara Membuat READ MORE Bergambar di BLOG

Cara Membuat READ MORE Bergambar di BLOG

Bagaimana caranya buat readmore bergambar?
Saya berniat akan memberikan sedikit info tapi bermanfaat tentang blog tutorial yaitu tentang readmore bergambar .Langsung saja ya. Kita akan membahan tentang read more.Karena banyak nya postingan. Sehingga blog kita tidak efektif, karena panjangnya
setiap postingan...,,??
Mungkin kita bisa memberi read more otomatis. Kita akan membahas tentang readmore yang menggunakan gambar.


Berikut langkahnya..
1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Lalu cari kode <data:post.body/> , biar lebih cepat tekan ctrl+f
5. Ganti kode tersebut dengan kode di bawah ini..


readmore otomatis dengan gambar :

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGLgyLng_Un1Vf6mvIXtV7VK5pinYEiOJpVJRzG7z1l4yl53e4gXG7MVqqROAVdhCck1ORyDNVMp2pIf9XbVMovVH3rtsWEJ2pQPFiY3904P5MWpaAKOr_6SFtPD5UAsRhRTjJ3wR54pa/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Read more otomatis dengan gambar :

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAiXAduqzNwq-fA6FEfeGL5JtdKFl-1V66AQW7OHCqHcFW5DfbXyc3w03VjIso4wAklBmcXJXKX6APfq4scBGj_juXADKjmeDSEKWflMeKGxWlZ7ssnr3JnXQ5ED6OjimbjtNjDOX8PJ0/s1600/readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Read more otomatis dengan gambar :

<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'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiHBkFblJ4nNtL-qLgKuCJYGm580gnxLwiW5cIVfd4Xpjyiswzn7FYOwgNhyNiF5jqa4Wu9ENmvhyphenhyphen0jvNpdwkVJCLfrnQhK5wvfeDt-MqlBOWxBe03BFgdE9W0sCAucPR-EUZ5z6_MrqQ/s320/a1ifte.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6 Simpan template......

Read more: http://jagatpedia.blogspot.com/2011/11/cara-membuat-read-more-bergambar-di.html#ixzz1iYBpAjXt

Description: Cara Membuat READ MORE Bergambar di BLOG Rating: 5 Reviewer: ilham putra niandiILHAM PUTRA NIANDI ItemReviewed: Cara Membuat READ MORE Bergambar di BLOG

Cara buat ReadMore berwarna

 Readmore Berwarna

Untuk membuat ReadMore berwarna cukup sederhana caranya langsung saja ..

1. Login ke blogger.com
2. Klik Layout/Tata Letak ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p> biar cepat klik Ctrl+F
6. Kemudian ganti kode tersebut dengan kode 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/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

Keterangan :
Sebelumnya tulisan Read Morenya seperti tulisan yang berwarna biru. Tetapi pada postingan ini kita akan mengganti tulisan tersebut menjadi gambar. Caranya ganti kode “Read More” yang berwarna merah dengan kode ini

<IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/>

Jreeng...jadi dech , semoga bermanfaat
http://anjees.blogspot.com/2010/05/cara-membuat-readmore-bergambar.html
Hasilnya :

Description: Cara buat ReadMore berwarna Rating: 5 Reviewer: ilham putra niandiILHAM PUTRA NIANDI ItemReviewed: Cara buat ReadMore berwarna

Cara buat Read More Otomatis pada Template Blogger

Read More Otomatis pada Template Blogger

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)



(2)



(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:

<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://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah 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'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah 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'>[ Read More.. ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<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>
http://pelajaran-blog.blogspot.com/2011/04/membuat-read-more-otomatis-auto.html

Description: Cara buat Read More Otomatis pada Template Blogger Rating: 5 Reviewer: ilham putra niandiILHAM PUTRA NIANDI ItemReviewed: Cara buat Read More Otomatis pada Template Blogger

Cara Membuat READMORE Otomatis

Cara Membuat READMORE Otomatis

 

Aduh gimana lihat nih Blog pusing . ? ehem tenang aja saya bisa mengatasi permasalahan nya ehem dengarkan dan baca simak baik2 ok..!

Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya atau juga Baca Lebih Lanjut  pada postingan blog secara otomatis anda. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan image yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

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='ilhamputraniandi.googlecode.com/files/read-more%20otomatis%20jhahaha.js' type='text/javascript'/>

KEDUA, 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 : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image

==> Summar img 430 = tinggi artikel terpenggal dengan image

==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Cukup sekian ah saya nulis artikel ini, saya do'a kan semoga lancar aja terima kasih sudah baca artikel ini " thank's all"

~ R i v i e r A - A n i m e ~ 

N I A N D I

Description: Cara Membuat READMORE Otomatis Rating: 5 Reviewer: ilham putra niandiILHAM PUTRA NIANDI ItemReviewed: Cara Membuat READMORE Otomatis