BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Read More dalam gadget bloglist

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.

bloglist read more

Pertama :

Buka Edit Html , kemudian tandai kotak kecil di samping tulisan Expand Widget Templates

Expand Template Widget

* 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 == &quot;true&quot;'>
<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

icon bloglist

Sesudah

no icon bloglist

 

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

judul

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 != &quot;&quot;'>
<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.

judul artikel

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

judul artikel

Sesudah

judul artikel 2

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 != &quot;&quot;'>
<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 != &quot;&quot;'>
<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.

Page views this post: reader

54 komentar:

Elektro-Kita said...

Pertamaxxxxxxxxxsssszzz....Wah Kueren sekali kang...saya Izin nyoba ah....asik neh...biar halus dikit.....

ABDEE NEGARA said...

Read more di blog aku dah pas deh..
but mantap juga nih tips buat yg blom mmbuat read more

brigadista said...

pengen gantii, tapi nungu sempet,.. pa kabar brooo..... sori baru nongool...

bidikCOM said...

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.

Kristina Dian Safitry said...

sip kang. kalo ada waktu pasti tak kerjakan,he..he..asyiiiik....

Lyla said...

tungguuuu... aku lagi sambil nyobian nih kang... kalo gak bisa mohon petunjuknya ya... *icon sembah*

sharing said...

untuk menambahkan :

#Bloglist1 .blog-icon {
display : none;
}

posisinya dimana bang, soalnya sudah aku coba tidak berfungsi.... makasih sharingnya

Cebong Ipiet said...

weeeeeeeee kang jaloeee nongol hihihihi

oooo ya ya ya saya mengerti

tpi sudah cukup kok yg list aja hihiih

Backspace said...

Saya coba dulu mas trims salam kenal

Belajar ngeBlog said...

weeh manstap neh boss, dibookmark dulu, maybe someday ane butuh ini,
thanks sharingnya bos

I/O ==> Ilmu Online said...

wah kebetulan lagi opreng-opreng blog...saya udah pake tadi...buset agak ribet juga ya...........

I/O ==> Ilmu Online said...

ngerataiin biyar rata kir kanan gimana ya mas?

a2i3s said...

mantap sekali trik2 nya, salam kenal!!!

bloggeraddicter said...

suhu yang atu ene emang gak ada matinye ilmu CSS ama HTMLnya..hehehe

salut buat suhuuuuuu

apa kbrnya suhuuu?

a2i3s™ said...

oia, aq masukin dalam bloglist ku ya!!!

keep sharing! & salam blogger!!!

Qittun said...

Wekz... suhu...
Stepnya banyak banget...
Kapan2 takcoba deh.... saya bookmark dulu kang..
Tutornya Makin mantep aja nih... kekekeke... ;)

mas Aan said...

kunjungan rutin....
free portable software
free download software

I/O ==> Ilmu Online said...

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

JALOE said...

@ ilmu online

coba di awali dengan http:// .. bukan www.

trik yuwie said...

Ribet juga y..
pusing..tapi makasih buat infonya..
nambah ilmu lagi deh...

donya kewarasan said...

bagus banget, tapi musti hati hati mbacanya nih...stepnya panjaang deh

A-Wein said...

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

Bang Ir said...

sip kang...ntar klo bikin blog lagi siap di terapkan..

enhal said...

keren kang..kang link saya diganti ya, dari gebrak ke http://fantasisco.cc..
hehehehehe

enhal said...

maksudnya saya http://fantasisco.co.cc kang
hehehehe sorry nyepam di kotak komentar
kabuuuuuuuuuuuuuuuuuuuuuuur

zlam said...

lama gak nulis artikel ya Bro.., begitu nulis langsung banyak yang komen..he.he..
Btw...thx ilmunya....

'cal said...

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

Robbie Philosophy said...

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

Anthony Harman said...

Kang Jaloe emang ahli deh kalo utak utik Bloglist.
Ada yg mau saya tanyakan kang, gimana cara ngilangin judul blognya?

Seno said...

Terima kasih tutorialnya Kang Jaloe. Salam. Seno.

Anthony Harman said...

Ada yg mau saya tanyakan, kang...
Tag di bawah ini

#Bloglist1.blog-title {display:none;}

Naruhnya di mana yah?
Maaf kalo kurang jelas

JALOE said...

@ Anthony Herman

simapan di atas kode ini.

]]></b:skin> )

bareng Ngeblog said...

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

Anthony Harman said...

Kang, saya dah pasang kode tsb. tetapi kenapa judul blognya masih muncul ya

JALOE said...

@ 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

JoVie said...

aku pake template dari blogbuster udah ada itunya...ada read more kayak gitu maksudnya...keren juga..hihiks...

indra putu achyar said...

malam kang, salam kenal.....
kang aku ikutan belajar di sini ya....
disini banyak tips-tips yang berguna bagi saya....
trims.

JALOE said...

@ Anthoni Herman

coba kalau kode ini dulu.. contoh

.blog-title{
display:none;
}

Mama Hilda said...

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..:)

Ren said...

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...

Robby said...

Mas jaloe. selamat hari raya idul adha...

welly said...

nah ini dia yang saya cari, sip dah mank, mampir blog aku ya kl ada waktu..

abahrafi said...

wah....makasih nih suhu, aku ijin ambil ilmunya yah....

..:: Zian X-Fly ::.. said...

Salam kenal aza ya... kalo bisa pasang link saya.

anita mui said...

hayyahh dapat buntut nih,,lama gk mampir..pa khabar SUHU???

Thanks tips & triks nya..yg jelas ini sangat berguna bagi para mania blogger...

subagya said...

mantab kang.... TOB!!!

erwin said...

terima kasih kang..sudah dicoba..mantap tenan

Curup Kami said...

sip nih..bole ikutan coba ya..:D

subagya said...

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

JALOE said...

@ Subagya

bisa

.blog-content {
width:75%;
text-align:justify;
height: value;
overflow:hidden;
}

subagya said...

seep kang .. thanks atas fast responnya..

JoVie said...

lagi ngubek2 tulisan akang....aku suka yang ini..mau nyoba tapi kok panjang bener yah....toloooooooooong..

Curup Kami said...

wah telat banget sih aku..:hehe
thx mas tak coba ya:D

JoVie said...

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

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial