Tuesday 18 December 2012

Cara Pasang Kotak Komen Facebook Di Blog

CONTOH KOTAK KOMEN FACEBOOK DI DALAM BLOG



Cara-cara letak kotak komen Facebook di blog:

1. Pergi ke bahagian Design > Edit HTML

2. Tick atau tanda pada Expend widget templates
Note : Sila Download Full Templates terlebih dahulu sebagai langkah keselamatan.

3. Kemudian tekan CTRL+F (Find) untuk mencari code ini < div class='comments' id='comments'>

4. Copy code di bawah ni dan paste kan selepas perkataan < div class='comments' id='comments'> yang korang jumpa tadi.

<div class='comments-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='comments-tab inactive-select-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='clear'/>
</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='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

*num_posts='5' = Nilai 5 merupakan jumlah komen yang akan terpapar secara default pada kotak komen FB 

*width='400' = Ini merupakan saiz kotak komen untuk Facebook comments box.  Korang boleh adjust saiz tersebut mengikut kesesuaian blog masing-masing.

5. Tekan CTRL+F (Find) untuk cari code <head> , Kemudian Copy dan Pastekan code di bawah ini, selepas code tersebut (<head>) .

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' 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>

Note : Pastikan korang menukarkan YOUR_FB_ID dengan ID Facebook korang tersendiri. Korang boleh dapatkan ID Facebook korang dengan cara Sign In ke Facebook korang dan tengok URL di bahgian profile macam contoh ini; http://www.facebook.com/profile.php?id=1234567890. Nombor yang dihujung sekali tu la merupakan ID facebook korang, cam dalam contoh tu 1234567890 merupakan Id facebook yang diperlukan untuk tutorial ini.

6. Copy dan paste code dibawah ke bahagian CSS 


.comments-page { background-color: transparent;}
#fb-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #cfe2f3; -moz-border-radius: 10px 10px 0px 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-goog-ms-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;  }
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #F0F8FF;}

****Untuk step ini ada 2 cara yang korang boleh buat****

 a ) Korang Copy dan paste code diatas sebelum perkataan ]]></b:skin> (di bahagian Design > Edit HTML)
ATAU

 b ) Korang pergi ke bahagian  Design > Template Designer > Advanced > Add CSS dan pastekan code tersebut di dalam kotak css tersebut.


Makluman : 
Sila adjust background color mengikut kesesuaian blog korang. Cam saya ni saya guna warna biru .

Tuesday 11 December 2012

Gambar Membulat Ketika Disentuh

Tutorial kali ini aku nak ajar korang buat kesan rounded shadow ketika di hover atau sentuh. Contohnya, kalau korang letakkan cursor kat any picture dia akan keluar imej macam ini :

Memang comel dan nampak canggih sikit blog korang kalau guna tutorial ini.. Nak cuba tak? Jom ikuti step by step ye!

1. Sign in Blogger > Design > Edit HTML > Tick Expand Widget Templates
2. Cari code ini, nak mudah tekan ctrl F je dan pastekan code di bawah dalam kotak find..


/* Header

3. Lepas jumpa code di atas, copy code di bawah dan paste di atas atau sebelum code yang dicari tadi.


/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 10px #000000; -moz-box-shadow: 0px 0px 10px#000000; -webkit-border-top-right-radius:10; -webkit-border-top-left-radius:10; -webkit-border-bottom-right-radius:10; -webkit-border-bottom-left-radius:10;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 30px; -moz-border-radius: 30px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px solid #F781BE;padding: 0px;}



4. Kalau nak ubah warna boleh tukar code #000000 kepada warna kesukaan anda. Nak code sila tengok SINI

5. Silalah SAVE dan tengok hasil tangan anda!
Related Posts Plugin for WordPress, Blogger...