Berjuang melawan ngantuk akhirnya membuahkan hasil juga, keinginan untuk membuat tampilan latest post dengan menampilkan teaser pada saat mouse on hover tercapai sudah. Umumnya tampilan ini digunakan oleh website newspaper untuk menampilkan berita terkininya.
Teknik yang dilakukan adalah dengan menggunakan CSS. Untuk hasil bisa dilihat seperti gambar dibawah, screenshot tersebut aku ambil dari web aku sendiri dhafy.com
Caranya seperti berikut:
Buat View
Pertama buat view seperti biasa, dalam contoh field yang aku pilih adalah:
Node: Teaser
Node: Title
Node: Comment count
Node: Post date
Untuk Konfigurasi masing-masing field dapat dilihat seperti berikut:
Node: Teaser
- Exclude from display
- Trim this field to a maximum length
- Maximum length:150
- Trim only on a word boundary
- Add an ellipsis
- Strip HTML tags
Node: Title
- Rewrite the output of this field
- [title]
- <span>[teaser]</span>
- Link this field to its node
Node: Comment count
- Exclude from display
Node: Post date
Rewrite the output of this field
<div class="waktu_publish">on [created]<div class="komentar_latest">[comment_count]</div></div>
EDIT CSS
Berikutnya tambah di file CSS seperti dibawah:
.view-id-latest .views-field-title a{
font-size:110%;
position:relative; /* posisi kunci */
}
.view-id-latest .views-field-title a span{
display:none;
position:absolute;
width: 290px;
padding: 5px;
z-index: 100;
background: #B2D1E5;
color:#000000;
-moz-border-radius: 5px; /* firefox */
-webkit-border-radius: 5px; /* Safari */
}
.view-id-latest .views-field-title a:hover span{
display:block;
}
.waktu_publish{
font-size:90%;
font-weight:lighter;
font-family:Arial, Helvetica, sans-serif;
}
.komentar_latest{
display:inline;
padding: 0 20px;
margin-left:10px;
background: url("../images/quote.png") no-repeat scroll 0 0 transparent;
}
Karena cara ini menggunakan CSS maka kemungkinan tampilan di IE akan sedikit tidak sesuai harapan. Untuk cara aman gunakan beauty tip. Perbedaannya adalah menggunakan attribute title dari element span dan memanggilnya via PHP yang ada di Basic Settings - Header. Pastikan dulu modul core - optional PHP Filter sudah aktif.
Sumber: googling | http://lixlpixel.org/css_tooltip/ | http://lixlpixel.org/css_tooltip/ | http://psacake.com/web/jl.asp
Inspirasi dari: http://cjonline.com/
Kategori Blog: