Opzzpinky | Lifestyle Blogger: Tutorial

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

Cara jarakkan Post dalam blog

by sHaRiNa eLyaNa on May 31, 2013

contoh post yang masih bercantum Assalamualaikum petang ini sha nak bagi tutorial dengan hasil carian sha sendiri, sebab waktu sh...

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

Cara Kembalikan Widget FOLLOWER

by sHaRiNa eLyaNa on May 26, 2013

Assalamualaikum Ada blogger yang kehilangan widget penting ini semasa edit new template..aah tak dapat dinafikan memang cemas !! apat...

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

Freebies Gabungan Header - Template Meiko

by sHaRiNa eLyaNa on May 21, 2013

Assalamualaikum alhamdulilah template meiko [ ini ] mendapat sambutan ramai..terima kasih pada yang dah guna template ini..cumanya ...

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

http://i.imgur.com/bba8VoJ.png

-CARA NAK LETAKKAN HEADER-

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

Cara nak buat Header berMENU

by sHaRiNa eLyaNa on May 10, 2013

Assalamualaikum hye semua..hari ini sha free sangat nak kongsikan dengan korang cara nak buat header berMENU macam sha punya header...

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

Cara Masukkan FB Fan Page ke dalam sidebar

by sHaRiNa eLyaNa on February 28, 2013

Assalamualaikum kita terus kepada tutorial ya..sebab semua dah tau rupa bentuk FB pan page kan?? Tutorial 1. Go to --> Lin...

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

Cara tukar home,newer dan older kepada gambar

by sHaRiNa eLyaNa on February 27, 2013

Assalamualaikum yang atas tu sha punya la..haha..but jangan risau sha ada buat freebies lagi cute dari tu..sebelum tu meh sha ajark...

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

Cara nak letakkan Button dan button Hover

by sHaRiNa eLyaNa on February 23, 2013

contohnya halakan cursor kat button..akan keluar button yang lain faham tak? or korang boleh try hover cursor kat sini (mesti kelu...

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

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>

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

<h5 class="msg_head">Tajuk 1</h5>

Text 1

</div>

<h5 class="msg_head">Tajuk 2</h5>

Text 2

</div>

<h5 class="msg_head">Tajuk 3</h5>

text 3

</div>

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

Cara gabungkan widget yang guna kod

by sHaRiNa eLyaNa on February 13, 2013

Assalamualaikum kalau tadi sha buat tutorial tentang ini ..so tutorial kali ini part 2 :) simple dan ianya sama jimatkan side...

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

Cara gabungkan widget bloglist

by sHaRiNa eLyaNa on February 13, 2013

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

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'>
 <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>
 <div class='clear'> </div>
</div> 
<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
</div></div>  <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..

Freebies Code Denim - Mine design !!

by sHaRiNa eLyaNa on February 11, 2013

Assalamualaikum kalau korang ingatlah kan..sha pernah janji nak share pasal code Denim di entry ini kan? setelah sha edit templ...

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

Cara nak letakkan top Commentators by monthly

by sHaRiNa eLyaNa on January 15, 2013

mereka yang awesome pada january ini..thankssss ok kalau nak top Commentators widget yang ada avatar korang boleh rujuk SINI , ka...

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='"comment-author " + 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='"author-comment " + 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 :)