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.

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 == &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

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

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