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