Klinik-Tutorial: Template

Showing posts with label Template. Show all posts

Cara membuat Side menu

Posted by klinik-tutorial | 5:39 PM | Blogger, Template | 6 comments »

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.

Baca Selengkapnya......

Memasang Nomor pada Kotak Komentar

Posted by klinik-tutorial | 5:27 PM | Blogger, Template | 1 comments »

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

Baca Selengkapnya......

Menambah Background pada Template anda

Posted by klinik-tutorial | 9:11 AM | Template | 1 comments »

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

Baca Selengkapnya......

Mengganti tulisan Home,Posting Lama dan Baru dengan Gambar

Posted by klinik-tutorial | 8:39 AM | Blogger, Template | 0 comments »

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

Membuat Fixed Menu

Posted by klinik-tutorial | 7:56 PM | Blogger, Template | 0 comments »

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.

Baca Selengkapnya......

Memasang Efek Salju

Posted by klinik-tutorial | 7:01 AM | Blogger, Template | 4 comments »

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 :

Baca Selengkapnya......

Cara membuat Side menu

Memasang Nomor pada Kotak Komentar

Menambah Background pada Template anda

Mengganti tulisan Home,Posting Lama dan Baru dengan Gambar

Membuat Fixed Menu

Memasang Efek Salju

Tutorial Design Grafis

About Me

Ebook Gratis dari Yudhi :

Banner

Artikel Terpopuler

Random Artikel

Labels

Recent Post

Categories

Recent Comment

Blog Archive