Membuat "Recent comment" dengan effect scrolling ||Blogger Tips||

Pujangga Blogs

20 January 2011

Membuat "Recent comment" dengan effect scrolling ||Blogger Tips||

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

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

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

3 comments:

Online Information Blog on February 19, 2011 at 11:16 AM said...

tips yang menarik, terima kasih...

Bondan on March 14, 2011 at 8:59 PM said...

terimakasih tips nya :36

cayun on March 18, 2011 at 9:37 AM said...

terimakasih infonya Gan,,
ijin sedot


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment