Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

proBlogiz

Auto Read More 2Ini tutorial Blogger berseri dari cara Membuat Auto Read More dengan Gambar Thumbnail versi 2 di Blogger, lanjutan dari Auto Read More versi 1. Pada seri Membuat Auto Read More dengan Gambar Thumbnail versi II ini, masih melakukan metode blogger hack untuk membuat post summary ( ringkasan ) dengan thumbnail secara otomatis di halaman utama blog. Versi ini adalah hack script dari Rilwis yang telah di update dan dimodifikasi beberapa oleh proBlogiz, untuk membuatnya lebih usefull/multi guna. Lebih banyak fitur-fitur yang dapat Anda manfaatkan untuk membuat auto readmore yang user friendly, seperti : thumbnails floating,post skipping, ringkasan dengan dan tanpa thumbnails dan beberapa fitur utama new update, yaitu :

1.Terdapat Automatic default thumbnail image ketika postingan tidak mempunyai atau disertakan gambar/ image di dalamnya.

2.Dapat dengan mudah untuk membuat turn off/disable auto read more untuk beberapa posting pertama.

3.Opsi turn on/off auto readmore pada homepage and label page.
Sebelum mulai membuat Auto Read More, check jika Anda telah memasang Read More Link atau Auto Read More link di template, maka hapus kodenya dahulu semuanya. Caranya ikuti petunjuk Cara Menghapus Read More/Auto Read More Link di Blogger


Langkah Pemasangan Kode Script Auto Read More versi 2

1. Masuk ke Blogger Dashboard > Template
2. Backup template Anda
3. Click Edit HTML
4. Lanjutkan
5. Check Expand Widget Template checkbox
6. Cari code tag </head> ---> gunakan Control + F
7. Tambahkan / letakkan kode berikut tepat diatas tag </head>

<script type='text/javascript'>
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFy-rePVk3LlBAj0WWCJdnoJW_hHrkZDnzDnnu2OVv-4Z2ldIRe1EUSegFgc00K-5_wj6F0E3tEQmf2O_Lptc5mmAkS3s_7N-BqBz7mNLZwkJuqTfb44-rIWDPK7hXgmXyqFtiRSnWWY/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script src='http://problogizjs.googlecode.com/files/autoreadmore.js' type='text/javascript'/>


8. Cari tag line <div class='post-body entry-content'>
    Letakkan kode berikut tepat dibawah tag <div class='post-body entry-content'>

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
<span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
    </b:if>
</b:if>

10. Klik Pratinjau / Preview, setelah semua OK
      Save / Simpan Template

Kostumisasi Fitur

Anda dapat merubah code control fitur yang telah diberi warna-warna pada script auto read more diatas, antara lain :

showImage: true, Jika Anda tidak ingin menampilkan gambar thumbnail ganti "true" menjadi "false"
imgFloat: 'left', Jika ingin posisi gambar di sebelah kanan ganti menjadi 'right'
imgWidth: 120, Ukuran lebar gambar
imgHeight: 90, Ukuran tinggi gambar
defaultThumb:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFy-rePVk3LlBAj0WWCJdnoJW_hHrkZDnzDnnu2OVv-4Z2ldIRe1EUSegFgc00K-5_wj6F0E3tEQmf2O_Lptc5mmAkS3s_7N-BqBz7mNLZwkJuqTfb44-rIWDPK7hXgmXyqFtiRSnWWY/s1600/no-thumb.jpg', Gambar default ini muncul jika postingan tidak ada gambarnya. Anda juga bisa menggantinya dengan url gambar pilihan sendiri.
words: 65, Jumlah kata jika ringkasan dengan thumbnail
wordsNoImg: 80, Jumlah kata jika ringkasan tanpa thumbnail
skip: 0, untuk buat on/off fungsi auto readmore pada beberapa postingan. Jika di set angka "0" maka berarti all post/semua postingan diterapkan fungsi auto readmore 
showHome and showLabel: fungsi auto readmore pada halaman page dan label page. Jika di set "true" maka fungsi auto readmore enable/on dan "false" berarti off/disable


Itulah kawan, cara membuat Auto Read More versi 2, semoga bisa membantu Anda. Lihat juga :

Membuat Auto Read More dengan Gambar Thumbnail versi 1 
Membuat Auto Read More dengan Gambar Thumbnail versi 3 
Membuat Read More Link ( no hack )

Selamat mencoba!!
Jika mendapatkan problem / masalah terkait artikel ini, jangan sungkan ditanyakan di form komentar.
Artikel Terkait Lainnya:
Click here for comments

19 komentar

patut di coba sobat...wah blognya makin keren aja nih sob, habis ganti template ya? Trima kasih

REPLY

thanks mas....hehe
ga ko masih template yang sama

REPLY

Gan boleh nanya gak , di kompi ane kok bisa liat box komment ma follower , serta , bagian box link pada blog lain ?

Kira-kira apa permasalahan nya <<< ane msh lembur neh wat memecahkan masalahnya ?

REPLY

maksudnya? ga bisa lihat box comment?gmn jelasanya bos?

REPLY

atau coba aja terapin artikel ini http://problogiz.blogspot.com/2012/08/solusi-tidak-bisa-balas-komentar.html
saya dulu ada masalah juga pada comment threaded, solusinya ganti kode scriptnya semua
mungkin bisa membantu gan

REPLY

Gan cara membuat lebar gambar di situ menjadi 100% gimana???

REPLY

kalau maksudnya gambar dipostingan, tiggal di pilih opsi original size mas dihalaman post editor, kalau mau mengatur di template, edit di code :
.post img {...}
kalau yang img di fungsi read more edit di:
img_thumb_height = ...;
img_thumb_width = ...;
kurang jelas mas, gambar yg mn?

REPLY

thumbnail yang ada di auto read more. dari kode ini kira2 thumbnailnya bisa di atur lebarnya ke 100% gk?

var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120, <---------------- Ni gan.
imgHeight: 90,

REPLY

coba ganti 100% aja
itu juga tergantung dari setting templatenya

REPLY

Udah tp punya gw yg ver 1. yg lebarnya 100% cuma satu thumbnail dari dua post auto read more..

REPLY

itu karena postingannya ga ada fotonya mungkin

REPLY

Udah berhasil gan :)

--> http://ramadhansk.blogspot.com/

REPLY

Mantap....!!

mampir gan ke

http://khaeseven.blogspot.com/

REPLY

gan cara buat menu navigasi vertikal seperti blog punya agan bagaimana sih ........??

REPLY

yang label itu ya mas?
udah di share artikelnya di http://problogiz.blogspot.com/2012/10/3-style-label-cloud-untuk-blogger.html
terus pasang di kolom sidebar, cara buat kolom juga dishare :http://problogiz.blogspot.com/2012/12/menambah-2-kolom-di-bawah-sidebar-utama.html

REPLY

Malam.. saya baru saja menghapus auto readmore di blog saya, setelah saya mau pasang lagi autoreadmore ko ngga bisa bisa ya?

REPLY

yang masih saya bingung gimana sih caranya ngilangin panjang sama lebar Thunambilnya? sy pengen tinggi n lebar thunambilnya original seperti pertama di upload, kalau code ini di hilangin
imgWidth: 120
imgHeight: 90
imagenya malah ikut hilang, saya pengen tetap mempertahankan image di read more tapi sy pengennya imagenya ga ikut nyusut jadi kecil, jadi yg sy inginkan ga semua artikel imagenya ikut nyusut di read more, ada artikel2 tertentu yg image read morenya asli seperti pertama di upload...smoga agan paham dgn pertanyaan sy...
jadi intinya sy pengen ngilangin code ini
imgWidth: 120
imgHeight: 90
tapi imagenya pengen tetap muncul di readmore(lebar-tinggi image asli seperti pertama di upload)

REPLY

bang....bisa sih auto readmore nya....tapi kok dibawah readmore nya itu masih ada artikel lengkapnya....jadi kayak percuma dikasih readmore klo ujung"nya masih ada artikel utuh dibawah artikel yg di-readmore-in itu ....singkat kata dibawah artikel yg di readmore ada artikel lengkapnya....itu kenapa bang ??

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|