Turorial blog blogspot Cara Membuat Auto ReadMore diblog blogspot edisi terbaru
Nah begitulah judul dari tema post zaloic malam ini.
Membuat readmore otomatis atau memasang readmore otomatis tentu semua blogger dimasa sekarang sangat wajib bagi calon pemblogger profesional, maka dari itu pada tutorial kali ini saya membahas cara membuat readmore untuk blogspot agar kawan newbie diblog blogspot dapat juga memasang auto readmore ditemplate masing-masing.
Pada dasarnya atuto readmore sudah banyak tertempel otomatis diblog blogspot namun berhubung saya juga pernah bahkan sering kerepotan waktu memodivikasi template-template yang saya download. berikut cara efektif dan efisien memasang autoreadmore di blog blogspot.
Cara memasang autoreadmore di blog blogspot
Untuk membuat readmore ikuti langkah dibawah ini :
Langkah Pertama:
Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"
Langkah Kedua:
Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"
Langkah Ketiga:
Cari kode dibawah ini:
<div class='post-header-line-1'/> <div class='post-body'>
Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>
Lakukan Copy-Paste kode dibawah ini dibawah code diatas
<a expr:href='data:post.url'>Readmore »»</a>
</b:if>
Kode selengkapnya jika dilihat akan tampak sebagai berikut:
<div class='post-header-line-1'/>
<div class='post-body'>
<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'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>
Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)
Langkah Empat
<div class="fullpost">
</div>
Jangan lupa disimpan :)
Langkah Kelima :
<div class="fullpost">
</div>
Nah begitulah judul dari tema post zaloic malam ini.
Membuat readmore otomatis atau memasang readmore otomatis tentu semua blogger dimasa sekarang sangat wajib bagi calon pemblogger profesional, maka dari itu pada tutorial kali ini saya membahas cara membuat readmore untuk blogspot agar kawan newbie diblog blogspot dapat juga memasang auto readmore ditemplate masing-masing.
Pada dasarnya atuto readmore sudah banyak tertempel otomatis diblog blogspot namun berhubung saya juga pernah bahkan sering kerepotan waktu memodivikasi template-template yang saya download. berikut cara efektif dan efisien memasang autoreadmore di blog blogspot.
Cara memasang autoreadmore di blog blogspot
Untuk membuat readmore ikuti langkah dibawah ini :
Langkah Pertama:
Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"
Langkah Kedua:
Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"
Langkah Ketiga:
Cari kode dibawah ini:
<div class='post-header-line-1'/> <div class='post-body'>
Tips :
Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut
ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS
Windows tekan menu Start -> Proggram -> Accessories ->
Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada
notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian
klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan
pencarian secara manual)
Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>
Lakukan Copy-Paste kode dibawah ini dibawah code diatas
<a expr:href='data:post.url'>Readmore »»</a>
</b:if>
Tips: Kode
Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca
Selanjutnya", "Baca berikutnya", "Selengkapnya")
Kode selengkapnya jika dilihat akan tampak sebagai berikut:
<div class='post-header-line-1'/>
<div class='post-body'>
<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'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>
Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)
Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang
ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi
dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa
disimpan.
Langkah Empat
Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan
-> Format -> cari "Post Template" Kemudian pada kotak masukan kode
dibawah ini
<div class="fullpost">
</div>
Jangan lupa disimpan :)
Langkah Kelima :
Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting.
Ketika kita melakukan posting pertama kali kita akan melihat kode:
<div class="fullpost">
</div>
ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan
kita gunakan dalam pemenggalan posting nantinya.
source : o-om.com
source : o-om.com
tanya mas, itu ngambil "fullpost" yang menjadi deskripsi atau bisa dibilang artikel tampil saat menggunakan readmore. nah mau saya tanyakan, gimana bisa menampilkan karakternya itu kita tentukan sendiri, misal karakter default tampil 160 dan apa bila lewat akan ter-auto readmore mas ??
ReplyDeleteterimakasih !!
@blog info unik
ReplyDeleteini otomatis full postingan mas..
kalo masalah karakter lihat punya saya , saya juga tidak terlalu mengecilkan alias biarkan apa adanya ,ini mungkin memperlambat loading dan tampilan kurang menarik, tapi ini baik untuk seo frendly di google.
Terimkasih telah berkunjung