Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

 
contoh post yang masih bercantum

Assalamualaikum petang ini sha nak bagi tutorial dengan hasil carian sha sendiri, sebab waktu sha edit blog mama mia, post pada blognya bercantum, ianya sangat tidak sesuai..so akhirnya sha dapat selesaikan dengan memeriksa satu persatu kod tersebut

Tutorial
I. Dashboard > Template > Edit HTML > tick button hitam no 7
II. Ctrl + F ---> Post
III. Copy dan paste kan --> margin-top: 20px;
seperti gambar dibawah


IV. Preview dan save

contoh post yang telah dijarakkan

#sila creditkan tutorial ini kepada sha kalau korang nak buat entry tutorial baru kerana ini adalah hasil carian sha sendiri :) terima kasih..



Assalamualaikum
Ada blogger yang kehilangan widget penting ini semasa edit new template..aah tak dapat dinafikan memang cemas !! apatah lagi benda sepenting ini hilang..walaupun dapat digantikan dengan widget yang menggunakan  BUTTON FOLLOW tapi ada keburukannya..

So dengan hasil selidik sha, sebab pernah kehilangan widget ini, sha dapat selesaikannya..meh nak ajar sat :)

TUTORIAL

I. Dashboard > Template > Edit HTML > Tick anak panah hitam tu
II. Cari code <div id='sidebar-wrapper'>
III. Copy  
<b:widget id='Followers1' locked='false' title='Friends' type='Followers'/>
#paste kan bawah code yang korang cari tu


IV. preview dan save


sha kaji menggunakan template denim, template lain kurang pasti berkesan atau tidak..so selamat mencuba ya :)

Assalamualaikum

alhamdulilah template meiko [ini] mendapat sambutan ramai..terima kasih pada yang dah guna template ini..cumanya nak bagi freebies gabungan header sebab tak semua yang nak guna kepala meiko itu..sob..sob hihi..bukan korang mestila nak header sendiri kan..

semacam header di atas [curik sebentar ya cik ina] sambungan header tiada dan nampak lain ja kan..so entry ini akan membantu insyallah :)


TUTORIAL

I. Save image freebies
II. Buka Photoshop, Gabungkan header kamu dengan freebies sampai freebies tu di hujung kotak..

-contoh-

III. Save dan letakkan header di HTML
Ctrl + F = http://i.imgur.com/35IlDUh.png
dan gantikan url header korang :)

#selamat mencuba..kalau tak faham boleh komen ya :)


Assalamualaikum
hye semua..hari ini sha free sangat nak kongsikan dengan korang cara nak buat header berMENU macam sha punya header tu..kelebihan..tak semak kan..kan..hihi
Tutorial
Copy kod ini dan letakkan pada atas header
<script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <div style='padding-left:0px; position: absolute; z-index: 300; margin-left:703px;margin-top: 200px; background:#;'title='TAJUK MENU'>
  <a href="LINK PAGE" title=""><img src="MENU BERGAMBAR" title="" alt="" /></a>
    </div>

NOTE : pastikan kod yang telah di Bold kan diubah 
termasuklah saiz menu bergambar..ubah sampai betul2 tepat di header korang
Jika link menu lebih dari 1, sila copy kod diatas dan paste kan sama seperti tadi..
Freebies MENU
bagi korang yang nak kan menu bergambar dari sha..kot2 korang malas nak buat..jangan risau sha ada buat :) tapi warna pink..kalau korang tak kisah dan ngam dihati ambil lah






Freebies Tapak MENU
ini antara tapak yang korang kena masukkan dalam header..tak nak tapak pun tak apa..just letak cmtu ja..yang ni sha bagi FREE..berkenan ambil lah :)


Freebies HEADER berMENU
dan akhir sekali..sha dah buatkan header 1000x300..kot2 korang nak tukar header baru..boleh try yang ni..agak pink sikit..haha..


kalau ada kemusykilan PM ya..kot2 sha boleh bantu..insyallah :) selamat mencantikkan blog dengan usaha sendiri..dah~



Assalamualaikum

kita terus kepada tutorial ya..sebab semua dah tau rupa bentuk FB pan page kan??

Tutorial

1. Go to --> Link


2. copy url FB Fan Page korang dan paste pada tempat kosong tu..
#Saiz : adjust kat width dan height (mengikut kelebaran sidebar korang)
#Design : tick lah mana yang patut..

3. dah puas hati..klik GET CODE


4. klik IFRAME dan copy code
5. paste pada sidebar korang..

dah siap !! selamat mencuba ya...

Assalamualaikum

yang atas tu sha punya la..haha..but jangan risau sha ada buat freebies lagi cute dari tu..sebelum tu meh sha ajarkan cara nak tukar home, newer dan older..

Tutorial
Dashboard > Template > HTML >tick
cari kod di bawah ini
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

gantikan yang color merah dengan kod di bawah ya
<img src='url gambar'/>
#ambik dekat freebies dibawah ini ya
done !! preview dan save :)


Freebies

maaf hanya 2 warna ja sha buat..nak amik klik kanan dan copy url image ya..







dah amik..sila komen :) nak tengok cantik ka tidak design sha ni hikhik..

contohnya halakan cursor kat button..akan keluar button yang lain
faham tak?
  • or korang boleh try hover cursor kat sini (mesti keluar bunga punya :)

Assalamualaikum
Tutorial
Dashboard > Template > Edit HTML > Tick
cari kod /* Content
copy kod 
li {
list-style-image:url(url button) ;
}
li:hover {
list-style-image:url(url button);
}
#freebies icon comel
letakkan kat bawah sekali contoh kat bawah ni
pastikan sebelum /*header


dah jadik?? wahhh..jom komen :) deabak !!

Assalamualaikum
kalau tadi sha buat tutorial tentang ini..so tutorial kali ini part 2 :) simple dan ianya sama jimatkan sidebar..
Tutorial
Dashboard > Layout > Add gadget > HTML
copy kod ini 
<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 12px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 2px 6px;
cursor: pointer;
position: relative;
background-color:#FAAFBA;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
Text 1
</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Text 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
text 3
</div>
</div>
<center>
<br />
<br />
Notice Board


boleh edit kat sini

paste kan dan save :) 

memandangkan sha suka pink..jadi semua tutorial backgground sha semua pink hihi..so..gud luck korang :) 

Assalamualaikum

cara ini senang buat korang2 yang terlalu banyak sangat bloglist widget..means boleh jimatkan ruang sidebar..kan..kan..kan..

Tutorial

Dashboard > Layout > Add gadget > Bloglist
copy kod ini 


<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>
Credit: Ini

 paste kannya..kemudian save

dan aturan pada layout akan jadi macam dibawah ini


tunggu beberapa minit kemudian save..dan jika tidak berhasil jangan buang kod tadi..tunggu sampai   ianya bertukar ya..sabar..hihih gud luck tau :)



Assalamualaikum
kalau korang ingatlah kan..sha pernah janji nak share pasal code Denim di entry ini kan? setelah sha edit template tu akhirnya jadilah dia seperti bawah ni..


means kod tu tak lah susah mana kalau korang nak edit balik..kan..kan..
sidebar, title post, post footer, layout border..itu ja yang sha mampu buat hehe..selebihnya korang yang edit mengikut kretiviti masing2..siapa peminat pink boleh copy laju code bawah ni :)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Denim
Designer: Sharina Elyana
Url : www.opzzpinky.my
Date:     11 Feb 2013
-----------------------------------------------
*/

/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
 <Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">

 <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">

 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#cccccc" value="#cccccc">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">

 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">

 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/

body {
text-align: center;
background: url(http://1.bp.blogspot.com/-Rzlo5faDMoE/UFnCN8buG0I/AAAAAAAAF6U/PGENMPLbSBo/s1600/tpolkadotorange.gif);
color: black;
font-size:14px;
font-family: 'Elsie Swash Caps', cursive;
letter-spacing: 1px;
}

a:link {
  color: $linkColor;
}
a:visited {
  color: $linkColor;
}
a img {
  border-width: 0;
}

#outer-wrapper {
  font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}

#header {
  width: 1000px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  line-height: 1.2em;
  font-size: 100%;
}

h1.title a, h1.title a:visited {
  color: $headerTextColor;
  text-decoration: none;
}

#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                            
/* Content
----------------------------------------------- */

.clear {
  clear: both;
}

#content-wrapper {
width: 960px;
margin:0 auto;
padding:20px;
text-align:left;
font: normal normal 99% Verdana, sans-serif;
background:url(http://i.imgur.com/eLgZ2es.png);
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}

#main-wrapper {
width: 600px;
margin-left: 0px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 300px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
  margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: #F781BE;
 font-size: 100%;
border : dotted 1px #000;
}

.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}

.post-footer {
background-color : pink;
 text-align: center;
border:2px dotted #D358F7;
color:#000000;
font:verdana;
font-size:12px;
font-weight:bold;
margin:0.75em 0;
}

.post-footer .span {
  margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
  padding: 4px;
  border: 0px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

.feed-links {
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link {
  float: $endSide;
 }

#blog-pager { 
  text-align: center;
 }

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: #F781BE;
 font-size: 100%;
border : dotted 1px #000;
}
                                                            
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}

.sidebar .widget-content {
  margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 0px solid $borderColor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 78%;
}

.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}

                                                            
/* Footer
 ----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}

#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
}
]]></b:skin>
  </head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='haniszakirahdanfaqihahhusni (Header)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>

  </div></div> <!-- end outer-wrapper -->
  <b:include data='blog' name='google-analytics'/>
</body>
</html>

cara nak masukkan ke dalam blog
sebelum mula, korang dinasihatkan untuk backup template asal..takut ada kesalahan atau xberkenan nanti blog jadi buruk jangan salahkan sha ya hihi..

  • Dashboard > Template > Edit HTML > Tick
  • Copy code Denim
  • dan paste pada ruangan template
  • dah siap edit korang klik button save dan keep widget tengok gambar di bawah


dah siap !! now korang sendiri pun dah boleh edit blog..wah tahniah !! meh rajin2 peningkan kepala dengan HTML hihih..gud luck ya..


mereka yang awesome pada january ini..thankssss
ok kalau nak top Commentators widget yang ada avatar korang boleh rujuk SINI, kali ini pula tutorial cara nak letakkan top Commentators secara bulanan, ianya memudahkan blogger yang buat award top Commentators blog dia untuk setiap bulan..
Cara nak Letakkan
Dashboard > Layout > Add Gadget
Copy
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">{"pipe_id":"e4754fbed79eb700e2b80adf7541c447","_btype":"list","pipe_params":{"ExcludedNick":"Nama korang","BlogUrl":"url blog korang","RangeD":"30","NoTopCommentators":"5"},"hideHeader":true}</script>
#Bold : tukarkan seperti yang dinyatakan, 30 - untuk bulanan, kalau nak 7 hari pun boleh :) 5 - untuk nombor top commentators 
Kemudian paste dan save !! 
# dah siap !! thanks korang sebab singgah dan bagi komen..insyallah sha free nanti sha balas lagi ya :) 
Actually sha memang nak buat benda ni..untuk rujukan sha edit blog..ntah kenapa lupa pula..aishh..nasib lah ada orang tanya..hehe..tapi tutorial ni agak susah sikit..hope korang tengok betul2 sampai habis tau !! credit to Miss Amalinalee
Step 1
Dashboard > Template > Edit template > tick
ctrl + F <b:loop values='data:post.comments' var='comment'>
Contoh :
<b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>

#kod merah biarkan ja !! Padam kod biru, gantikan dengan kod bawah ni

<div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>
            <dt class='comment-author' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <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>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </div>

Step 2
ctrl + f ]]></b:skin>

copy kod dan pastekan di bawah kod yang korang cari tadi
.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background : #FFFFFF url(url image) no-repeat right top ;
padding:5px;
margin-bottom:1.5em;
border:1px solid #FFFFFF;
border-radius:10px;
}
.author-comment.blog-author {
background: #D8D8D8 url(url image) no-repeat right top;
}

Preview then save..image tu korang boleh buat sendiri mengikut kreativiti masing2..tapi kalau nak freebies dari sha ambil ja ya :)
Freebies
#cara nak amik -- klik kanan pada gambar dan copy url image :)
sorry kalau tak cantik !! hehe..so pandai2 lah korang edit padding untuk memuatkan image tersebut ya..dah try boleh komen :)