D.O.T.S by nasrul: December 2012

Letak CCTV (Denim,Simple Template,classic & Blogskins)

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

korang nak sesuatu yang macam kat atas tu?..haha,kali ni kita memang akan belajar tutorial ni :D

kali ni rasenye complete :D denim ade,simple,classic,blogskin pon ada! :D

macam menjual barang pulo..jomlah kita belajar! :D

for Denim/Simple template :

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

2.copy code dibawah ini dan pastekan di dalam kotak HTML/Javascript tersebut:

<a style="display:scroll;position:fixed;top:0px;right:0px;" ><img style="border:none;" src="http://1.bp.blogspot.com/-jyICA3F7eOo/TbBE4YBgbpI/AAAAAAAAAEM/XU9sJQnzGvU/s1600/cctv.gif" /></a>

merah:korank semua boleh tukar sama ada right/left.

save!

jangan letak title pada kotak HTML korang tu ye :)

for Classic Template :

first pergi ke Dashboard -> Template -> Edit HTML.

2.Ctrl+f dan cari code di bawah:

<html>

<a style="display:scroll;position:fixed;top:0px;right:0px;" ><img style="border:none;" src="http://1.bp.blogspot.com/-jyICA3F7eOo/TbBE4YBgbpI/AAAAAAAAAEM/XU9sJQnzGvU/s1600/cctv.gif" /></a>

Biru:korang boleh tukarkan sama ada right/left kedudukan CCTV tu.

preview!.kalau dah yakin..save teros pon tak pek~ :D

jangan letak title pada kotak HTML korang tu ye :)

for blogskins User:

1.korang cari je code kat bawah ni menggunakan Ctrl+f:

<head>

dah jumpa?.terus copy code di bawah dan pastekan di bawah code <head>

yang di search tadi :D:

<div style="position: fixed; top: 0px; right: 0px;"><center><img src="http://1.bp.blogspot.com/-jyICA3F7eOo/TbBE4YBgbpI/AAAAAAAAAEM/XU9sJQnzGvU/s1600/cctv.gif"/></center></div>

Oren:korang tukarkan je antara right/left.

dah selesai "copypaste" ? ..preview dulu dan terus save :D

senang je kan tutorial kite kali ni? :D ..harap bergunalah untuk korang

jumpe di tutorial lain korang2 semua :)

Automatic new tab

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

huhehuhe~cube tengok si troll face kat atas tu..:P

saya ni memang peminat troll face :D..jadi bagi pendapat korang..

betul ke ape yang troll face tu cakap?blog pompuan penuh widget.

blog lelaki siket widget .huhehuhe..bagi saya ade yang betul ade yang salah :)

ape2 pon jom lah kite mulakan tutorial kita hari ni.."Automatic New Tab"

haha..kebanyakan orang sukakan tutorial ni sebab link akan di buka di page

yang lain,jadi page yang korang tengok tu tak terganggu lah~:D

macam tu lah ceritenye :)..mailah buat ramai2

untuk Denim template/Simple Template:

*Dashboard-->Layout-->Add a gadget-->HTML/Javascript

*copy dan pastekan code dibawah ini didalam kotak HTML code tadi:

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

var arr = document.getElementsByTagName("a"); //get all links in the page

for(var i = 0; i < arr.length; i++)

{

if(arr[i].href.indexOf("Your URL") < 0 //not links that are 'inside' blog

&& arr[i].href.indexOf("javascript:") < 0) //not javascript links

arr[i].target = "_blank";

}

</script>

dah "copypaste?".kalau dah selesai..silekanlah "save" :D

untuk Blogskins/Classic Template:

*Dashboard-->Template-->Edit HTML

push keyboard button "Ctrl+f" dan mulakan pencarian code dibawah:

<head>

selesai cari?..terus copy code kat bawah ni dibawah/selepas code <head> tadi:

<base target='_blank'/>

dah?..apa lagi.terus save..:D..mesti berjaya! :P.

kalau still tak faham silakan comment dan bertanye.jangan diam ajew:D

okelah..setakat itu jae untuk kali ini ye :D..papai~ :)

jom terjah tutorial lain :D

Moving Word follow your cursor

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

kali ni saya nak buatkan tutorial moving word follow your cursor :D

dulu saya pernah pakai gadget ni..tapi waktu tu blog saya masih daif..hikhok :P

jadi ape2 pon..jomlah kite ikut tutorial kite kali ni

hopefully menjadi lah ye :)..

senang aje sebenornye..ape yang korang perlu buat hanyalah :

Dashboard > Layout > Add a gadget > Html/Javascript.

lepas tu copy paste je code kat bawah ni ke dalam kotak HTML code tadi tu:

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'jenis font korang';
color: warne text korank;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "text korang";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

ok..sekarang ni korang just adjustkan text yang aku tukarkan warne, :D

oren:jenis font korang

biru:warne text korang

merah:text korang.

ape lagi~save je lah..then korang akan dapatlah hasilnye :D

terjahlah tutoril laen k??..bhai~~!!

Disable Dragging Images

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

kali ni tutorial kita boleh dikatakan senanglah juge :D

cuma disablekan tarik menarik gambar je..tarik menarik?

dragginglah tu.hehehe..untuk mengelakkan saya ni kalut kat sini

jom kita belajar cepat2.ikut step di bawah:

Dashboard-->Template-->Edit HTML

tekan Ctrl+f dan mula untuk mencari code ini: <head>

sekarang ni korank copy je code kat bawah ni dan pastekan di bawah code <head>

<script type='text/javascript'>

document.ondragstart = function () { return false; }; </script>

<SCRIPT TYPE='text/javascript'>



</SCRIPT>

easy right??lepas tu terus save :D..pergi blog korang dan try lah drag gambar,

sure dah tak boleh..kalau ade masalah tanye :D,mungkin saya

boleh tolong ye..goodluck!

Hide Spoiler button

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

oke3..nampak tak button kat atas ni?..cube click2 siket :D

keluar sesuatukan??hohohoh..nilah namenye button Hide Spoiler.

hide spoiler ni korang semua boleh letakkan di mane2 saje

yang korang nak :)..selalunya orang akan buat button hide spoiler ni sebagai credit section.

tujuan orang guna button hide spoiler ni ialah untuk

menjimatkan ruang sidebar dan juga untuk membuatkan blog sidebar korang tu nampak kemas :)

dah tak sabar nak tahu cara2 untuk letak button ni

dalam blog??..jom ikut step by step :D

Dashboard-->Add a gadget-->Html/Javascript

paste code kat bawah ni dalam kotak HTML korang.

<center><div id="spoiler"><div><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" value="YOUR TITLE" style="width:200px;font-size:12px;background-image:url(URL BACKGROUND);-moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px;margin:10px;padding:0px;border-style: 2px solid #000000;" type="button" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:98%">
tulis apa yang korang nak
<div id="hide"></div>

biru:tukarkan dengan title/nama kepada button show and hide spoiler korang.

ungu:letakkan URL gambar/background korang.

merah:tulis ape yang korang nak ianya ada dalam button tu.

dah~selesai..senang je kan?? :D,jadi sekarang ni blog korang

akan nampak lebih kemas dan teraturlah sikit :D

goodluck..hope berjaye..bhai!!

Body Blog Melengkung

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

hari ni saya rajin nak kongsikan tutorial untuk buat

Body Blog Melengkung :D ,tutorial ni memang senang

sesangat :D ..nak tahu macam mana senang tu?

ikut je step by step bawah ni :

Dashboard-->Template-->Edit HTML-->Ctrl+f dan cari code ni:

#content-wrapper {

kemudian,korank "copypaste" je code kat bawah ni:

border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;

pastekan code kat atas ni dibawah anak2 code "#content-wrapper {" tadi.

dah..selesai :D..semoge berjaya!!..terjahlah tutorials yang lain k? :)

Unclickable Header

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

kali ni saya nak buat tutorial unclickable header :)

kebanyakan orang2 ni sukekan header yang transparent ye :D

jadi jomlah pollow tuto kali ni :D

first sekali korang perlu buat ikut gambar kat bawah ni:

*attentions*
"placement" tu korang tick yang "Behind title and discription".
yang lain2 tu hiraukan je..oke? :D
kemudiannya ikut langkah2 ni:
Dashboard > Template > Edit HTML > Ctrl+f dan cari code dibawah:

<Variable name="headerTextColor"

codenye yang lengkap korang akan jumpa macam ni kan?

<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#333333" value="#333333">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="#ffffff" value="#ffffff">

sekarang ni senang aje..ape yang k0rang perlu buat hanyelah gantikan
code di atas ni dengan code yang saya sediakan ni :) :

<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="transparent" value="transparent">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="transparent" value="transparent">

lepas tu ape lagi..?.preview lah!,kalau menjadi tu terus tekan save!
kalau ade masalah silelah tanye..saye tak gigit orang pon :D
jangan segan silu ye..goodluck!.semoge tutorial ni bejaye kat
template korang itu ye :D
bubbye!~

Disable right click with alert!!

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

hello my readers :)..this time i'm gonna teach chu

how to disable right click with alert!!

woah*speaking pulok kan :P*nyahaha

right click ni banyak kegunaan nyee :D..

jadi yang tahu kelebihannye tu mai la follow tutorials ni :)

all that you should do is just :

letakkan code dibawah ini didalam kotak HTML/Javascript.

<script>
var message="yo!..i hate chu! miss/mr. Anon!!..dont chu ebbah be my stranger!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

haha..dah selesai ke??ape yang korang kene/bloeh

tukar sekarang ni hanyalah tukarkan yang ini:

merah:tukarkan dengan ayat2 cinta korang sendiri.

dah2...selesai pon kerje korang kan?!..

jumpe di tutorial seterusnyee..goodluck!!

Freebies:doodles muslimah

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

salam to you all :)

hahha..kali ni saya cuma nak bagi sedikit freebies :)

sedikit tu ialah 3 doodles sahaja..

tapi walaupon sedikit ,,hopefully dapat membantu engkau

orang yang diluar sane tu yee :)

korang semua boleh letak kat mane2 sahaje

doodles ni :)..soo..ambillah yee korang semua :)

tapi saya syorkan korang letak kat header korang :)

baru chun! :chunlah sangat kan? :/

ni handmade saye taw!..so kalau nak repost

please get my permission first yee..~

jangan sesuke hati *copypaste* :D

ty to my friends iaitu ena :)

sebab setuju untuk aku buat doodles ni :D

dahlah..jom pick doodles :)

first:

http://i1243.photobucket.com/albums/gg555/naszas1/com_zps7862e522.png

http://i1243.photobucket.com/albums/gg555/naszas1/h-2_zps935e52cc.png

http://i1243.photobucket.com/albums/gg555/naszas1/yrup_zpsc704be34.png

okeh :) dah selesai :D,kalau rase berminat bolehlah amik

tak pakse,tak ugut :P..harap saya membantu anda :)

ok lah..followlah freebies yang lain ye :D

Disable Right click without message

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

tutorial kita kali ni memang sesuatu yang penting~ :D

bagi saya pentinglah :)

bagi korang ? *_*

tak tahulah..hehehheh..okelah.! untuk mengelakkan

saya merepek lagi kat sini ..jomlah kita

mulekan tutorial ni ye :)

ape yang korang kene buat hanyalah:

dashboard > layout > add a gadget > HTML/javascript

copypaste code dibawah didalam ruangan
HTML/javascript korang tu

<script language=javascript>

</script>

dah..sangat2lah senang kan?!..

sekarang ni cik Anon susahlah nak

terjah pagesource korang tu :)..goodluck!!

Types of borders

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

tutorial kita untuk hari ni ialah jenis-jenis border.
sangat simple je bunyinye

tapi ianya sangat2lah membantu untuk

menchantek kan lagi blog korank tu :)

jadi jomlah terjah jenis2 border ni:

types of border : solid

types of border : dotted

types of border : dashed

types of border : double

types of border : groove

types of border : inset

types of border : outset

types of border : ridge

itulah jenis2 border yang ada setakat ini ye :)
tapi bagi saya yang terbaik hanyalah tiga saje daripada
yang laen2 tu iaitu:

border : solid,dashed,dotted yang paling ramai/

kerap orang gunakan :D

jadi saya recommend yang tiga ni saje lah :)

okelah..harap boleh dimanfaatkan ye :)

chaw!~

Scroll bar at Blog Archive

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

hari ni kita akan belajar cara untuk kemaskan lagi blog archive

yang ada dekat blog korang tu :)

selalunya blog archive akan memanjang ke bawah

dan memang nampak sangat tak kemas :/

jadi jom lah kita same2 kemaskannye dengan menambah

"scroll bar" padanyee..jom pollow tutorial ni :

Dashboard-->Template-->Edit HTML-->Tick expand widget template

dah selesai Tick expand widget template korang tu,

korang terus tekan Ctrl+F serentak untuk memudahkan

pencarian code.,

copy paste code dibawah didalam kotak Ctrl+F tadi

<div id='ArchiveList'>

jumpe dah?..tapi saya nak ingatkan,kalau tak jumpa maksudnya

korang belum add gadget Blog Archive dekat blog

korang lagi..so kalau belum tu pergi buat dulu kalau tak,korang

memang tak akan jumpa..oke berbalik kepada topic kite.

kepada yang dah jumpe code tadi tu,

korang akan jumpa code ini sebelumnya :

<div class='widget-content'>

baeklah~sekarang ni korang cuma perlu gantikan

code <div class='widget-content'> kepada code

dibawah ini :

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

Biru:tinggi scroll box Blog Archive korang.

dah gantikan code tadi tu?cuba preview dulu

kalau jadi bagoslah :D terus save.

kalau tak jadi mesti korang ade silap kat mana2 tu,

kalau tak paham commentlah :)

okelah.semoge berjaye.!!

Basic Cbox

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

murid!murid!.hari ni kita akan mulakan pelajaran kite tentang Basic Cbox

kepade sesiape yang belum ada Cbox
dekat blog tu bolehlah ikut tutorial ni ye :D

jangan malu2,jangan segan2 :)

basic cbox macam yang kat atas tu lah..
tapi nanti korang bolehlah pilih warna yang korang suka :)
jom kite mulakan tutorial BERGAMBAR kita :

first sekali korang cuma perlu ke sini
seterusnya sila ikut gambar ye :)

dah sign up/sign in?.terus pergi ke menu tab Look & Feel dan

pilih "style presents"

ok..kemudian korang pilihlah apa jenis style yang

korang semua nak pon..kalau tak berkenan pergi menu tab

Look & Feel dan pilih "colours & fonts"

dekat "colours & fonts" macam gambar kat atas ni

korang bolehlah adjust ikut citerasa warna yang

korang suka :)

dah selesai adjust warna?pergi menu tab

Look & Feel lagi dan pilih "layout options"

korang boleh adjust lebar ikut keluasan sidebar korang.

tinggi tu terpulanglah kat korang :D

lepas habis adjust lebar & tinggi..pergi menu tab dan pilih "publish"

rujuk gambar di bawah ni :)

lepas copy tu letaklah dekat sidebar yee :)

faham dah?..haha..kan senang je tu :)

okelah.hopefully korang fahamlah..

kalau tak faham tu comment,,insyaallah saya akan tolong :)

sampai disini sahaja.jumpa di tutorial lain :)

paapaai~

Fanpages/like box with border,background and shadow (my own code)

salam and hello to my cutie stranger ! :D ..enjoy traveling my super dupper simple blog..have a joy!!

oke..hari ni saya nak kongsikan cara untuk mencantikkan lagi

fanpages/like box engkau orang tu :D

macam apa yang korang dapat tengok dekat atas tu :D

chantek tak??..haha! kalau rasa cantik bolehlah

pollow tutorial ni ye :) ..kalau tak berminat gi maen jaoh2 :P

untuk tutorial asas buat likebox korang boleh click tuto. yang ini

okey sekarang ni korang kene rujuk basic Likebox

korang punya code.korang perlu kecilkan ketinggian nya.
jom ikut tutorial bergambar ye :)

jom mulekan~

click untuk lebih jelas

copy paste code ni diantara code yang dijelaskan diatas

background:url(url background);border:1px dashed #A9F5F2;-webkit-border-radius: 7px;
-moz-border-radius: 10px;
border-radius: 10px;-moz-box-shadow: 0px 0px 10px #000000; -webkit-box-shadow: 0px 0px 8px #000000;

oren:code html color boleh dapatkan di sini.
kuning:lengkung border tu korang boleh tambah seberapa
banyak yang korang nak .oke?
merah:url background korang.
biru:boleh tukar kepada dotted,solid & double.
ungu:boleh ubah,makin bertambah..makin tebal shadow.

hahah..faham tak? :) ..kalau faham commentlah,
kalau jadi pun commentlah yee,
kalau tak jadi pon comment~ jadi saya bolehlah tolong :)
okelah.itu aje untuk kali ni..jumpe di tutorial yang lain yee :D

D.O.T.S by nasrul

Letak CCTV (Denim,Simple Template,classic & Blogskins)

Automatic new tab

Moving Word follow your cursor

Disable Dragging Images

Hide Spoiler button

Body Blog Melengkung

Unclickable Header

Disable right click with alert!!

Freebies:doodles muslimah

Disable Right click without message

Types of borders

Scroll bar at Blog Archive

Basic Cbox

Fanpages/like box with border,background and shadow (my own code)

the mastermind

open your mouth

my fanpages :D

ask.fm for you :)

the last time

coming tuto. & freebies

click if you're kind