Pada 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.
Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.
- Login ke blogger.com
- Klik Rancangan
- Klik Edit HTML, kemudian beri centang pada Expand Widget Template
- 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. - 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> - klik Simpan
Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.
27 Comments:
cuma mw blg...pertamaxxx..!
bagus ni sob...mau dicoba ah...oh ya sekalian aku follow ya..thanks
infoyang menarik kawan,manatab buat otak-atik blog ini...
semakin elok saja blogspot sekarang ya ...
fiturnya beraneka macam,jadi kangen sama blogspot :)
Cuma ganti backgroundnya jadi http://i48.tinypic.com/2u8z29z.png ya sob?
Oiya, gimana? Bisa gak kalau komentarku letaknya dibawah? Bisa otomatis pindah ke atas apa perlu di rubah lagi kodenya sob?
@Rock, iya mas, tapi kodenya juga sedikit diubah, btw yg mas tanyain link jumlah comment di bawah postingan itu kah?
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?
terima kasih atas sharenya, tampiLan pada bagian kotak komentar jadi tambah cantknya.
------------
seLamat beraktifitas, saLam sukses seLaLu
thanks tutorialnya..
keren jg sob
terima kasih
blog yg bermanfaat..tq uda share ilmu nya :)
makasii jg uda mampir ya..
Wahh mantapp aja dengg kangg...!! keep blogging yow!!
Script yang menarik untuk dicoba! trims!
Wah info na mantap surantap gan...mav bru mampir gan.
Makasih atas tutorialnya
ada skrinjotnya ga???
@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,,,
Kunjungan perdana sob, nice tutorialnya makasih udah sharing
Ijin follow sob, nggak marah lho kalau follow balik :)
Thanks infonya ya Sobat,,, Perlu diterapkan sepertinya ini :)
Trus yang perlu di ganti kode yang mana sob?
Hapus kode ini mas :
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"'><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 ;)
Eh maaf malah kebaca Emoticons ini :p ganti emo seperti tadi ama kode : p (tanpa spasi) :D
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 . .
Makasih infonya gan...
kunjungi balik ya
I love that idea. Awesome Post..
Thank you, that was just an awesome post!!!
Blog ini "DOFOLLOW", Silakan tinggalkan komentar anda, bebas tapi sopan. Tidak kami anjurkan untuk mencantumkan link pada komentar serta memakai nama Anonymous.
Komentar yang bernada SPAM atau SARA akan kami hapus.
Post a Comment