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.

---

Checklist untuk customize kan blog

Salam bahagia,


Alhamdulillah, saya sudah selesai customize blog Keluarga Ibu 3A ni.. saya masih kekalkan header lama.

Selain itu, saya nak berikan kredit kepada link n3 tutorial kerana membantu saya dalam menyiapkan beberapa perkara yang saya hajati untuk blog saya ini.

1. Membuat kotak komen thread ala WP (wordpress) [klik pada link untuk tutorial]

klik untuk imej lebih besar

Btw, saya dah customize sikit kotak komen ni. Ubah warna background, juga warna text. Avatar untuk mereka yang komen dengan url dan link sahaja, saya ubah ke imej bunga ros putih.



2. menukar meta tag tajuk blog & membuat breadcrumb [klik untuk link tutorial]  dan membuat background pada tajuk n3/post [klik untuk link tutorial]

Tajuk entri tu pun saya customize sikit.


3. membuat blockquotes [klik untuk link tutorial]

saya masih kekal kan blockquote seperti blog kakyong72.




4. memasang emoticon di kotak komen - tak menjadi pulak di blog saya nih, sebab dah guna kota komen thread. Tapi saya share jugak kat sini, kot-kot lah ade yang nak buat.


5. membuat button buka tutup [+-] di sidebar [klik untuk link tutorial]

Bila buat sidebar macam ni, boleh lah jimatkan ruang supaya sidebar tidak terlalu panjang meleret.


6. membuat background untuk tajuk sidebar [klik untuk tutorial]

Boleh nampak contoh seperti gambar di atas tu. Saya memang sengaja nak buat yang simple dan sesuai dengan tema warna blog, putih dan biru. Cuma saya customize sikit, center kan tajuk sidebar.

7. jadikan blog DoFollow [klik link untuk tutorial]

Ada banyak kebaikan jadikan blog DoFollow daripada NoFollow.. klik ajer link diatas, ada diterangkan dengan jelas oleh AriffShah.

8.  membuat widget related post [klik link untuk tutorial]

 Ini pun saya customize sikit., ganti icon tu dengan rerama biru.

Ada kelebihan nya menggunakan 'widget related post' berbanding dengan linkwithin. Widget linkwithin akan buat blog lebih berat. Dan dari segi trafik, penggunaan Related Post lebih bagus peningkatan trafik nya berbanding dengan LInkwithin.

Saya pun rasa dah takde nak tambah apa-apa lagi pada blog ni.. Rasanya dah cukup dah. Lepas ni dah boleh nak fokus pada n3 blog & BW jer.. 

lastly, hanya sebagai rekod blog ajer, alexa rank blog ni.

kalo tak nampak., sila klik pada imej untuk lebih besar.

gadget impian saya.. samsung galaxy s II, meh klik support saya..

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.

---