Tutorial Cara Letak Background Tajuk & Side Bar


Tutorial ini adalah untuk mencantikkan tajuk blog dan tajuk di side bar korang, sebab korang boleh letak background suka hati korang dengan image yang comel-comel atau glitter-glitter berkelipan. Tengok contoh image yang saya letak tu, itu adalah jenis image glitter. Ok ikut tutorial seperti di bawah:

1. Sign in akaun blogger

2. Dashboard > Template > Edit HTML

3. Tekan CTRL+F. Cari kod h2 {

4. Kemudian paste kod ini background:url('url gambar korang')} di bawah kod di bawah:
h2{text-align:center;
margin:0 0 1em 0;
font:$(widget.title.font);
color:$(widget.title.text.color);
text-transform:uppercase;
5. Contoh seperti di bawah:
h2{text-align:center;
margin:0 0 1em 0;
font:$(widget.title.font);
color:$(widget.title.text.color);
text-transform:uppercase;
background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSp_dJMlmN-4oTt-WuF4a-tVmMmu39DgMwYX841l8-V6ccKDWWR4A')}
6. Perview dan Save!

p/s: andainya kod korang berbeza seperti nombor 4, korang scroll sikit dan cari kod text-transform:uppercase; kod ini akan ada berhampiran dengan kod nombor 4. Kemudian paste kan kod background:url('url gambar korang')} di bawah kod text-transform:uppercase;

Tutorial Tukar Icon Favicon

Tutorial kali ini saya akan kongsikan 'Tutorial Tukar Icon Favicon' kepada icon anda sendiri. Icon Favicon memang penting kerana pembaca blog boleh mengenali blog anda dengan tepat. Salah satu cara menarik minat pengunjung melayari blog anda. Contoh icon Favicon seperti image di atas. Tutorial seperti di bawah:

1. Sign in akaun blogger

2. Dashboard > Design > Favicon

3. Klik edit di Favicon > Choose File dan pilih image yang berukuran 16 x 16 sahaja. 

4. Save!

~Icon Favicon tak akan muncul dengan segera. Mungkin ambil masa berminggu untuk keluar dan anda kenalah sabar. Saya pun tunggu dalam 3 minggu, kemudian icon Favicon baru akan muncul.

Tutorial Pasang Tumbol Spoiler Di Blog

Kelebihan 'Tutorial Pasang Tumbol Spoiler Di Blog' kali ini, memudahkan pengunjung membaca senarai entri yang ingin kita ketengahkan. Contoh boleh tengok di blog ini di sebelah kiri tombol "Klik Tutorial".Cara-caranya ikut step seperti di bawah:

1. Sign in akaun blogger

2. Dashboard > Design > Add A Gadget > Html / Javascript

3. Copy dan paste kod di bawah ini di  Html / Javascript

<center><div id="spoiler"><div><input value="TAJUK SPOILER ANDA" style="width:88px ;font-size:12px;background-image: url(http://s.io.ua/img_aa/small/1120/96/11209689_0.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<div style="text-align: justify;">
<div style="text-align: justify;">
<div style="text-align: justify;">
<img src="URL IMAGE" /><a href="URL TAJUK ENTRI 1" target="_blank">TAJUK ENTRI 1</a><br /><img src="URL IMAGE" /><a href="URL TAJUK ENTRI 2" target="_blank">TAJUK ENTRI 2</a><br /><img src="URL IMAGE" /><a href="URL TAJUK ENTRI 3" target="_blank">TAJUK ENTRI 3</a></center></div>

Contoh seperti di bawah:

<center><div id="spoiler"><div><input value="Klik Tutorial" style="width:88px ;font-size:12px;background-image: url(http://s.io.ua/img_aa/small/1120/96/11209689_0.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<div style="text-align: justify;">
<div style="text-align: justify;">
<div style="text-align: justify;">
<img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" /><a href="http://tutorialcantik.blogspot.com/2012/07/buang-attribution-powered-by-blogger.html" target="_blank">Buang Attribution (Powered by Blogger</a><br />
<img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" style="background-color: ;" /><a href="http://tutorialcantik.blogspot.com/2012/07/buat-kotak-icon-comel.html" target="_blank">Buat Kotak Icon Comel</a><br />
<img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" style="background-color: ;" /><a href="http://tutorialcantik.blogspot.com/2012/07/buat-kotak-tajuk-post-dan-tajuk-side-bar.html" target="_blank">Buat Kotak Tajuk Post dan Tajuk Side Bar</a></center></div>
Done! Mudahkan... ^_^

Tutorial Tambah Gadget Search

Salam semua.. dah lama saya tak update Tutorial ni, disebabkan bz dan hal2 yang lain. Ok sekarang ni saya nak share 'Tutorial Tambah Gadget Search'.

1. Sign in akaun blogger

2. Dashboard > Design > Add A Gadget > Html / Javascript

3. Copy dan paste kod di bawah ini di  Html / Javascript

<center><form action="URL BLOG/search" id="searchthis" method="get" style="display: inline;"><table cellpadding="0" cellspacing="0"><tbody><tr><td valign="middle"><input id="b-query" name="q" type="text" /><br /></td></tr><tr>   <script type="text/javascript">document.write<div> Search Blog
</div></script></tr></tbody></table></form></center><center><span style="color:KOD WARNA;">AYAT ANDA</spa
n></center></div>

**  Warna merah ganti dengan url blog anda
** Warna biru ganti kod warna tulisan yang anda mahu
** Warna pink ganti dengan ayat anda

Contoh seperti dibawah:

<center><form action="http://tutorialcantik.blogspot.com/search" id="searchthis" method="get" style="display: inline;"><table cellpadding="0" cellspacing="0"><tbody><tr><td valign="middle"><input id="b-query" name="q" type="text" /><br /></td></tr><tr>   <script type="text/javascript">document.write<div> Search Blog</div></script></tr></tbody></table></form></center><center><span style="color:#006600;">Taip Tutorial yang dicari dan Enter!</span></center></div>


~ Kod Warna korang boleh rujuk di bawah ini:

Beraneka Warna-Warna Terkini
-----------------------------------------
EDITOR KOD WARNA HTML 
Tutorial Blog Cantik
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

Animated Muncul Di Link




Cara buat animated muncul apabila cursor menyentuh link. Korang ikut step seperti di bawah:

1. Sign in akaun blogger

2. Dashboard > Template  > Edit HTML > Expand Widget Templates

3. Tekan Ctrl+ F paste kod a:hover dan tekan enter

4. Kemudian Copy kod di bawah ini dan paste kan di bawah kod a:hover

 color:#FF6699; background:url(URL Gambar icon korang di sini) ;background-repeat: repeat;
text-decoration:underline;
** Masukkan URL gambar  icon korang di text berwarna Merah
** Tukar Kod Warna yang korang suka di kod berwarna Biru

~ search gambar icon klik di glitter-graphics.com


~ Kod Warna korang boleh rujuk di bawah ini:

Beraneka Warna-Warna Terkini
-----------------------------------------
EDITOR KOD WARNA HTML 
Tutorial Blog Cantik
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

Komen Terbaru