Senin, 06 Februari 2012
Cara Membuat Komentar Facebook Dan Blog Berdampingan- pada postingan kali ini saya Ulas Mengenai kotak komentar blog dan facebook. kotak komentar ini berdampingan tapi tidak terbuka dua duannya, hanya yang dipilih oleh yang melihat, untuk demonnya bisa lihat kotak komentar paling bawah postingan ini.
Ok Langsung Ke tutorial aja, saya rasa sudah paha semua maksut dari Cara Membuat Komentar Facebook Dan Blog Berdampingan.
Login Dulu Blog masing Masing, Kalau sudah Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Download Template Lengkap Untuk Menjaga Kesalahan.
Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Copy dan Paste code dibawah ini Tepat dibawahnya
keterangan num_posts='2' width='400'/>
angka 2 gunannya brapa banyak jumlah komentar fb yang kita tampilkan dan 400 lebar ukuran kotak komentar fb nya
Lanjut ..
cari Code </head>
Taruh kode Berikut Tepat di Atasnya
Keterangan <meta content='ID FB Sobat disini' property='fb:admins'/> ganti dengan ID atau user facebook anda, misalkan id defalut 100000022074083 berarti saya ganti dengan 100000022074083. untuk ID defalut saya
CONTOH : <meta content='100000022074083' property='fb:admins'/>
Lanjut .....
Taruk kode di bawah ini di atas ]]></b:skin>
kemudian simpan.
selesai .. semoga berguna ..
JANGAN LUPA COMENT
Ok Langsung Ke tutorial aja, saya rasa sudah paha semua maksut dari Cara Membuat Komentar Facebook Dan Blog Berdampingan.
Login Dulu Blog masing Masing, Kalau sudah Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Download Template Lengkap Untuk Menjaga Kesalahan.
Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Copy dan Paste code dibawah ini Tepat dibawahnya
kode:
<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'>
<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'>
keterangan num_posts='2' width='400'/>
angka 2 gunannya brapa banyak jumlah komentar fb yang kita tampilkan dan 400 lebar ukuran kotak komentar fb nya
Lanjut ..
cari Code </head>
Taruh kode Berikut Tepat di Atasnya
kode:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1&appId=267556556622508'/>
<script src='http://filejs-irwan.googlecode.com/files/jquery-latest.js'/>
<meta content='ID FB Sobat disini' 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>
<script src='http://filejs-irwan.googlecode.com/files/jquery-latest.js'/>
<meta content='ID FB Sobat disini' 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>
Keterangan <meta content='ID FB Sobat disini' property='fb:admins'/> ganti dengan ID atau user facebook anda, misalkan id defalut 100000022074083 berarti saya ganti dengan 100000022074083. untuk ID defalut saya
CONTOH : <meta content='100000022074083' property='fb:admins'/>
Lanjut .....
Taruk kode di bawah ini di atas ]]></b:skin>
kode:
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
kemudian simpan.
selesai .. semoga berguna ..
JANGAN LUPA COMENT
