klik nuffnang

Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

21.1.11

0

ubah nama blog kepada tajuk artikel

Kenapa perlu menukar nama blog menjadi tajuk arikel?.Dengan membuat begini, nama blog anda akan diubah menjadi tajuk artikel apabila posting dibuka.Dengan cara ini akan memudahkan pencarian oleh mesin pencari seperti google dan yahoo kerana ia menggunakan tajuk artikel dalam pencariannya.

Trik ini akan meningkatkan hasil pencarian dengan menggunakan Yahoo,Google,Bing dan boleh meningkatkan pengunjung ke blog anda.

1. klik DESIGN
2. pegi ke EDIT HTML
3. tik pada 'EXPAND WIDGET'
4. kemudian carik kod nie [ctrl + f]

<title><data:blog.pageTitle/></title>

5. gantikan dengan kod kat bwh nie;

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

6. klik PREVIEW..utk mengelakkan sebarang yg tidak diingini berlaku
7. dah puas hati,jgn lupe klik SAVE
8. siap!!
9. kemudian anda boleh lihat tajuk artikel anda akan muncul di title bar pada browser...
lots of love
thanks for reading ♥ ekinyusri

19.1.11

0

memasang shoutbox tersembunyi

1. klik kat DESIGN
2. then PAGE ELEMENT
3. klik ADD GADGET
4. pilih HTML
5. kemudian COPY/PASTE kod2 kat bawah nie


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i219.photobucket.com/albums/cc282/garam63/SHOUT.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Letakkan kod ShoutBox anda disini

<div style="text-align:right">
<a href="http://teknikbuatblog.blogspot.com/2010/04/shoutbox-adalah-suatu-widget-yang.html"><font size="1"">get this </font></a><a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>



6. tukarkan tulisan berwarna merah dengan kod shoutbox anda
7. anda juga boleh tukar tulisan berwarna oren dengan imej yang anda suka
8. lastly, SAVE...jangan lupe plak
lots of love
thanks for reading ♥ ekinyusri

9.5.10

0

masukkan kod dalam entry

dah lame gak aku mencari tutorial nie
mule aku wat memg x jadik...
dan akhirnye aku jmpe cmne care nak masukkan kod dlm entry
senang jerk..
paste kod yg kte nak tukar tue
then klik ENCODE

selamat mencube..hehe
lots of love
thanks for reading ♥ ekinyusri

3.5.10

0

membina effect bayang-bayang pd gambar


Untuk membina efek bayang-bayang pada bahagian kanan dan bawah gambar seperti yang anda dapat lihat pada gambar di atas, hanya perlu mengikuti beberapa langkah di bawah.

1. Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada Expand Widget Templates

2. Tekan Ctrl+F dan taipkan kod .post img {

3. Copy kod di bawah dan pastekan di bawah kod .post img {


background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;



4 . Akhir skali, klik Save

lots of love
thanks for reading ♥ ekinyusri

2.5.10

0

memasang effect salji pada blog

Untuk membuat efek salji turun pada blog,anda boleh ikut langkah di bawah...

1 . Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya, klik pada HTML/Javascript.

2 . Copy kod di bawah dan paste pada ruang Content HTML/Javascript


<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>


3 . Akhir sekali, klik Preview dan jika anda berpuas hati dengan hasilnya, klik saja Save.

lots of love
thanks for reading ♥ ekinyusri

1.5.10

0

Memasang button Back to top dan Home pada sisi blog

Back to top dan home button yang boleh anda lihat pada sisi kanan dan kiri blog ini adalah fungsi yang dapat anda bina sendiri secara costum. Ia mungkin dapat memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button Back to top, dan visitor sudah pun selamat sampai ke header blog.

Button boleh disesuaikan mengikut pilihan sendiri jika mampu untuk mengubahnya, jika tidak, memadailah dengan menggunakan button yang serupa dengan blog ini. Sama aja. Tak menjejaskan apa pun. Heh..

Untuk memasang button back to top dan Home ini, sila ikut beberapa langkah yang mudah dibawah.

1 . Log in blog=> Dashboard => Layout => Edit HTML. Tick pada Expand Widget Template

2. Dengan menggunakan keyboard ataupun papan kekunci atau, sila tekan Ctrl+ F. Taip kod </head> pada ruang Find yang terpapar di atas taskbar

3 . Copy atau edit kod di bawah (jika perlu) dan paste di atas atau sebelum kod </head>

p/s: Kod yang berwarna purple boleh di edit (jika perlu)


<a href="#" style="position: fixed; right: 1px; top: 260px;" title="Back to Top"><img height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6vrPoAiw_dJRE79mz4p7hjCKFHRWfKD4pjrmxRfaE3Iccwlx4oEdIRb9NZm2apmo9_UwQ7xuHVlTg0CPGMvN_YKzyNkWSnbKORwGY36GDTwP2G33wNZyEm8n4j8-6M9SmweX5kfiPts/s320/up.png" width="21" /></a><a href="http://URL anda.blogspot.com/" style="position: fixed; right: 1px; top: 287px;" title="Home"><img height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LsqIrX3egj5t28boNTV3cdmFDx4Go5NucdFBZb0nuPkw0SdrcRdBtLwzhyDZznJelnsSdnZEJjFRlfmJiPUccsp1vs__6XUPmGp2aM9UFHRV5nzVxvSBWT4j1WCvrlyxSFdM6ixTIsY/s320/home1.png" width="21" /></a>
<a href="#" style="left: 1px; position: fixed; top: 260px;" title="Back to Top"><img height="
21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6vrPoAiw_dJRE79mz4p7hjCKFHRWfKD4pjrmxRfaE3Iccwlx4oEdIRb9NZm2apmo9_UwQ7xuHVlTg0CPGMvN_YKzyNkWSnbKORwGY36GDTwP2G33wNZyEm8n4j8-6M9SmweX5kfiPts/s320/up.png" width="21" /></a><a href="http://URL anda.blogspot.com/" style="left: 1px; position: fixed; top: 287px;" title="Home"><img height="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LsqIrX3egj5t28boNTV3cdmFDx4Go5NucdFBZb0nuPkw0SdrcRdBtLwzhyDZznJelnsSdnZEJjFRlfmJiPUccsp1vs__6XUPmGp2aM9UFHRV5nzVxvSBWT4j1WCvrlyxSFdM6ixTIsY/s320/home1.png" width="21" /></a>


4 . Akhir sekali, klik Preview. Pun penting juga. Jika tiada mesej Error yang bertulisan merah terpapar, klik saja Save.

lots of love
thanks for reading ♥ ekinyusri

12.12.09

2

tab menu

tutorial ini adalah untuk membuat tab menu kat bahagian atas tue...ada templatyg dah ade tab menu..tp klu templat yg biase,yg kite buat sndr,xde tab menu...dah lame aku blaja nak wat tab menu nie...dan akhirnye aku berjaye gak...let try it!!!

1. LAYOUT > edit HTML

2. klik pada 'expand widget'

3. copy and paste kod kat bawah nie,dan letak kat atas kod nie ]]></b:skin>


#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
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: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}


4. kemudian carik kod bawah nie plak


<b:section class="header" id="header" maxwidgets="1" showaddelement="no">


5. then ubah macam kod bawah nie...copy and paste je


<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">


6. then SAVE TEMPLAT...jgn lupe plak

7. pastu gi kat PAGE ELEMENT plak... klik ADD GADGET,pilih HTML/JAVASCRIPT

8. copy and paste kod kat bawah nie


<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogkamu.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogkamu.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>


9. Lastly, SAVE it

NOTE : gantikan URL tulisan warna biru tue ngan URL blog anda sendiri k...

selamat mencuba~
lots of love
thanks for reading ♥ ekinyusri
0

memaparkan jumlah entri & jumlah komen

tutorial ini berfungsi utk memberitahu total entri yg kte dah post dan total komen yg kte terima utk setiap post kite...try it!!!


1. Masuk ruangan LAYOUT

2. Klik pada PAGE ELEMENT dan ADD GADGET

3. Kemudian pilih add HTML/Javascript

4. Copy kod di bawah nie


JUMLAH KOMEN

<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}
</script>
<script src="http://originalbyekin.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"/></script>



JUMLAH ENTRI

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://originalbyekin.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"/></script>


5. Lastly SAVE

NOTE : URL yang berwarna purple tue,URL blog anda sendiri yer
lots of love
thanks for reading ♥ ekinyusri
0

membuat link berpelangi

link berpelangi nie berfungsi bile korang mouseover kat link tue,link korg akan bertukar-tukar warna pelangi...cantik tau...jomlah try

1. gi kat LAYOUT

2. then gi kat EDIT HTML

3. copy and paste kod kat bawah nie dibawah kod <body>


<script src="http://h1.ripway.com/hanatrg/rainbow.js">

</script>



4. SAVE

ok,siap!!! selamat mencuba~
lots of love
thanks for reading ♥ ekinyusri
0

disable copy and paste

tutorial ini adalah untuk mengelakkan data-data, gambar-gambar atau ape je dari blog anda di 'copy paste' oleh org2 yg tidak bertanggungjawab...juz follow je step kat bawah nie...

1. pegi kat LAYOUT

2. klik kat EDIT HTML

3. copy kod kat bawah nie...dan paste kat atas kod </head>


<script type="text/JavaScript">
//http:hanatrg[dot]blogspot[dot]com
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>


4. SAVE
lots of love
thanks for reading ♥ ekinyusri
0

buat 'overflow/scroll' dalam post

• cara nak buat overflow atau kotak scroll nie senang je...juz copy n paste code kat bawah nie
kemudian leh isi gambar,artikel,code atau ape saje kat dlm tue
(gantikan dengan tulisan 'text' berwarna biru)
anda boleh sambung semula post anda sebelum atau selepas scroll tersebut

Text
<div style="border: 1px solid ; background: transparent none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 450px; height: 100px;">
Text
Text
Text
Text
Text
Text
Text
</div>
Text

selamat mencuba~
lots of love
thanks for reading ♥ ekinyusri