adsense link 728px X 15px

Monday, June 14, 2010, 

membuat bubble comment versi 2Pada postingan sebelumnya tentang cara membuat comments bubble pada blog mas Rizal memberikan sebuah pertanyaan kepada saya tentang bagaimana cara membuat comments bubble seperti pada blog ini. Untuk itu pada postingan ini saya akan memberikan sedikit tutorial tentang cara membuat comments bubble versi 2, ^^, judulnya agak-agak mirip dengan postingan kemarin.

Langsung aja berikut langkah-langkahnya.

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

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

    .comm-link {
    padding: 9px 0 0 26px;
    margin: 10px 0 0 0;
    font-size: 10px;
    font-family: Arial,Tahoma,Verdana;
    text-transform: capitalize;
    background: transparent url('http://i48.tinypic.com/2u8z29z.png') no-repeat left;
    }

    Keterangan :
    *Kode yang berwarna merah adalah kode image (bubble), image pada URL tersebut seperti image pada awal postingan ini (ukuran 24px X 24px). Silakan ganti apabila anda menginginkan image yang laen.
  5. Kemudian cari lagi kode berikut

    <div class='post-header-line-1'/>

    Copy kode berikut lalu letakkan tepat di bawah kode tadi

    <b:if cond='data:post.allowComments'>
    <a class='comm-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if>
    </a>
    </b:if>
  6. klik Simpan

     Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.







25 Comments:

TUKANG CoLoNG said...  on  June 14, 2010 at 7:27 AM

cuma mw blg...pertamaxxx..!

gopong said...  on  June 14, 2010 at 10:19 AM

bagus ni sob...mau dicoba ah...oh ya sekalian aku follow ya..thanks

informasi seputar PC said...  on  June 14, 2010 at 2:17 PM

infoyang menarik kawan,manatab buat otak-atik blog ini...

rizan said...  on  June 14, 2010 at 2:22 PM

semakin elok saja blogspot sekarang ya ...
fiturnya beraneka macam,jadi kangen sama blogspot :)

Rock said...  on  June 14, 2010 at 3:55 PM

Cuma ganti backgroundnya jadi http://i48.tinypic.com/2u8z29z.png ya sob?

Rock said...  on  June 14, 2010 at 3:58 PM

Oiya, gimana? Bisa gak kalau komentarku letaknya dibawah? Bisa otomatis pindah ke atas apa perlu di rubah lagi kodenya sob?

Masda said...  on  June 14, 2010 at 4:27 PM

@Rock, iya mas, tapi kodenya juga sedikit diubah, btw yg mas tanyain link jumlah comment di bawah postingan itu kah?

Rock said...  on  June 14, 2010 at 4:40 PM

Iya sob, contohnya di blogku:

xxx komentar
Label: xxx

Posisinya kan di bawah sebelah kanan, kalau pakai kode itu nanti bisa otomatis pindah di atas apa perlu merubah kode lagi?

om_rame said...  on  June 14, 2010 at 6:37 PM

terima kasih atas sharenya, tampiLan pada bagian kotak komentar jadi tambah cantknya.
------------
seLamat beraktifitas, saLam sukses seLaLu

mixedfresh said...  on  June 14, 2010 at 7:52 PM

thanks tutorialnya..

imtikhan said...  on  June 14, 2010 at 8:09 PM

keren jg sob
terima kasih

dv said...  on  June 14, 2010 at 8:13 PM

blog yg bermanfaat..tq uda share ilmu nya :)
makasii jg uda mampir ya..

akhatam said...  on  June 14, 2010 at 9:46 PM

Wahh mantapp aja dengg kangg...!! keep blogging yow!!

nuances pen dofollow said...  on  June 15, 2010 at 5:32 AM

Script yang menarik untuk dicoba! trims!

ariefborneo said...  on  June 16, 2010 at 11:30 AM

Wah info na mantap surantap gan...mav bru mampir gan.

Sudino Dinoe said...  on  June 16, 2010 at 5:35 PM

Makasih atas tutorialnya

ryankampur said...  on  June 16, 2010 at 8:01 PM

ada skrinjotnya ga???

Masda said...  on  June 16, 2010 at 9:05 PM

@Rock, nggak akan otomatis pindah mas, jadi harus delete dulu kode untuk link coment yang bawah, ;)
@ryankampur, bisa mas lihat tuh pada postingan ini, cuman beda pada imagenya aja mas,,,

blog sederhana said...  on  June 17, 2010 at 3:44 AM

Kunjungan perdana sob, nice tutorialnya makasih udah sharing
Ijin follow sob, nggak marah lho kalau follow balik :)

Laksamana Embun said...  on  June 17, 2010 at 1:01 PM

Thanks infonya ya Sobat,,, Perlu diterapkan sepertinya ini :)

Rock said...  on  June 18, 2010 at 5:47 AM

Trus yang perlu di ganti kode yang mana sob?

Masda said...  on  June 18, 2010 at 6:21 AM

Hapus kode ini mas :

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

kemudian ikuti langkah di atas ;)

Masda said...  on  June 18, 2010 at 6:24 AM

Eh maaf malah kebaca Emoticons ini :p ganti emo seperti tadi ama kode : p (tanpa spasi) :D

Rendi Indra Jaya said...  on  August 4, 2010 at 4:14 AM

Wahhhh . .

Akhir nya Ketemu utor nya . .

Makasih Mas . .

Trus Kalo Mau Buat yg kya gini gimana Yah Mas :

You Are Here » Home » Blog Tutorial » Membuat Comments Bubble Versi 2

Mohon di bls Mas . .

Wong Mediun said...  on  April 6, 2012 at 9:27 PM

Makasih infonya gan...
kunjungi balik ya

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