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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);




// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);


so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

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


so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name='quickedit'/>

</div>

</b:includable>


</b:widget>

7. Save template dan lihat hasilnya.

Semoga membantu...

Baca Selengkapnya......

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]+'">&nbsp;<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+'">&nbsp;<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.

Baca Selengkapnya......

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 :

<script language="JavaScript">
<!-- http://www.spacegun.co.uk -->
var message = "BLOG juga karya cipta, belajarlah untuk tidak meng-COPY PASTE";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</script>

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

Baca Selengkapnya......

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.

Baca Selengkapnya......

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='&quot;comment-author &quot; + 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...

Baca Selengkapnya......

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 :

<style type="text/css">

.myAccordion {

float: left;

margin-right: 15px;

}

h3{

padding: 8px;

color: #636363;


background-color: #ffffff;

background-image: url(http://alien.keren.googlepages.com/1.gif);

background-position: top;

background-repeat: repeat-x;

font-weight: normal;

}

.myAccordion .yui-cms-accordion .yui-cms-item {

border: 1px solid #cccccc;

width: 200px;


}

.myAccordion .yui-cms-accordion .yui-cms-item h3 {

margin: 0px;

}

.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {

background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px 0px;

text-decoration: none;

padding-left: 20px;

display: block;


}

.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {

background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px -100px;

}

.myAccordion .yui-cms-accordion .yui-cms-item .bd {

height: 0px;

overflow: hidden;

background-color: #fff;

}


.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {

overflow: hidden;

padding: 5px;

height: 230px;

}

</style>

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">

</script>

<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/bubbling/bubbling.js"></script>


<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/accordion/accordion.js"></script>

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

Baca Selengkapnya......

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

Baca Selengkapnya......

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 :

<script src='http://alien.keren.googlepages.com/warna.js'></script>

7. Save dan lihat hasilnya.

Baca Selengkapnya......

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 :

<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes'
showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

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

<div id='nav-left'>


<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>


</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>


<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform'
method='get' name='searchform'>

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

<div id='search'>

<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;)
{this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value ==
&apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text'
value='Cari artikel disini'/>


<input id='searchsubmit' type='hidden' value='Search'/>

<data:content/>

</div>

</form>

</div>

</b:includable>

</b:widget>

</b:section>


</div>

9. Save dan lihat hasilnya.

Baca Selengkapnya......

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 + &quot;_ArchiveMenu&quot;'>


<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 + &quot;_ArchiveMenu&quot;' 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%'

Baca Selengkapnya......

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.

Baca Selengkapnya......

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.

Baca Selengkapnya......

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 :

<div id='content-wrapper'>

8. Tambahkan kode ini dibawahnya :

<div id='menulateral'>
<span>
<a href='http://klinik-tutorial.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAfyynvdt6zx0Vvl_9-3RkORQ9HnJPnofPf_M6BGB751OB75x4PL3SfDQ-0Gk_gswg2oN1yIo5EHNBZkN4bmzMU27Kd0aCww9DSvJ1DIi44fm-g81g6qSQktEjl49v9yCoaZDdI2S4kE/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03CU0K-e8QYu4Ynem_puUgjTaZ-HGK18yP6uRyWyoPNp1w5QODAd3qSICmvOurZ_BApc2y6fdP9KhbhZKws_aXvPaD7dS_czy2iyzMptRf7UqlYqTbdh-ln4r8gIXh-sWZOxdLQzGfMA/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contact me'><img alt='Contact me'
class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHdtqYLuFxzmI13RNyvecozAB94s_6_5jrdy7EXEQdvfn46ePtgl2w9_h69wtjdDkRZaKIcRNwuwkX_jle6UkqRnbS95Q4wOLR_YG1wqW5XOkyTJt0g5YUoGI9y6ixmxEBbu0e8bfrPw/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://klinik-tutorial.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a post
Feed'><img alt='Suscribete a post Feed' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifn2H3J7byGg6i1-_gWhJ8eRCTPuZQ0A_JuwccrzmkofedVek-mSpRUhrRgdoMBE3gjpic-uRqu-vQgaQF2RqTHiuuMULwGVZS0r8HuEc_DjocSZuQ4pchVSlzHkkpCAVq-b82sWn2aHM/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://klinik-tutorial.blogspot.com/feeds/comments/default' style='border:0;' title='Suscribete a comment
Feed'><img alt='Suscribete a comment Feed' class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a>
<br/><a href='#' style='border:0;' title='My Album'><img alt='My Album' class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/flickr_icon_BG_G.png'/></a>
<br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9GOFt7QyAkoB5izt6IVagCLWzChW0xvvIm85GaIcpp0K7QwnvuJK9jaqE2m8US-Z_cELuRdj3BpHEXJhDbxf9-s_spqMNAJGp7VbWS9pfM9tE6cHBCnw0MUxEGVSpFTPfBrI2kV1N0g/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

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.

Baca Selengkapnya......

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.

Baca Selengkapnya......

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 :

<script language=”JavaScript” src=”http://alien.keren.googlepages.com/gambarbawah.js” type=”text/javascript”> </script> <script language=”JavaScript” type=”text/javascript”> cot(”http://alien.keren.googlepages.com/spiderman.jpg“) </script>

atau tambahkan kode dibawah ini untuk posisi bawah kanan :

<script language=”JavaScript” src=”http://alien.keren.googlepages.com/gambaratas.js” type=”text/javascript”> </script> <script language=”JavaScript” type=”text/javascript”> cot(”http://alien.keren.googlepages.com/spiderman.jpg“) </script>

7. Save dan lihat hasilnya.

Baca Selengkapnya......

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 :

<object width="400" height="300"><param name="movie" value="http://alien.keren.googlepages.com/contoh.swf"></param><param name="wmode" value="transparent"></param><embed src="http://alien.keren.googlepages.com/contoh.swf" type="application/x-shockwave-flash" wmode="transparent" width="400" height="300"></embed></object>

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

Baca Selengkapnya......

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

Baca Selengkapnya......

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 :

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

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

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Save Changes dan lihat hasilnya

Baca Selengkapnya......

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.

Baca Selengkapnya......

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 :

<script type="text/javascript" src="http://alien.keren.googlepages.com/klinikblog.snow.js">

/***********************************************

* Diambil dari Klinik BLog

* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript

* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/

* Please keep this notice intact

***********************************************/


</script>

Baca Selengkapnya......