;
Tampilkan postingan dengan label HTML-CSS Trik. Tampilkan semua postingan
Tampilkan postingan dengan label HTML-CSS Trik. Tampilkan semua postingan

Senin, 23 Juli 2012

Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger

Senin, 23 Juli 2012


 

Fitur Reply to Comment (Balas Komentar) sering kita temui di blog-blog Wordpress maupun Blogger. Perbedaannya, WordPress telah menyediakannya sebagai fitur bawaan. Selain itu, fitur reply comment WordPress mengandung threads yang independen. Masing-masing komentar dapat memiliki kesinambungan urutan seperti thread forum atau board. Di Blogger, fitur reply to comment pun dapat ditambahkan, namun sifatnya masih sangat sederhana. Hasil balasan komentarnya pun berupa komentar terbaru dan bukan thread. Tapi, tidak ada salahnya menambahkan fitur ini sebagai bagian dari tampilan desain blog yang tentunya akan memberikan kesan profesional pada blog Blogger anda.

Hack ini digunakan untuk menambahkan link fitur balas komentar Blogger. Ketika link tersebut di klik, maka akan muncul pop up window komentar baru, sama dengan jika anda melakukan setting kotak komentar agar muncul sebagai window baru dan bukan menyatu dengan bagian posting (berada di bawah posting).

Langkah-langkah menambah fitur reply to comment:

1. Copy kode berikut ke notepad atau text editor yang lain:
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>
2. Cari ID blog anda. Dari dashboard, buka halaman design, comment, post, atau yang lainnya. Lihat ke kotak url di bagian atas browser. Lihat bagian belakang url. Di bagian itu akan terlihat ID blog.
Contoh:
http://www.blogger.com/post-create.g?blogID=3293775847481849705 
Di bagian berwarna merah itulah ID blog anda. Copy angka ID blog tersebut. Jangan sampai ada kekeliruan dalam meng-copy.
3. Ganti  ID-BLOG-MU  dengan angka ID blog yang telah di copy tadi.
4. Ganti Reply dengan text lain yang diinginkan.
5. Masuk ke edit HTML/Template.
6. Centang/klik 'Expand Widget Templates' (ni yg sering banget kelupaan, bis tu komen marah2 bilang kode yang harus dicari ga ada meskipun berulang2 dicari pe jenggotnya tambah panjang 5 meter)
7. Cari kode berikut:
<data:commentPostedByMsg/>
8. Masukkan seluruh kode yang telah diganti ID-nya tadi tepat DI BAWAH / SETELAH-nya.
9. Save Template.

Mengganti Text 'Reply' Comment dengan Gambar/Image Button

Jika ingin mengganti text 'Reply' dengan gambar, cukup ganti text tersebut dengan script gambar.
<img src='http://urlgambar.com/gambar.jpg' />
Selengkapnya, copy kode berikut:
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG-MU&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img border="0" src='http://urlgambar.com/gambar.jpg' style='float:right;padding:4px;' title="Balas Komentar Ini"/></a></span>
Ganti dengan url gambar tombol/icon reply untuk blog.

Kostumisasi Posisi Tombol/Gambar Reply Button 
Ganti http://urlgambar.com/gambar.jpg  dengam url gambar reply button. Ganti right dengan left jika ingin gambar berada di sebelah kiri (tepat di sebelah nama komentator). Atur nilai padding 4px untuk memberi besaran ruang kosong di sekeliling gambar. Ganti Balas Komentar Ini dengan kalimat atau perintah lain. Atau, tinggalkan begitu saja.

Gambar Tombol/Button Comment Reply

Untuk mendapatkan gambar reply button yang sesuai, anda dapat dengan mudah mencarinya di Google atau gunakan gambar berikut sebagai tombol reply komentar:
Penting! Upload dan host sendiri gambar-gambar tersebut karena sewaktu-waktu gambar-gambar tersebut  dapat dihapus. Klik kanan, pilih 'save as'. Upload gambar ke Blogger (Picasa) atau lainnya.

Catatan: Beberapa problem yang muncul biasanya bersumber pada pencantuman ID blog yang keliru dan kesalahan dalam mencari kode yang sama persis. Pastikan benar mencentang 'Expand Widget Templates',  jika tidak ketemu, cari tanpa tanda < dan >.

DOnE!
Terima kasih Sudah berkunjung


ayib adam al-mahjub - 02.29

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.
Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star
rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
blogger
4. Klik/centang "Show Star Ratings"
blogger
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.
Ada dua langkah penting untuk memasang star rating blogger:
1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.
2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".
3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>
Note:
-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.
- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.
1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.
2. Save template.
Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.
Sumber : buka-rahasia.com
Terima kasih Sudah berkunjung


ayib adam al-mahjub - 02.24

 
Twitter Facebook RSS