Klinik-Tutorial

Cara Membuat Animasi Flash Label

2008-09-03T16:40:00.000-07:00

Akhirnya setelah sekian lama tidak memposting di blog qu yang satu ini kali ini saya datang kembali untuk memberikan tutorial bagaimana cara membuat label animasi seperti label yang ada di sidebar kanan dari blog saya.

BLogger hack ini disebut "Blogumus" yang artinya adalah sebuah wp untuk wordpress merupakan sebuah tampilan flash yang menampilkan tag atau label blog kita. Roy Tanck's WP Cumulus plugin for Wordpress. dia yang mengconvertnya.

Bagaimana cara pemasangannya di blog kita?

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Selanjutnya cari kode di bawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Copy kode di bawah ini diatasnya :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.oprekblogger.com'>Romzon</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

7. Save template dan lihat hasilnya.

Semoga membantu...

Icon-icon buat BLogger

2008-08-29T11:12:00.000-07:00

Ini Merupakan beberapa icon gratis yang saya dapat berikan kepada teman-teman semuanya disni semuanya dapat kalian download gratis tanpa bayar sedikit pun. Icon ini berguna untuk mempercantik tampilan dari blog kalian.

Selamat mencoba

A set of sweet Irish Icons

Several wild RSS feed icon sets

From DefiantArt

Free Vector Icon PSD Set

Simplistica (has a nice calendar icon!)

Stickers Icons

Sketchy Paper Icons (I LOVE this set)

Valentine Love

Glossy Blogging Icons

Function Icon Set

Bottle Icon Set (cute, cute, cute!)

Coquette Icon Set

Vector Icon Set

Emotion Buat Friendster dan Blogger

2008-08-28T08:46:00.000-07:00

Akhirnya setelah sekian lama saya posting kembali di blog tutorial aku yang satu ini. pada postingan kali ini saya akan memberikan kode-kode bagaimana cara pasang yahoo emotion buat friendster dan blogger atau pun buat forum-forum yang lain.
dari pada berlama-lama langsung aja deh saya kasih kodenya..

neh kodenya...

Trik Memperbesar Gambar pada Blogger

2008-08-24T08:46:00.000-07:00

Apakah anda pernah mengharapkan agar anda bisa mengirimkan tampilan yang lebih besar via Blogger ?

Saya menemukan trik rapi dari seorang pembaca, Miranda. Ini memerlukan blogger kerangka dengan ekstra lebar di bagian gambar oleh sebab itu akan menunjukkan tampilan yang lebih besar.

Upload gambar kamu dengan cara :
Klik Dashboard | Posting | Create | Add Image icon.

kemudia tunggu beberapa saat sampai loadingnya berhenti.
Setelah itu klik edit html dan lihat code-codenya kira-kira seperti ini :

Dari semua kode diatas coba kalian lihat code yang saya warnai nah disitulah triknya.
Sekarang coba kalian ganti code yang saya warnai diatas dengan code ini s800

Selesai deh...

Silahkan kalian coba..

Cara membuat Side menu

2008-08-19T17:39:00.000-07:00

Mungkin teman-teman masih pada bingung apa yang dimaksud dengan side menu,dari pada teman-teman pada bingung coba kalian lihat contohnya disini. SIde menu merupakan menu yang ada di sebelah kiri blog tadi yang menunya turun-naik turun-naik. ok deh dari pada kalian bingung langsung di coba aja ya??saya ambil kode ini dari website ini http://www.dynamicdrive.com/

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Kemudian copy kode di bawah ini dan paste di notepad :

//Static Slide Menu 6.5 Â© MaXimuS 2000-2001, All Rights Reserved.
//Site: http://www.absolutegb.com/maximus
//Script featured on Dynamic Drive (http://www.dynamicdrive.com)

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}

function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px"
if (NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="90" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}

function initSlide() {
if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}
else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style
bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}

function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

6. Save file tadi dengan nama ssm.js

7. lalu copy kode di bawah ini dan paste di notepad lagi :

YOffset=200; // no quotes!!
XOffset=0;
staticYOffset=150; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="#d1d8ec";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=180; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="360";
barBGColor="#86629f";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="center";
barWidth=15; // no quotes!!
barText="Hubungi saya";
ssmItems[0]=["<center><img src=http://img395.imageshack.us/img395/4389/1787644503lpj2.jpg><br>Jika Ada Pertanyaan silahkan kirim email ke <br><img src=http://img168.imageshack.us/img168/5003/yudhipv7.png> "]

buildMenu();

8. Save file yang tadi dibuat dengan nama ssmitems.js

9. Cari kode di bawah ini :
</head>

10. Kemudian ganti 2 URL di bawah ini dengan URL file yang kalian upload :
<script src='http://yudhi.890m.com/file/js/ssm.js' type='text/javascript'>

<script src='http://yudhi.iskandar.googlepages.com/ssmitems2.js' type='text/javascript'>

setelah itu kalian taruh kedua kode diatas di bawah kode </head>

11. Save dan lihat hasilnya.

Selamat mencoba....

Catatan : Upload file tadi di web hosting seperti googlepages.com atau hostingan gratis kalian.Terus ganti tulisan berwarna merah diatas dengan URL gambar kalian.

Script Tidak Bisa Copy-Paste

2008-08-16T17:26:00.000-07:00

Nah akhirnya aku dapat menulis lagi di blog qu yang satu ini.Kali ini saya akan memberikan tutorial bagaimana memasang kode supaya blog kita tidak dapat di copy-paste tapi kalau kalian tidak mau dibilang pelit sama teman-teman kalian yah ga usah lah pasang kode ini.

he....

ok deh lanjut..mau tahu caranya ??

1. Sign in BLogger

2. Pilih Layout

3. Klik "add gadget / add page elemen"

4. Silahkan pilih elemen html / javascript

5. Masukkan kode di bawah ini :

6. Save dan lihat hasislnya.

note : ganti tulisan warna merah diatas dengan kata-kata sesuai dengan keinginan kalian sciprt ini juga bisa berguna buat di Friendster dan yang lain loh...

Membuat Menu ( Versi 3 )

2008-08-11T09:59:00.000-07:00

Tutorial kali ini saya akan membahas bagaimana cara membuat Tab Menu Horizontal yang lebih mudah dan tidak sulit dan juga membuat ruang Blog atau Website menjadi lebih besar. Kalu masih pada penasaran silahkan kalian coba saja ya??

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

#navigation{

height:2.2em;

line-height:2.2em;

margin:0 1px;

background:#AF7817;

color:#ffffff;

}

#navigation li{

float:left;

list-style-type:none;

border-right:1px solid #ffffff;

white-space:nowrap;

}

#navigation li a{

display:block;

padding:0 10px;

font-size:0.8em;

font-weight:normal;

text-transform:uppercase;

text-decoration:none;

background-color:inherit;

color: #ffffff;

}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{

background:#000;

color:#ffffff;

text-decoration:none;

}

7. Kemudian cari kode di bawah ini :
<div id='content-wrapper'>

8. Tambahkan kode ini diatasnya :

<div id='navigation'>
<ul>
<li class='selected'><a href='Alamat Link 1'>Home</a></li>
<li><a href='Alamat Link 2'>Tukaran Link</a></li>
<li><a href='Alamat Link 3'>Sumbangan</a></li>
<li><a href='Alamat Link 4'>Lain-lain</a></li>
<li><a href='http://klinik-tutorial.blogspot.com/'>klinik-tutorial</a></li>
</ul>
</div>

9. Save dan lihat hasilnya.

Note : Silahkan ganti tulisan yang berwarna hijau dengan URL yang kalian inginkan.

Memasang Nomor pada Kotak Komentar

2008-08-10T17:27:00.000-07:00

Banyak sekali tips dan trik yang terdapat pada blogger ini salah satunya yang terbaru adalah memberikan nomor pada kolom kotak komentar seperti contoh diatas :
Kali ini saya akan memberikan cara bagaimana memberikan nomor pada kolom kotak komentar :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

.numberingcomments{

float: right;

display: block;

width: 50px;

margin-right: 5px;

margin-top: -35px; /*comments-counter position*/

text-align: right;

font-family: ‘Century Gothic’,'Lucida Grande’,Arial,Helvetica,Sans-Serif;

font-size: 30px;

font-weight: normal;

}

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}

.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

Silahkan ganti tulisan yang berwarna hijau dengan warna yang kalian sukai.

7. Tambahkan kode merah di bawah ini diantara kode-kode di bawah :

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

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

<span class='numberingcomments'>

<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

</dt>

<dd class='comment-body'>

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

</b:loop>

</dl>

8. Save dan lihat hasilnya.

Keep Blogging...

Menghapus Kata-Kata pada MyBlog2

2008-08-10T10:49:00.000-07:00

Mungkin para blogger sudah tidak asing lagi dengan myblog blog karen ini merupakan salah satu widget yang paling sering digunakan oleh para blogger mania. Pada tutorial kali ini saya akan memberikan tutorial bagaimana cara menghapus kata-kata yang ada pada my blog blog seperti contoh kasus diatas.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. cari kode ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

td.mbl_fo_hidden{display:none;}

td.mbl_join_img{}

td.mbl_join{}

tr#tr0{display: none}th.mbl_h{display:none;}

7. Save dan lihat hasilnya

Memasang Tab Accordion Bubbling Library

2008-08-10T09:27:00.001-07:00

Mungkin teman-teman kalian masih pada bingung apa itu Tab Accordion Bubbling Library, sekarang blogger memperbolehkan kita untuk memakai tutorial ini pada semua blog di blogspot. Ok kalau kalian masih pada bingung coba kalian lihat contoh demonya :

Demo 1

Nah begini cara membuatnya :
1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini : (Untuk Lebih memudahkan kalian klik ctrl + f)
</head>

6. Tambahkan kode ini diatasnya :

7. Tambahkan Page elemen HTML / Javascript lalu tambahkan kode di bawah ini :

<div class="myAccordion">

<div class="yui-cms-accordion persistent rollover slow">

<div class="yui-cms-item">

<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>

<div class="bd">

<div class="fixed">

<p>

Masukkan teks atau kod HTML disini

</p>

</div>

</div>

</div>

<div class="yui-cms-item selected">

<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>

<div class="bd" style="height: auto;">

<div class="fixed">

<p>

Masukkan teks atau kod HTML disini

</p>

</div>

</div>

</div> <div class="yui-cms-item">

<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>

<div class="bd" style="height: auto;">

<div class="fixed">

<p>

Masukkan teks atau kod HTML disini

</p>

</div>

</div>

</div> <div class="yui-cms-item">

<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>

<div class="bd" style="height: auto;">

<div class="fixed">

<p>

Masukkan teks atau kod HTML disini

</p>

</div>

</div>

</div>

</div>

<div style="text-align: right;">Widget by <u><a href="http://klinik-tutorial.blogspot.com/">klinik-tutorial</a></u></div>

</div>

8. Save dan lihat hasilnya.

Jangan lupa ganti tulisan berwarna hijau diatas dengan tulisan kalian.

untuk mempercepat prosesnya tinggal kalian ganti tulisan slow menjadi fast.

Selamat mencoba

Menambah Background pada Template anda

2008-08-10T09:11:00.000-07:00

Mungkin biasanya teman-teman mendapat template yang hanya standar dari pembuat template itu tapi kalau kalian ingin menambahkan gambar pada template kalian yang sesuai dengan keinginan kalian seperti contoh gambar diatas saya akan memberi tahu cara-caranya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

6. Kemudian tambahkan kode merah di bawah ini dan ganti tulisan berwarna hijau di bawah dengan URL gambar yang kalian inginkan :

body {

background:$bgcolor url(http://img152.imageshack.us/img152/6574/3d169tl1.jpg);

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

7. Save dan lihat hasilnya

selamat mencoba..

Mengganti tulisan Home,Posting Lama dan Baru dengan Gambar

2008-08-10T08:39:00.001-07:00

Apa kalian pernah melihat blog atau website yang tulisan home, posting lama dan posting barunya berupa gambar. Nah kali ini saya akan memberikan tutorial bagaimana mengganti tulisan-tulisan tersebut dengan gambar.Ok deh dari pada berlama-lama langsung saja kita mulai tutorialnya.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :

<b:if cond='data:newerPageUrl'>

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

6. Ganti tulisan hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/first.gif"/>

7. Kemudian cari kode ini :

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

8. Ganti tulisan yang berwarna hijau dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/last.gif"/>

9. Lalu cari kode ini :

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

10. Ganti tulisan berwarna hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/home.gif"/>

11. Save dan lihat hasilnya.

akhirnya selesai juga deh....selamat mencoba

Membuat Link Menjadi Berwarna

2008-07-25T10:45:00.000-07:00

Kali ini saya akan memberikan tutorial bagaimna cara membuat link dalam suatu blog atau website menjadi warna-warni gitu.Contoh seperti di blog saya yang satunya http://yudhim.blogspot.com/. Kalo masih pada bingung silahkan kalian coba dulu aja yah??

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode <head>

6. Tambah kode ini dibawahnya :

7. Save dan lihat hasilnya.

Membuat Menu ( Versi 2)

2008-07-25T10:33:00.000-07:00

Terima kasih kepada temanku yang bertanya bagaimana cara membuat menu horizontal??Nah kali ini saya akan memberikan solusinya.Sebenarnya banyak yang cara yang digunakan untuk membuat menu horizontal salah satunya dengan cara ini.Mungkin cara ini lain dari pada yang lain.Ok ddeh langsung saja kita mulai...

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini ]]></b:skin>

6. Kemudian taruh kode ini diatasnya :

/*-- (Menu/Nav) --*/

#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}

#nav-left{float:left; display:inline; width:600px}

#nav-right{float:right; display:inline; width:100px}

#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0;
font:1.0em Arial,Helvetica,sans-serif}

#nav ul li{float:left; list-style:none}

#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px;
padding:5px 4px; text-decoration:none}

#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px;
padding:5px 4px}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px
7px}

/*-- (Search) --*/

#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px
2px no-repeat; -moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right;
height:25px; margin:0 0px 0 0; width:180px}

* html #search{margin-right:8px}

#search input{font-family:Verdana,Arial,Helvetica,sans-serif;
background:transparent; border:0; color:#555; float:left; font-size:12px;
margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

7. Kemudian cari kode ini <div id='outer-wrapper'><div id='wrap2'>

8. Taruh kode di bawah ini dibawah kode diatas :

9. Save dan lihat hasilnya.

Memperlebar Dropdown Menu

2008-07-25T10:22:00.000-07:00

Di dalam blogger kita dapat membuat arsip ke dalam suatu data yang tersimpan di dalam blogger dan dapat kita publikasikan dalam bentuk dropdown menu atau hierarki.Ok langsung saja kali ini saya akan mengajari bagaimana memperlebar Dropdown menu.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

<b:includable id='menu' var='data'>

<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>

<option value=''><data:title/></option>

<b:loop values='data:data' var='i'>

<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

</b:loop>

</select>

</b:includable>

6. Ganti kode diatas dengan kode ini :

<b:includable id='menu' var='data'>

<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width:100%'>

<option value=''><data:title/></option>

<b:loop values='data:data' var='i'>

<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

</b:loop>

</select>

</b:includable>

7. Save dan lihat hasilnya.

catatan : Kalian tinggal ubah angka yang ada di kode ini style='width:100%'

Menghilangkan Tanggal Posting pada Blogspot

2008-07-18T06:27:00.000-07:00

Sebenarnya dalam menghilangkan tanggal posting di blogspot sangatlah mudah kalian hanya menambahkan sedikit kode ini agar tanggal postingnya hilang.Ok deh langsung saja kita mulai tutorialnya dari pada berlama-lama.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Tambahkan kode warna merah di bawah ini diantara kode-kode di bawah :

h2.date-header {

margin:.3em 0 0;

padding:0;

font-size:80%;

color:#777;

height: 0px;

visibility: hidden;

}

6. Save dan lihat hasilnya.

Cara Menghilangkan Navbar Blogger ( Versi 2)

2008-07-18T05:51:00.000-07:00

Ok tmen2 kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger versi 2 yaitu apabila mouse kita menuju ke atas blog kita maka navbar tersebut akan otomatis muncul sendiri secara otomatis.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. cari kode :

body {

6. Kemudian taruh kode di bawah ini diatas kode body { :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}

7. Save dan lihat hasilnya.

Membuat Fixed Menu

2008-07-15T19:56:00.000-07:00

Mungkin kalian semua masih pada bingung apa yang dimaksud dengan Fixed menu. Fixed menu adalah widget yang setiap kita tarik scroll ke bawah atau ke atas widget ini akan ikut turun naik juga.Dari pada kalian pada bingung mending langsung aja kalian coba yah tutorialnya dan jangan lupa backup templatenya dulu.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

]]></b:skin>

6. Tambahkan kode ini diatasnya :

#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }

7. Kemudian cari kode ini :

8. Tambahkan kode ini dibawahnya :

9. Agar tidak berdempetan dengan template coba kalian cari kode ini :

margin-top:100px;

margin-left:-28px;

ganti margin-left dengan -40px atau jika masih tidak bisa kalian kurangi saja trus dan jangan smpai bderdempetan.

catatan : Ganti tulisan berwarna merah diatas dengan alamat blog kalian.

Cara Membuat Scroll pada Blogspot

2008-07-15T19:27:00.000-07:00

Mungkin kalian masih pada bingung dengan judul yang saya berikan.Nah kali ini saya akan memberikan cara bagaimana membuat Kotak Scroll pada Sidebar.Contohnya kira2 seprti ini :

Ok dari pada berlama-lama saya langsung kasih aja tutornya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

]]></b:skin>

6. Tambahkan kode ini diatasnya :

#scrolling {
overflow: auto; height: 100px; width: 94%;
background-color:#EFEFEF; border:1px solid #777;
margin: 0px auto; padding:5px; font-size: 14px;
color: #999; text-align: left;
}

7. Cari kode ini :

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul> <b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Tambahkan kode yang berwarna hijau dibawah ini diantara kode-kode diatas :

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div id='scrolling'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Catatan : Silahkan ganti tulisan yang berwarna diatas dengan warna sesuai dengan keinginan kalian.

Membedakan gambar di setiap postingan

2008-07-12T09:22:00.000-07:00

Mungkin kalian semua masih bingung dengan judul yang saya berikan diatas.Nah saya akan menjelaskannya sedikit,kali ini saya akan memberika turorial bagaimana cara Membedakan gambar di setiap postingan mksdnya sekarang kalian bisa menyisipkan gambar berbentuk JPG or GIF di setiap postingan anda.Contohnya seperti ini :

1. Sign in Blogger

2. Pilih New Post

3. Klik Edit HTML

4. Tambahkan kode ini setiap kalian ingin memposting

5. Save dan lihat hasilnya

Catatan : Ganti tulisan berwarna hijau diatas dengan URL yang kalian tuju.

Memasang Google Translate

2008-07-11T03:06:00.000-07:00

Google translate merupakan widget yang dapat digunakan untuk mempercantik blog kita tetapi ini hanya dapat digunakan untuk blog atau website bahasa inggris karena widget ini hanya untuk mentranslate dari bahasa inggris ke bahasa lainnya. sayangnya translate untuk bahasa indonesia belum ada.

1. Sign in di Blogger

2. Kemudian pilih layout

3. Tambahkan Elemen HTML / Javascript

4. Masukkan kode ini :

</form>

6. Save dan lihat hasilnya.

Menghilangkan Angka pada Label

2008-07-11T02:36:00.000-07:00

apa kalian pernah melihat blogspot yang labelnya yang seperti ini yang angkanya sudah dihilangkan atau dihapus??? :
Nah kali ini saya akan memberikan cara bagaimana cara menghilangkan angka pada label blogspot.Sebenarnya banyak juga template yang sudah menghilangkan angka pada templatenya itu.Nah saya akan memberi tahu cara menghilangkan angka yang masih ada di dalam template itu.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. cari kode ini :

<data:label.count/>

6. Hapus kode diatas jika kalian sudah temukan.

7. Save changes dan lihat hasilnya

Memasang Gambar Avatar pada Background Template

2008-07-10T08:40:00.000-07:00

Gambar pada latar belakang background atau template merupakan salah satu cara untuk mempercantik blog atau website kita dan kalian juga bisa memasukkan gambar atau widget pada latar belakang template background.

Contohnya seperti ini
1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. cari kode ini :

</head>

6. Tambahkan kode ini untuk posisi atas kiri :

atau tambahkan kode dibawah ini untuk posisi bawah kanan :

7. Save dan lihat hasilnya.

Cara memasukkan animasi flash ke blog

2008-07-08T18:44:00.000-07:00

Kali ini saya akan memberikan cara bagaimana memasukkan animasi flash ke website atau blog. Sebenarnya banyak cara yang digunakan untuk membuat animasi flash contohnya saya ini membuat animasi dengan macromedia flash 8. Ini salah satu contoh animasi yang saya buat di macromedia flash :

Ok sekarang saya kasih tahu caranya :

1. Kalian buat dulu animasi di macromedia flash atau software2 animasi lainnya

2. Upload file .swf tadi ke web hosting seperti googlepages.com

3. Copy file yang telah di upload tadi

4. Ganti tulisan kode berwarna hitam di bawah ini dengan file yang tadi kalian copy :

5. Masukkan kode diatas di layout tambahkan elemen dan paste kode itu di html/javascript

Menghilangkan Navbar Blogger ( Versi 1 )

2008-07-08T08:31:00.000-07:00

Navbar blogger biasanya terletak di atas dari suatu blogspot contohnya seperti ini :

Nah kali ini saya akan memberikan tutorial bagaimana cara menghilangkan navbar blogger. Sebenarnya sudah banyak template yang sudah menghilangkan navbarnya sendiri tapi ada juga template yang tidak menghilangkan navbarnya. Nah kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger.Ok deh langsung saja kita mulai.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. cari kode ini

 ]]></b:skin>


6. Taruh kode ini diatas kode diatas :

/* hilangkan navbar

----------------------------- */

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

7. Save Changes dan lihat hasilnya

Memasang Google Page Rank

2008-07-08T01:04:00.000-07:00

Google page rank merupakan widget yang digunakan untuk melihat seberapa besar page rank dari website atau blog tersebut yang dilihat berdasarkan Bot/Crawler/Spider Google. Selain itu juga google page rank merupakan widget yang bagus buat mempercantik blog atau website kita. Setelah saya melakukan tes di website ini page rank ke sebagian website ternyata hanya google yang page ranknya bernilai 8. Website saya saja yang http://yudhim.blogspot.com/ hanya mempunyai page rank 4.

1. Sign in BLogger

2. Pilih Layout

3. Silahkan pilih elemen html / javascript

4. Masukkan kode di bawah ini :

	<a href=”http://www.prchecker.info/” target=”_blank”><br /><img src=”http://www.prchecker.info/PR1_img.gif” alt=”Page Rank Checker” border=”0″></a>
	<a href=”http://www.prchecker.info/” target=”_blank”><br /><img src=”http://www.prchecker.info/PR2_img.gif” alt=”Page Rank Checker” border=”0″></a>

4,. Save dan lihat hasilnya.

Jangan pernah merubah kode diatas.

Cara Membuat 2 Kolom Header

2008-07-07T06:18:00.000-07:00

Saya kali ini akan memberikan bagaimana cara membagi 2 kolom header di blogspot. Sebenarya sudah banyak template gratis yang sudah membagi headernya menjadi dua tapi banyak juga template yang tidak membagi kolom headernya.Nah kali ini saya akan memberikan caranya.Kira-kira contohnya seperti ini :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

6. Hapus kode diatas dan ganti dengan kode ini :

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

7. Kemudian cari kode ini :

8. Hapus kode diatas dan ganti dengan kode di bawah ini :

9. Save Changes dan lihat hasilnya

Membuat Link pada Gambar atau Tulisan

2008-07-06T19:16:00.000-07:00

Sebenarnya cara membuat link pada gambar atau tulisan itu hanya menggunakan sedikit kode html yang sangan mudah.Ok deh tidak usah berlama-lama kita langsung mulai saja tutorialnya.Kalau teman - teman masih pada bingung coba kalian lihat contoh dibawah ini kemudian klik gambarnya :

1. Upload Gambar yang kalian inginkan di image directory seperti http://pages.google.com/ atau http://www.photobucket.com/

2.
<a href="http://www.liveconnector.com/296786" target="new"><img src="http://www.liveconnector.com/images/promote/my_profile_blue.gif" border="0" alt="My Profile at LiveConnector"></a>

Ganti tulisan http://www.liveconnector.com/296786 yang berwarna merah dengan URL
yang kalian mau.
ganti juga tulisan http://www.liveconnector.com/images/promote/my_profile_blue.gif dengan URL gambar yang kalian upload lalu ganti judul tulisan My Profile at LiveConnector dengan judul yang kalian mau.

lalu kalau ingin membuat link pada tulisan kalian tinggal merubah tulisan yang berwarna merah yaitu dengan <a href="http://klinik-tutorial.blogspot.com/ target="new" title="Dinas Kesehatan Blog">Resep Blog</a>

Selamat mencoba

Membuat Artikel Yang Berhubungan (Related Post)

2008-07-06T07:21:00.000-07:00

Kali ini saya akan memberikan tutorial bagaimana cara membuat Artikel Yang Berhubungan atau sering disebut dengan RElated Post atau kalau kalian masih bingung coba kalian lihat contohnya ini :

Ok langsung saja kita mulai tutorialnya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Copy kode ini :

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}

</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Paste kode diatas tepat di bawah kode ini <data:post.body/>

Kalau kalian pakai Readmore taruh kode diatas tepat di bawah kode yang pertama bukan yang kedua.

7. Save dan lihat hasilnya

Jika kalian ingin mengganti namanya tinggal klik layout kemudian edit HTML lalu cari tulisan ini "Related Posts by Categories" kemudian ganti dengan sesuai keinginan kalian.

Memasang Efek Salju

2008-07-06T07:01:00.000-07:00

Apa kalian pernah melihat Blog yang di backgroundnya ada efek2 salju seperti contoh blog ini Nah kalau sudah kali ini saya akan memberikan tutorial bagaimana cara membuat efek salju pada BLog atau website kita.Ok deh langsung saja kita mulai tutorialnya :

1. Sign in di Blogger

2. Kemudian pilih layout

3. Tambahkan Elemen HTML / Javascript

4. Copy dan paste kode dibawah ini :

Memasang Kotak Komentar di Bawah Postingan

2008-07-05T19:35:00.000-07:00

Apa kalian pernah melihat blog yang seperti dibawah ini :

Ini dinamakan Kotak Komentar terbaru di blogger. Dulu kelemahan dari BLogger adalah dalam hal memberikan comment yang terlalu susah dan ribet tapi kali ini Blogger sudah menutupi kelemahannya.Oke deh langsung saja kita mulai tutorialnya :

1. Sign in http://draft.blogger.com/

2. Pilih setting kemudian pilih comment

3. Pilih Embed Below post pada kotak Comment Form Placement

4. Klik Save dan lihat hasilnya

Jika masih belum ada kotak komentarnya di bawah postingan coba pakai cara ini :

cari kode ini :

kemudian ganti dengan kode ini :

Memasang Emotion di Kotak Komentar

2008-07-04T09:50:00.000-07:00

Yahoo Emotion merupakan ekspresi-ekspresi seseorang yang biasa kita lihat di Yahoo Messenger atau yang biasa kita lihat di blog atau website.Kalo kalian masih bingung coba kalian lihat yang ini :

Ok deh langsung saja kita mulain tutorialnya :

1. Setting dulu kotak komentar anda di bawah postingan. Kalo masih bingung coba kalian klik ini

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Masukan kode di bawah ini dan taruh diatas kode :

6. Lalu untuk menaruh Javascript emotion nya di bawah postingan kalian cari kode :
<p
class='comment-footer'>

7. Kemudian masukan kode di bawah ini tepat di bawahnya :

8. Save Changes dan lihat hasilnya.

Menambah 3 Elemen di Footer

2008-06-30T18:22:00.000-07:00

Footer merupakan salah satu yang tidak dipisahkan di dalam Blog atau Website karena footer ini merupakan bagian penting di dalam Blog. Biasanya standar dari template atau blogger hanya memberikan 1 footer saja kepada Blogger.Nah pada tutorial kali ini saya akan memberikan cara bagaimana menambah kolom page element di footer menjadi 3 bagian. Contohnya seperti ini :

Ok langsung kita mulai tutorialnya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

<b:section class=’footer’ id=’footer’/>

6. Kemudian ganti dengan kode ini :

<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>

</div>
<div style=’clear:both;’/>

</div>

7. Kemudian Save dan lihat hasilnya.

Selamat Mencoba....

Cara Membuat Recent Comment

2008-06-26T20:18:00.000-07:00

Recent comment atau yang sering kita sebut dengan komentar terbaru merupakan widget yang dapat memberikan informasi kepada kita atau pengunjung yang dapat melihat komentar-komentar terbaru dari blog kita.Ok deh langsung saja kita lanjutkan perjanannya.Tutorial ini disebut dengan Recent Comment yah kira-kira contohnya seperti yang diatas ini.Kalian tinggal copy paste saja pada page element.

1. Copy kode di bawah ini :

2. Sign in Blogger

3. Layout

4. Tambahkan elemen HTML / Script

5. Paste kode diatas.

6. Simpan dan lihat hasilnya.

Selamat mencoba yah???moga2 berhasil deh tutorialnya.

Cara Membuat Text Area

2008-06-26T19:54:00.000-07:00

Text area adalah cara menaruh kode ke dalam postingan yang kita buat areanya menjadi sedemikian rupa agar terlihat lebih menarik. Sekarang saya akan memberikan tutorial bagaimana cara membuat text area lain dari pada yang lain yaitu dengan sedikit menambah warna di dalam text area tersebut. Warna itu bisa kalian ubah sesuai dengan kemampuan kalian.Ok deh langsung saja kita mulai ya???

Untuk membuat text are coba kalian copy paste kode ini ke posting ata template :
<div style="border: 1px dashed green; padding: 5px; background: rgb(200, 200, 250) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

contohnya seperti ini :

TEXT nya DISINI kalian tinggal ubah saja tulisan ini sesuai dengan selera dan keinginan kalian

Silahkan ganti tulisan yang berwarna merah diatas dengan warna tulisan kesukaan kalian kalian tinggal merubah-ubah nomornya saja.

atau kalian ingin yang seperti ini :

TEXT nya DISINI kalian tinggal ubah saja tulisan ini sesuai dengan selera dan keinginan kalian

kalian tinggal copy paste kode ini :
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

atau kalian mau juga yang seperti ini :

silahkan copy kode ini jika ingin seperti yang diatas :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy ALL"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">TEXT nya DISINI </textarea></p></div></form>

Keterangan :
Kalian tinggal mengubah-ubah size,width, dan heightnya sesuai dengan keinginan kalian.

Selamat mencoba....

Memasang Pesan di Setiap Postingan

2008-06-25T23:20:00.000-07:00

Setiap blog pasti ingin Blognya selalu dikunjungi dan diberikan komentar oleh setiap pengunjungnya. Maka dari itu di blog saya yang lain ada tulisan yang seperti ini :

Ok kalian sudah tahukan??? kali ini saya akan memberikan tutorial bagaimana cara memberikan pesan di setiap postingan.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

.amaran { background: #fff6bf center no-repeat;
background-position: 10px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}

Silahkan ganti tulisan berwarna hijau diatas sesuai dengan warna kesukaan kalian.

7. Pilih Save Changes dan sekarang lihat hasilnya.

8. Kemudian tambahkan kode ini <p class= “amaran”>Berikanlah Comment kepada Blog ini biarkan Penulis Sedikit Dihargai</p> diantara {Post Template}.
Silahkan ganti tulisan berwarna merah dengan tulisan atau pesan yang kalian inginkan.

Membedakan Warna Komentar Anda dengan Pengunjung

2008-06-25T23:06:00.000-07:00

Kali ini saya akan memberikan tutorial bagaimana cara membedakan warna antara blogger dengan pengunjung.Apa kalian pernah melihat comment yang seperti diatas???Nah gini caranya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

6. Tambahkan kode ini dibawahnya :

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#000000;
background:#3399CC;
text-decoration:bold;
}

Jika masih tidak menemukan kode diatas coba kalian cari kode ini :

/* Comments

atau cari kode ini :

#comments-block .comment-body p {
margin: 0 0 .75em;
}

Tambahkan kode ini dibawahnya :

#comments-block .comment-body-author p {
margin:0 0 .75em;
background:#3399CC;
color:#000000;
text-decoration:bold;
}

Silahkan ganti tulisan yang berwarna merah dengan warna atau background kesukaan kalian.

7. Kemudian cari kode ini :

8. Tambahkan kode yang sama seperti pada yang berwarna merah :
<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<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>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’comment-body-author’>
<p><data:comment.body/></p>
</dd>
<b:else/>

</b:if>

9. Pilih Save Changes dan sekarang lihat hasilnya.

Cara membuat Favicon

2008-06-23T22:44:00.000-07:00

Apa teman - teman pernah melihat blog yang seperti contoh diatas???Nah kali ini saya akan memberikan tips bagaimana cara membuat gambar atau foto atau gambar bergerak dengan format GIF atau JPG, ini disebut dengan favicon atau bisa dikatakan dengan memasanh foto di depan url address.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Cari kode ini :

<head>

5. Tambahkan kode ini dibawahnya :

6. Silahkan ganti tulisan berwarna merah diatas dengan alamat URL tempat kalian menaruh fotonya. Contohnya di : www.googlepages.com

7. Pilih Save Changes dan sekarang lihat hasilnya.

Kode Warna HTML BLog dan Website

2008-06-23T06:06:00.000-07:00

Warna atau Grafik merupakan hal yang penting di dalam dunia Web / Blog karena pewarnaan ini merupakan salah satu bagian yang tidak dapat terpisahkan. Coba teman-teman bayangkan apabila warna di dalam Blog atau Warna hanya ada warna hitam dan putih.Apakah menurut teman-teman BLog atau Web tersebut akan terlihat indah???Tentu saja tidak nanti pengunjung akan merasa bosan dan jenuh karena tidak ada warna yang lain.

Nah dalam tutorial kali ini saya akan memberikan warna-warna apa saja yang tersedia di dalam Blog ata Web :
Cara kerjanya kalian tinggal mengklik warna mana saja yang akan kalian inginkan nanti akan keluar kode-kode warna HTML yang kalian copy dan paste di dalam template atau postingan anda....

Apa kalian masih kurang dengan warna-warna diatas???kalo masih belum puas yah coba saja kalian lihat di Adobe Photoshop atau Software-software lain yang mendukung format pewarnaan.

Keep Blogging.....

Cara membuat Text Berjalan ( Marquee )

2008-06-21T23:22:00.000-07:00

Ini merupakan postingan kedua saya setelah memposting Hari Ultahnya Blog ini Pernahkah kalian melihat Blog yang mempunyai tulisan berjalan atau sering kita sebut dengan Marquee.Nah di tutorial kali ini saya ingin memberikan tips dan trik bagaimana cara membuat text berjalan mulai dari yang berjalan dari kiri ke kanan sampai yang zig-zag gitu???Nah gini caranya kalian tinggal ganti tulisan TEXT dengan kata-kata yang kalian inginkan :

Right to Left Marquee

Left to Right Marquee

Alternate Marquee

Up Marquee

Down Marquee

Up/Down Alternate
Marquee

*
Zig
Zagging Marquee

*
Alternating
Zig Zagging Marquee

*
>>Highlight
Text<<

*

<<<<
Opposite
Highlight text>>>>

Selamat Mencoba.....Keep BLogging

Hari Lahir Klinik - Tutorial

2008-06-21T22:11:00.000-07:00

Alhamdulilah akhirnya lahir juga Blog ini pada tanggal 24 Juni 2008 jam 12.15 WIB.

Nama BLog : Klinik - Tutorial

Nama Pemilik Blog : Muhammad Yudhi Iskandar

Tanggal : 24 Juni 2008