Better a cruel truth than a comfortable delusion ...
Home Anime / e-Story Story Santai Tutorials All bout d Braces Relationship
Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

Sunday, June 29, 2014

Cara Disable Highlight Text dalam Blog

tutorial ni simple jer....salah satu sebab buat disable highlight text dalam blog ialah untuk elak orang copy paste .....



jom tengok step :

1. Dashboard --> Layout --> Add a gadget --> Javascript/ HTML
*mana nak cari Edit HTML /Javascript, leh usha sini ---> LINK 

2. copy kod di bawah sehingga habis dan paste kan pada Javascript/ HTML  ..

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script> 

3. Save dan lihat hasilnya ...

^_^

credit 

Saturday, June 28, 2014

Alert Message dalam Blog

hyepp, korang.....

jom tengok cara buat Alert Message dalam Blog...step yang sangat mudah........



1. Dashboard --> Layout --> Add a gadget --> Javascript/ HTML
*mana nak cari Edit HTML /Javascript, leh usha sini ---> LINK 

2. copy kod di bawah sehingga habis dan paste kan pada Javascript/ HTML  ..

<script> function MYALERT() {
alert("Ayat Korang di Sini"); } MYALERT()
</script>
yang warna Purple tu, sila tukarkan dengan ayat korang sendiri ye..... 

3. Save dan lihat hasilnya ...

^_^


p/s : taknak usha sale dekat IKEA ke?? leh click pada banner Iklan Mr. Nuffnang 

Thursday, June 12, 2014

Cara Buat Transparent Background Guna Paint.net

Here We Go.....

sebelum kita belajar cara untuk buat transparent background, korang kena lah download software ni....tekan sana untuk ------->  Download Paint.net  ...
*lepas siap download tu, korang install lah macam biasa.....
*abaikan kalau dah ade

Ok??? Jom ke langkah seterusnya......

Open Paint.net ---> File ---> Open (pilih gambar yang korang nak edit) ...

tekan MagicWand dulu baru klik pada ruangan putih tu.....


nanti bila dah tukar warna biru, baru click pada gambar 'gunting' tu.....tengok kat nombor 3 dalam gambar.....

dan, hasilnya akan jadi camnie.....
*ulang langkah2 di atas kalau ada lagi yang tak settle..... klik pada bahagian yang tak kena jer lagi..... 
cth : pada huruf R dan P....kan still ade part yang warna putih lagi tu....kan.....

complete??? 
Tekan butang File ---> Save As 

nanti bila dah keluar gambar seperti macam ni, namakan lah pic korang tu dan.......
MAKE SURE 
pada bahagian SAVE AS TYPE tu, korang pilih GIF...(refer gambar bawah) 


so, Ok...Siap....! 

boleh lah tukar header baru....

^_^


Cara Buat Header Simple Macam Saya

hyep, semua.....
hari tu, ade orang tanya camner nak wat header Miss B yang simple tu....so, meh, Miss B terangkan sikit2...harap korang faham....


*Make sure korang dah ade Photoscape....
*Ni just basic

1. Open Photoscape ---> Editor ---> Menu ---> New Photo

then, masukkan details width, height and colour...... saiz untuk header Miss B ialah 900 width dan 160 height.. colour sebaik-baiknya pilih warna putih.....

2.
 

3. 
 
letak ayat korang sendiri.... pandai2 laaa hias ye.... 
kalau nak cantik, make sure guna font yang comel comel....tak tau nak amek kat mana ??? 
meh laaa usha situ ---> FONTS 

4.  
ni yang Miss B wat....

A : Penguin tu comel lahh..mana dapat?? 
B : Open sini >MyCuteGraphics< ...then, cari sendiri...haha =p

*kalau boleh, cari lah graphics yang dah memang transparent...


bila dah siap, just save macam biasa....tapi, tapi dan tapi...... 

korang kena tukar background jadi transparent dulu...baru leh jadikan sebagai header...
baru lah gempak....!! =)

camner nak jadi tranparent???? 

Monday, June 9, 2014

Widget Jumlah Post dan Komen


Step:

1. Dashboard --> Add a Layout ---> Edit HTML / Javascript

2. Copy kod di bawah ni dan pastekan dalam kotak edit html / javascript .. 

<center><script style="text/javascript">
function totalPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function totalComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
<script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>
<small><a href="http://editblogcomel.blogspot.com/2014/06/widget-jumlah-post-dan-komen.html" target="_blank">get this</a></small>

3. Save dan lihat hasilnya.... ^_^

source

Saturday, May 3, 2014

Letak Effect Hujan dalam Blog

Pernah tak korang bukak blog kawan2 korang and then tiba-tiba hujan pulak....mesti korang teringin jugak nak buat effect ala hujan gitu...dah laaa cuaca panas sekarang ni....fuhhhhh....~ 

Jom tengok preview dulu.... 


Step:

1. Dashboard --> Add a Layout ---> Edit HTML / Javascript

2. Copy kod di bawah ni dan pastekan dalam kotak edit html / javascript ..

 <script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp092/bp092.js"></script><p><a href="http://www.hapinemu.net/blogparts/"><img src="http://www.hapinemu.net/fobp/bp092/banner.png" alt="ブログに梅雨がやってくるブログパーツ" border="0" /></a></p>

3. Save dan lihat hasilnya....

p/s : selamat main hujan =)

Friday, April 4, 2014

Letak Icon Comel sebelah Tajuk Entry / Post

nak letak icon comel sebelah tajuk post / entry korang?? macam kat bawah ni?? comel kan...hehehe


step :

1.  Dashboard --> Template --> Edit HTML

2. Cari kod di bawah ini.. tekan ctrl + F untuk mudahkan pencarian...

<a expr:href='data:post.url'><data:post.title/></a>  

3. Dah jumpa?? Meh copy kod di bawah....

<img src="URL Gambar"/>

dan paste kan  di tengah-tengah code pada step 2 tadi... nanti akan jadi cam ni...

<a expr:href='data:post.url'><img src="URL GAMBAR"/><data:post.title/></a> 

4. Cari lah gambar yang korang suka..make sure jangan besar sangat...nanti huduhhh....hehe..

pastu, right click and then " COPY IMAGE URL " ...

gantikan URL GAMBAR dengan kod yang korang dah copy tadi....

5. PREVIEW dulu ye....dah jadi, baru save....

p/s : LINK ICON CUTE   ^_^

Cara Buat Scrollbar di Blog Archieve

hyepp, u olls.....
tak nak scrollbox yang panjang berjela-jela....jom lah tukar guna scroll bar di blog archieve ni...baru blog kemas n cute....



step:

1.  Dashboard --> Template --> Edit HTML

2. Cari kod di bawah ini.. tekan ctrl + F untuk mudahkan pencarian...

<div id='ArchiveList'> 

* kalau tak jumpa, tekan ctrl + F dan cari nama scroll box korang... contoh macam Miss B, Miss B letak nama " MEMORY BOX "....

click gambar bagi besar sikit
daaa jumpa?? ok, sekarang click anak panah yang terdapat di bawah tu... ( tengok gambar untuk kefahaman ) ...

3. nanti korang akan jumpa kod seperti di bawah...

<div class='widget-content'> 



4. Gantikan kod di step 3 dengan kod di bawah ini....

<div class='widget-content' style='overflow:auto; height:200px'> 

p/s : yang warna oren tu, korang leh tukar panjang scroll box korang...

Tuesday, March 18, 2014

Cara letak Scroll Bar pada Kotak Komen Blog

hyepp...
jom tengok cara nak buat scrollbar kat kotak komen korang...tutorial ni sesuai laaa kalau korang takmau scroll meleret2 ke bawah..hehe jommm....!



1.  Dashboard --> Template --> Edit HTML

2. Cari kod di bawah ini.. tekan ctrl + F untuk mudahkan pencarian...

 /* Comments

3. Dah jumpa, copy dan pastekan kod di bawah selepas kod  /* Comments .. nanti akan jadi camnie... ( kalau same daaa, abaikan step ni) ... btw, ny untuk simple template... lain template, lain kod i think...but, u can try first..hehe

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #ffffff;

4. OK? sekarang copy n paste kod di bawah selepas  tanda } ... ( refer step 3 ) 

#comments {
height:400px;overflow:auto;
}
5. Preview dulu..kalu xde error, baru Save and tengok hasilnya.... tapi korang kena pilih post korang yang byk komen lah ye.... and view post tu.... 

p/s : warna merah tu untuk tukar saiz scrollbox korang.... 
and leh tukar kod warna pada tulisan warna oren tu.... 

komen lah sikit klo menjadi....thanks yaaa...! 

=)

Tuesday, March 4, 2014

Tutorial tukar Border Blog

nak kan kelainan untuk border blog korang....leh guna tutorial ni...hehe



1.  Dashboard --> Template --> Edit HTML

2. Cari kod di bawah ini.. tekan ctrl + F untuk mudahkan pencarian...

.content-inner {

3. Dah jumpa, pilih salah satu border yang korang nak di SINI dan pastekan kod border tersebut selepas kod .content-inner { ..

4. Preview dulu...dah jadi, baru save eyh.....

p/s : kod warna leh rujuk sini ---> CLICK 

Tutorial Border Blog Melengkung

nak tambah border untuk blog? jom..barulah nampak smart sikit...hehee..ni untuk border yang melengkung punya cam kat bawah ni....

klik untuk extra besar
.

1.  Dashboard --> Template --> Edit HTML

2. Cari kod di bawah ini.. tekan ctrl + F untuk mudahkan pencarian...

.content-inner {

3. Dah jumpa, copy dan pastekan kod di bawah selepas kod .content-inner { ..

border: 2px solid #58D3F7;
-moz-border-radius: 35px;
border-radius: 35px; 

4. Preview dulu...dah jadi, baru save eyh.....

p/s : kod warna leh rujuk sini ---> CLICK

Friday, February 7, 2014

Tutorial Letak Cbox dalam Blog

hye, korang....!! hehe...  memandangkan ramai yang tanya camner nak letak cbox dalam blog, ni haaa..miss b wat tuto ni...sorry ye lambat...

1. Pergi ke Link ni untuk sign up ----> CBOX

( daaa bukak nanti akan kua camnie...haaa, korang fill in the blanks with the details..Then, tekan CREATE MY CBOX!... )


daaaa? sekarang tekan LOOK AND FEEL ----> LAYOUT OPTIONS 

ok, sekarang ubah laaa width and height... ubah laaa pape yang korang nak...Pastu, save...


lagi sekali 

tekan LOOK AND FEEL -----> COLOURS AND FONTS 


cara nak ubah warna tu...korang click dalam box kod warna tu...then, halakan cursorkan pada warna pelangi yang belah kanan tu...nti akan muncul warna yang korang nak pilih.... 

dah siap, jangan lupa pulak tekan APPLY.... 

pastu, cari PUBLISH ( ada kat bahagian atas ) and then click.... 
akan kuar laaa macam pic kat bawah nie... 

lagi sekali, pilih lah korang nak yang camner untuk "variation"... 

now is the time...copy to clipboard and click OK... 


----- IKUT STEP NY PULAK -----

1. Dashboard --> Add a Layout ---> Edit HTML / Javascript

2. Pastekan kod yang korang copy tadi dalam kotak edit html / javascript ..

3. Save dan lihat hasilnya....  

p/s : goodluck...rajin2 laaa tinggalkan link korang...miss b comfom terjah balik...kalau dah letak cbox ni, senang laaa nak tinggalkan jejak...hehe =)

Button Back to Top ( Fast )

Malas nak scroll ke atas balik bila daaa jauh ke bawah?? jom guna button back to top ny...jimat siket masa.... hehe




Step:

1. Dashboard --> Add a Layout ---> Edit HTML / Javascript

2. Copy kod di bawah ni dan pastekan dalam kotak edit html / javascript ..

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

3. Save dan lihat hasilnya....

ehhhhhh....!! mana nak dapat url gambar button?
leh usha link ni...
--------> Freebies Back to Top Button ( Simple One )


Freebies Back to Top Button

_ FREEBIES SIMPLE _
BACK TO TOP 

nak guna? right click and copy image url... 


















Friday, January 24, 2014

Tutorial Link Hover Underline

example 


1. Dashboard --> Template --> Edit HTML

2. Cari kod di bawah..tekan ctrl + F untuk mudahkan pencarian...

a:hover { 

3. Copy kod di bawah dan paste kan di bawah kod a:hover {

border-top: 2px dashed #ff80c0;
border-bottom: 2px dashed #80ffff

4. Save template dan lihat hasilnya .. =)

Kalau korang just nak hover line atas, delete jer line yang kat bawah ny...
border-bottom: 2px dashed #80ffff; 

dan begitu lah sebaliknya kalau nak yang yang bawah jer, delete line yang ny ....
border-top: 2px dashed #ff80c0;
p/s :
oren ---> kod warna
merah ----> ketebalan line

Thursday, January 23, 2014

Tutorial Widget Pengomen Terbanyak (Bergambar)

jum jum... hargai korang punya follower dengan widget pengomen terbanyak ny....



STeP ::

1. Dashboard --> Layout --> Add a gadget --> Javascript/ HTML

2. Copy kod di bawah sehingga habis dan paste kan pada Javascript/ HTML  ..

<style type="text/css">
.top-commenter-line img {
border: 2px solid #ffffff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.top-commenter-line img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;
}

</style>
<script type="text/javascript">

var maxTopCommenters = 7;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = '';
var txtAnonymous = '';
var sizeAvatar = 50;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKVSzHzK0QwCSoZhCudMiCrd5RsHe1v7LYMPL0192RaLsoKF6sPMDCebH8xjOTH2bgn7Rx_AGJLaX2UUHD54bygceJOls3J0yeQQplfwOUG3wYvduVy8TboGsiyO3jQCMF3tl99d68nyM/s1600/ck-avatar.jpg";
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRKVSzHzK0QwCSoZhCudMiCrd5RsHe1v7LYMPL0192RaLsoKF6sPMDCebH8xjOTH2bgn7Rx_AGJLaX2UUHD54bygceJOls3J0yeQQplfwOUG3wYvduVy8TboGsiyO3jQCMF3tl99d68nyM/s1600/ck-avatar.jpg' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';

// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;

var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'"title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();

if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}

for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

//Calculate difference btw the two dates, and convert to days
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;

var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}

// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});

// list top topcommenters:
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
<span id=ck-wkt><a href= http://editblogcomel.blogspot.com/2014/01/tutorial-widget-pengomen-terbanyak.html target=_blank>Grab Me!</a></span>
<style type=text/css>
#ck-wkt {font-family: Arial,Tahoma;font-size:9px;font-style:italic;padding-top:7px;display:block;text-align:right;}
</style> 

3. Save dan lihat hasilnya.... =)

Tuesday, January 21, 2014

Tukar Warna Highlight


jom tukar warna highlight...tak mau asyik warna biru ajerrrr.....boring~


1. Dashboard --> Template --> Edit HTML

2. Cari kod di bawah..tekan ctrl + F untuk mudahkan pencarian...

/* Header

3. Copy kod di bawah dan paste kan di atas kod /* Header 

::-moz-selection {
background:#fcdfFF;
color:#000000;
}
::selection {
background:#fcdfFF;
color:#000000;

note ::::  
leh tukar kod warna untuk
------>  oren -  warna highlight
------>  merah -  warna tulisan

 Source

Giraffe in the Blog??



1. Dashboard --> Layout --> Add a gadget --> Javascript/ HTML

2. copy kod di bawah sehingga habis dan paste kan pada Javascript/ HTML  ..

<script type="text/javascript" src="http://blogparts.giffy.me/0046/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://twi1.me/"><img style="border:0;" src="http://blogparts.giffy.me/0046/logo.gif" alt="面白ツイートグランプリ" /></a></p><p style="text-align:center;font-size:12px;margin:5px 0 0 0;padding:0;"><a href="http://www.hapinemu.net/blogparts/">ブログパーツ ハピネム</a></p>

3. Save dan lihat hasilnya... =)

source and preview 

Flying Bee in the Blog??



1. Dashboard --> Layout --> Add a gadget --> Javascript/ HTML 

2. copy kod di bawah sehingga habis dan paste kan pada Javascript/ HTML  ..

<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp076/bp076.js"></script><p><a href="http://www.hapinemu.net/blogparts/"><img src="http://www.hapinemu.net/fobp/bp076/banner.png" alt="集まれミツバチさんブログパーツ" border="0"></a></p>

3. Save dan lihat hasilnya.... =)

Saturday, January 18, 2014

Cara Link Tab Menu

awas....! ini tutorial bergambar....





nanti akan keluar pages yang korang dah create tadi... 


make sure right click ye sebelum tekan view.... 



yeay...! ada link daaa....



lastly... 

Related Posts Plugin for WordPress, Blogger...