Minggu, 08 Desember 2013

Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan

Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan

Terkadang pengunjung yang datang ke blog kita tidak semuanya mempunyai akun blog. dan kalau mereka ingin berkomentar di blog kita mungkin akan kesulitan bila tidak mempunyai gmail, namun mereka pasti mempunyai salah  satu akun baik di Facebook atau  di Twitter, oleh karena itu mereka bisa berkomentar melaui situs jejaring sosial tersebut.

Sahabat blogger, mungkin tutorial seperti ini mungkin sudah banyak di share oleh sahabat blogger yang lain, namun bang dadan coba share kembali siapa tahu aja ada para pengunjung blog cbd yang belum tahu caranya. dan bagi sobat yang ingin meliihat DEMO nya silahkan lihat saja pada kotak komentar dibawah blog ini.
Kotak Komentar Blog Facebook Twitter Berdampingan

Oke kalau begitu kita langsung saja pada tahap pembahasan:

Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan

Sebelum sobat menerapkannya pada blog sobat, terlebih dahulu sobat harus mempunyai tiga ID sebagai berikut:
  • PROFIL_ID (Facebook)
  • APP_ID (Facebook)
  • API_Key (Twitter)
Kalau sobat belum mempunyai atau belum mengetahui ID di atas silahkan ikuti langkahnya dibawah ini:
1. Profile_ID adalah ID account facebook kamu contohnya punya saya "http://www.facebook.com/dadan.dr" jadi Profile_ID saya adalah "dadan.dr"

2. APP_ID adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar facebook, yang belum punya silahkan buat disini

3. APP_Key adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar twitter, yang belum punya silahkan buat disini

Nah jika semua sudah siap, mari kita mulai bahas cara pemasangan nya pada blog
Cara Pemasangan Pada Blog

1. Silahkan masuk ke akun Blog
2. Masuk ke dasbor/rancangan
3. Pilih Template kemudian Klik Edit HTML
*Jangan lupa centang expand template widgate
*Alangkah baiknya jika soba backup template terlebih dahulu, untuk berjaga-jaga.
4. Cari kode <head> kemudian copy kode berikut ini dan taruh dibawah tag <head>

Berikut Kodenya

<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://codecbd.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://codecbd.googlecode.com/files/TweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_Key&amp;v=1'/>

Keterangan:
Silahkan ganti tulisan yang berwarna biru dengan Data ID sobat masing-masing. sesuai panduan diatas.

5. Masih di Edit HTML, Kemudian cari kode  <div class='comments' id='comments'>
Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua (tidak apa-apa, sejauh ini belum ada efek yang merugikan).

Berikut Kodenya

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

6. Klik simpan template
7. Selesai

Nah, mungkin cm itu pembahasan kita kali ini tentang Cara Membuat Komentar Blog Facebook Twitter Berdampingan. apabila sobat masih belum paham, silahkan tinggalkan pertanyaan sobat pada kotak komentar dibawah.
Akhir kata bang dadan ucapkan, selamat mencoba dan semoga sukses..!!

Read more >>

Selasa, 19 November 2013

Kode Embed Video Youtube dan Parameter Lengkap

Berikut ini adalah kode lengkap cara embed video youtube secara custom agar tampilan video sesuai dengan yang kita kehendaki.

Di bawah ini adalah contoh dari custom embed video dari youtube:



Bandingkan dengan versi default tanpa tambahan parameter di bawah ini:



Kode Parameter Custom Embed Video

Berikut adalah kode-kode yang Anda butuhkan untuk custom embed video, tambahkan kode parameter ini saat Anda meng-embed video dari youtube. Jika tidak jalan coba ganti tanda "dan" ( & ) dengan "titik koma"( ; )

Disable Judul Video dan Rating
 &showinfo=0

Disable Search
 &showsearch=0

Enable Related Video
 &rel=1

Disable Anotasi
 &iv_load_policy=3

Tutup Paksa Caption
 &cc_load_policy=1

Enable AutoPlay
 &autoplay=1

Loop Playback
 &loop=1

Disable Full Screen
 &fs=0

Disable Control Player Bar
&controls=0

Tampilan HD 720p
&hd=1

Dan ini adalah contoh kode video di atas. Silakan dicoba..

<iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/ksXVvSjOh-o?showinfo=0;iv_load_policy=3;cc_load_policy=1;modestbranding=1;nologo=1;vq=large;autoplay=0;ps=docs;fs=0" width="550"></iframe>
Cara Mengganti Warna Video Player Youtube


YouTube Player hitam dengan warna bar merah (default)
<iframe src="//www.youtube.com/embed/ksXVvSjOh-o?rel=0;theme=dark;color=red" width="420" height="315" frameborder="0"></iframe>

YouTube Player hitam dengan warna bar putih
<iframe src="//www.youtube.com/embed/ksXVvSjOh-o?rel=0;theme=dark;color=white" width="420" height="315" frameborder="0"></iframe>

YouTube Player putih dengan warna bar merah
<iframe src="//www.youtube.com/embed/ksXVvSjOh-o?rel=0;theme=light;color=red" width="420" height="315" frameborder="0"></iframe>

YouTube Player putih dengan warna bar putih
<iframe src="//www.youtube.com/embed/ksXVvSjOh-o?rel=0;theme=light;color=white" width="420" height="315" frameborder="0"></iframe>
Read more >>

Rabu, 03 April 2013

Kode Javascript Auto Open New Tab Blogspot


Membuat Semua Link atau link tertentu agar terbuka dalam tab atau window baru merupakan hal penting dalam blog. Dengan membuat link agar selalu terbuka pada tab baru menjadikan pengunjung blog atau web tidak akan meninggalkan konten artikel yang sebelumnya telah dibuka, sehingga ketika link yang baru telah dibuka dan kemudian menutupnya, maka pengunjung tidak akan kehilangan alamt url webblog kita atau masih berada di tab dimana url dari webblog kita terbuka sebelumnya. Apalagi jika pengunjung memakai browser yang disetting dengan mendisable cache, setelah dia klik link dalam webblog bila weblog tidak auto open link in new tab, maka webblog kita akan dengan mudah ditinggalkan tanpa jejak.
Di sini akan kita tampilkan 2 pilihan script yang bisa digunakan untuk auto open link in new tab.
  1. Membuat semua link dalam blog terbuka pada tab baru
    • Login ke Dashboard Blogger, Pilih menu Layout -- Add a gadget -- pilih HTML/Javasxript.
    • Copy script di bawah ini :
      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <script type="text/javascript">
      //<![CDATA[
      jQuery('a').each(function() {
      // Let's make external links open in a new window.
      var href = jQuery(this).attr('href');
      if (typeof href != 'undefined' && href != "" &&
      (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) &&
      href.indexOf(window.location.hostname) != -1) {
      jQuery(this).attr("target", "_blank");
      }
      });
      //]]>
      </script>
    • Klik Save Template
  2. Membuat hanya external link dalam blog yang terbuka pada tab baru
    • Login ke Dashboard Blogger, Pilih menu Layout -- Add a gadget -- pilih HTML/Javasxript.
    • Copy script di bawah ini :
      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <script type="text/javascript">
      //<![CDATA[
      jQuery('a').each(function() {
      // Let's make external links open in a new window.
      var href = jQuery(this).attr('href');
      if (typeof href != 'undefined' && href != "" &&
      (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) &&
      href.indexOf(window.location.hostname) == -1) {
      jQuery(this).attr("target", "_blank");
      }
      });
      //]]>
      </script>
    • Klik Save Template
Read more >>
//PART 2