28 August 2009

Cara membuat Readmore di postingan


Postingan Tia kali ini adalah bagaimana Cara membuat Readmore pada postingan, supaya tampilan blog jadi lebih simple n menarik.

Alhamdulillah setelah bolak balik salah n abis 2 bungkus Oreo akhirnya Blog Tia ini resmi menggunakan Readmore, walo bukan yang otomatis coz dengan banyak pertimbangan Tia lebih memilih pake Readmore manual peace

Thanks buat Kak Lafa ros dan kak Bagir ros yang udah banyak sumbang ilmu ke Tia tentang cara pasang Readmore di postingan. Juga buat bang Jagur ros atas kritiknya dan yang selalu kasi semangat ke Tia supaya jangan menyerah coz ternyata pasang Readmore tuh susah *pucink mode ON*


Read more yang Tia pake udah dimodifikasi sedemikan rupa supaya kakak nga ikutan pucink juga, buat kakak yang udah pasang Readmore di postingan, anggap aja ini selingan sambil minum teh but buat kakak yang minat pasang Readmore kayak Tia, yuk mari kita lanjutkan kak minum

1. Login ke www.blogger.com, masukin username dan password

2. Klik Layout >> Edit HTML trus klik di Expand Widget Templates

3. Kakak cari kode </head> trus kopas kode berikut tepat di atasnya
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


4. Misi belum selesai kak, berikutnya cari kode ini<data:post.body/> trus kakak kopas juga script yang berikut ini tepat di bawahnya
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='font-weight:bold;'><a expr:href='data:post.url' target='_blank'>
<div style='float:right'><br>Yuk mari lanjut kak...</br>
</div>
</a>
</span>
</b:if>

Yang bisa kakak rubah adalah :
Warna Biru : fungsinya buat buka postingan kakak dalam tab baru, bisa dihilangkan kalo kakak nga suka
Warna Merah : fungsinya agar Readmore kakak rata ke kanan, kalo kakak mo bisa diganti dengan right atau center
Warna Kuning : Tulisan Readmore yang bisa diganti sesuai keinginan kakak

5. Dikit lagi kak, yang terakhir yaitu motong postingan kakak sebagian supaya tampil di blog sesuai keinginan kakak, yaitu dengan menambahkan kode <span class="fullpost"> di batas postingan yang ingin kakak tampilkan dan menambahkan code </span>di paling akhir postingan kakak, nga pucink kan kak blur

6. Misi selesai kak. Gampang kan tumbuk

Ada tambahan dikit nih kak, kode <span class="fullpost"> dan </span> bisa di masukan secara otomatis di setiap postingan baru kakak, yaitu dengan klik di Setting >>Formating >> trus kakak kopas kodenya di Post Template n jangan lupa klik Save Setting

Trus kalo untuk postingan-postingan lama kakak, musti agak kerja keras nih, coz motong tampilan supaya menggunakan Readmore sesuai keinginan kakak musti bener-bener manual, mudah-mudahan sih nga terlalu repot ya kak, musti edit satu persatu. Tapi kalo udah jadi, hasilnya sebanding kok dengan capenya kak
sembah

uhmm.. masih ada lagi sih kak tambahannya, yang satu ini agak lebih rumit
blur coz untuk kakak yang udah terlanjur bikin postingan menggunakan Compose dan bukan Edit HTML *kayak Tia juga*, masang kode<span class="fullpost"> dan </span> agak lebih beribet coz musti bener-bener diperhatiin naronya n tetep harus pake Edit Html. Misal buat naro <span class="fullpost"> musti di depan kode <div> kalo nga ada ya musti dibikin sendiri kak dan di akhir postingan naro kode </span> harus didepan kode </div> yang paling akhir supaya hasilnya bener kak dan kalo emang nga ada ya musti bikin juga kak, hasil jadinya kurang lebih begini

Batas isi postingan kakak yang mau dipotong<span class="fullpost"><div> sisa postingan nya kakak sampai habis. </span></div>

Hihihihi.. dibaca pelan2 deh kak sambil minum teh pas buka puasa nanti, mudah-mudahan paham maksud Tia ini
sengihnampakgigi

Sebenernya ada cara yang lebih mudah masang Readmore di postingan, yaitu dengan pakai Readmore otomatis but karena keterbatasan Tia dalam mengolah script HTML, Tia minta sharing nya aja deh dari kakak-kakak senior
star

Selama beberapa hari ini Tia nga bikin postingan, coz banyak kesibukan offline yang musti Tia kerjakan, insya Allah setelah ini dengan sedikit merubah penampilan blog * Tia ganti background loh kak* Tia bisa lebih sering lagi sharing ke kakak tentang mempercantik tampilan blog ini. Postingan Tia berikutnya tentang Cara bikin Label Bergerak atau bahasa kerennya Tag Cloud
love


Pake Readmore tampilan blog jadi lebih cantik, Bener nga sih kak :)



cyntia,sharing tips Cyntia Bookmark and Share

84 comments:

sijagur said...

hihi tia bang jagur isi komen yang pertama ya.. hehehe... makasih pelajaran readmore nya.. abang jadi tau..

Ridwanox said...

tutorial readmorenya padat jg tp nice deh,apik2 ajah nih y hueheee...

salam kenal y :)

Bandit Pangaratto said...

sipss... kapan" di coba.. saat ni masih nampilan satu postingan di homenya... hehehe


nice tutor..

:D

Kabasaran Soultan said...

Sebenarnya dari dulu dah pengen banget bisa buat gituan.... tapi kagak bisa-bisa.
Mau dicoba tips yang ini akh.
Thanks

mantan copet said...

Salam Sahabatku....
Kunjungan perdana, salam kenal aja dulu...
Maaf, saya memang hanya mantan manusia bejat, tapi sumpah, saya sudah benar-benar insyaf.
Satu yg membuat saya yakin bahwa saya pasti bisa berubah menjadi orang yg lebih baik, yaitu Kuasa Tuhan. Nothing Impossible, ndak ada yg ndak mungkin.
Selama kita mau berusaha, pasti jalan untuk itu akan terbuka.
Maka dari itulah kali ini saya akan berbagi sedikit kisah hidup saya selama masa transisi itu, kalo sahabatku berkenan, saya tunggu motivasinya buat saya di Mantan Copet Itu Akhirnya Jadi Seorang Pengusaha.

Trimakasih Sahabatku.
Salam.

msafru said...

Yah..no lima deh..tapi g papa...sukses buat Tia

Stories Funny Funniest Pictures Humor said...

pertamax nya bukan solar nya TYA,

bgus jga untuk yang blom ngerti tentang pemenggalan pada postingan.

klo menurutku readmore yg bgus adalah yang otomatis

KEEP POSTS TYA

bungjamil said...

semakin kreatif...
Terus semangat, belajar dari kakak-kakak anda yg telah sukses pasti anda ikut berhasil.

sukses selalu.
Semangat!!

ramuni.net said...

semangat tia ngeblognya yaa...., maaf kakak gak bisa pake triknya tia karna blog kakak bukan blogspot hehe... kalo bisa bikin tutorial function2nya blogspot dong tia. kakak dulu ninggalin blogspot karena gak mudeng ama template dan function2nya blogspot. eh malah bisa bikin blog ndiri -hehe- tp sekarang bingung nih cari dana tuk memperpanjang domainnya cos desember dah mau abis mana panelnya dipegang temen kakak -haduh jadi curhat- -malu2-

Iklan Gratis said...

tutorial yang bagus .. nti coba2 ah ..
ma kasih ya ..

Cyntia said...

@sigajur hik hik hik Abang suka gitu dehh, Tia jadi malu :)

@Ridwanox makasih ya kak, mudah2an bermanfaat coz harganya lebih dari 2 Oreo ama 2 gelas teh anget kak xixixixix

@Bandit Pangaratto iyah kak, mulanya juga Tia pake 1 postingan di halaman utam but abiz banyak diskusi ama kakak senior, akhirnya Tia pake readmore ini kak. makasih ya kak dah mampir

@Kabasaran Soultan Alhamdulillah, mudah2an bermanfaat ya kak :) makasih dah baca postingan Tia ini

Cyntia said...

@mantan Copet Makasih ya kak dah mampir, bener banget kak, nga ada yang nga mungkin apa lagi atas kehendak Allah coz pada dasarnya orang yang kurang baik adalah jiwa baik yang sedang tersesat. Asal kita yakin dan mau berusaha karena Allah Maha Pengampun dan Maha Penyayang ** duhh maap bukan maksud menggurui ya kak **

@msafru salam sukses kak.. makasih ya dah mampir yah kak, soal ke 5 or ke 100 nga masalah kok kak :)

@Stories Funny Iyah kak, sharing dunk ke Tia soal readmore otomatisnya :) coz Tia lom sampe situ ilmunya kak, Tia tunggu lohh

@Ramuni.net Semangattt kak, nti Tia bantu cari donasinya heheheh kalo tia bantu doa ajah yah kak, mudah2an banyak rejekinya di bulan Ramadhan ini. Function blogspot tuh kayak apa sih contohnya kak *oon mode ON*

@Iklan Gratis makasih ya kak dah support. mudah2an bermanfaat

viva la said...

makasih banyak ya tia, aku jadi tau sekarang...!!!

hehehehehehehe

Cyntia said...

@viva la makasih kunjungannya ya kak :) Tia jadi malu nih ma kakak-kakak senior :) semangatttt

Boy Macklin - Blog.transferuang.com said...

Halow... bertamu lagi...
mau nanya neeh sama mba tia...

"span style='font-weight:bold;' a expr:href='data:post.url' target='_blank'"

kenapa pake target blank? kan masi dalam satu posting.. nanti malah buka tab baru mba... gimana tuh... trims...

naura said...

tia.. mo komen nunggu nada bipnya kok lama banget? ;p

Cyntia said...

@naura wahhh iyah om.. Tia lupa pasang spakernya lagi, bis musti minjem ke mesjid dolo sehhh *oon mode ON* hihihih

@Boy Macklin iya kak bener banget target=_blank emang bikin postingan kita kebuka di tab yang baru.. makanya Tia kasi info juga diatas, kalo emang kakak nga mo pake tinggal diapus aja yang target='_blank' itu... mudah2an bisa membantu yah kak :)

pengumpul blog said...

salam sahabat...
yeah info yang membuatkan blogger baru tercari-cari untuk mempraktikkan tip ini. Terima kasih ya cyn...

yoyok said...

tia..nice tutorial..De" gara2 nunggu nada BIP ga bunyi22 jadi paling bawah deh komennya.hihi (✿◠‿◠)

Btw tetep semangat yha....(◕‿◕✿)


Happy Blogging... (◑‿◐)

♥ anonymous ♥ ^_^ ♥ said...

bIIIIPPPppPPP~~~

^_^

nah misi read more udh kelar...
msh banyak misi yang laen tuh....

liat para² master kek mas jagur, lafa, etc....
mnt sarannya kalo kehabisan akal buat posting...
hehe...

nah klo mo nanya ke kk juga jgn sungkan wlpn kk cuma pemula... tp i~Allah kk jwb sebisanya....

ttp rajin walking yah
^_^ biar rame trus.... !!

SEMANGAT !!!

Ches said...

Adekku yg maniez, boleh juga nih tutornya.
Thanx udah komeng.
Kalau dibalik, boleh juga tuh, tapi kayaknya Indoesia banget yah hehe

◄wandhe™► said...

mksh kaka infonya yh,
hhehehhehhe

genial said...

makin keren ajja nii postingan2 yg ada di sini sepulang dari tempat neneknya.. ck ck ck.. tia salah ambil tuu... masa yg bungkusnya ijo sii??!?! itu kan lemper bukannya nasi bungkus :p

Kifni said...

Semangat terus ya ngeblognya...:-)
tambah belajar pasti tambah penasaran dan tambah semngat juga...
:-)

Cyntia said...

@genial *tuks* kakak neh yahh.. maren bilang karetnya 2 kan tia minta sambelnya dipisah :) pokoknya Tia minta tuker *loh**

@Wandhe iyah sama2... mudah2an bermanfaat.. makasih dah support tia juga yahhh

@Ches makasih ya kakak komennya.. huhuhhu Tia jadi malu nih ma kakak... mudah2an bermanfaat yah kak :)

@zona4Health hhihiih Bip nya besok ya kak.. ulekannya masi di pake mama... Tia mo berguru ma kakak juga ahh biar tambah banyak idenya :)

Cyntia said...

@Yoyok wahhh kan kemaren udah sempet denger kak.. walo sayup2 heheheh makasih ya kak supportnya :) mudah2an nga bosen di tanyain mulu ma Tia

@pengumpul blog makasih juga ya kak dah mampir sini.. mudah2an nga merasa digurui ma Tia :)

initialb said...

wah thx for sharin
aku coba ya
tp akunya rada gaptek
jd pasti sering nanya
moga gak keberatan
^0^

Cyntia said...

@kifni iyah kak.. tambah ilmu tambah tau.. makasih ya kak supportnya

@initialb wah Tia juga masi belajar kak :) silakan kalo emang ada yang mo kakak tanyain.. nti kalo Tia nga bisa jawabnya Tia tanya ma kakak2 senior yah.. makasih dah mampir ya kak :)

harto said...

Waaahh... info yang bagus nehhh..., saya save aja dulu yaa buat arsip. Soalnya di blog saya dah ada read more nya. Trims ya Non...?

jaiman said...

ooo.. jadi gitu yach carax bikin read more?? langsung coba dloe ach.. makasih infonya tia

Ancis said...

He..he... bener2 blog tips n trik.
Bagus tuh tutorialnya, btw mo nanya gimana caranya buat readmore tapi tulisan readmorenya kita mo pake gambar animasi gitu, bisa ga ya Dek Tia?

BIZRIL said...

good job tia, emang tia jagonya kalo yg ginian, keep moving sob!!

gema_gogo said...

Iya memang benar itu, kalo pasang readmore secara manual itu memang susah banget.

kalo saya, dari pada ambil pusing pasang Redmore manual. jadi cari tempalte yang sudah ada fitur readmorenya deh...
heheh...

Kang Dedy said...

berbagilah ilmu... apa lagi di bulan Ramadhan... cos ilmu yang bermanfaat pahalanya bakalan mengalir terus...

SEMANGAT.....!

ruri said...

makin rame yang membahas masalah readmore. btw nggak pa2.. semakin banyak, semakin mudah diingat.

pelangi anak said...

oche dech, thanks atas tutorialnya...advantageous!

harto said...

Assalamualaikum wr wb sehubungan dengan amanah dari para blogger, maka saya menganugerahkan award "All My FriendShip" kepada Non yang cantik, dan mohon diterima denagn baik dan dilanjutkan sebagaimana adanya. Terima kasih & tetap semangat

Macam2 Tips said...

thanks info nya,maju terus ya....

Anonymous said...

BiP... Wah udh bunyi tuh!!

Ouwh, gt toh cr bwt readmore?! BlogQ bs g yach dbwt keq gituan,.? Hihihihi...

Tia sory yach g bs srng2 bknjung nich, cz gi konsen krja! Mngkin hr mnggu aja ru bisa update blog, ni aja komen u pke hp, liat aja ni bhsx keq basa smz hehe...

Sucsez aja de bwt tia, mga c4 naek P.Ranknya... Piss>>※ muuach..2x :p (pke smiley jg dunk.,) http://masbhakti.blogspot.com

Iklan Baris said...

wow info yang bagus tu, bagi yang belum pake read more hehehe....biar postingannya ndak kepanjangan kebawah ya dek ya ^_^ makasih ya infonya, ilmu yang gratis dari dek Cyntia

Iklan Gratis

Winarno said...

Ikut koment Yah. Tipnya bagus. Tapi saya lebih suka yang Read more automatis... lebih euunak gituuu dan simpel.

asep canda said...

Dik tia makasih ya info nya berguna banget nih buat kakak kebetulan ini yang kakak cari....!!!!!

asep canda said...

Pake Readmore tampilan blog jadi lebih cantik, Bener nga sih kak :) yup betul banget dik heheheh tapi lebih cantik lagi kalau di bawah read more nya dikasih iklan ads wakakakakak $$$$$$ gila dollar :D

mas doyok said...

sip banget tya

keep post
keep reader

belajar blog said...

wah selamat yah akhirnya pake read more
read more itu dah persyaratan seo loh ^^

koleksi mainan said...

Liat tulisan read more jadi pengen baca lagi.
oia sekarang tinggal dibikin navigasi ama breadcrumb neng, biar lebih seo

genial said...

bukaaaaaaaaaaaaaaaaaaaaaaaaaaaa

genial said...

makasiiiiii :)
ngpain ajja nii seharian ti??!?!

Zippy said...

Wah, lengkap ni tutor'x...
Tapi kebetulan diriku udah buat dari lama kayak gini, hehehehe...
But, thx yah :)

si embah said...

eh si eneng ini ternyata jago juga bua tutorial blog... heheheh

JT said...

betul non. penting buangets tu readmore. palagi postingan kita sdh stumpukkk

NB: Bang gennn, buka ye, aye br buka niii :DDD

Rendra said...

Keren postingannya,,jadi tau neh cara bikin Rad more..mudah2an yang lain juga bisa ngaplikasikan ini diblog masing2.

Koko James said...

wah chika koko ga pake blog spot nih:D

initialb said...

ehk, ga tampil readmore saya. malah beribet jadinya. thx ya udah sharing. ^0^

sahabat said...

memang bagusnya yg manual sih ya...

wiryo said...

sorry nih telat. nice info, cari info kreasimu yang lain lagi ya.

Bhakti said...

BiP... wah udah bunyi tuh!!!

Ouwh, jadi gitu toh caranya buat readmore?? baru tau,.. bisa nggak ya blogku pake gituan?? hehe...

sory ya ga bisa sering bknjung coz gi konsen ma kerjaan dulu..

sucses aja deh buat Tia moga cpt naik rank page nya hehe...piss>>

buxbag said...

ada cara lain buat pasang "read more" :) biasanya klik readmore, buka halaman baru, yang ini ndak...

Share everythings-klik di sini ada caranya

Juliawan said...

wao nice info hehehe ^^,lam kenal ya ,btw nice blog cyntia ^^

Anang said...

sip kalu tampilan blog bagus kan semangat nanti ngelbognya...

linkb97 said...

wah bagus nih info nya tia..
saya juga termasuk penganut manual readmore nih... soalnya enak bisa milih kata mana yang mau di potong nya..
salam [my site]

Boy Macklin - Blog.TransferUang.Com said...

mba cyntia, yang ini kan untuk blogger.com kalo untuk wordpress ada ga???
tapi HTML-nya sudah hebat ya... mba tia kenapa ga bikin domain sendiri saja... www.cyntiasari.com keren tuh...
trims...

genial said...

malem ti... numpang sebentar ngilangin penat iia :( bole kan?!?!?

buwel said...

wah readmorenya komplit yak....siiip, salam kenal...

a-chen said...

hmmmm aku mo buat ah ni readmore....makasih

Online Magazine said...

nice post...
keep blogging..
and success for you..

islamicline said...

nice one...
terus berkarya....

noertony said...

mmm nice info at nice blog
ntar ka noer coba ya
terimakasih !!

prafangga permana said...

Cip mantap tutorialnya keep blogging

Anpaki said...

aiii tia aq komentator keberapa nieh,,,nice info syng aku dah pake readmore otomatis. Out dlu mo nyari kolak bajaj.

neilhoja said...

hehe... bukan lebih cantik si, tapi jadi lebih rapi.. ^^

but, that's subjective.

Rahad TheKill said...

wew ke 72.....
makasih infonya yah....
sori jarang mampir, sibuk juga

Syifa said...

Tiya BlogsQ kalah nich AWAS yahhhh ^_~

red said...

untuk wordpress pake apa yah?

Rico Hendar Saputra Lubis said...

aduuuuhhh, kok ga bisa tya?
Bisa bantuin kasih taw cara yang otomatis ga?
ato kasih link yah yang tauw bikin otomatis. Pala mau pecah bikin kayak gini.

THX b4, salam kenal ya tya...

AGUNG BRAHMA said...

tia is smart is a beautiful.. goodluck

Shin-kun said...

Siiiip Tia, Siiiip, hehehe, postingan yang pastinya banyak berguna bagi para blogger yang pake blogspot :D, Kakak pake wordpress, jadi dah ada menunya otomatis *maleskerjakeras.com* :p, tapi tar Kakak coba di blog Kakak yang pake blogspot/blogger...

Keep Up the good work My Li'l Sis... sori banget, Kakak baru bisa kunjungan dan komen2 lagi sekarang, 2 hari kemaren inet Kakak bermasalah *sigh...*

Arie said...

salut buat Tia....kamu manis n pintar y :X

sari said...

Thanks buat infonya.Aku coba ya untuk blogku.Sukses selalu tia buat tips2nya.

^^ desta1812 ^^ said...

eh maksih ya tipsnya,,:D
tapi gue repost di blog gue loh

bukan gang buntu said...

...lam kenal, thanks ya postingannya detil jadi bisa praktekin daahh...btw postingannya boleh copas di blog saya gk?

Dimas Permana Putra said...

makasih ya buat infonya....

love u cyntia, so cute... :X

doyseta said...

Kk Low Read More nya pengen di tentuin misalnya di paragraf dua..
masalhnya yang kau kok munculnya di akhir postingan, jadi ttp aj postinganya muncul semua gak ada ringkasanya... eung gimana dunk kk, maklum masi Newbi..

Dzukronus Shofi said...

manteb ni,makasih banget infonya :D



________________
TOP 10 BEAUTIFULLWOMAN

Post a Comment

Makasih dah baca Postingan Tia, silakan tinggalkan pesan setelah nada BiP

 
Copyright 2010 Sharing Tips | Blogger Tips. Powered by Blogger Layout by Deluxe Templates