Syaz Harzays Minme: Tutorial : Comment Box + Reply

Pages

STATUS UPDATED!
Assalamualaikum korang korang and korang... terima kasih kerana sudi singgah kat blog syaz ni.. hihihihi...

4 Mar 2014

Tutorial : Comment Box + Reply

Assalamualaikum you all...
hihhi.. apa khabar korang rakan bloggers syaz.. hihhi.. sihat je kan?? hope korang sihat semua la erk...
jaga kesihatan tau.. keadaan cuaca yang ta menentu sekarang ni.. dgr about 'wabak haba'?? berhati2 tau... 
kalau ada tanda2 sakit2 sendi tu.. cepat2 la p hospital or klinik berdekat utk check.. hihihi...
oke2... tu jaa... syaz datang nak buat tutorial ni..

tutorial ni RQ dari adik Ratu Pimples kita nihhh... dia nak comment box + reply yang macam syaz punya... ade tgk comment box syaz tak...?? ade tak?? kalau tak de.. cer usha gambar yang dekat bawah ni.. contoh comment box yang syaz guna... senang utk korang reply komen rakan2 koranggg... hihhi.. :)


haaaa.... amacam..??? berkenan dakk? kalau berkenan.. jom follow tutorial syaz ni.. hihihi :)


1. Dashboard --> Template --> Edit Html

2. Tekan F3, then search kod yang dekat bawah ni :

</b:skin>

3. Dah jumpa kod yang korang kena cari?? kalau dah.. COPY kod yang dekat bawah ni pulak :

/* Comments
----------------------------------------------- */
.comment-content{
background:#cc99ff;
padding:13px;
border-radius:30px;
border:2px solid #cc66ff;
color:#ffffff;}
h4{
background:#cc99cc;
text-align:center;
color:#ffffff;
text-shadow:2px 2px 3px #000000;
font-size:25px;
font-family: short stack;
}
.comment-block{background:url(http://i.imgur.com/aV5OZHc.jpg);
padding:10px;
border-radius:30px;
border:3px dashed #cc33cc}
.avatar-image-container{background:#cc33cc;padding:5px;border-radius:50%;}
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) }
.datetime{
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px;
font-family: short stack;
margin-top:10px;}
.secondary-text{
padding:8px;
background:#fff;
border-radius:30px;
float:right;
border:2px solid #cc66ff;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid #ffffff;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid transparent;
}
.avatar-image-container{background:#cc33cc;padding:5px;border-radius:50%;}
.avatar-image-container img{
border-radius:50%;}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: none
}
.comments {
height:400px;
overflow:auto;

4. Dah copy tak?? kalau dah.. korang PASTE kod tu dekat atas kod yang korang search tadi tu... dekat atas tau...

5. PREVIEW dulu... kalau suka dengan comment box tu boleh lahh SAVE....

6. Claps ur hand... hahahahahaha


p/s:
-korang boleh la tukar ekot warna yang korang nak la erk.. yang tu macam comment box syaz... hihihihi.. 


SEMOGA BERJAYA ^^

Kalau still tak faham.. roger syaz tau.. hihihi.. thanks yaa :)

5 comments:

  1. ayie nak cube la kot2 jadi,comel =)

    ReplyDelete
  2. tuto yang menarik ni..kalau simple templat boleh ker dear ?

    ReplyDelete
    Replies
    1. Boleh akak..yang ni syaz buat utk designer template.. hehe

      Delete

Assalamualaikum...
alang-alang dah baca tu..
mintak tolong komen sekali boleh??
hehehehe ^^

Syaz Harzays Minme© . Designed by MaiGraphicDesign