NOTIS

Mahu iklankan perniagaan anda.. meh klik SINI

Habibah Yahya's Facebook profile Create Your Badge

Disclaimer : Semua penulisan perkongsian disini adalah hakmilik terpelihara Keluarga Ibu3A, sila mohon izin sekiranya ingin copy paste dan kreditkan link ke blog ini. Penulisan yang diambil dlm bentuk copypaste untuk tujuan perkongsian akan saya sebut sumbernya. Ketahui hak anda sebagai penulis blog.

Khamis, Disember 08, 2011

Home » , , » Tutorial untuk highligt komen author/admin bagi Threaded Comment

Tutorial untuk highligt komen author/admin bagi Threaded Comment



Salam bahagia,


Tutorial asal sila rujuk di link ini Cara pasang fungsi Threaded Comment di Blogspot


Dan ini adalah tambahan atau kod untuk membuat highlight pada kotak komen admin/author (tuan punya blog).


dalam bahasa mudahnya : membuat background kotak komen yang berbeza  bagi pengomen dan balasan dari tuan blog


Step-step ini anda harus refer kepada tutorial asal.



Ni css untuk step 4


#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width: 70px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW12Wcc6X6C1DulafPK2zTxyJRnQmha5g_FPTz7Oi962HxRVhyJCFWsEoXTbDiAh7zJRYsYWG9iQdl4QVqKd7LMCpODvMkIIilHkpCgc1w448zPZfXdZuHMbCaYKBQv4lzxCgGPbbL0Pvk/s60/684c851af59965b680086b7b4896ff98.png);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_entry_admin {
padding: 16px;
background: #ccc;
border: 1px solid #E4E4E4;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSt-kkfDEceHCNjB3gjp_CaJo_-El5kbNgr2_X4n7V_RGzjaEgn69tPLin-2p_7bo782JDkwPVy8D-CSOAxmiTJy3lyQRBVL6VsZi11LKr1utMseU_hpqfy1wZmkmdoJwLFyOSZX9uBQ/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
}
.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}
.cm_name_a {
font-weight: bold;
font-size: 12px;
float: left;
}
.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}
.cm_date_a {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}
.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}





untuk menukar warna background kotak komen, hanya ubah background di bahagian :

.cm_entry , dan
.cm_entry_admin

kalau nak tukor yang lelain tu, seperti warna text, saiz font.. sila lah trial n error..



ini kod html untuk step 7





<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=00000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<b:if cond='data:comment.author == data:post.author'>
<dd class='cm_entry_admin'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
</dd>
<b:else/>
<dd class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</dd>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

sumber : FB MariBinaBlog


saya simpan di sini untuk rujukan masa akan datang.



salam kasih sayang,
.



Anda tahu LMFAO tu apa? Terima kasih sudi membaca entri ini. Alang-alang dah baca, komen lah yer.. nanti senang kakyong nak balas jejak. Jangan serik singgah sini lagi.

Amira Studio
9 Comments
Comments

9 comments

8 Dis 2011, 1:35:00 PG

mekasih sekali lagi kakyong... ada masa nnti izan dtg sini lagi ye. nakbuat skrg cam dah ngantuk plak.

8 Dis 2011, 11:03:00 PG

hehe....akak terus letak di blog, yus malas nak buat. tp betul untuk rujukan akan datang kan...:)

10 Dis 2011, 5:12:00 PTG

@Izan Ishak x per izan.. ada masa nanti, buat la pelan2..

10 Dis 2011, 5:13:00 PTG

@~ yus ~ memang utk rujukan.. lagipun takut nanti cari kat Fb dia, dah byk status baru.. dah jenuh nak cari pulak.. so simpan jer sini..

14 Dis 2011, 6:26:00 PG

betul tu kakyong, senang simpan kat blog sendiri, bila nak guna, senang nak godek sebab dah tahu kat mana..

16 Dis 2011, 11:47:00 PTG

nampak menonjol sikit ruang komen macam ni kan..

17 Dis 2011, 4:08:00 PTG

@cikpuanhady yer.. anytime boleh dtg refer..

17 Dis 2011, 4:08:00 PTG

@syahrilhafiz hihii.. baru seronok sikit nak reply komen

6 Jul 2012, 10:26:00 PG

terima kasih, :)

Catat Ulasan