Cara Membuat Komentar Facebook,Blog Dan Twitter Berdampingan

Cara Membuat Komentar Facebook,Blog Dan Twitter Berdampingan -Alhamdulillah setelah saya selesai menuliskan sebuah tutorial cara membuat komentar facebook dan blog berdampingan, sekarang saya juga telah selesai kembali membuat sebuah tutorial satu lagi, yaitu cara membuat komentar facebook,blog,dan twitter berdampingan, di sini selain kita dapat berkomentar menggunakan facebook dan akun blogger, kita juga bisa berkomentar dengan akun twitter. Jadi sedikit lengkap sudah kotak komentar di blog kita karena terdapat tiga kolom komentar.

Untuk cara pembuatannya masih cukup sederhana,seperti tutorial-tutorial yang lainnya,sobat hanya perlu edit template blog sobat,tapi jangan lupa seperti biasa,backup dulu template sobat sebelum di edit,untuk jaga-jaga supaya apabila nanti terjadi kesalahan,template sobat sudah aman.Untuk cara-caranya silahkan sobat baca di bawah ini;

Pertama yang kita butuhkan adalah

1. APP ID (pada facebook)
2. API Key (pada twitter)
3. Profil_Id (pada facebook)

Bingung cara membuatnya-?? Naahh…Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter, Untuk membuat nya KLIK DISINI. Jika sobat belum bisa cara membuatnya silahkan baca Cara Membuat Api Key Atau ID Aplikasi Di Twitter, kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper, Untuk membuatnya KLIK DISINI
Jika sobat juga belum bisa cara membuatnya silahkan baca Cara Membuat ID Aplikasi Facebook Untuk Blog, kemudian ikuti langkah-langkah yang diajukan. (juga mudah)

Untuk Profil_id facebook sobat tinggal ambil username pada facebook,contoh, www.facebook.com/Wibialwis.surya kuncoro. Username yang saya beri warna merah itulah yang sobat gunakan

Sekarang selesai langkah pertama.

Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

• Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Tekan tombol Ctrl+F
• Masukan script di bawah ini tepat di bawah kode <head> ,sobat bisa gunakan ctrl+f untuk mencari kode <head> tersebut.

<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://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/> <script src='http://platform.twitter.com/anywhere.js?id=API_Key&amp;v=1'/>

• Masukan profi_id facebook sobat,app_id facebook sobat dan api_key twitter milik sobat pada script di atas.
• Berikutnya cari kode <div class='comments' id='comments'>. Kemudian taruh script di bawah ini tepat di bawah kode <div class='comments' id='comments'>

<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'>

Perhatikan kode berwarna merah:

• Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
• Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
• Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan
• Selesai..dan hasilnya bisa sobat lihat sendiri setelah semuanya di jalankan dengan baik.

DEMO

Demikian Tutorial yang berjudul Cara Membuat Komentar Facebook, Blog Dan Twitter Berdampingan  yang bisa saya share. Kebanyakan template bisa menggunakan cara ini. Okee,,selamat mencoba,dan semoga berhasil. Semoga bermanfaat.

Cara Membuat Aplikasi API KEY Twitter

Cara Membuat Aplikasi API KEY Twitter-Malam ini saya akan berbagi tutorial cara membuat api key twitter , api key twitter ini biasanya di perlukan ketika kita akan membuat kotak komentar twitter di blog dan untuk memasangnya kita memerlukan sebuah API_KEY atau juga hanya untuk membuat aplikasi twitter biasa. untuk itu pada kesempatan ini saya akan berbagi cara termudah untuk membuat Api key Twitter jadi silahkan ikuti petunjuk yang saya berikan di bawah ini.

1. kunjungi situs ini https://dev.twitter.com/apps/new
2. pada "Application details" silahkan isi dengan benar, name di isi dengan nama blog anda
3. Description di isi dengan deskripsi blog anda.. minimal 10 karakter,
4. website di isi dengan Url blog anda,
5. Callback URL di kosongkan
6. Centang pada tulisan Yes, i agree
7. masukan kode keamanan CAPTCHA dan klik Create Your Twitter Appplication.

Silahkan lihat gambar dibawah ini :

Setelah Semua langkah-langkah di atas beres anda akan di bawa ke halaman baru kurang lebih seperti gambar di bawah ini.

Lihat dalam gambar di atas terdapat kode Consumer key IlzhzGY4Bmd0AWg6dZY0w , yang saya kasih warna merah adalah API KEY TWITTER.

Sekarang anda sudah mempunyai API_KEY twitter , tinggal memasangnya, bisa lihat panduanya Cara Membuat Komentar Facebook,Blog Dan Twitter Berdampingan. Demikian artikel yang berjudul Cara Membuat Aplikasi API KEY Twitter yang bisa saya bagikan. semoga berhasil membuatnya. Semoga bermanfaat dan Terima Kasih.

Cara Membuat Widget Hanya Tampil Di Posting Saja

Cara Membuat Widget Hanya Tampil Di Posting Saja-Nahh kalo misalnya blog sobat penempatan widget di home page terasa sangat penuh dan jika inggin menambahkan Widget tertentu seperti Iklan atau apa dan Hasilnya tidak bagus di liat oleh mata, nga usah kawatir mas broo karna apa ? bisa di atur kok.

Misalnya kita hanya inggin menampilkan Widget Populer Post di blog kita hanya di home page atau di postingan. Biasanya kan kalo kita tambahkan Widget tersebut secara default akan tamil di Home Page dan juga saat di Postingan. Nah ternyata bisa lo Widget tersebut hanya tampil di Postingan saja atau hanya di Home page saja.

Seperti apa sih Caranya supaya Widget tertentu hanya tampil di postingan atau home page saja.  Yukk kita simak Caranya di bawah nanti yang akan saya Sampaikan dari awal sampai akhir hee..

Berikut adalah Cara Membuat Widget Hanya Tampil di Postingan Saja :

1. Masuk Ke Account Blog Sobat

2. Pilih Tempelate lalu Edit HTML

3. Setelh itu Kita cari Nama Widget yang mau Kita tampilkan di Home Page saja atau Di Postingan saja, kalo udah nemu Tinggal di Buat seperti ini.

Ini Cara Agar Widget Tampil di Postingan nanti tidak akan tampil di Home Page

Misal Kode xlm Artikel Terkait Kode Aslinya seperti ini :

<b:widget id='HTML1' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
 </div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> 

Ubahlah Jadi seperti ini atau Tambahkan Kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan </b:if>  jadinya seperti ini.

<b:widget id='HTML1' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
 </b:widget>

Nah kalo Kepengin Widgetnya hanya Tampil di Home Page saja, berarti tidak akan tampil di Postingan. Caranya seperti ini. Cari kode Widgetnya dan tambahkan/ ubah kodenga dengan ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'> dan   </b:if> . Maka Kodenya nanti jadi seperti ini :

<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

4. Kalo udah selesai Tinggal Simpan Themplatenya.

Gimana Mudah kan ?? Pastinya donk cuman seperti itu doang kok hee. Oke deh segini dulu yaa apa yang bisa saya sampaikan dalam artikel yang berjudul Cara Membuat Widget Hanya Tampil Di Posting Saja, semoga bermanfaat buat kita semua. Dan bila ada tutur kata yang kurang pas saya Mohon Maaf. Terimakasih

Cara Membuat Recent Comment

Mau posting lagi nih tentang Cara Membuat Recent Comment / Komentar Baru Dengan Foto di Blog. Postingan mengenai komentar memang tergolong banyak, diantaranya widget TOP Komentator dan menampilkan jumlah postingan dan komentar di blog yang sudah Admin bahas sebelumnya.

Dengan widget ini lebih mudah mengetahui siapa yang baru saja memberikan komentar di postingan blog kita. Widget ini tampilannya cukup menarik karena menampilkan foto menampilkan avatar atau foto dari yang orang yang memberikan komentar,jadii lebih manis kan??he

Untuk Live DEMO sudah saya pasang di blog saya ini,jika tertarik silahkan saja langsung menuju ke TKP.

Untuk langkah-langkahnya adalah sebagai berikut :
1.    Seperti biasanya masuk kea kun blog sobat.
2.    Pilih tata letak >> tambah gadget >> HTML/JavaScript
3.    Silahkan sobat masukan kode di bawah ini

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style>
<script type="text/javascript">
 //<![CDATA[
 // Recent Comments Settings
var
numComments = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 250,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://wibialwis.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

 4.  Edit terlebih dahulu jika sobat menginginkannya

• Ganti angka berwarna merah dengan jumlah komentar yang ingin ditampilkan di halaman utama widget
• Ganti angka berwarana biru dengan ukuran gambar avatar yang ditampilkan ( pixel )
• Ganti angka berwarna kuning dengan batas maksimum karakter komentar yang ingin ditampilkan
• Ganti alamat berwarna hijau dengan alamat url blog sobat masing-masing.

 5.    Simpan

Setelah di simpan silahkan lihat blog sobat sekarang.

Itulah sedikit tutorial tentang Cara Membuat Recent Comment / Komentar Baru Dengan Foto di Blog. Semoga bermanfaat bagi sobat blogger semua ^_^

Cara Membuat Widget Popular Pos Warna Warni

Cara Membuat Widget Popular Pos Warna Warni-Selamat Siang sahabat blogger. Setelah sebelumnya sudah pernah membahas tentang  Cara Terbaru Menghubungkan Blog Dengan Fan Page Facebook sekarang saya akan membahas seputar widget popular post. Sebenarnya banyak jenis popular post di blog salah satunya yaitu widget popular post warna warni seperti pelangi. Pasti sobat sudah pernah lihat kan widget popular post seperti ini?? Ya dengan adanya widget popular post seperti ini akan menjadikan tampilan blog sobat menjadi lebih menarik dan pastinya pengunjung akan berlama-lama diblog kita.

Nah bagi sobat yang menginginkan widget popular post warna warni seperti diatas, ikuti langkah langkahnya sebagai berikut. Cek itt doott..

• Login terlebih dahulu di blog sobat.
• Klik Tata Letak >> Add Gadget >>Pilih HTML Java Scrip
• Masukkan kode di bawah ini :

<style type='text/css'>
/*----- POPULAR POST WARNA WARNI -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
</style>

• Simpan templte.

Nah sekarang coba cek blog sobat, widget popular postnya menjadi warna warni kaya pelangi,hehe..  itulah sedikit tips dan tutorial Cara Membuat Widget Popular Post Warna Warni. Semoga bisa bermanfaat. Terima Kasih.

Cara Terbaru Menghubungkan Blog Dengan Fan Page Facebook

Cara Terbaru Menghubungkan Blog Dengan Fan Page Facebook-Selamat datang lagi di Wibialwis Blog, kali ini saya akan membahas Cara agar blog kita terhubung dengan halaman fans di facebook. Ini merupakan rangkaian cara dalam membuat dan mempromosikan blog kita agar ramai pengunjung. Kita mengetahui juga bukan, bahwa facebook merupakan salah satu jejaring social yang sangat banyak dan melimpah peminatnya. Karena faktor tersebut maka saya berinisiatif untuk memposting artikel ini agar blog kita kecipratan pengunjung dari facebook.

Oke kalo begitu langsung saja ya, Berikut saya akan urutkan cara cepat dalam menghubungkan website/blog kita terhadap fans page facebook, sekedar mengingatkan, pastikan kalian telah membuat fans page facebook atau sudah mempunyai untuk mencoba tutorial ini.

1. Login / masuk dahulu ke facebook sobat.

2. Jika sudah masuk, silahkan buka Rss Graffiti atau Search di menu bar sobat ketik RSS GRAFFITI.

3. Pilih add new publishing plan dan tulis nama publishing yang sahabat inginkan dan klik create publishing plan.

4. Pada kolom sources klik add new.

5. Sources diisi dengan, misalkan:

http://name.mywapblog.com/rss.xml (Untuk Mywapblog)
http://name.blogspot.com/feeds/posts/default (Untuk Blogspot)

Maka secara otomatis akan terisi feeds dan judul blog sahabat, kemudian klik save.

6. Pada kolom target kilik Add new. Maka secara otomatis akan terdeteksi akun facebook dan halaman fans page yang sudah sahabat buat. Nah pilih halaman fans page sahabat tersebut yang lainnya biarkan standar dan klik save.

7. Klik Pada kolom On >> Off. Jika suka pada posisi On maka Fans Page sahabat sudah terhubung.

Sekian Cara Terbaru Menghubungkan Blog Dengan Fan Page Facebook yang dapat saya bagikan dikesempatan kali ini lebih dan kurangnya mohon dimaafkan. Semoga bermanfaat.

Updeat : Mulai Sekarang Rss Grafiti sudah premium max Post dibatasi hanya 300 post yang bisa dishare ke fan page facebook. Jika sobat ada tips dan trik lain, sulahkan dishare ke sobat-sobat blogger. Terima kasih.