Sparks Fly...

Tutorial : Make a Tutorial Pages (Blogskin)

Monday, 31 December 2012 • 20:47 • 0 comments

Assalamualaikum and Hai. Btw Sha nak share cara utk buat pages with tutorial list for Template Classic users.

1. Open Notepad or Newpost

2. Copy code dekat bawah ni

Untuk text sahaja

<a href="LINK" target="_blank">TITLE</a><br>

Untuk text dan icon

<img src="URL IMAGE"/><a href="LINK" target="_blank">TITLE</a><br>

3. Paste code tersebut

4. Okay. Tinggalkan sebentar list yang telah selesai korg copy tadi

Biru : link tutorial

Merah : tajuk tutorial

Hijau : Icon

5. Sekarang. Pergi Dashboard > Template

6. Copy code dekat bawah ni

<div id="ID NAVI" style="display: none;">
<div class="CODE POST TITLE">TITLE</div>
LIST TUTORIAL
</div>

7. Paste di atas code </body>

8. Then, korg gabungkan code di step-2 dgn step ke-6

9. Kalau tak faham. Bole tengok contoh dekat bwah ni

<div id="ID NAVI" style="display: none;">
<div class="CODE POST TITLE">TITLE</div>
<a href="LINK" target="_blank">TITLE</a><br>
<a href="LINK" target="_blank">TITLE</a><br>
<a href="LINK" target="_blank">TITLE</a><br>
<a href="LINK" target="_blank">TITLE</a><br>
<a href="LINK" target="_blank">TITLE</a><br>
<a href="LINK" target="_blank">TITLE</a><br>
</div>

10. Preview & save.

11. Kalau tak faham. Boleh tanya.

Pink : list tutorial

Ungu : ID navigate

Orange : code post title

Tutorial : Put Scalloped Edges (Blogskin)

• 20:44 • 0 comments

Assalamualaikum and Hai semuaa. Okay lah. Now Sha nak ajar korang cara untuk letak scalloped edges bagi blogskin. Tapi apa benda scalloped edges tu? Ha! tengok contoh dekat bawah ni.

:: Preview ::

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code <html> or <head>

3. Copy code dekat bawah ni

<div style=" background-image: url('URL IMG'); top: -10px; width: 100%; left:0px; height: 44px; z-index: 100; position: fixed; background-hover:filter:alpha(opacity=100);"></div>

4. Then, paste di bawah code yang korg cari tadi

5. Preview & save

Oren : URL image

Biru : Boleh ubah ikut citarasa korang.

Tutorial : Letak Icon Sebelah Comment (Blogskin)

• 20:36 • 0 comments

Assalamualaikum and holla. Sebelum-sebelum ni ada yang tanya Sha, macam mana nak letak icon dekat sebelah comment tu. Especially bagi yang guna blogskin. So, hari ni Sha akan tunjukkan caranya.

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code

<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>>

3. Dah jumpa? Good. Sekarang korg copy code dekat bawah ni

<img src="URLIMG"/>

4. Paste di sebelah code tadi

5. Preview & save

Purple : URL image / icon

Tutorial : Tukar Older & Newer Post kepada Icon (Blogskin)

• 20:33 • 0 comments

Assalamualaikum and holla again. Just straight to the point. Hehe. Sekarang,Sha nak share dekat korg cara untuk tukarkan older & newer post kepada icon. Actually, Sha main 'hentam' je code ni. Kalau tak jadi, maaf la ye. Tapi korg cuba la dulu.

Contoh icon older & newer post

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code </blogger>

3. Copy code dekat bawah ni

<div style="float: left;"><a class="leposts" href=<$OlderPosts$>>
<img src="OLDER ICON" border="0" /></a></div>
<div style="float: right;"><a class="leposts" href=<$NewerPosts$>>
<img src="NEWER ICON" border="0" /></a></div>

4. Paste di bawah code tadi

5. Bagi yang nak letak button 'HOME' sekali, korg copy code ni

<div style="float: left;"><a class="leposts" href=<$OlderPosts$>>
<img src="OLDER ICON" border="0" /></a></div>
<center><a href="URLBLOG"><img src="HOME ICON" border="0" />
<div style="float: right;"><a class="leposts" href=<$NewerPosts$>>
<img src="NEWER ICON" border="0" /></a></div>

6. Paste dekat bawah code yang korg cari tadi tu ye

7. Preview & save

Biru : older post image

Pink : newer post image

Hijau : home image

Oren : URL blog

nah :D

Pink

http://www5e.biglobe.ne.jp/~cep/s/1/h_r2.gif

http://www5e.biglobe.ne.jp/~cep/s/1/n_r2.gif

http://www5e.biglobe.ne.jp/~cep/s/1/ba_r2.gif

Purple

http://www5e.biglobe.ne.jp/~cep/s/1/h_r.gif

http://www5e.biglobe.ne.jp/~cep/s/1/n_r.gif

http://www5e.biglobe.ne.jp/~cep/s/1/ba_r.gif

Blue

http://www5e.biglobe.ne.jp/~cep/s/1/h_b.gif

http://www5e.biglobe.ne.jp/~cep/s/1/n_b.gif

http://www5e.biglobe.ne.jp/~cep/s/1/ba_b.gif

Orange

http://www5e.biglobe.ne.jp/~cep/s/1/ho_y.gif

http://www5e.biglobe.ne.jp/~cep/s/1/n_y.gif

http://www5e.biglobe.ne.jp/~cep/s/1/ba_y.gif

Pink

http://www5e.biglobe.ne.jp/~cep/s/mm/rhp.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rbp.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rnp.gif

Blue

http://www5e.biglobe.ne.jp/~cep/s/mm/rh.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rb.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rn.gif

Yellow

http://www5e.biglobe.ne.jp/~cep/s/mm/rhy.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rby.gif

http://www5e.biglobe.ne.jp/~cep/s/mm/rny.gif

Tutorial : Highlight Text Bershadow (Blogskin)

• 20:27 • 0 comments

Assalamualaikum and hai. Selamat pagi semua. Buat tutor ni time pagi2 buta. Ayam jiran sebelah pon belum bangun lagi agaknya. Okay merepek. tuto harini ' Highlight Text Bershadow ' nak tahu ? Orait. Jom ikut step ni.

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code a:link

3. Copy code di bawah ni

::-moz-selection {
background:#FFFFFF;
color:#000000;
}
::selection {
text-shadow: 1px 1px 1px #FCD9FF;
color:#FFD9D9;
}

4. Paste di atas code tadi

5. Preview & save

Biru : warna shadow

Hijau : ketebalan shadow

Pink : warna font

Tutorial : Letak Button Home (Blogskin)

• 20:23 • 0 comments

Assalamualaikum and Hai hai. Bertemu lagi kita. LOL. Okay, tuto kali ni sangat simple, iaitu cara untuk letak button home bagi pengguna blogskin. Nak tahu tak? Jom mula.

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code </Blogger>

3. Copy code dekat bawah ni

<center><a href="URLBLOG"><img src="HOMEICON" border="0" /></a><center>

4. Paste di bawah code tadi

5. Preview & save.

pink : URL blog

kuning : URL home icon

http://i.imgur.com/QcUiW.gif

http://i.imgur.com/jc8Mt.gif

http://i.imgur.com/XUPQz.gif

http://i.imgur.com/2hrDB.gif

Tutorial : Link Hover "Box" New Version (Blogskin)

• 20:16 • 0 comments

Assalamualaikum and Hello. Hai. Tutor hari ni Sha nak ajar cara untuk buat link hover berkotak versi blogskin. Tuto ni sesuai kalau korang nak buat list tutorial, freebies, exchange link etc. Contohnya korg boleh tgk dekat bawah ni

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code </style>

3. Kemudian, copy code dkt bawah ni

a.nav{
box-shadow: inset 9px 0 0px 0 #000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
background: #fff;
color:#000;
width:100px;
border:1px solid #000000;
border-left:20px solid #000000;
width: 200px;
overflow: hidden;
}
a.nav:hover{
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #555;
}

4. Paste di atas code tadi

5. Next, copy code ni pulak

<a class="nav" href="LINK">TITLE</a><br/>

6. Paste dekat bahagian yang korang nak

7. Preview & save

oren : code warna

hijau : link / URL

merah : tajuk / ayat korang

Older Posts ?