Posts

Showing posts from June, 2011

Tutorial : Background & Border Post Title (Template Designer)

Image
Thanks Alia sebab bertanya. Suke tau die panggil ‘CIK TYRAH’. Bukan selalu orang panggil saye Cik Tyrah. Hoho suke suke. Oke sudah menyimpang jauh. Nak post title macam saye? Boleh, meh saye ajarkan. Tapi yang ni untuk pengguna Template Designer saje. Untuk template biase, saye tak berape sure.

macam tu rupe die oke :)
1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Ctrl+F, cari code ni
h3.post-title, .comments h4 {Full code die macam kat bawah ni. Korang delete semua code tu :)
h3.post-title, .comments h4 {
font:normal normal 22px Arial,Tahoma,Helvetica,FreeSans, sans-Serif;
margin: .75em 0 0;
}3. Pilih nak background berwarna atau bercorak dan copy coding die then paste kat tempat coding yang telah di-delete kan tadi.

Background berwarna :
h3.post-title {
background:#FFFFFF;
text-align:center;
  margin: 0;
  font: $(post.title.font);
border:2px solid #33CCDD;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
.comments h4 {
  margin: 1em 0 0;
  font…

Tutorial : Bentuk-bentuk Border

Image
Ni bentuk-bentuk border and korang boleh gune untuk blockquote, sidebar, post title and etc.

Example_A  {
-moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; }
Example_B {
-moz-border-radius-bottomright: 50px 25px; border-bottom-right-radius: 50px 25px; }
Example_C {
-moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; }
Example_D {
-moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; }
Example_E {
-moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; }
Example_F {
-moz-border-radius: 35px; border-radius: 35px; } credit : Nurhafizah
Cara nak gune border Contoh : Korang nak letak border untuk blockquote.
Ni coding blockquote yang asal .post blockquote {
background:#ff3399;
padding: 5px;
Border: 3px solid #ffffff;
colour:#FFFFFF;Contohnya korang nak bentuk border A, korang copy code Example A tu then paste bawah coding blockquote. Die akan jadi macam ni.
.post blockquote {
background:#ff3399;
padding: 5px;
Border: 3px solid #…

Tutorial : Background Sidebar Title (Template Designer)

Image
Tutorial ni untuk pengguna Template Designer je ok. Aku tak sure template biase boleh gune ke tak. Tapi kalau nak cuba, tak salah :)

1. Dashboard > Design > Edit Html

2. Ctrl+F, cari code ni
]]></b:skin>3. Jumpa? Copy code ni pulak.
.sidebar .widget h2 {
background :#33ccff;
border: 3pxsolid#ffffff;
text-align : center ;
}4. Paste-kan code tu kat atas ]]></b:skin>

5. Jom adjust ikut taste.

Tulisan kaler kuning tu untuk kaler background sidebar title korang.
Tulisan kaler biru untuk ketebalan border.
Tulisan kaler hijau untuk jenis border - solid, dotted, dashed
Tulisan kaler oren untuk kaler border.
Text-align, pilih ler sendiri - right, center, left

6. Save =)

Tutorial tambahan :

Kalau korang nak background bercorak, pun boleh. Adjust je kat code background tu. Adjust biar jadi macam ni.
background: url('URL background');So nanti coding korang jadi macam ni.
.sidebar .widget h2 {
background: url('URL background');
border: 3px solid #ffffff;
text-al…

Tutorial : Scroll Bar Berwarna

Image
Salam readers.

Tutorial ini di-request oleh McDa. Oke macam mana nak cantikkan scroll bar? Contohnye macam kat blog saye ni. Sila refer gambar di bawah.


Nak jugak macam tu? So boleh lah follow step yang saye kasi ni oke.

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Ctrl+F, cari kod ni
]]></b:skin>3. Dah jumpa? Copy kod kat bawah ni
::-webkit-scrollbar {
height:12px;
width: 12px;
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background-color: #ff3399;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ffffff;
}4. Paste kod tu kat atas kod ]]></b:skin>

5. Jom adjust ikut cita rasa masing2.

Teks kaler kuning tu untuk kaler background scroll bar
Teks kaler biru pulak untuk scroll bar tu
Border :
- 1px untuk ketebalan
- solid untuk jenis border. Boleh pilih solid, dashed atau dotted
- teks kaler hijau tu untuk kaler border

Untuk kod kaler, korang boleh cari di sini or sini.

6. Siap :)

Tutorial Tambahan :

Kalau nak scroll bar korang t…

Tutorial : Rainbow Link

Ni bile korang letak cursor mouse korang kat link, die tukar2 kaler warna-warni macam rainbow. Begitulah alkisahnye die mendapat nama 'rainbow link'. What the fish? Follow Cik Tyrah ke dunia rainbow. Wheeee~

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy code ni.
<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">
/***********************************************
* Script edited by C.Tyrah at http://fwzynn.blogspot.com/
* Please keep this notice intact
***********************************************/
</script>3. Paste dalam kotak gadget.

4. Save =)

-Happy Trying-

Tutorial : Buang Navigation Bar/Navbar

Image
klik kalau tak nampak :)
Itu navigation bar/navbar. Kalau korang nak gune button follow and dashboard tumblr, korang boleh la ikut tutorial ni. Sebab kite tak nak button follow and dashboard tu nanti nampak semak dengan navbar tu.
1. Dashboard > Design > Edit Html

2. Ctrl+F, cari code ni
/* Variable definitions3. Dah jumpa? Korang copy code kat bawah ni.
#navbar-iframe { display: none !important; }4. Paste-kan code yang di-copy tu kat atas /* Variable definitions tu ok.

5. Save =)

-Happy Trying-

Tutorial : Link Open New Tab

Tutorial yang ni pulak nak bagitau cara nak kasi link page yang korang klik dibuka di tab baru. Senang cite, bila korang klik link, die bukak new tab. Aku sarankan kepada korang2 yang disable right click buat la macam ni. Annoying tau bile nak bukak link tu kat page baru tapi korang disable right click plus takde pulak function macam ni. Aku ni nak terus stay kat blog korang pun jadi macam erk. Follow step di bawah oke.
1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy code kat bawah ni.
<!-- code for turning all non-blog links to new page links -->
    <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 …

Tutorial : jQuery Image Lazy Load

Sape tahu ape benda jQuery image lazy load, angkat tangan. Yang tak tahu, sila garu kepala cari kutu then basuh tangan sebelum datang menempek depan skrin laptop masing2. jQuery image lazy load tu, bila kite scroll blog ke bawah, gambar2 akan appear macam fade gitu. Nak buat, senang macam makan kacang. Follow step yang aku kasi.

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy code kat bawah ni.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://img838.imageshack.us/img838/2931/loadingpagebudaknakal.jpg"
})…

Tutorial : Transparent Background Header (Template Designer)

Image
Tutorial ni khas untuk pengguna Template Designer yang menggunakan template simple. Tengok contoh macam blog aku la. Ceh nak jugak promote kan. Fine jangan gaduh. Follow ape yang aku buat oke. Banyak nak kena ajar hari ni.

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Cari code ni. Pakai Ctrl+F untuk memudahkan pencarian.
/* Mobile3. Dah jumpa, korang copy code kat bawah ni.
.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}4. Paste code tu kat atas /* Mobile tu oke.


Now, header korang dah jadi transparent kan. Tengok, tak lawa kan ade border kat tepi tu. Jom buang die. Dush!

1. Ctrl+F, cari code ni
.content-outer {2. Kat bawah code tu korang akan jumpa macam ni.

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow:…

Tutorial : Button Follow & Dashboard Tumblr

Image
Salam readers sayang. Asyik bersayang-sayang je sekarang ni. Ade ape2 ke? Ha kau jangan memandai nak buat gosip haram. Ok hari ni aku nak jadi cikgu jap. Nak kasi tutorial pasal button follow and dashboard tumblr. Macam ni hah rupa die.


Senang je nak buat benda ni. Tak payah pening2, ikut je ape yang aku cakap.

1. Dashboard > Design > Page Element > Add Gadget > Html/Javascript

2. Copy code kat bawah ni.
<div style="display:scroll; position:fixed; top:5px; right:90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG KORANG" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopa…

Tutorial : Button Like untuk Blog

Image
Nak tahu berape ramai orang suke blog korang? Boleh lah cuba tutorial ni. Ni rupe button like untuk blog tu ok. Button pesbuk :p

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy kod di bawah ni
<center><iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=URL BLOG KORANG&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe></center>3. Paste dalam kotak gadget Html tu.

4. Tulisan kaler kuning tu, korang masukkan URL belog korang.

5. Save =)

-Happy Trying-

Tutorial : Wishlist

Image
Lama tak buat tutorial. Tutorial simple je ni. Wishlist. Rupe die macam ni.



1. Dashboard > Design > Add Gadget > Html/Javascript

2. Copy code kat bawah ni
<form name=myform>
<input type="checkbox" name="mybox" value="1"checked/>ayat korang<br />
<input type="checkbox" name="mybox" value="2"checked/>ayat korang<br />
<input type="checkbox" name="mybox" value="3"disabled/>ayat korang<br /></form>
3. Tulisan kaler hijau, korang tukar. Checked untuk wish yang dah tercapai and disabled untuk sebaliknye. Tulisan kaler kuning tu, korang gantikan ayat korang oke.

-Happy Trying-