Teknik Buat Blog|Tutorial danTips Blog|Tutorial Blog Bahasa Melayu|

Cara guna HTML editor terbaru blogger

noreply@blogger.com (Fokus Impian) — Sat, 27 Apr 2013 13:37:00 +0000

HTML editor adalah tempat dimana kita boleh mengubahsuai template mengikut citarasa sendiri.Blogger telah mengeluarkan HTML editor terbaru.Sebelum ini anda perlu tandakan Expand widget template jika hendak memaparkan keseluruhan kod yang ada pada template.Berbeza dengan yang baru kita boleh memilih untuk terus ke widget widget tertentu pada template.Jika sebelum ini anda menggunakan fungsi search (Ctrl+F) pada browser (contohnya seperti Mozilla Firefox) untuk mencari kod pada template,pada HTML editor terbaru ini kod tidak akan dijumpai jika menggunakan Ctrl+F pada browser.

Untuk mencari kod pada HTML editor terbaru ikutilah langkah berikut ini

Klik dimana mana bahagian didalam HTML editor dan tekan butang Ctrl + F pada keyboard.Ruangan search akan dipaparkan pada bahagian atas ruangan HTML editor.

Taipkan teks yang hendak dicari pada ruangan search dan tekan butang enter.Teks yang dijumpai akan dihighlightkan.Bagaimana pun sesetengah browser tidak boleh digunakan untuk mencari teks pada editor baru ini.Saya menggunakan Mozilla Firefox dan ia berfungsi.Editor lama rasanya lebih senang digunakan dan sesuai untuk kebanyakan browser .

Cara pasang widget Live Traffic

noreply@blogger.com (Fokus Impian) — Fri, 22 Feb 2013 04:54:00 +0000

Widget live traffic memboleh anda mengetahui dari mana datangnya pengunjung sebaik saja mengunjungi blog anda.Jika anda ingin memasangnya.ikutilah langkah dibawah ini.

1.Masuk ke web feedjit.com
2.Klik pada choose your Feedjit

3.Pilih feedjit completely free dan klik pada sign up

4.Bahagian ini anda boleh mengubah saiz widget,background,jenis teks,border dan button

Pada bahagian bawah kita boleh memilih untuk memasang widget ini pada blogger blog,wordpress dan sebagainya. Kemudian klik pada go

5.Kemudian muncul instruction for installing on blogger

Klik pada butang click to open a new window and install on blogger.

6.Muncul Add Page element...Klik pada add widget

7.Live traffic telah siap dipasang pada blog anda

Cara pasang artikel terkait linkwithin

noreply@blogger.com (Fokus Impian) — Sun, 30 Dec 2012 02:21:00 +0000

Widget ini akan memaparkan secara rawak artikel yang berada didalam blog anda.Pemasangan nya adalah baik kerana akan meningkat pageview bagi blog anda.Ia akan meningkatkan populariti blog yang memasangnya kerana kemungkinan pengunjung akan klik artikel lain yang terpapar pada widget ini.

Cara memasangnya.
1.Masuk ke web linkwithin.com
2.Disebelah kanan akan terpapar satu form seperti dibawah ini

   Isikan maklumat berikut:
   Email:masukkan alamat email anda
   Bloglink:alamat blog anda yang bermula dengan http://
   Platform:pilih blogger
   Width: pilih bilangan artikel yang hendak dipaparkan.
Tick pada My blog has light text on a dark background jika blog anda mempunyai latarbelakang gelap dengan tulisan cerah.
Kemudian pilih get widget

3.Klik pada install widget

4.Pada page element pilih blog yang ingin dipaparkan linkwithin jika anda mempunyai lebih dari satu
blog.Kemudian klik pada add widget

Masuk semula keblog anda widget tersebut akan terpapar.Kedudukan dibawah posting adalah yang terbaik.Jika berada ditempat lain anda boleh pindahkannya.

Cara memindahkannya:
Kemudian masuk pada dashboard blog anda
Pilih layout dan kedudukan linkwithin akan terpapar.Anda Cuma perlu seret dan ubah kebawah ruangan catatan blog.

Cara buat borang tempahan

noreply@blogger.com (Fokus Impian) — Tue, 30 Oct 2012 05:42:00 +0000

Dunia perniagaan secara online berkembang pesat,mempunyai satu laman web atau blog perniagaan adalah perlu bagi peniaga memperkenalkan jualan masing masing.Borang tempahan adalah suatu kemestian bagi sesuatu blog atau web perniagaan bagi membolehkan pelanggan memesan sesuatu barangan.Untuk tutorial kali ini saya akan tunjukan cara membuat borang tempahan yang membolehkan pelanggan memesan barangan dari laman blog perniagaan anda.

Terdapat banyak laman web yang menyediakan borang tempahan secara online.Salah satunya adalah laman web response-o-matic.com.

Langkah bagimembuatnya:
1.Masuk ke web response-o-matic.com
2.Klik pada get started….

3.Isikan form signup yang muncul,isikan ruangan nama,email dan password dan klik sign up, paparan untuk sign in akan muncul jika anda telah berjaya mencipta akaun dengan response o matic.

4.Buka email anda untuk pengesahan pendaftaran, masukkan email dan password tadiuntuk log in

5.Selepas pengesahan email anda akan dibawa kepaparan bagimencipta form.Terdapat ruangan nama dan email(boleh dipinda dengan mengklik pada edit),klik pada add question untuk menambah butiran yang diperlukan pada form,bila dah siap klik pada continue.

6.Kemudian muncul option untuk form yang akan anda buat.Yang bertanda upgrade adalah option yang perlu anda bayar jika hendak menggunakannya.Pada bahagian ini masukkan butiran pada email & sms

notifications supaya bila ada tempahan anda akan menerima email,kemudian klik continue.

7.Paparan kod html akan muncul,salin kesemua kod ini.

8.Log in ke blog anda

9.Klik pada pages dan pilih new page….blank page

10.Masuk kan nama pages sebagai borang tempahan.klik tab HTML dan pastekan kod yang disalin tadi pada ruangan tersebut(bukan pada mode compose).Kemudian klik pada publish.

Pada pages akan keluar senarai page yang telah dibuat tadi

Tentunya bagi laman web atau blog perniagaan anda perlu membuat pages(halaman) seperti senarai produk,borang tempahan,hubungi saya dsb.Anda perlu buat langkah bermula pada langkah ke 9 untuk membuat halaman(page) yang berasingan.Pada pages terdapat tiga pilihan iaitu:

Top tabs ----tab navigasi berada diatas
Side links ----tab navigasi akan berada ditepi blog
Don’t show---jika anda ingin membuat link dengan butang link tersendiri.Anda perlu buka page dan ambil link yang terpapar pada ruangan search dibrowser.

Sebelum ini juga ada posting tentang membuat pages dan anda boleh rujuk disini.

Selamat mencuba …:)

klik butang +1 jika suka artikel ini :) :)

Membuat facebook page dan like box

noreply@blogger.com (Fokus Impian) — Sat, 25 Aug 2012 04:57:00 +0000

Facebook like page adalah satu jaringan sosial yang penting bagi meningkatkan populariti sesuatu blog atau web site.Pemasangan facebook like box pada blog akan membolehkan pengunjung mengklik like jika suka dengan blog anda

Cara membuat facebook page

1.Log in dahulu ke facebook anda

2.Pada senarai menu sebelah kiri terdapat pages----create a page

atau boleh juga masuk ke http://www.facebook.com /pages/create.php

3.Kemudian pilih brand or product

4.Pilih website dari senarai option dan namakan page yang anda
inginkan pada brand or product name,

5.Tandakan pada I agree with facebook page terms dan klik pada get started

6.Kemudian anda akan dibawa ke paparan setup page anda

7.Pada profile picture anda boleh masukkan imej untuk page anda

8.Kemudian pada about masukkan keterangan berkenaan page anda

(Boleh juga skip pada bahagian ini kerana anda boleh memasukkan
kemudian pada page anda)

9.Kemudian dapatkan dan salin url page anda pada ruangan url dibrowser.

Langkah seterusnya:

Cara membuat like box
Masuk ke halaman berikut http://developers.facebook.com/docs/reference/plugins/like-box/

Setting pada Facebook Like Box:
- Facebook Page url: Masukkan url page anda disini
- Width: Lebar like box
- Color scheme: pilihan warna terang atau gelap
- Show Faces: Jika anda ingin menampilkan imej profail bagi facebook
- Border color: Masukkan kod warna jika ingin meletak border atau kosongkan untuk transparent.
- Show stream: Jika ingin memaparkan posting terakhir anda.
- Show header: akan memaparkan tulisan header "Find Us on Facebook".
Preview akan terpapar di sebelah kanan form setelah disikan.
Klik pada get code (salin kod likebox anda disini)

Paparan kod akan keluar terdapat kod dalam kategori HTML5,XFBML,
IFRAME dan URL .
Salin kod pada IFRAME

Memasukkan widget pada blog

Kemudian masuk kedashboard blog anda:
Bagi dashboard baru:
Pilih Layout….Add a gadget

..HTML/Javascript

bagi dashboard lama:
Pilih design…page elements…add a gadget
Dan masukkan kod facebook like anda disini dan klik save

update 8/5/2013

Cara membuat cursor sendiri

noreply@blogger.com (Fokus Impian) — Sun, 15 Jul 2012 06:18:00 +0000

Sesetengah blog yang anda lawati mempunyai kursor yang unik dan menarik. Ada yang membuat kursor dengan tulisan nama sendiri dan ada yang meletakkan gambar sebagai kursor.Mungkin anda ingin membuatnya ,jadi tutorial ini akan menerangkan cara cara untuk membuat kursor anda sendiri.

Untuk tutorial ini saya menggunakan perisian AdobePhotoshop CS5.
1.Pada menu file pilih new dan masukkan setting seperti berikut

Width 80pixels,height 45 pixels,resolution 75pixels dan background content transparent
Klik ok setelah memasukkannya.

2.Kemudian kita akan masukkan anak panah untuk kursor ini,pada toolbar pilih rectangle tool (ikon kotakdisebelah bawah ikon panah)dan ambil custom shape dari senarai yang terpapar

3.Gunakan move tool dantandakan(tick)pada show transform control untuk memutarkan anak panah .Kotak yang muncul membolehkan anda membesar,memutar dan mengubah kedudukan.

4.pilih text tool ,jenis tulisan,warna dan taipkan teks yang anda inginkan

5.Simpan kursor yang telah dihasilkan

Ambil menu file pilih save as masukkan nama fail pada file name dan pilih format png (boleh juga format gif) pada format dan klik save.

Ok dah siap pun cursor text anda.

Cara nak letak gambar sebagai kursor

1.Anda perlu sediakan imej yang hendak diletakkan sebagai kursor.Jika imej besar perlulah dipotong terlebih dahulu

memotong imej dengan photoshop:

2.Masukkan imej>>klik open>>pilih imej yang diperlukan
Pilih crop tool,kemudianklik an seretkekotakpadabahagian yang hendakdipotong.Tekan enter

3. Jika sudah berpuashati.Simpan imej anda dengan format jpeg.

4.Seterusnya ikut pada langkah 2 diatas(memasukkan anak panah)
masukkan imej yang telah anda crop..

5.File pilih>> open dan browse imej tadi.Gunakan move tool,klik dan seret ke sebelah kursor yang telah dibuat

Untuk ubah saiz pastikan show transform controls diaktifkan.kemudian save imej dalam format png atau gif.

Cara meletakkan cursor pada blog

Imej yang telah siap perlu diupload pada web site yang menyediakan kemudahan upload imej seperti imageshack atau tinypic bagi mendapatkan dapatkan url untuk imej.Setelah selesai upload dan dapatkan url tadi.

Kemudian masuk ke design>>template>edit html

cari kod </head>

dan letakkan kod seperti dibawah sebelum kod </head>:

Masukkan url imej yang anda upload dan gantikan pada bahagian teks berwarna oren.

Kemudian save.

Cara pasang flash banner pada blog.

noreply@blogger.com (Fokus Impian) — Wed, 06 Jun 2012 01:27:00 +0000

Mungkin anda ingin memasang banner flash pada blog anda.banner flash ini lebih menarik dipasang jika ingin mengiklan sesuatu pada blog kerana ia berbentuk animasi.Flash banner ini telah digunakan secara meluas pada web site ketika ini.

Berikut adalah cara bagi memasang flash banner pada blog anda:

Mula mula anda perlu sediakan fail flash terlebih dahulu.fail ini boleh kita buat dengan menggunakan web site yang menyediakan khidmat membuat free banner maker secara online.

Sesudah banner disiapkan anda perlu mengupload banner tersebut.Anda boleh mengupload banner ini pada mana mana web hosting dan dapatkan url flash banner untuk diletakkan pada blog.Anda juga boleh gunakan googlesite.

Langkah bagi mengupload file
1.Anda perlu membuat akaun di https://sites.google.com/
2.Log in menggunakan akaun blog,pada dashboard klik pada create.
3.Pada name your site,letakkan nama site anda dan masuk kod verification dibawahnya
4.Kemudianpada dashboard klik ikon new page diatasnya,pada new page letakkan nama
page anda dan klik create.
Sesudah Berjaya mencipta page klik pada add file dan browse fail flash anda dan upload

Sesudah Berjaya mengupload file anda ,nama fail tersebut akan berada diatas ikon add file.Klik pada kanan pada fail tersebut dan ambil copy link location.Simpan link ini untuk langkah seterusnya.
Contoh link adalah seperti dibawah ini.

https://sites.google.com/site/labulabiblog/lab/flash%20banner.swf?attredirects=0
teks yang berwarna oren boleh didelete

Memasukkan fail flash pada blog:

untuk dashboard lama:
pada dashboard ambil design....page elements..
add a gadget...html/javascript

untuk dashboard baru
ambil layout...add a gadget

pilih HTML/Javascript

dan masukkan kod dibawah ini:

Nota:
Masukkan link banner anda pada teks berwarna merah
ubah saiz banner pada teks warna hijau

kemudian klik pada save.

update 8/5/2013

hapus perkataan recommend this on google

noreply@blogger.com (Fokus Impian) — Mon, 16 Apr 2012 08:00:00 +0000

Tutorial kali ini adalah bagi anda yang ingin menghilangkan perkataan recommend this on google pada butang share google plus one yang berada pada bahagian bawah posting.

Langkah langkah nya adalah seperti berikut:

1.masuk ke dashboard dan pilih template

2.Klik pada edit html
3.Cari kod ]]></b:skin>

Dan letakkan kod dibawah ini diatas kod ]]></b:skin>

.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 30px !important;

4.kemudian simpan template anda.

update 8/5/2013

Tulisan efek neon

noreply@blogger.com (Fokus Impian) — Fri, 23 Mar 2012 01:35:00 +0000

Tulisan ini mempunyai efek seperti neon dengan warna yang bergerak sepanjang huruf yang ada. Seperti contoh dibawah ini:

cara memasangnya:

1.masuk ke design..pilih Layout
2.Pilih add a gadget

3.Html/javascript

dan masukkan kod dibawah ini:

<script language="JavaScript1.4">
jsver = 1.4;
var neonbasecolor=""
var neontextcolor="#af0"
var neontextcolor2=""
var flashspeed=70 // kecepatan flashing dalam milliseconds
var message="TULISAN EFEK NEON"
var flashingletters2=1 // bilangan huruf yg di flashing pada neontextcolor2 (0 to disable)
var flashingletters=6 // bilangan huruf yang di flashing pada neontextcolor
var flashpause=0 // pause diantara flash-cycles dalam milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

#kecepatan pergerakan teks boleh diubah pada kod var flashspeed=70 dan warna teks pada kod var neontextcolor="#af0" dan var neontextcolor2=""

4.Klik save

update 8/5/2013

cara buat tajuk posting berjalan

noreply@blogger.com (Fokus Impian) — Thu, 15 Mar 2012 08:45:00 +0000

Cara memasangnya:
1.Log in ke blog >> design >>Template>Edit HTML

2.cari kod <h3 class='post-title entry-title'> lebih mudah jika gunakan ctrl+f (klik didalam template dan tekan butang Ctrl+F supaya muncul fungsi find)untuk mudahkan pencarian anda.
3.Setelah jumpa kod diatas tambah kod menjadi seperti dibawah ini:

tambahkan kod berwarna merah pada permulaan <h3 class='post-title entry-title'> dan diakhir </h3>
Boleh juga dibuat berbagai bentuk teks berjalan seperti yang terdapat pada tutorial membuat teks berjalan sebelum ini.
Selamat mencuba....:)

update 8/5/2013

Facebook like box muncul bila blog dikunjungi

noreply@blogger.com (Fokus Impian) — Tue, 28 Feb 2012 12:49:00 +0000

Widget Facebook like box ini akan muncul apabila pengunjung memasuki blog.Mungkin anda pernah meliha widget ini dipasang pada kebanyakan blog diwaktu ini.Ia boleh dipasang pada blogger dan juga wordpress.Widget ini boleh di tutup paparannya,bukan seperti sesetengah blog yang memasangnya seolah olah memaksa pengunjung untuk klik butang like.

Cara memasangnya:

Log in keblogger
Klik pada Layout >>Add a gadget

Pilih HTML/javascript

Dan masukkan kod dibawah ini

#Tukarkan bloggertricks pada kod diatas dengan username facebook anda

Kemudian klik pada save untuk melihat hasilnya:
Kredit untuk mybloggertricks

update 8/5/2013

Cara pasang widget add me on google

noreply@blogger.com (Fokus Impian) — Fri, 10 Feb 2012 12:30:00 +0000

Widget add me on google adalah seakan akan facebook like box.Ia adalah widget yang memaparkan jumlah follower bagi Google + Circle.Ia adalah widget yang membolehkan kita berhubung dengan pengunjung.

Langkah langkah bagi memasangnya:
Dapatkan google+ id pada google plus profile page
Url contohnya adalah seperti dibawah ini
https://plus.google.com/b/()812701480064512353519/posts

1.Masuk ke web widgetplus.com
2.Klik pada butang get widget
3.Masukkan google+ id tadi pada tab basic setting (seperti contoh pada teks berwarna merah diatas)

Beberapa setting lain juga boleh diubah seperti warna background,warna button,saiz teks dan sebagainya.
4.Kemudian klik pada butang get code(yang akan muncul diatasnya) dan salin kod yang diberi
5.Masuk ke design>>Page elements>>HTML/Javascript
6.Masukkan kod pada widget dan simpan untuk melihat hasilnya.

klik butang +1 jika suka artikel ini :) :)

Pasang butang share tweet,like dan Plus One

noreply@blogger.com (Fokus Impian) — Sun, 05 Feb 2012 11:51:00 +0000

Butang share kali ini adalah Facebook like, Tweet,dan juga Google Plus One .Mungkin sebelum ini anda agak sukar untuk meletaknya sebaris kerana memasangnya secara berasingan Jadi dengan tutorial ini akan lebih memudahkan memasangnya.dalam satu barisan.

Cara memasangnya:
Salin kod dibawah ini terlebih dahulu:

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

<table border='0'><tr>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='teknikbuatblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/></td>
</tr></table> </b:if>

Kemudian masuk ke design…>> Template>edit HTML

Cari kod <div class='post-header-line-1'/>
Gunakan fungsi search(klik didalam ruangan kod pada template tekan butang CTRL + F untuk mengaktifkan fungsi search)
jika hendak memasang dibawah tajuk posting jika tiada cari kod <data:post.body/> dan letak kod tadi diatasnya.

Jika hendak memasangnya dibawah letakkan selepas kod <data:post.body/>

Letakkan kod dibawah ini diatas kod </head>

Jika pernah memasang butang google plus one sebelum ini,tidak perlu memasang kod diatas.

Simpan template dan lihat hasilnya.
Jika anda menggunakan read more dan hendak ia terpapar dihadapan dan juga pada ruang posting delete kod yang berwarna merah diatas
Gantikan perkataan teknikbuatblog dengan username twitter anda

klik butang +1 jika suka artikel ini :) :)

update 8/5/2013

Cara pasang lagu pada blog

noreply@blogger.com (Fokus Impian) — Tue, 31 Jan 2012 14:45:00 +0000

Ramai yang minta admin untuk buat tutorial ini, cara pasang lagu pada blog .Bagi yang berminat inilah berikut cara membuatnya:

Dapatkan dulu lagu di fullmusik.net/
Pada sebelah kanan web site butang malaysia Song,english Song,korean song,nasyid song dan dangdut song
Klik pada butang pilihan lagu yang anda minati
Kemudian pada senarai diatas pilih lagu anda minati
Setelah pilih lagu tersebut akan muncul kod ditengah paparan web tadi
Salin kod tersebut
contoh kod seperti berikut:

<center><a href="http://fullmusik.co.cc" target="_blank"><img src="http://fullmusik.org/guci.gif" border="0" /><br /><img src="http://fullmusik.org/music.gif" border="0" /><br /><embed src="http://www.hugedrive.com/published/WG/show.php?q=RlVMTE1VU0lL-ddb238a7&mode=preview&file=MjI4" AUTOSTART=TRUE LOOP=TRUE WIDTH=0 HEIGHT=0 ALIGN="CENTER"></embed><br />Gratisan Musik</a></center>

1.Log in ke blog anda
2.Kemudian masuk ke design dan pilih Layout

3.pilih HTML/Javascript

4.Kemudian masukkan kod tadi
5.Simpan untk melihat hasilnya

klik butang +1 jika suka artikel ini :) :)

update 8/5/2013

Letak notis bar pada blog

noreply@blogger.com (Fokus Impian) — Fri, 27 Jan 2012 09:03:00 +0000

Jika anda ingin letak notis ,posting terkini atau iklan,bar ini bersesuaian jika dipasang pada blog kerana ia boleh menarik perhatian pengunjung kerana ia bergerak apabila discroll.Ia akan berada dibahagian bawah blog dan transparent.

Cara membuatnya:
1.Masuk ke dashboard blog anda
2.pilih design,klik pada template
3.Edit HTML

3.Cari kod </body> pada template
Untuk memudahkan pencarian boleh juga gunakan Ctrl+F(rujuk tutorial cara guna editor terbaru blogger)
Kemudian salin kod dibawah dan diletakkan diatas kod </body>

Kod warna yang bertanda dengan warna oren boleh ditukarkan dengan warna yang diingini
4.Kemudian simpan template anda.

update 8/5/2013

Cara buat kursor buih

noreply@blogger.com (Fokus Impian) — Tue, 03 Jan 2012 02:29:00 +0000

Kursor ini seakan akan sama dengan kursor bintang berjatuhan sebelum ini,tetapi kali ini adalah dalam bentuk gelembung buih yang akan naik keatas bila kursor digerakkan.

Cara memasangnya:
1.Log in keblogger terlebih dahulu
2.Pilih Layout...Add a Gadget

3.HTML/Javascript

4.Masukkan kod dibawah ini :

# warna buih boleh ditukarkan pada teks berwarna oren dan kod nya boleh didapati disini

5.Kemudian klik pada save

update 8/5/2013

Cara pasang welcome image pada blog

noreply@blogger.com (Fokus Impian) — Sat, 24 Dec 2011 04:34:00 +0000

Welcome image ini adalah imej akan terpapar bila kita mula mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya dah banya blog yang memasangnya dengan berbagai bagai imej.Jika ada berminat untuk membuatnya.Ikuti langkah seterusnya:

1.Log in ke Dashboard
2.Pilih Template >>Edit HTML >> proceed

3.Cari kod ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:

</style></head>
<script language="javascript" type="text/javascript">
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}

function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}

function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center><img src="http://i219.photobucket.com/albums/cc282/garam63/welcome.png"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

#bahagian teks berwarna merah boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda

Update 1/11/2012
klik butang +1 untuk sharing artikel ini pada google :) :)

Cara membuat perkataan mengikuti kursor

noreply@blogger.com (Fokus Impian) — Fri, 16 Dec 2011 02:36:00 +0000

Ada berbagai cara yang dibuat bagi menukar bentuk(menghias) kursor seperti membuatnya bertaburan dengan bintang,berbentuk buih(bubble) dan membuat perkataan mengikuti kursor.

Cara membuatnya:

1.Masuk ke design dan pilih Page elements
-Untuk dashboard baru pilih Layout

2.Add a Gadget

3.Html/Javascript

dan masukkan kod dibawah ini

Ubahkan perkataan yg dikehendakki pada teks yang berwarna oren diatas
4.Kemudian klik save.
update 8/5/2013

Membuat ucapan selamat datang pada blog

noreply@blogger.com (Fokus Impian) — Tue, 13 Dec 2011 02:13:00 +0000

Mungkin anda pernah jumpa blog yang mana muncul paparan selamat datang atau welcome screen.kita perlu klik pada paparan nya sebelum masuk ke blog..Jika anda berminat membuatnya ikuti langkah dibawah ini:

Masuk ke design>>Layout>Add A gadget

Html/Javascript

Dan masukkan kod ini pada nya.

# gantikan perkataan yang diingini pada teks berwarna merah

kemudian jgn lupa klik pada save...:)
Sebelum ini saya ada juga artikel ucapan kepada pengunjung bila meninggalkan blog artikelnya disini

klik butang +1 jika suka artikel ini :) :)

update 8/5/2013

Cara membuat link didalam satu halaman

noreply@blogger.com (Fokus Impian) — Sun, 04 Dec 2011 05:31:00 +0000

Membuat link pada satu halaman yang sama(anchor link) digunakan pada halaman yang mempunyai teks yang panjang dan dia akhir halaman tersebut diletakkan teks KEMBALI KEATAS juga boleh untuk menuju keteks yang tertentu pada posting.Bila diklik pada link ini ia akan kembali semula keatas tanpa kita perlu scroll halaman tersebut keatas.Boleh juga kita gunakan jika hendak menuju kemana mana perenggan teks dalam halaman tersebut

Untuk membuat satu anchor link pada halaman kita perlu buat kod anchorname seperti dibawah
<a name="ANCHORNAME"></a>

Anchorname ini boleh diletakkan apa sahaja nama

Kemudian diletakkan dibahagian atas atau bersebelahan dengan dengan tempat yang hendak dituju.Contohnya saya hendakkan menuju kepenggan diatas saya letakkan begini
<a name="ANCHORNAME"> (disebelah permulaan teks diatas)Membuat</a> link pada satu halaman yang sama(anchor link) digunakan pada halaman yang mempunyai teks yang panjang dan dia akhir halaman tersebut diletakkan teks KEMBALI KEATAS.Bila diklik pada link ini ia akan <a href="#ANCHORNAME">kembali semula keatas </a> tanpa kita perlu scroll halaman tersebut keatas.Boleh juga kita gunakan jika hendak menuju kemana mana perenggan teks dalam halaman tersebut.

(teks berwarna merah diatas adalah contoh bagaimana meletak kod pada teks diatas dan dimasukkan semasa dalam mode edit HTML)

Kemudian letakkan kod seperti dibawah pada tempat yang mana anda hendakkan perkataan yang mana bila diklik ia akan kembali keatas

<a href="#ANCHORNAME">KEMBALI KEATAS</a>

Teks kembali keatas pada kod boleh juga kita letakkan pada mana mana teks pada posting bagi membolehkan kita link pada bahagian yang hendak dituju.Contoh nya pada bahagian kod berwarna hijau diatas yang saya letakkan bersama teks diatas.

KEMBALI KEATAS
klik butang +1 jika anda suka artikel ini :) :)

Pasang butang google Plus One

noreply@blogger.com (Fokus Impian) — Fri, 18 Nov 2011 11:37:00 +0000

Google telah telah mengeluarkan butang alternatif kepada Facebook dan tweeter yang dipanggil +1.Jika anda suka dengan sesuatu artikel yang dibaca pada blog atau web anda boleh klik butang tersebut.Klikkan pada butang tersebut membolehkan artikel tersebut mudah dijumpai ketika membuat carian pada google.Butang ini berkesan pada carian search engine kerana ia akan mengira jumlah +1 yang ada.Kiraan ini boleh dilihat jika kita memasuki laman google webmaster tools.

Cara memasangnya.

1.Masuk ke dashboard blogger>Design > Template >Edit HTML

2.Cari kod </head> dan letakkan dibawah ini diatasnya:

3.cari kod <data:post.body/> dan letak seterusnya ini dibawahnya:

Size pada kod selain dari standard boleh ditukar kepada small,medium atau tall

4.Kemudian simpan template anda untuk saksikan tampilan butang tersebut.

update 8/5/2013

Pasang butang follow dan dashboard

noreply@blogger.com (Fokus Impian) — Fri, 11 Nov 2011 00:32:00 +0000

Mungkin anda pernah melihat butang follow dan dashboard yang diletakkan dibahagian atas header pada sesuatu blog.Butang ini memudahkan kita untuk masuk kedashboard pada template yang tiada nav bar dan juga bagi pengunjung untuk follow blog kita tanpa perlu tercari cari dimana widget tersebut dipasang.

Bagi anda yang ingin membuatnya ikutilah langkah berikut ini:

1.Masuk ke Blogger--Design
2.Pilih Layout--Add a gadget

3.HTML/Javascript

4.Masukkan kod dibawah ini:

5.Tukarkan blog ID diatas kepada id blog anda yang boleh didapati dibahagian atas semasa anda hendak memasukkan kod widget

6.Kemudian klik pada save
# letakkan kod dibahagian bawah ruangan add a gadget yang ada pada template anda supaya ia tidak terlindung dengan widget yang ada bila page discroll...:)
klik butang +1 jika suka artikel ini :) :)

update 8/5/2013

Cara pasang kursor bintang berjatuhan

noreply@blogger.com (Fokus Impian) — Sat, 29 Oct 2011 07:10:00 +0000

Sebagai mana tajuknya tutorial cara kali ini adalah cara untuk memasang kursor bintang berjatuhan.Efek bintang berjatuhan ini akan tampil bila mana cursor digerakkan pada blog.

Berikut adalah cara memasangnya:
1.Login ke Blogger
2.Klik Pada Design → Layout
3. Add a Gadget → HTML/JavaScript

Kemudian pilih warna yang dingini pada kod berikut :

Bintang warna hitam
<script src="https://sites.google.com/site/teknikbuatblog/tbb/black_star.js" type="text/javascript"></script>

Bintang warna hijau
<script src="https://sites.google.com/site/teknikbuatblog/tbb/green_star.js" type="text/javascript"></script>

Bintang warna merah
<script src="https://sites.google.com/site/teknikbuatblog/tbb/red_star.js" type="text/javascript"></script>

Bintang warna puteh
<script src="https://sites.google.com/site/teknikbuatblog/tbb/white_star.js" type="text/javascript"></script>

Bintang warna kuning
<script src="https://sites.google.com/site/teknikbuatblog/tbb/yellow_star.js" type="text/javascript"></script>

Setelah memasukkan kodnya,klik pada save untuk melihat hasilnya.
update 8/5/2013

Tutorial letak efek salji pada blog

noreply@blogger.com (Fokus Impian) — Tue, 25 Oct 2011 00:52:00 +0000

Dalam tutorial sebelum ini saya telah muatkan artikel berkenaan cara membuat simbol hati berguguran pada blog.Kali ini pula seakan akan sama juga iaitu meletakkan efek salji pada blog.

Langkah langkah membuatnya:
1.Login ke dashboard --- page element

untuk dashboard baru klik design---pilih layout

2.Add a gadget --- HTML/Javascript
3.Masukkan kod berikut padanya:

warna merah
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljimerah.js"></script>

warna biru
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljibiru.js"></script>

warna purple
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljipurple.js"></script>

warna hitam
<script type="text/javascript" src="https://sites.google.com/site/teknikbuatblog/tbb/saljihitam.js"></script>

warna putih
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/saljiputih.js"></script>

4.Setelah berpuas hati klik pada save

Selamat mencuba ….. :)

update 8/5/2013