pujangga @dhitya

Membuat Widget News Previewer scroll Fantastis (jQuery)

Posted: 07 Jan 2011 05:12 AM PST

Kali ini kita akan menciptakan sebuah previewer news yang memungkinkan anda menampilkan artikel terbaru atau berita dengan bentuk tampilan yang dinamis.Contohnya bisa anda lihat disini

Previewer news yang kita buat nanti akan menampilkan beberapa daftar list artikel di sebelah kiri dan preview dari artikel dengan deskripsi yang lebih panjang di sebelah kanan. Setelah daftar list di sebelah kiri diklik, preview slide akan masuk pada jendela sebelah kanan.

HTML Code
Disini,kita akan memiliki sebuah main selector id "com_wrapper" yang didalamnya akan berisi elemen class "cn_preview" yang ada di sebelah kanan,kita sebut saja jendela Priview dan elemen class "cn_list" yang berada di sebelah kiri yang kita sebut daftar list. Kemudian pada tag <div class="cn_content"> Masing-masing berisi preview gambar, judul,deskripsi,label beserta menu "Read More" sebagai tautan link menuju halaman artikel / postingan anda.
Pada daftar list di sebelah kiri kita akan memiliki item yang sesuai deskripsi singkat dari jendela priview. dan kita juga akan menambahkan navigasi untuk masuk ke daftar list selanjutnya.

Bagi anda pengguna Blogspot,kode html dibawah ini juga bisa anda masukan pada Page element » add a gadget » HTML and Javascript . Lebar dari ukuran Priviewer News yang akan kita buat ini adalah 500 piksel.

Contoh bagian di dalam tag <body>

<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an...</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/fullpageimagegallery.jpg" alt=""/>
<h1>Full Page Image Gallery with jQuery</h1>
<span class="cn_date">08/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create a stunning...
</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
...
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full gallery</p>
</div>
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>

Hasil dari rangkaian kode diatas » konten yang ada dibagian pertama (div class="cn_content" style="top:5px;) adalah sebagai tampilan awal jendela priview yang akan berada di sebelah kanan.dan untuk semua konten yang ada dibawahnya berada dalam posisi hidden yang akan tampil dengan efek slide bila item daftar list di jendela sebelah kiri di klik.
Tinggi dari kontent pada jendela priview sebelah kanan adalah 310px yang masing masing item berisikan :

Konten Gambar » <img src="images/polaroidphotobar.jpg" alt=""/>
Judul » <h1>Polaroid Photobar Gallery with jQuery</h1>
Tanggal Postingan » <span class="cn_date">28/09/2010</span>
Label Post » <span class="cn_category">Tutorials</span>
Deskripsi Post artikel » <p>In this tutorial we are going to create an...</p>
Read More » <a href="#" target="_blank" class="cn_more">Read more</a>

Sekarang mari kita lihat sususan dari Style CSS.

The CSS
Kita akan menggunakan banyak properti CSS3 untuk menciptakan beberapa efek. kita akan menggunakan bayangan, perbatasan bulat,gradasi dan nilai-nilai RGB heksadesimal.
Mari kita mulai dengan Container utama. Kita akan mengaturnya relatif sehingga kita kemudian dapat menggunakan beberapa posisi absolut di dalamnya :

.cn_wrapper{
margin:0px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Style yang akan kita pakai pada bagian header (judul)

.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}

h2 digunakan dalam bagian daftar list pada judul (sebelah kiri) dan kita memberikan garis bawah untuk menciptakan kesan indah di bawahnya.
Daftar list dan jendela priview diposisikan absolut seperti pada style sheet di bawah.

.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}

Di dalam bagian jendela priview kita akan memiliki item seperti apa yang telah saya jelaskan diatas yang akan ditata sebagai berikut :

.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Unsur-unsur ini akan dianimasikan di JavaScript. Awalnya, kita akan menyembunyikan unsur tersebut, jadi kita menetapkan bagian atas yang lebih besar dari seluruh wrapper itu sendiri. Ini sebabnya kita mengatur overflow pada wrapper untuk di sembunyikan, sehingga kita tidak akan melihat sesuatu yang bergerak keluar dari batas-batas wrapper.
Sekarang kita akan memberikan style pada elemen bagian dalam div konten.
Dalam kasus ini, gambar yang akan kita pakai memiliki lebar maksimum 219 piksel dan tinggi 119 piksel.Itulah nilai dasar dari ketinggian dan lebar unsur-unsur berikut :

Catatan bahwa jika Anda memiliki gambar yang berbeda ukuran, Anda harus menyesuaikan semua elemen di bawahnya juga.

.cn_content img{
width:219px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}

Tanggal dan label post akan diposisikan benar-benar di bagian bawah div konten.

.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

Pada bagian Deskripsi jendela priview yang kita gunakan dengan elemen <p> akan memiliki ketinggian tetap.jadi...bila deskripsi yang kita buat terlalu panjang akan terpotong (tidak terlihat).

.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}

Tombol "Read more" yang akan menjadi link ke artikel asli akan dibumbui dengan beberapa gradasi, seperti shadow dan perbatasan garis bulat di bagian kiri bawah dan kanan untuk menyesuaikan isi:

a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}
a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}

Sekarang kita akan memberikan style pada bagian daftar list. Disaat mouse hover (melalui) daftar list akan berubah dan memiliki efek gradien sebagai latar belakang.

.cn_item{
border:1px solid #090909;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#fff;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background:#2b2b2b;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#171717),
to(#2b2b2b)
);
background:
-moz-linear-gradient(
top,
#171717,
#2b2b2b
);
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_item:hover, .selected{
border-color:#4c7ecb;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
}
.cn_item:active {
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
.cn_list p{
height:29px;
padding-top:2px;
overflow:hidden;
border-top:1px solid #333;
}

sekarang kita mebuat style pada navigasi dan benar-benar menaruhnya di bagian bawah dari daftar list.

.cn_nav{
width:55px;
height:24px;
position:absolute;
bottom:0px;
left:94px;
}

Unsur-unsur berikutnya (next) dan sebelumnya (prev) akan memiliki style seperti berikut:

a.cn_next, a.cn_prev{
float:left;
height:23px;
width:23px;
background-color:#212121;
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
outline:none;
border:1px solid #111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
a.cn_next{
background-image:url(../images/next.png);
}
a.cn_prev{
margin-right:5px;
background-image:url(../images/prev.png);
}
.cn_nav a:hover{
background-color:#101010;
}
.cn_nav a:active{
margin-top:1px;
background-color:#000;
}
.cn_nav a.disabled{
opacity:0.5;
}
.cn_page{
display:none;
}

Selesai sudah kita mendesign style pada masing-masing bagian projek latihan kita.Dan sekarang kita coba untuk menerapkan effek jQuery didalamnya.

The JavaScript

Dalam fungsi jQuery kita akan mulai dengan mendefinisikan beberapa variabel yang kita letakan di bagian atas tag penutup</body>:

Untuk menciptakan tampilan yang lebih baik, kita akan kostumisasi judul dengan menambahkan baris berikut ke header dari HTML beserta plguin jQuery yang akan diterapkan pada variables diatas.Letakan didalam bagian (dibawah) tag <head>

Selamat mencoba dan pastikan anda berhasil ya...!

Untuk melengkapi tutorial ini...anda bisa download kode javascript yang nantinya bisa anda letakan di filehosting anda sendiri dan contoh dari index.html sebagai project latihan.
Download jQuery scroll News Previewer

Abun Cell

TUKANG TAMAN MURAH

pujangga @dhitya

pujangga @dhitya

0 komentar:

Posting Komentar

PILIH KATEGORI YANG DISUKAI

200 Artikel Terbaru

Arsip

Kategori