tutorial blogspot

Tutorial Centerkan Header

2012-03-05T21:24:00.000+08:00

Sebelum

Langkah-langkah centerkan header :

1. Sign blog anda.

2. Klik Design/template .

3. Klik Edit HTML >> proceed.

4. Cari kod ini /* Content

5. Copy kod dibawah dan paste sebelum kod /* Content

.Header img {margin-$startSide: auto;margin-$endSide: auto;}

Selepas

6. Save.

Tutorial Title Blog Bergerak (Tanpa Edit HTML)

2012-03-01T00:34:00.000+08:00

Langkah-langkah membuat title blog bergerak :

1. Sign blog anda

2. Klik layout.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

6. Save,

Nota : Gantikan teks warna merah dengan apa sahaja yang anda ingin tampilkan..

Tutorial Letak Icon Sebelah Bloglist

2012-02-25T10:36:00.000+08:00

Langkah-langkah letak icon sebelah bloglist :

1. Sign blog anda

2. Klik layout.

3. Klik pada Bloglist.

4. Buang tanda pada icon..masukkan link blog(jika masih belum ada)

5. Tekan rename..masukkan kod dibawah sebelum rename..

6. Save.

Icon :

http://i1231.photobucket.com/albums/ee512/syamrul88/th_245910c5vhn8ec6y.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_41612xtj8ld0fa9.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_71189gsj9zvs4ge.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic012demoji_15496649decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic011demoji_15889022decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic019demoji_17714269decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic013demoji_416577decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic012demoji_416972decoojp.gif

Selamat Berbloging ^_^..

Tutorial Membuat Header Hover Swinging

2012-02-13T19:28:00.000+08:00

Demo

Langkah membuat header hover swinging :

1. Sign blog anda.

2. Klik template .

3. Klik Edit HTML >> proceed.

4. Cari kod ini .Header h1 { , h1.title { atau /* Header.

5. Copy kod dibawah dan paste sebelum kod .Header h1 { , h1.title { atau /* Header.

#header:hover{

-webkit-transition-duration: 2s;

-moz-transform: rotate(-4deg);

-webkit-transform: rotate(-4deg);

}

Nota : Warna merah adalah masa perjalanan header. Lagi besar number, lagi lama masa bergerak. -4 tu jika nak berputar sikit. jika nak putar banyak, tukar jadi -360...:p

Tutorial Mengubah Scroll Pada Blog

2012-02-12T00:25:00.001+08:00

Langkah-langkah mengubah scroll :

1. Sign blog anda.

2. Klik template .

3. Klik Edit HTML >> proceed.

4. Klik tanda pada kotak “Expand widget template”.

5. Cari kod ini ]]></b:skin>.

6. Copy kod dibawah dan paste sebelum kod ]]></b:skin>.

::-webkit-scrollbar {height:3px;width: 10px;background:#BA55D3;}

::-webkit-scrollbar-thumb {background-color:#FFFFFF;-moz-border-radius: 10px;border-radius: 10px;}

7. Save.

Nota : Teks warna merah adalah kod warna scroll..Untuk dapatkan kod warna klik sini..

Tutorial Memasang Widget Ip Address

2012-02-11T22:41:00.000+08:00

Untuk mengetahui Ip Address yang sekarang kita gunakan, kita boleh memasang widget Ip Address di blog.

Langkah-langkah memasang widget ip address :

1. Sign blog anda

2. Klik layout.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

6.Save.

Tingkatkan Traffic Search Engine Dengan Costum Title Meta Tag

2012-02-08T19:15:00.000+08:00

Default setting yang di buat blogger.com pada title meta tag yang terdapat pada script template anda sebenarnya kurang mesra kepada google search engine. Ini kerana, title meta tag tersebut akan memaparkan nama blog terlebih dahulu dan kemudian di ikuti dengan tajuk entri atau artikel. Di bawah ini adalah contoh title meta tag yang terdapat pada blog anda.

Untuk menjadikan blog anda mesra dengan google search engine, title meta tag terbaik adalah title meta tag yang akan memaparkan tajuk entri atau artikel terlebih dahulu dan di ikuti dengan nama blog. Apa yang perlu anda lakukan adalah menggantikan default title tag kepada title meta tag yang lebih mesra dengan google search engine.

Langkah-langkah mendefault tag kepada costum title meta tag :

1. Sign blog anda.

2. Klik template .

3. Klik Edit HTML >> proceed.

4. Klik tanda pada kotak “Expand widget template”.

5. Cari kod ini <title><data:blog.pagetitle/></title>.

6. Gantikan kod <title><data:blog.pagetitle/></title> dengan kod dibawah ini.

<b:if cond='data:blog.pageType == "item"'>

<b:else/>

</b:if>

7. Save.

Tutorial Membuat Efek Berputar Pada Komen Avatar

2012-02-08T14:44:00.000+08:00

Langkah-langkah membuat efek berputar pada komen :

1. Sign blog anda

2. Klik layout.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

.avatar-image-container img, comments .avatar-image-container img {

-webkit-transition-duration: 0.8s;

-moz-transition-duration: 0.8s;

-o-transition-duration: 0.8s;

transition-duration: 0.8s;

</style>

window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta

var $random = function(x) { return Math.random() * x; };

var availableWidth = 0, availableHeight = 0;

var cssPrefix = false;

switch(Browser.name) {

case "safari":cssPrefix = "webkit";break;

case "chrome":cssPrefix = "webkit";break;

case "firefox":cssPrefix = "moz";break;

case "opera":cssPrefix = "o";break;

}

// The Icons

var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");

// Apply opacity

var zIndex = 1000;

// Randomize each link

icons.each(function(element,index) {

var startDeg =(360);

var resetPlace = function() {

element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");

}

element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);

resetPlace();

element.addEvents({

mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},

mouseleave: resetPlace});

});

</script>

6. Save

Tutorial Membuat Efek Zoom Pada Image Di Post

2012-02-07T21:36:00.000+08:00

Langkah-langkah membuat efek zoom :

1. Sign blog anda.

2. Klik template .

3. Klik Edit HTML >> proceed.

4. Cari kod ini ]]></b:skin>.

5. Copy kod dibawah dan paste sebelum kod ]]></b:skin>.

.post img {

filter:alpha(opacity=60); /* Internet Explorer */

opacity:0.6; /* standard CSS3 */

-o-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

}

.post img:hover {

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transform: scale(1.3);

-o-transform: scale(1.3);

-webkit-transform: scale(1.3);

}

6. Save.

Nota : Anda boleh mengubah saiz efek dengan menukar teks warna merah.

Tutorial Efek Gelembung

2012-02-04T21:44:00.000+08:00

Langkah-langkah membuat efek gelembung :

1. Sign blog anda.

2. Klik Design.

3. Klik Edit HTML.

4. Cari kod ini <body>.

5. Copy kod dibawah dan paste selepas kod <body>.

6. Save..

Warna pink :

Warna merah :

Warna kuning :

Warna hijau :

Warna ungu :

Warna biru :

Warna oren :

Tutorial Hide Widget Follow

2012-02-03T21:05:00.001+08:00

Langkah-langkah hide widget follow :

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

#fl{

position:fixed;

left:0px;

z-index:+1000;

}

* html #fl{position:relative;}

.flcontent{

float:left;

border:2px solid #676767;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiokU1gB8L-6JQ-dwJWzfVVa2af9aCfCjTSvMw9LSeYTC-jYPrN9e82wm2iDpVRMT-N8YoCNnd9CeuE99cXNjMaYNNkXkc9RVO9aINSc3fEI9pQc9wex0TMQwJGSNkvgyGEl03wEQ3ck4/)#000000 repeat-x bottom center scroll;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

function showHideFL(){

var fl = document.getElementById("fl");

var w = fl.offsetWidth;

fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

fl.opened = !fl.opened;

}

function moveFL(x0, xf){

var fl = document.getElementById("fl");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

fl.style.bottom = x.toString() + "px";

if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

}

</script>

Kode Widget Follow Disini

[Close]

</a></div>

<span >By En Hisyam</span></div></a></font>

</div>

var fl = document.getElementById("fl");

fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

</script>

6. Untuk dapatkan kod follow anda.. klik cini.

Nota : Teks warana merah. kod widget follow dan teks warna kuning Url image.

Tutorial Perkataan Ikut Cursor

2012-02-03T09:50:00.000+08:00

Langkah-langkah membuat perkataan ikut cursor

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'JOKERMAN';

color: #A020F0;

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>

;(function(){

var msg = "Perkataan anda di sini";

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>

6. Save

Nota : teks warna biru, kod warna perkataan.klik disini untuk rujuk kod..teks warna merah perkataan yang anda inginkan.

Tutorial Pasang Burung Twitter Terbang

2012-02-02T23:14:00.000+08:00

Langkah-langkah memasang burung twitter terbang :-

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

6. Save

Nota : Tukar teks warna merah dengan username twitter anda.

Tutorial Google Plus, Membuat Akaun,Page Dan Letak Badge Google

2012-02-02T00:57:00.000+08:00

Google akhirnya telah memperkenalkan Google + (Google plus), berubah dari enjin carian terbesar kepada rangkaian sosial. Google +, melancarkan ujian yang terhad kepada pengguna, merupakan kemuncak kepada projek selama setahun yang diketuai oleh Vic Gundotra, naib presiden kanan Google sosial.

Pada dasarnya, Google + adalah satu lagi rangkaian sosial dekat internet. Perkara pertama yang diperkenalkan kepada pengguna adalah “Stream”. Ia sama seperti Facebook News Feed, membolehkan pengguna berkongsi gambar, video, link atau lokasi mereka dengan rakan-rakan.

Google mengaku , sebelum ni Google Buzz tidak berjaya seperti apa yang diharapkan. Bradley Horowitz, naib presiden produk Google, mengatakan bahawa sebahagian daripada masalah itu adalah Buzz hanya tergantung sebagai pautan pada berjuta-juta akaun Gmail, sesuatu yang Google tidak akan mengulanginya lagi. Horowitz juga mengatakan bahawa, tidak seperti pelancaran Buzz, Google + adalah satu projek yang akan dilancarkan secara berperingkat.

Langkah-langkah membuat akaun :-

1. Buka website ini.(jika tidak ada buat akaun gmail dulu)

Page.

1. Klik home

2. Create a Google+ page

3. Pilih kategori dan name page.

Badge Google +

1. Klik home

2. Get started

3. Get the badge

Cara meletakkan kod :

kod dalam kotak biru letak dekat header blog anda iaitu diantara <head> dan </head>

kod dalam kotak merah letak sidebar or dekat mne je yang anda suka.

Tutorial Memasang Butang Share Melayang

2012-02-02T00:16:00.000+08:00

Langkah-langkah memasang butang share melayang :

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

5. Save

Tutorial Memasang Menu Accordion

2012-02-01T00:01:00.000+08:00

shout box

add me

Langkah-langkah memasangnya menu accordion:

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

Letakkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Letakkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Letakkan kod disini.

</div>
</div>

Nota :

Teks warna biru, warna background tajuk, teks warna ungu Url image,teks warna merah tajuk widget dan teks oren kod Html.

Tutorial Efek Love(Hati) Berguguran

2012-01-31T21:12:00.000+08:00

Sekadar hiasan..:p

Langkah-langkah membuat efek love(hati) berguguran:

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

6. Save.

Tutorial Tukar perkataan pada linkwithin

2012-01-31T18:23:00.000+08:00

Memasang widget linkwithin blog merupakan suatu perkara yang baik kerana boleh meningkatkan page view kita.Kebiasaannya perkataan seperti pada widget ini adalah you might also like atau anda mungkin juga meminati.Jika ingin menukar kepada perkataan lain berikut adalah caranya:

Letakkan kod berikut bersama kod linkwithin

Contoh :-

Tutorial Pasang Cursor Bintang Berguguran

2012-01-31T15:33:00.000+08:00

Langkah-langkah memasang cursor bintang berguguran.

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

Bintang warna hitam

Bintang warna hijau

Bintang warna merah

Bintang warna puteh

Bintang warna kuning

Bintang warna ungu

Bintang warna pink

Bintang warna oren

6. Save

Mengenali DoFollow dan NoFollow Dengan google Chrome Extension(Pengguna Google Chrome)

2012-01-30T01:44:00.000+08:00

Disini saya hendak shared extension goggle chrome untuk mengenali blog tersebut mempunyai fungsi DoFollow ataupun NoFollow. penerangan ini hanya tertumpu pada link sahaja.

Download Google Chrome extension di bawah :

1. Nofollow Spotter

2. Nofollow Simple

3. Nofollow Eyes

Lepas install extension, bila bukak apa-apa je website atau blog, links yang nofollow akan di highlightkan.Seperti dalam gambar di atas..

Tutorial Mengurangkan Ruang Kosong Dibawah Kotak Komen

2012-01-30T00:22:00.000+08:00

Kebiasaannya pada bahagian bawah kotak komen blogger meninggalkan ruangan kosong yang agak luas .Jika anda ingin merapatkan sedikit jaraknya ikutilah langkah dibawah ini:

Langkah-langkah mengurangkan ruang kosong dibawah kotak komen :-

1. Sign blog anda.

2. Klik Design.

3. Klik Edit HTML.

4.Klik tanda pada kotak “Expand widget template”.

5. Cari kod dibawah, tukarkan angka yang berwarna merah..

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>,m,ndsb

<b:else/>

<data:blogTeamBlogMessage/>

Angka yang saya warnakan diatas ialah 410.Untuk merapatkan anda boleh cuba ubah jarak ke 250 atau ukuran lain yang disukai.

Cara Mengetahui Jumlah Pengunjung Blog

2012-01-28T23:02:00.000+08:00

Bagi yang mempunyai blog atau website tentunya ingin mengetahui jumah pengunjung yang sedang online. Ada beberapa tools tambahan (widget) yang boleh kita gunakan.

Berikut adalah beberapa website yang menyediakan widget khusus untuk memaparkan jumlah “user online” dengan berbagai bentuk yang menarik .

1. whos.amung.us

Kelebihan bagi whos.amung.us adalah paparan pengunjung yang online secara real time dan juga dapat melihat apakah artikel yang sedang dilihat pengunjung serta negara asal web kita.Tidak memerlukan pendaftaran cuma salin kod yang disediakan pada blog atau web kita.

2. radarurl.com

RadarUrl lebih kurang sama dengan whos.among.us, setara dengan whos. among. us .Cubalah dengan mendaftar di radarurl.com kemudian copy dan paste code html yang ada di halaman depan tersebut.

Tutorial Efek Salji

2012-01-28T14:19:00.000+08:00

Langkah-langkah membuat efek salji :-

1. Sign blog anda

2. Klik Design.

3. Klik Add a Gadget.

4. Klik HTML / Javascript.

5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

6. Save.

Tutorial Menambah Emoticons Di Cbox

2012-01-28T09:02:00.000+08:00

Untuk para blogger yang menggunakan cbox anda boleh menambahkan emoticons cbox anda dengan emoticons yang lain dan tentunya akan membuat cbox anda menjadi lebih menarik lagi.Bagi anda yang ingin menambah emoticons di cbox ikuti langkah-langkah dibawah.

Langkah-langkah memasang emoticons di cbox :-

1. Sign cbox.

2. Klik options >> smilies

3. Delete terlebih dahulu emoticons yg hendak ditukar

4. Gantikan url icon sesuai dengan kod, untuk dapatkan url,klik kanan di image dan copy image url.

5. Selesai, save dan lihat hasilnya..Klik sini or ni untuk dapatkan emoticons

Cara Letak Gambar Di Sebelah Tajuk Entry

2012-01-23T22:11:00.000+08:00

Langkah-langkah letak gambar di sebelah tajuk entry:

1. Sign blog anda.

2. Klik Design.

3. Klik Edit HTML.

4. Klik tanda pada kotak “Expand widget template”.

5. Cari kod ini <a expr:href='data:post.url'><data:post.title/></a>.

6. Copy kod dibawah ini, paste antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>.

Nota:

Ø Tukarkan teks merah dengan url gambar yang anda kehendaki

Ø Saiz gambar yang biasa digunakan adalah dalam lingkungan 20x20 hingga 30x30.

tutorial blogspot

Tutorial Centerkan Header

Tutorial Title Blog Bergerak (Tanpa Edit HTML)

Tutorial Letak Icon Sebelah Bloglist

Tutorial Membuat Header Hover Swinging

Tutorial Mengubah Scroll Pada Blog

Tutorial Memasang Widget Ip Address

Tingkatkan Traffic Search Engine Dengan Costum Title Meta Tag

Tutorial Membuat Efek Berputar Pada Komen Avatar

Tutorial Membuat Efek Zoom Pada Image Di Post

Tutorial Efek Gelembung

Tutorial Hide Widget Follow

Tutorial Perkataan Ikut Cursor

Tutorial Pasang Burung Twitter Terbang

Tutorial Google Plus, Membuat Akaun,Page Dan Letak Badge Google

Tutorial Memasang Butang Share Melayang

Tutorial Memasang Menu Accordion

PaGe

shout box

add me

Tutorial Efek Love(Hati) Berguguran

Tutorial Tukar perkataan pada linkwithin

Tutorial Pasang Cursor Bintang Berguguran

Mengenali DoFollow dan NoFollow Dengan google Chrome Extension(Pengguna Google Chrome)

Tutorial Mengurangkan Ruang Kosong Dibawah Kotak Komen

Cara Mengetahui Jumlah Pengunjung Blog

Tutorial Efek Salji

Tutorial Menambah Emoticons Di Cbox

Cara Letak Gambar Di Sebelah Tajuk Entry