Begitu banyaknya langkah atau cara untuk memotong posting pada blogger sering kali membuat kita sedikit binggung untuk memilih cara mana yang cocok untuk kita terapkan dalam template blogger kesayangan kita. Diantaranya yaitu dengan menggunakan metode script auto read more dan bahkan ada yang menggunakan kode <!--more--> dalam mode posting html setiap ingin memotong posting artikel pada blogger. Seiring dengan berjalannya waktu, mungkin cara-cara tersebut sedikit kurang asyik jika kita terapkan pada template blogger, karena tentunya cara-cara tersebut selain memiliki kelebihan tersendiri, pasti juga memiliki beberapa kelamahan.
Belum lama ini blogger menambahkan fitur baru pada layanan blogspot mereka yaitu fitur snippet pada posting artikel, sehingga kita tidak perlu lagi menggunakan metode script auto read more atau metode <!--more--> untuk memotong posting artikel kita. Namun fitur tersebut tidak bisa secara otomatis kita nikmati, melainkan kita harus sedikit melakukan oprek pada template kita.
Langsung saja jika Anda ingin mencobanya silahkan ikuti langkah-langkah berikut ini:
- Masuk akun blogger Anda. Pilih tab menu Rancangan -> Edit HTML.
- Beri centang pada 'Expand Widget Templates'.
- Masukan kode css berikut sebelum kode ]]></b:skin>
.thumb img{float:left; margin:0 10px 10px 0}
- Setelah itu cari kode <data:post.body/>
Mungkin Anda akan menemukan 2 kode yang sama, untuk itu pilih urutan yang pertama saja. - Ganti kode tersebut dengan kode dibawah ini.
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:post.hasJumpLink'> <data:post.body/> <b:else/> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:src='data:post.thumbnailUrl'/> </div> </b:if> <data:post.snippet/> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> <div class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </b:if> </div> </div> <b:else/> <data:post.body/> </b:if> </b:if> </b:if> </b:if>
Kode post snippet blogger tersebut sudah IdBlogDesign modifikasi sehingga dapat sekalian menampilkan jumlah komentar dalam post snippet dan tidak mengalami error pada saat menampilkan halaman statis atau static page.
- Sebelum Anda menyimpan template Anda, silahkan preview terlebih dahulu hasil modifikasi template blogger Anda.
thanks sudah sharing, sangat mudah dicerna
BalasHapussama-sama masta, dan terima kasih sudah berkenan untuk berkunjung.
Hapusoia gan... untuk nambah summary nya gmn ya..
BalasHapusMantap...
BalasHapusini yang saya cari-cari.
maklum masih pemula..
Thanks ya...
pas di ilangin snippet nya, post footernya juga ilang gan.
BalasHapusrate dan review kok gak keluar gan dalam pencarian google?
Yub bener banget gan, soalnya post footernya saya masukkan ke kode snippet. :)
Hapusuntuk rate dan reviewnya bisa diuji coba dengan rich snippet dari google web master gan jika nampak berarti berhasil jika belum berarti ada yang kurang. Namun untuk penampakan dihasil pencarian nyata google, belum dipastikan berjalan normal karena dari pihak googlenya sendiri juga bilang begitu gan. :)
rate dan review kok gak keluar gan dalam pencarian google?
BalasHapussetelah di check ternyata muncul.. thanks masta.. nubie perlu bimbingannya
mas mau nanya kalo nambahin ukuran script readmore biar agak lebar (lebar kebawah maksutnya) itu gimana ya?? biar tampilan keterangan di setiap post bisa terlihat lebih banyak.. thx
BalasHapushehe...kalau untuk script auto readmore mungkin bisa cari di google mas, sedangkan tutorial diatas adalah Post Snippet Blogger. :)
Hapusiya aq pake yang itu mas.. kan aq pake template simple grey.. tuh header yang nyasar di kolom kiri pengen tak sembunyiin bisa ga ya?? soale aneh ada 2 header jadi nya..
BalasHapushehe..maksudnya gimana ya mas?
Hapuscoba cek deh mas.. azzamdev.blogspot.com (gak maksut nyepam)
BalasHapusheader kan jadi di sebelah kiri dan logo di atas itu header juga, jd ada 2 header yg kiri pengen tak sembunyikan bisa ? ato ada solusi lain ?
trus di template ini juga udah pake post snippet blogger seperti mas yobusa posting di atas, maksut saya itu lebar nya post snippet bisa di edit ga ?
sori kebanyakan nanya mas thx..
hehe...maksudnya gimana ya mas soal headernya?saya check headernya cuman satu tu mas, yang logo berukuran 565px x 120px. Kalau untuk post snippet, thumbnails otomatisnya bisa diperbesar dengan script tambahan, tetapi kalau summary dari post snippet untuk saat ini belum bisa, mungkin kedepannya bisa karena post snippet dikeluarkan resmi oleh blogger jadi sedikit berbeda dengan script auto readmore.
Hapuslha trus yang di sidebar kiri yang ada tulisan azzamdev blog ttg bla bla bla.. itu header jg kan mas ??? bingung gmn tuh hayo..
BalasHapushehe...saya check sidebar tidak berisi header tu mas, mungkin bisa dibantu dengan screenshot blog mas biar saya jelas yang dimaksud mas yang mana?
Hapusudah beres mas.. tak reset pake antar muka lawas tak ilangin semwa widget.. nih dah normal.. sori kalo kebanyakan komplain hehehe.. (dah gratisan komplain lagi.. yg bales yg Allah mas biar rejeki nya nambah ya??) mas yobusa dari pada repot cari kerja kenapa ga template nya aja di jual dan jadi web designer ??
BalasHapushehe...tenang aja mas, selama saya bisa bantu dan jawab pertanyaan/komplain tentang template buatan saya, pasti saya jawab cuman terkadang suka terlambat balasnya. :)
Hapushehe...saya masih nubie mas, apa pantas bila jadi web designer? :)
kenapa ga coba di survey aja mas?? saya kira yang pake template nya mas yobusa setuju kalo anda memang pantas koq hehehehe..
BalasHapusterima kasih tutorialnya
BalasHapussangat membantu
mas jika templatenya sudah ada readmorenya bagaimana, template saya sudah ada readmore manual yang menggunakan jumpbreak. bagaimana cara mengganti dengan post snippet..
BalasHapushehe...tinggal dihapus aja mas kode jumpbreak pada post, atau kalau sudah terlalu banyak postingannya, coba mas modifikasi code <b:if cond='data:post.hasJumpLink'>.............</b:if> pada langkah ke 5
Hapusmas kalau untuk merubah besar thumbnailnya gimana?
BalasHapus