Not Found

Senin, 03 Desember 2012

Cara Membuat Kotak Komentar Blogger, Facebook dan Twitter Berdampingan di Blog

Cara Membuat Kotak Komentar Blogger, Facebook dan Twitter Berdampingan di Blogger. Semoga bermanfaat dan dapat membuat blog kita meningkat Trafficnya, hehe

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan seperti gambar diatas, ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook)
- API Key (pada twitter)
- ID Blogger (pada bglogger)

Bingung cara membuatnya-??
Naahh…
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan ID Blogger,
Kita masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

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.

1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Masukkan kode berikut tepat di bawah kode :
3. Masukkan kode berikut tepat di atas kode <head> :

<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&v=1'/>

Perhatikan kode berwarna ungu :

Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar). Seperti alamat facebook saya adalah www.facebook.com/rizky.vanhalen, maka ID profil Saya adalah rizky.vanhalen.
Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
Ganti tulisan APP_ID dengan ID Aplikasi facebook kita yang tadi kita buat sebelumnya
Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat sebelumnya

Berikutnya, cari kode class='comments'
Masukkan kode berikut tepat di bawah kode class='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 == "item"'>
<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 ungu:

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.
Simpan template dan lihat hasilnya. Selamat mencoba

Cara Membuat Daftar Isi dengan Efek Sliding JQuery

Cara Membuat Daftar Isi dengan Efek Sliding Jquery.

login blog
buka menu posting >> entri baru
lalu masukkan kode dibawah ini

<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js">
</script> <script src="http://ilovebloggink.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script> <script type="text/javascript">
var accToc=true;
</script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript"> </script>

NB :

http://ilovebloggink.blogspot.com ganti dengan alamat blog sobat. Terbitkan dan lihat hasilnya.
untuk Demo bisa di lihat di daftar isi pada menu bar blog saya. Selamat mencoba

Minggu, 02 Desember 2012

Cara Memasang Komentar Facebook di Blog (Lengkap)

Setelah beberapa waktu lalu saya membuat Cara Cepat Memasang komentar Facebook di Blog, kali ini kita akan sama-sama belajar cara lengkap memasang komentar facebook di blog. Untuk cara yang satu ini memang cukup rumit, untuk itu simak baik-baik tutorial pasang komentar facebook di blog berikut ini.

1. Anda harus terlebih dahulu membuat aplikasi anda terlebih dahulu , untuk itu silahkan masuk ke akun facebook anda .
2. Lalu buka link ini Facebook developer page
3. Setelah membuka link tersebut anda akan dibawa ke link setup membuat aplikasi Anda verifikasi melalui mobile phone , cukup masukan nomor handphone anda dan ikuti langkah selanjutnya .
4. Setelah terverifikasi anda masuk ke link di nomor 2 tadi sehingga muncul gambar seperti ini

Isikan nama situs , url situs jangan lupa tambahkan Backslash " / " di belakang Ulr ,
lalu lokasi , contoh : Site name : tutorial blog, Url site: http://ilovebloggink.blogspot.com/, Lokasi : indonesia Lalu tekan Create
5. Lalu anda akan dibawa ke tempat aplikasi

Lalu ikuti langkah-langkah nya. Setelah itu yang anda butuhkan adalah nomor App ID/API Key . Setelah anda membuat aplikasi untuk plugin kotak komentar facebook , silahkan lihat langkah selanjutnya .

Untuk memasang box comment facebook di blog anda terlebih dahulu untuk log in di akun blogger anda lalu Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Lalu cari code berikut: <data:post.body/> biasanya ada 2 pilihan dan pilih yang kedua . Anda taruh kode berikut ini dibawah kode tadi:

<b:if cond='data:blog.pageType == "item"'> <p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='580'/> </b:if>

APP ID ganti dengan No App id yang sudah anda buat tadi, bisa dilihat pada gambar di bawah (yang di lingkari) :

lalu cari kode <b:skin><![CDATA[/* Setelah menemukan silahkan taruh kode ini diatas kode tadi:

<meta content='http://www.facebook.com/ID-PROFIL-FACEBOOK' property='fb:admins'/> <meta content='APP ID' property='fb:app_id'/>

Ganti id profil facebook dengan id profil facebook anda dan ganti app id dengan no app id yang telah anda buat tadi. Simpan template. Selesai..

Widget Twitter JQuery

Widget kali ini adalah twitter widget dengan efek JQuery. Widget ini di buat oleh Mike More. Widget twitter ini cukup unik karena bisa menampilkan foto wajah-wajah followers dan friends (teman Anda) di twitter. Cara memasangnya:

1. widget Twitter Jquery Simple
Hanya menampilkan photo wajah-wajah friends dan followers Anda saja. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#friends').twitterFriends({ debug:1 ,username:'Rizky10_' }); }); </script>

Ganti username:'Rizky10_' dengan username twitter Anda
Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript dan simpan.

<div id="friends"></div>

2. widget twitter jQuery dengan header dan footer.
Hampir sama dengan di atas namun yang ini memiliki header dengan tombol follow ke twitter Anda di sertai dengan footer juga. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript

<div class="twitter-friends" data-options="{ username:'Rizky10_' }"> <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>

Ganti username:'Rizky10_' dengan user name twitter Anda dan simpan.

3. Twitter widget jquery dg header dan footer, di tambah update status followers atau friens (teman) Anda secara bergantian.
Hampir sama dengan yang ke 2 di sertai header, footer dan tombol follow. Namun bedanya widget yang satu ini berwarna gelap (hitam), dan di tambah efek jquery pada up date status teman Anda. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan.

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript.

<div class="twitter-friends">  <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>

Ganti username:'Rizky10_' dengan user name twitter Anda dan simpan.

Gimana, sobat tertarik?, selamat mencoba... don't forget follow @Rizky10_ on twitter.

Sabtu, 01 Desember 2012

Kissing Street Art

Kamis, 29 November 2012

Cara Membuat Galeri Foto Pada Postingan Blog

Cara membuat gallery foto :
1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya) dapatkan url foto yang telah diupload
2. Bikin postingan dalam mode HTML (bukan Compose)
3. Masukkan kode di bawah ini pada postingan
4. Publish dan lihat hasilnya

<div class="snap_preview"> <div> <span style="color: #0066ff;font-size: medium;">Spain Fans</span></div> <style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style> <div class="gallery snap_nopreview">

<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0Asn_JeMegy0LPd8OuLQed3jqb0yNFYLoHFw2qDxLBlQCxeAEVT2WTaOdZ-FKeCxZxj7XkuVKSaULOMRc_2zJdmTTB0zCdf1SSsjlwbfBwRbShxDT3GLfLRBCGVAHvZuTGvyDCuaJ6E/s400/sexy+suporter%25284%2529.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgTLy2xavcnEnJ3vPmyCn6dBn7ay5Yu63j8EKll1T4yH6tyzZjpmeF2k-OEQBlxCjeHNteTTWFuM5LMOceYT91m4tO0XWD-4AMgtq-KUKYw61F_sr7B6s3j6mwvsdFH9eTkPaxPl3FKI/s400/sexy+suporter%25281%2529.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-RybG2BMkVuoGZpE4cB6LTUtfWbhRPlFuQ7_OAimUE4WxwtX3DkxCOtWLQE63-IPd76c8Rye46XwJBAmWdQIRay10abGm7W1XFyTCWa51UBW8vK6_hT5T5p8wJm8K0gUylbTGuzcS5o/s400/sexy+suporter.jpg" width="150" /></a>
</dt>
</dl>
<dl class="gallery-item"> <dt class="gallery-icon"><a href=" http://ilovebloggink.blogspot.com " target="_blank"> <img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEB2rdBJgEBvqcxqo5m0eM-PUsaAJWQwGk0ymzsssLU_jcGdEg7ITAoiAbyvZyIp6KIqXcF1Ghos_Ok9WfIvYme9qqKti0bGMl7dfFYDNqbkXz5DJ4gjDNbQt60ToDz4sEer1fBlJSidE/s400/sexy+suporter%25283%2529.jpg" width="150" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :

Ganti kode yang berwarna jingga adalah URL blog sobat dan yang berwarna hijau ganti dengan url foto yang didapatkan dari hosting setelah foto diupload.
Ukuran foto bisa diganti dengan merubah angka 150 dan 200. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%) Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Selamat mencoba.

Selasa, 17 Juli 2012

Cara Merubah Read More dengan Icon Image

Cara merubah atau mengganti tulisan Read More dengan image agar lebih menarik. Yang pertama harus disiapkan tentu adalah sebuah icon/image seperti ini:

kemudian upload-lah image tersebut ke situs tempat penyimpanan image seperti Photobucket. Setelah proses upload selesai, copy URL image tersebut, seperti contoh dibawah ini:

http://i1068.photobucket.com/albums/u456/rizkydork/Readmore-2.jpg

Tambahkan kode (warna merah) agar image tersebut dapat ditampilakn seoperti dibawah ini :

<img src="http://i1068.photobucket.com/albums/u456/rizkydork/Readmore-2.jpg"/>

Selanjutnya ikuti tutorial berikut:
1. Seperti biasa anda harus dalam keadaan sig ini pada blogger
2. Masuk menu Tata Letak/ Layout-klik Edit HTML-Centang kotak kecil disamping Expand Template Widget
3. Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!Kemudian cari kode seperti ini:

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

Gantilah kalimat Read More dengan URL image yang telah kamu disiapkan diatas, sehingga menjadi seperti ini :

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="http://i1068.photobucket.com/albums/u456/rizkydork/Readmore-2.jpg"/></strong></a>
</b:if>

4. Terakhir, save template dan lihat hasilnya
5. Selamat mencoba :)