Cara Menggabung Komentar Facebook Dan Komentar Blog

Pada artikel sebelumnya piper comex sudah membahas bagaimana cara sederhana memasang FB comment di blogger. Artinya didalam blog kita nanti akan ada kolom komentar, selain kolom komentar blog juga ada kolom komentar facebook.

Untuk artikel kali ini piper comex akan membahas mengenai bagaimana cara menggabung komentar facebook dan komentar blog menjadi satu tempat. Artinya kita hanya memerlukan satu kolom komentar saja untuk menempatkan dua komentar facebook dan komentar blog.

Kenapa harus dijadikan satu kolom?

Untuk template yang sudah terlalu penuh dengan widget, penempatan kolom komentar facebook dan komentar blog menjadi satu bisa menjadi solusi. Selain itu pengunjung bisa bebas memilih apakah mereka ingin berkomentar menggunakan akun google atau akun facebook.

Langsung saja kita menuju ke TKP.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian klik Template ==> Edit HTML ===> Lanjutkan ==> Centang kotak kecil "Expand Templates Widget " 

3. Cari kode: <div class='comments' id='comments'>, pada template saya ada dua kode dan saya pilih kode yang pertama. Kemudian masukkan kode berikut ini dibawah kode tersebut.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments </div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

Catatan:

witdh='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
<div class='comments-page' id='fb-comments-page'>
dengan kode:
<div class='comments-page' id='fb-comments-page' style='max-height:230px;overflow:auto;'>
Tetapi jika tidak ingin menambah scroll, abaikan saja.

4. Selanjutnya cari kode: </head>, lalu letakkan kode dibawah ini diatasnya.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='MASUKKAN ID FB SOBAT BLOGGER' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show(); } </script>

Catatan:
Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook Anda.

5. Kemudian untuk berikutnya cari kode:   /* Comment atau kode:  #comments
Bila tidak sama dengan kode diatas, Anda bisa sesuaikan dengan kode yang ada di template Anda. Cari kode yang semirip mungkin.
Setelah ketemu kode tersebut, masukkan kode berikut ini dibawahnya.

.comments-page {} #blogger-comments-page {display: none;} .comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;} .comments-tab-icon { height: 16px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #eeeeee;} .inactive-select-tab { background-color: #d1d1d1;}

6. Sebelum disimpan Anda bisa klik Pratinjau dulu untuk memastikan tidak terjadi kesalahan edit. Setelah ok tidak ada masalah, kilk save/ simpan template. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

Read More

Cara Encode dan Decode Atau Parse Code HTML

Parse HTML atau Parse Kode HTML adalah tool atau perangkat yang digunakan untuk mem-parse atau konvert kode HTML atau kode script/javascript secara otomatis sehingga mempermudah dalam pemasangan atau instalasi di blog atau halaman posting.

Umumnya Parse HTML diperlukan untuk konvert atau parsing kode HTML pada kode-kode script iklan, seperti script iklan AdSense atau yang lain. Atau juga bagi Anda yang banyak menulis atau posting artikel dengan banyak menggunakan kode javascript yang perlu di parse atau konvert sebelum dipublish agar tidak ada problem error.

Jika ingin menampilkan tulisan kode: <b> about HTML Parse <b> pada halaman post maka Anda harus menulisnya seperti ini: &lt;b&gt about HTML Parse &lt;bgt;

Untuk convert atau parse kode HTML, Anda hanya memasukan atau copy paste kode HTML ke dalam area tool Parse HTML kemudian klik Convert.

Dengan parse kode ini kita dapat menambahkan kode HTML dalam kotak komentar. Berikut ini adalah kode-kode HTML dasar yang akan dirubah kedalam bentuk sederhananya secara otomatis supaya bisa di masukkan kedalam postingan, kotak komentar, dll seperti yang sudah dijelaskan sebelumnya.

'<' menjadi '&lt;'
'>' menjadi '&gt;'
'"' (double quote) menjadi '&quot;'
''' (single quote) menjadi '&#039;'
'&' menjadi '&amp;'

Keterangan:
Encodeing = Mengkonvert/ memparse ke format biasa
Decoding = Mengembalikan ke format html nya

Insert Your Text Below Do HTML Encoding Do HTML Decoding

Powered by: WebToolHub.com

Read More

Cara Mengukur Kecepatan Loading Blog

Cara mengukur kecepatan loading blog atau website dapat menggunakan tool dari Google, dengan mengunjungi alamat berikut ini: https://developers.google.com/speed/pagespeed/insights.

Selain menggunakan tool dari Google tersebut, anda juga dapat menggunakan tools.pingdom.com. Tool tersebut dapat Anda digunakan dengan gratis.

Kecepatan loading dari sebuah blog atau website merupakan salah satu hal yang dibutuhkan untuk berhasilnya SEO efforts. Kita semua tahu bahwa halaman blog yang memerlukan waktu loading yang lama akan membuat pengunjung blog menjadi jenuh sehingga dapat saja langsung menutup halaman tersebut sebelum halaman blog terbuka semua. Google sendiri tidak suka dengan halaman blog yang waktu loadingnya lama.

Untuk mengetahui berapa lama waktu loading blog anda menggunakan tool Pingdom caranya sangat mudah. Masukkan alamat url blog anda, kemudian klik test now.
Semakin besar nilai test yang dihasilkan, semakin baik kecepatan loadingnya.


Semoga bermanfaat.

Read More