Ada yang tertarik untuk membuat Recent Comment Scrolling to top....?? Bagi anda yang tertarik,silahkan duduk manis,jangan kemana - mana dan tetap ikuti artikel ini dengan baik.Dan bagi anda yang tidak tertarik,saya persilahkan untuk membuka halaman post yang lain yah... 
Recent comment scrolling to top adalah sebuah container widget yang akan kita buat yang nantinya akan menampilkan komentar komentar terakhir yang ada pada halaman blog anda dengan effect scrolling (menggulung) ke atas,Contohnya anda bisa lihat di sisi kanan sidebar halaman blog saya ini.Jumlah komentar yang akan tampil nantinya bisa anda atur sendiri,dan pada project ini saya akan memakai javascript Recent comment dari Blogger tricks namun dengan sedikit penambahan tag <li> agar nantinya script tersebut bisa bekerja sama dengan script headline dari jQuery javascript library.
Recent comment scrolling to top adalah sebuah container widget yang akan kita buat yang nantinya akan menampilkan komentar komentar terakhir yang ada pada halaman blog anda dengan effect scrolling (menggulung) ke atas,Contohnya anda bisa lihat di sisi kanan sidebar halaman blog saya ini.Jumlah komentar yang akan tampil nantinya bisa anda atur sendiri,dan pada project ini saya akan memakai javascript Recent comment dari Blogger tricks namun dengan sedikit penambahan tag <li> agar nantinya script tersebut bisa bekerja sama dengan script headline dari jQuery javascript library.
now ... let's go to the source of exercise...
Kode CSS.
Sekarang,silahkan anda masuk ke draft blogger page element HTML » edit html .Kita akan memasukan serangkaian kode css menu head lines ticker yang akan kita letakan di bagian atas tag </b:skin> :
Untuk anda yang sedikit awam dengan style shee css...mari,saya bantu sedikit untuk menjelaskan garis besarnya pada rangkaian kode CSS diatas.
#listticker{
height:235px;
width:300px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:2px 5px 14px 5px;
-moz-border-radius:15px;
}
Selector #listticker adalah container (wadah) dari keseluruhan element-element yang nantinya berada didalamnya.
Properties height:235px; « menunjukan bahwa ketinggian container tersebut adalah 235px.
Properties width:300px; « menunjukan lebar dari container tersebut adalah 300px.
Properties overflow:hidden; « menujukan bahwa element yang berada diluar dari properties height dan width akan di sembunyikan dan nantinya , element tersebut akan muncul dengan effect scrolling diproject latihan kita ini.
Properties -moz-border-radius:15px; « menunjukan paa setiap sudut ruas dari container akan berbentuk sudut bulat dengan radius 15px.
#listticker li{
height:75px;
padding:5px;
}
Selector #listticker li adalah element yang nantinya akan berada didalam container,dalam hal ini ..element tersebut adalah "Recent Comment".
Properties height:75px; « menunjukan bahwa pada setiap elemen <li> yakni "recent comment" , akan memiliki ketinggian 75px.
Properties padding:5px; menujukan pada setiap element <li> akan menjorok kedalam untuk memberikan jarak (space) dari dinding container.
Dengan sedikit penjelasan saya ini..mudah-mudahan anda bisa lebih mudah dan lebih paham untuk merubah setiap properties diatas agar dapat menyesuiakan dengan sidebar pada halaman blog anda sendiri.
jQuery javsvript library
Cukup sudah kita menyelesaikan step peletakan dan pemahaman kode CSS. Sekarang silahkan anda cari tag <head> pada page template HTML anda dan letakan plugin jQuery ini dibawah dari tag <head> tersebut.
Ok...cukup sudah peletakan kode CSS dan plugin jQuery pada page template HTML anda.Sekarang "SAVE" setingan tersebut dan step selanjutnya kita akan meletakan script untuk menjalankan perintah bagaimana effect dan recent comment itu tampil dengan effect scrooling.
Silahkan anda tinggalkan halaman template HTML anda dan masuk ke page HTML » add a gadget » HTML/JavaScript. Selanjutnya, copy / paste semua script yang ada dibawah ini.
Sedikit keterangan yang nantinya bisa anda edit dari script diatas sebagai berikut :
- var speed = 200 « mengatur jeda waktu scrolling setaip 2detik.
- var numcomments = 6 « menunjukan 6 komentar terakhir yang akan anda publish.
- var showcommentdate = true « menampilkan tanggal kapan komentar itu di buat.Anda bisa mengganti "true" ke varian "false" bila anda tidak ingin tanggal komentar dipublish.
- var showposttitle = true « menampilkan tittle halaman komentar.
- <script src="URL BLOGSPOT ANDA/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> « menunjukan link feed comment yang akan di tampilkan.Silahkan anda ganti URL BLOGSPOT ANDA dengan URL web/blog anda sendiri.
Selesai...sekarang click "SAVE" pada halaman add a gadget tersebut dan amati hasil dari project latihan kita kali ini.
Semoga bermanfaat......
repost: o-om
0 comments:
Posting Komentar