adsense link 728px X 15px

Saturday, June 12, 2010, 

Membuat comments bubble pada blogMasih berhubungan dengan kode CSS seperti pada postingan sebelumnya, kali ini saya akan membahas mengenai cara membuat comments bubble pada blog. Sedikit penjelasan, comments bubble merupakan tampilan jumlah komentar yang dimanipulasi seakan-akan berada dalam gelembung.

Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.

  1. Login ke blogger.com
  2. Klik Rancangan, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur Rancangan)
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. Cari kode berikut

    </head>
  5. Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

    <style type="text/css">
    .comment-bubble {
    float: right;
    background: url(http://i46.tinypic.com/df97c4.jpg) no-repeat;
    width: 55px;
    height: 40px;
    font-size: 18px;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    }
    </style>

    Keterangan :
  6. Kode yang berwarna merah merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini

    Bubble image

  7. Kode yang berwarna biru pada width dan height silakan sesuaikan dengan ukuran image anda.
  8. Cari lagi kode seperti ini

    <h3 class='post-title entry-title'>
  9. Copy kode di bawah ini lalu letakkan tepat di bawah kode tadi.

    <b:if cond='data:post.allowComments'>
    <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
    </b:if>
  10. Klik Simpan

     Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...







30 Comments:

ryankampur said...  on  June 12, 2010 at 8:06 AM

apakah ane akan jadi pertamax..? hehehe

buble = gelembung/balon. . . so jangan dket2 ama jarum. . . nanti betus., gagal deh. .. hahaha

nice inpo'a...

ryankampur said...  on  June 12, 2010 at 8:10 AM

oh iya lupa...
bisa ga kalo bubble tsb warna'a jadi random.. . jadi ketika orang ke-1 komentar warna hijau, ke-2 warna merah, ke-3 kuning. . . dst.. .

Anonymous said...  on  June 12, 2010 at 11:53 AM
This comment has been removed by a blog administrator.
Sungai Awan said...  on  June 12, 2010 at 6:33 PM

thanks nih gan tipsnya.
kapan2 aku coba deh

uswah said...  on  June 12, 2010 at 6:34 PM

berkunjung pagi cari info baru berita baru

hikmah said...  on  June 12, 2010 at 6:34 PM

aku praktekkan sob.
numpang copas

Rahasia Misteri said...  on  June 12, 2010 at 6:41 PM

Lama tag berkunjung nih gan .. Keren2 .. Tapi saya ampun dgn kode css .. susah bggt masangnya .. ^^

TUKANG CoLoNG said...  on  June 12, 2010 at 7:21 PM

kalo mau ngisi nomor urutan komen seseorang gmn caranya?

Masda said...  on  June 12, 2010 at 8:20 PM

@Ryan Kurniawan, saya utak-atik dulu mas, bisa apa g? Saya juga masih belajar,,, ;;)
@TUKANG COLONG, ditunggu aja mas postingan selanjutnya, makasih kunjungannya,,,

DikMa said...  on  June 12, 2010 at 10:29 PM

untuk WP adakaah :D

secangkir teh dan sekerat roti said...  on  June 12, 2010 at 11:55 PM

kok gak pasang ndri..?

Naila Zulfa said...  on  June 13, 2010 at 12:03 AM

nice info, thanx to share...

salam kenal,^^

Masda said...  on  June 13, 2010 at 12:45 AM

@DikMa, wah saya lum pernah pake wordpress mas, :D
@secangkir teh dan sekerat roti, ntar kalo semua tutorial yang saya posting harus ada di blog ini bisa-bisa ngambek ne template, tidak semua tutor kan harus diterapkan di blog sendiri, cukup otak-atik aja di blog buat ngetest aja, ;;) btw makasih komentnya,
@Naila, makasih mbak kunjungan+kommentnya...

admin said...  on  June 13, 2010 at 2:38 AM

Wah mantap mas. . Tp di hape ga muncul ya?

Sungai Awan said...  on  June 13, 2010 at 3:28 AM

komen buble ini contohnya gimana gan

uswah said...  on  June 13, 2010 at 3:29 AM

kunjungan sore mencari ilmu

hikmah said...  on  June 13, 2010 at 3:29 AM

berkunjung dengan semangat 45

rizal said...  on  June 13, 2010 at 3:48 AM

wah bagus nih...tapi saya tertarik dengan yang di blog ini..gimana sih cara bikinnya...?? mohon peenjelasannya

tfd said...  on  June 13, 2010 at 4:57 AM

thanks infonya sob...menarik banget..tapi aku belum bisa bahasa2 pemrograman..html, php, untuk web, jadi harus pelan2 nentenginya..hehehe...

Rock said...  on  June 13, 2010 at 7:50 PM

Kolom komentarku ada dibawah, bisa gak sob?

Etc News said...  on  June 13, 2010 at 7:52 PM

Wahhh... sekarang textnya sudah gelap nich... Aku simpan dulu sob, dicobanya nanti.
Thanks.

joe said...  on  June 13, 2010 at 8:06 PM

coba dulu deh. Thanks atas ilmunya ...

Rizkyzone said...  on  June 16, 2010 at 4:31 AM

wah keren nih sob, kapan2 coba ah

Koko Bota said...  on  June 22, 2010 at 3:46 AM

mantap nich..........good infoo bos......semoga sukses trus ya...

habib m said...  on  August 21, 2010 at 12:56 AM

kok gak bisa sih..

Dunia-Uniks said...  on  January 2, 2011 at 4:38 AM

hahaha keren2 ;)

Klik menarik said...  on  August 26, 2011 at 3:52 AM

Gan!! Di Blog ane Kagak Berfungsi Atau Kagak ADa?

Kenapa ye Gan?
Mohon Pencerahannya

Unknown said...  on  July 4, 2014 at 9:45 AM

Terima kasih banyak mas :')

guru les kimia said...  on  October 30, 2015 at 1:59 AM

Wah akhirnya ketemu juga caranya dan saya bisa selesain tugas dari guru les kimia saya. Mantep deh, saya coba dulu ahhhh mau lihat hasilnya

mixer truck said...  on  November 15, 2015 at 6:12 PM

Min kalo selain bubble bisa ga ya buat blog? abisnya saya mau yang lebih keren gitu buat website mixer truck saya

:)) ;)) ;;) :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