Memasang Kotak Komen Facebook dan Blogger Pada Post

1. Login ke blogger anda.
2. Pergi ke Dashboard > Design > Edit HTML
3. Tick pada checkbox Expend widget templates

( PERHATIAN : Pastikan backup dulu template anda untuk langkah keselamatan.. )

4. Tekan CTRL+F untuk mencari kod dibawah

<div class='comments' id='comments'>

5. Setelah anda menjumpai code tersebut, copy(Ctrl+C) code dibawah ini dan Paste(Ctrl+V) di bawah code  <div class='comments' id='comments'>  yang anda cari pada langkah 4.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>

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

-  num_posts='2' = Bilangan komen yang akan terpapar,

-  width='400' = Saiz kotak komen Facebook. 

6. Tekan CTRL+F (Find) untuk mencari code ini,  

<head>

7. Dah jumpa, copy(Ctrl+C) dan Paste(Ctrl+V) code di bawah ini, selepas code tersebut .

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

Gantikan YOUR_FB_ID dengan ID Facebook anda. 

8. Tekan CTRL+F (Find) untuk mencari code ini,

]]></b:skin>

 9. Dah jumpa, copy(Ctrl+C) dan Paste(Ctrl+V) code di bawah ini, sebelum code tersebut .

.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;}

9. Preview dulu pastu save k


Cara dapatkan ID FACEBOOK anda:
1. pergi ke profile facebook anda.
2. pergi ke bahagian photos anda....pilih je mana-mana gambar dalam album photos anda.
3. lihat pada link gambar yang anda buka.
4. lihat deretan nombor yang ke-3..itu adalah ID FB anda k.

sila klik gambar untuk lihat lebih jelas

sila klik gambar untuk lihat lebih jelas

Berdasarkan contoh gambar diatas ID FB adalah 100001269442231

5. Selamat mencuba k...

Tukar Newer , Home , Older Post kepada Icon

1. Pergi ke Dashboard > Design > Edit HTML > Tick Expand Widget Template.
   (BACKUP DULU TEMPLATE ANDA)
2. Tekan CTRL+F dan cari code bawah ni :

expr:title='data:newerPageTitle'><data:newerPageTitle/>

3. GANTI code yang berwarna MERAH diatas dengan code di bawah (untuk Icon Newer) :

<img src='http://i947.photobucket.com/albums/ad318/hannacrazee/Decorated%20images/go5.png'/>

4. Seterusnya , cari(Ctrl+F) code dibawah :

expr:href='data:blog.homepageUrl'><data:homeMsg/>

5.  Gantikan pula code berwarna  MERAH diatas dengan code dibawah. (untuk Icon Home) :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png'/>

6. Seterusnya  ,  cari(Ctrl+F) code dibawah :

expr:title='data:olderPageTitle'><data:olderPageTitle/>

7.  Gantikan code yang berwarna MERAH diatas dengan code dibawah :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/go5.png'/>

8. Save dan tengok la hasilnya.. 

P/S: link gambar yang berwarna hijau anda boleh tukar dengan link yang lain..

Widget Calendar

1. Pergi ke DASHBOARD > DESIGN > PAGE ELEMENT > ADD GADGET > HTML/Javascript.
2. Copy(Ctrl+C) dan Paste(Ctrl+V) code dibawah pada ruang HTML/Javascript 

<div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="faiz-tutorial.blogspot.com";
Calendar.timeZone="+08:00";
Calendar.drawTable();
</script>
<style>
#blogCalendar {text-align:center;border:0px;background: url() no-repeat top;margin:0;font-family:arial;height:180px;line-height:14px;}
#CalendarCaption a{color:#777;text-decoration:none;margin:auto;font-size:80%;}
#CalendarCaption{width:80%;margin:auto;}
#CalendarTable{height:123px;margin-top:2x;}
#CalendarTable a{font-weight:bold;color: purple;}
#CalendarTable table {width:auto;margin:auto;border: 0px;text-align:center;font-size:80%;padding-top:5px;}
#CalendarTable table th{font-size:85%;}
#CalendarTable table td{border:0px;}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{font-weight:bold;Text-decoration:underline;}
#CalendarTable a:hover {text-decoration:none;}
#CalendarMonth{font-size:90%;}
.Today{text-decoration:none;color: darkred;}
.Today a:visited, .Today a:link, .Today a:active, .Today a:hover {text-decoration:none;color: #ddd;}
#CalendarFooter{color:Green;font-size:80%;padding-top:10px;}
#monthTable{background:#eee;}
.yearInput{background:#eee;}
</style>

3. Gantikan tulisan faiz-tutorial.blogspot.com dengan URL blog korang. Pastikan anda tidak memasukkan sekali http:// .....
4. Preview dan Save k..

Link Hover - Background effect

ok ni request dari Lienanorris......

1. Pergi ke Dashboard > Design > Edit HTML
   (pastikan anda backup dulu template anda)
2. Tekan CTRL+F untuk mencari code kat bawah ni.

  a:hover {

3. Setelah itu, Copy(Ctrl+C) dan  Paste(Ctrl+V) code dibawah pada bawah code a:hover {

color:#000000; background:url(URL GAMBAR);
background-repeat:repeat;
text-decoration:none
}

4. Pada URL GAMBAR masukkan link gambar background yang anda nak.
5. Save dan lihat hasilnya.


Contoh URL GAMBAR dibawah k

Hujan :

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif

 

Hati :

http://dl.glitter-graphics.net/pub/1274/1274791or8ew5kzx6.gif

Bintang :

http://sl.glitter-graphics.net/pub/602/602355k2suf9v03y.gif

 

Cara Membuat Random Posting Title Berjalan (Marquee)

kali ni aku nak share tutorial untuk buat random posting title berjalan....simple je...

1. pergi ke Dashboard > Design > Add a Gadget >  HTML/Javascript
2. Copy(Ctrl+C) dan paste(Ctrl+V) code dibawah pada  HTML/Javascript

<!--Random Post by Faiz Tutorial-->
<div style="text-shadow:1px 1px 1px #adadad;">
<b><!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function faiz_random_post(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var faiz_tajuk = feed.value.items[i].title + "</a>";
var faiz_komen = " \(" + feed.value.items[i].commentcount + " comments\) - ";
var faiz_senarai = "</a>" + "<a href="+ href + '">' + faiz_tajuk;

document.write(faiz_senarai);
document.write(faiz_komen);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://URLbloggerANDA.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=faiz_random_post
&_render=json"
type="text/javascript"></script>
<span style="font-size: 8px; float:right;"><a
href="http://faiz-tutorial.blogspot.com/2011/11/cara-membuat-random-posting-title.html">
Get Code</a></span>
<!-- Alphabetical Post Title Listing End --></b></div>

3. Ubah tulisan merah kepada URL blog anda.
4. Save...siap...

Selamat Mencuba!!!!!

wishlist pada blog - checklist

1. Pergi ke Dashboard -> Design -> Add Gadget  ->  Html/Javascript 

2. Highlight dan copy(Ctrl + C) code di bawah ni :

<form name=myform>
<input type="checkbox" name="mybox" value="satu" checked />satu <br />
<input type="checkbox" name="mybox" value="dua" disabled />dua <br />
<input type="checkbox" name="mybox" value="tiga" checked />tiga <br />
<input type="checkbox" name="mybox" value="empat" disabled />empat <br />
</form>

3. Paste(Ctrl + V) code tadi pada ruang html/javascript.

4. Preview n save.

P/S: 

Gantikan:

HIJAU - senarai barang atau hajat yang korang nak

MERAH -  checked ~ untuk papar tanda tick pada list

               disabled ~ untuk hide tick pada list

Highlight Pada Komen Author

Tutorial ni akan menunjukkan cara untuk menampakkan perbezaan antara komen pelawat (visitor) dengan komen owner blog ..kita boleh menukar warna font, warna background, tambah border dan lain-lain mengikut citarasa anda k.

PERHATIAN : SILA BACKUP DAHULU TEMPLATE ANDA UNTUK LANGKAH KESELAMATAN :)

1. Login pada blogger anda.
2. Pergi ke "Dashboard > Design > Edit HTML". (Pastikan backup dulu template anda.) 
2. Tandakan pada kotak "Expand Widget Templates"
3. Cari(Ctrl+F) kod  ]]></b:skin> dan Paste(Ctrl+V) kod dibawah sebelum kod ]]></b:skin> tu k.

.comment-body-author {
background: #E6E6E6; /*Background color*/
color: #000; /*Text color*/
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Selepas tu, Cari(Ctrl+F) kod,

<dl id='comments-block'>

5. Highlight kod dibawah

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>


<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

6. Gantikan kod yang sudah di highlight tadi dengan kod dibawah

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

7. Preview dan kalau ok SAVE je k.

NOTE:
HIJAU – WARNA BACKGROUND [Kod Warna]
COKLAT – WARNA TEKS [Kod Warna]
OREN – WARNA BORDER [Kod Warna]
UNGU – SAIZ BORDER
PUTIH – STYLE BORDER ( dotted , dashed , solid , outset , inset , ridge )

----------------------------------------------------------------------------------

Untuk memaparkan komen sebagai owner, pastikan anda login akaun blogger anda dahulu…