adsense link 728px X 15px

Saturday, June 19, 2010, 

Tidak begitu jauh bedanya dengan postingan saya kemarin, tentu saja masih berhubungan dengan comment ^^, sebelumnya saya pernah membahas tentang cara membuat comments bubble dan cara membuat comments bubble versi 2 maka kali ini saya akan membahas tentang cara membuat number comments.

Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini di sini. Untuk membuatnya silakan ikuti langkah-langkah berikut.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. STEP 1
    Cari kode berikut

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    .comments-counter a:link,.comments-counter a:visited {
    color: #000 !important;
    text-decoration: none !important;
    background: url(http://i47.tinypic.com/99m5on.jpg) no-repeat;
    width: 50px;
    height: 48px;
    float: right;
    display: block;
    margin-right: 5px;
    margin-top: -15px;
    text-align: center;
    font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
    font-size: 15px;
    font-weight: normal;
    }
    .comments-counter a:hover,.comments-counter a:active {
    color: #666 !important;
    text-decoration: none !important;
    }
  5. STEP 2
    Kemudian cari kode berikut

    <b:loop values='data:post.comments' var='comment'>

    Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    <script type='text/javascript'>var CommentsCounter=0;</script>
  6. STEP 3
    Terakhir cari kode berikut

    <data:commentPostedByMsg/>

    Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi

    <span class='comments-counter'>
    <a expr:href='data:comment.url' title='Comment Link'>
    <script type='text/javascript'>
    CommentsCounter=CommentsCounter+1;
    document.write(CommentsCounter)
    </script>
    </a>
    </span>
  7. klik Simpan

     Sekarang lihat blog anda, buka postingan anda yang memiliki komentar. Perhatikan kotak komentar pada bagian kanan. Anda dapat mengatur posisi angka pada icon bubble dengan menyesuaikan kode yang berwarna merah pada STEP 1. Anda juga bisa mengganti icon bubble sesuai dengan keinginan anda dengan cara mengganti url yang berwarna biru dan jangan lupa sesuaikan juga kode yang berwarna orange dengan ukuran icon bubble anda (STEP 1). Semoga bermanfaat...^^,







10 Comments:

saka said...  on  June 19, 2010 at 7:40 AM

Kunjungan malam hari sob,,
pertamaX nggak ya :)

muzzy musthofa said...  on  June 19, 2010 at 9:28 PM

mantab kang.... makasih ya kang atas doanya. semoga diblaz oleh Allah SWT dengan berlipat-lipat kebaikan. Amin Ya Rabb. salam dari blogger sidoarjo Kang... :)

mixedfresh said...  on  June 19, 2010 at 11:13 PM

nice tutorial, pengen nyoba juga..
met berakhir pekan

om rame said...  on  June 20, 2010 at 12:34 AM

terima kasih om atas tutornya. sebenarnya saya sudah punya haL seperti ini tapi Lagi pingin utak-atik lagi.
seLamat berakhir pekan aja yah om.

Allien 99 said...  on  June 20, 2010 at 2:11 AM

kreatif juga. nice article. salam kenal. I follow this blog, follow balik ya.. :)

Rizky2009 said...  on  June 22, 2010 at 4:32 AM

keren nih sob, tp blogq sementara g tapasang dylu, dah kebanyakan kode, blog q dah berat bgt sob

rawins said...  on  June 23, 2010 at 1:51 AM

wah ijin bookmark deh. kadang suka butuh tutorial ginian. bulan depan kalo jadi ke samarinda tak mampir dah...

oempak said...  on  June 23, 2010 at 4:23 AM

tenkyu kawan, saya lg cari nih, tp blm bs aplikasikan, lg dicoba ini jg :) thanks

Masda said...  on  June 24, 2010 at 4:32 AM

@all, sama-sama mas,
@muzzy mustafa, amien... Makasih udah menyempatkan diri berkunjung ke blog saya :)

Elong Bujang said...  on  June 26, 2010 at 7:36 PM

Salam kenal..informasinya sangat bermanfaat....terima kasih atas ilmunya

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers