Ini yang kesekian kali-nya saya posting tentang bloglist. Sebuah gadget yang menurut saya pribadi banyak sekali mangfaatnya untuk memperkarya informasi , menampilkan sebuah alamat feed, menambah dan memperluas jaringan sesama blogger, atau untuk kebutuhan sebuah desain blog , gadget ini bisa menjadi alternatif untuk mempercantik area layout.
Dan dalam postingan kali ini, bagaimana cara-nya kita bisa menambahkan sebuah tulisan “ read more “ atau “ read full post “, agar terkesan tampilam dari bloglist ini bukan sebuah gadget tapi merupakan ringkasan artikel yang terpenggal.
Pertama :
Buka Edit Html , kemudian tandai kotak kecil di samping tulisan Expand Widget Templates
* tujuan langkah di atas agar kita bisa melihat tampilan kode-kode Html pada sebuah template.
Kedua :
Copy paste kode css di bawah ini, kemudian simpan atau letakan pada bagian css-nya ( ket. sebelum tag ]]></b:skin> )
.more {
bottom:5px;
font-family:verdana;
font-size:90%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}
* Kode Css di atas sebenarnya sifatnya opsional, boleh anda pakai atau tidak. karena kode css ini hanya untuk mengatur tampilam tulisan “ read more “ atau “ read full post “ nantinya.
Ketiga :
kemudian cari gadget bloglist yang telah terpasang pada blog kita, – gunakan Ctrl + F dan tulis pada kotak pencarian “ Bloglist” agar kita mudah mencarinya.
contoh kode html bloglist yang saya miliki.
<b:widget id='BlogList1' locked='false' title='My Blog List'
type='BlogList'>
* jika kita banyak memasang gadget bloglist ini, maka seterusnya kita akan menemukan Bloglist2, bloglist3 dst.
dan ini merupakan selecktor id yang unik (tag yang didefinisikan secara individual atau specifik ).
artinya juga jika kita ingin mengatur tampilannya berbeda antara Bloglist1 dan bloglist2 , maka dalam penulisan Css-nya kita harus menambahkan sebuah tanda pagar ( # )“ sebagai aturan penulisan untuk sebuah selektor ID.
#Bloglist1 {
properti:value;
}
#Bloglist2 {
properti:value
}
dan seterusnya.
Selanjutnya kode html yang perlu kita pahami dalam gadget Bloglist ini.
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
Html di atas merupakan selektor class yang menerangkan tampilan icon untuk gadget ini. - selektor class ini dalam penulisan css-nya di awali dengan tanda titik ( . )
Contoh kasus :
Saya tidak ingin menampilkan icon pada Bloglist1. cara menulis pada css-nya.
#Bloglist1 .blog-icon {
display : none;
}
sebelum
Sesudah
Selanjutnya …
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
* Selector class yang menerangkan “ alamat blog “ – lihat gambar
Untuk menghilankan alamat Url terssebut, kita bisa menuliskan Css-nya seperti ini.
.blog-title {
display:none;
}
atau jika memiliki banyak bloglist, dan ingin berbeda pada setiap bloglistnya, tambahkan saja selector ID menjadi.
#Bloglist1 .blog-title {
display:none;
}
Selanjutnya …
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
* Selecktor class yang menerangkan “judul artikel” lihat gambar.
Contoh kasus :
Dalam beberapa hal saya terkadang ingin judul artikel-nya di atas isi artikel. maka saya tambahkan dalam css-nya seperti ini.
.item-title {
display:block;
font-size: 14px;
line-height:18px;
padding-bottom:7px;
}
Bila di ilustrasikan hasilnya seperti ini.
Sebelum
Sesudah
Baiklah balik lagi ke awal tulisan, yakni menambah sebuah tulisan “ read more " . yang perlu kita lakukan hanyalah meng- copi paste html, bagian dari judul artikelnya yaitu.
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
Html di atas di copi pastekan di mana letaknya ?
Saya biasanya melatakan di antara kode html ini. ( di area bawah dari html bloglist )
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
saya letakan di sini
</div>
</div>
Jika di gabungkan hasilnya sperti ini.
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</div>
</div>
* tulisan <data:item.itemTitle/> yang saya beri warna merah ( dalam baris nomor 9 ) ganti dengan kode ini.
<p class="more">» Read More.... </p>
Oh iya jangan lupa hapus juga tulisan ' blank 'pada baris ini
<a expr:href='data:item.itemUrl' target='_blank'>
* tujuan-nya agar link yang dituju tidak membuka jendela baru.
Nb :
Mmmm.. masih banyak sih kalau ingin memperhalus tampilan gadget bloglist ini, mudah-mudahan dalam kesempatan lain saya coba bahas lagi.
Atau juga mungkin anda mempunyai pemahaman, pengalaman dan cara lain. silahkan anda bisa buka kartu juga di sini.
54 komentar:
Pertamaxxxxxxxxxsssszzz....Wah Kueren sekali kang...saya Izin nyoba ah....asik neh...biar halus dikit.....
Read more di blog aku dah pas deh..
but mantap juga nih tips buat yg blom mmbuat read more
pengen gantii, tapi nungu sempet,.. pa kabar brooo..... sori baru nongool...
mantap... bisa jadi tambahan untuk menyempurnakan modifikasi "MAJALAH MINIMA' Ku nih.
Bang mohon dikoreksi nih hasil modifikasi minima, karena link downloadnya ada dan bersifat sharing demi komunitas blooger, mohon dengan sangat untuk dikoreksi hasil modifikasi minima. Dengan harapan bisa digunakan para komunitas blogger. Makasih.
sip kang. kalo ada waktu pasti tak kerjakan,he..he..asyiiiik....
tungguuuu... aku lagi sambil nyobian nih kang... kalo gak bisa mohon petunjuknya ya... *icon sembah*
untuk menambahkan :
#Bloglist1 .blog-icon {
display : none;
}
posisinya dimana bang, soalnya sudah aku coba tidak berfungsi.... makasih sharingnya
weeeeeeeee kang jaloeee nongol hihihihi
oooo ya ya ya saya mengerti
tpi sudah cukup kok yg list aja hihiih
Saya coba dulu mas trims salam kenal
weeh manstap neh boss, dibookmark dulu, maybe someday ane butuh ini,
thanks sharingnya bos
wah kebetulan lagi opreng-opreng blog...saya udah pake tadi...buset agak ribet juga ya...........
ngerataiin biyar rata kir kanan gimana ya mas?
mantap sekali trik2 nya, salam kenal!!!
suhu yang atu ene emang gak ada matinye ilmu CSS ama HTMLnya..hehehe
salut buat suhuuuuuu
apa kbrnya suhuuu?
oia, aq masukin dalam bloglist ku ya!!!
keep sharing! & salam blogger!!!
Wekz... suhu...
Stepnya banyak banget...
Kapan2 takcoba deh.... saya bookmark dulu kang..
Tutornya Makin mantep aja nih... kekekeke... ;)
kunjungan rutin....
free portable software
free download software
iya...tadi cssnya di compress jadinya agak enteng blognya..
mas kok kl saya komentar blog linknya jadi begini sih http://catalog-tutorial.blospot.com/www.info-heri.blogspot.com <<<=== ada apa ini kang??coba deh klik profile saya
@ ilmu online
coba di awali dengan http:// .. bukan www.
Ribet juga y..
pusing..tapi makasih buat infonya..
nambah ilmu lagi deh...
bagus banget, tapi musti hati hati mbacanya nih...stepnya panjaang deh
Pak Jaloe, boleh saja mencetaknya, tapi jangan dijual hanya pola saja, lebih baik Pak Jaloe kalau mau menjualnya sebagai paket kristik (lengkap dengan kain dan benang). Pola lebih jelas kalau dicetak yang versi hitam putih.
Reni masih di Jawa, rencananya besok atau lusa sudah pulang ke Lampung. Setelah Lebaran kemarin dia ada mengunjungi teman-temannya, lumayan jauh dan betah. Tempatnya indah, katanya
sip kang...ntar klo bikin blog lagi siap di terapkan..
keren kang..kang link saya diganti ya, dari gebrak ke http://fantasisco.cc..
hehehehehe
maksudnya saya http://fantasisco.co.cc kang
hehehehe sorry nyepam di kotak komentar
kabuuuuuuuuuuuuuuuuuuuuuuur
lama gak nulis artikel ya Bro.., begitu nulis langsung banyak yang komen..he.he..
Btw...thx ilmunya....
bagaimana kalo d edit html saya belum ada gadget bloglist nya ??
pliz reply lwt e'mail saya ya mas di
rokrcandrie30@yahoo.com
terima kasih banyak
Wah-wah wah sekali lagi. semakin hari tipsnya semakin ok mas. tar saya coba klo sempat, tapi lama2 ko' saya tambah malez ya ngutak-ngatik blog. sampai saya biarin aja blog saya apa adanya seperti layaknya manusia yg hidup apa adanya heheeehe
Kang Jaloe emang ahli deh kalo utak utik Bloglist.
Ada yg mau saya tanyakan kang, gimana cara ngilangin judul blognya?
Terima kasih tutorialnya Kang Jaloe. Salam. Seno.
Ada yg mau saya tanyakan, kang...
Tag di bawah ini
#Bloglist1.blog-title {display:none;}
Naruhnya di mana yah?
Maaf kalo kurang jelas
@ Anthony Herman
simapan di atas kode ini.
]]></b:skin> )
Lam kenal ya Kang..saya nge blog dari kendari sana..
senangnya bs dapat blog yang kayak gini :)
boleh comot linknya buat dipajang di blogku gak..?? maksudnya tukaran link if gak merepotkan
sekali lagi salam kenal and thanks for artikelnya
BR,
Oentoe09
Kang, saya dah pasang kode tsb. tetapi kenapa judul blognya masih muncul ya
@ Bareng Ngeblog
Makacih atas komentarnya mas dan link-nya.. btw mohon maaf yg segede2-nya kalau sy ngga isa balas link back-nya..
ngomong2 koq ngga bisa komentar di blog sampean yach
aku pake template dari blogbuster udah ada itunya...ada read more kayak gitu maksudnya...keren juga..hihiks...
malam kang, salam kenal.....
kang aku ikutan belajar di sini ya....
disini banyak tips-tips yang berguna bagi saya....
trims.
@ Anthoni Herman
coba kalau kode ini dulu.. contoh
.blog-title{
display:none;
}
sip nih ilmunya, sepertinya content blognya
banyak yg pengen saya intip nih, gpp ya,n makasih sebelumnya..n thanks atas kunjungannya..saya doakan moga cepat dapat panggilan haji, syaratnya sih yg penting kita yakin suatu saat pasti akan kesana..:)
jalu, jalu, apa kabaaaaaaaar?
selamat hari raya Idul Adha... semoga ga kena banjir ya, aku baca koran jawa barat banjir-jir... bila pun terkena, semoga kau dan keluarga mendapt ketabahan dan terhindar dari dampak sampingan yang lebih parah. amiin.
ren.
PS. long time no see, hik ga ada shout box...
Mas jaloe. selamat hari raya idul adha...
nah ini dia yang saya cari, sip dah mank, mampir blog aku ya kl ada waktu..
wah....makasih nih suhu, aku ijin ambil ilmunya yah....
Salam kenal aza ya... kalo bisa pasang link saya.
hayyahh dapat buntut nih,,lama gk mampir..pa khabar SUHU???
Thanks tips & triks nya..yg jelas ini sangat berguna bagi para mania blogger...
mantab kang.... TOB!!!
terima kasih kang..sudah dicoba..mantap tenan
sip nih..bole ikutan coba ya..:D
hmm.. kang kalau merapikan tulisannya gimana yak supaya rata atau justify, and content blog list panjangnya bisa di atur ga yak? misal 150 karakter jadi 200 karakter
@ Subagya
bisa
.blog-content {
width:75%;
text-align:justify;
height: value;
overflow:hidden;
}
seep kang .. thanks atas fast responnya..
lagi ngubek2 tulisan akang....aku suka yang ini..mau nyoba tapi kok panjang bener yah....toloooooooooong..
wah telat banget sih aku..:hehe
thx mas tak coba ya:D
akang..kalo mau nambah jumlah karakter nya gimana?....thx
Post a Comment
" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah
Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"
Makacih Atas Komentar-Nya