Tukar Older Post, Home, Newer Post kepada Imej/ Icon

Assalamualaikum, sudah lama tak buat tutorial kan. Kali nie, request dari adik Lieyan Chantek. Sorry, agak lama baru nak buat tutorial ni. Nasib baik request tutorial yang senang je. Hanya ubah-ubah kod sikit. Sedikit nasihat, kalau nak cantikkan blog jangan takut untuk bermain dengan kod-kod anda. Saya juga bermula dari zero seperti kamu, kamu dan kamu yang sedang makan di tepi tu. Hei, tak puasa ke?

Kadang-kadang kita tak boleh harap kan orang lain sangat. Kita sendiri kena usaha tau. Kalau kamu hanya harap kan pertolongan orang, susah nak maju. Ketahui la bahawa template blog kita tak sama seratus peratus, so, jangan la cepat melatah bila tak jumpa kod-kod yang diperlu kan. Try n error saja. Yang penting back up dahulu template kamu tu. Haih membebel plak tengah hari buta begini.

Ok, ok, nie soalan adik Lieyan Chantek,

Tulisan2 dibawah ini boleh diubah kepada imej / icon yang menarik kamu tau?

Ok, macam biasa,

Dashboard / Layout / Edit HTML / Download Full Template
(penting sebagai backup!)

Sila tick Expand Widget Templates
Cari code dibawah ni (Tekan Ctrl + f untuk memudahkan pencarian)

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

Tulisan yang berwarna + bold tu tukar dengan kod di bawah

<img src="Image URL" />

Begini contohnya,

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://img507.imageshack.us/img507/4343/leftq.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://img94.imageshack.us/img94/3545/rightyx.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a>
</b:if>
</b:if>

</div>

Hasil adalah seperti di bawah,

Oh, icon menarik boleh cari di SINI. Tak tau cara nak guna icon tu? Rujuk SINI. Selamat Mencuba :)

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Pasang Lagu Dalam Entry

Bagaimana nak isi lagu dalam entry. Contohnya dalam entry

1. BB Girl, eh BB Boy, eh eh
2. Tak sukenya kena tinggal :'((

Mommy Pinky belajar buat tutorial ni melalui blog Zack Zukhairi sebenarnya. Ade sesape tak kenal budak nih? Heh. Urmm..bukan la bermakna dia buat tutorial, tapi dia yang share link tempat belajar tu iaitu di blog rojakStory. Kalau nak belajar dari situ terus pun tak pe. Senang je. Lagi pun banyak lagi tutorial menarik kat situ :)

Ok, ini cara Mommy Pinky. Bahan-bahan yang wajib ada,

1. Lagu yang berformat MP3
2. File hosting : FileDen (sila daftar dulu ye kawan-kawan)

Tujuan kita daftar dengan Fileden ni, supaya kita dapat Direct Link untuk sesuatu mp3 yang kita nak gunakan nanti. Ada faham? :)

Ok, caranya

Selepas berjaya daftar, pergi ke Upload & upload lagu pilihan anda. Ingat, pastikan lagu tersebut berformat mp3. Kalau tak, memang tak jadi. Hehe.

Cara Upload, ikut je kat bawah ni, satu-satu Mommy Pinky tunjukkan. Suke tak? Hehe.

Klik Upload

Continue To File Uploader

Mommy Pinky lebih suke guna uploader yang lama. Sebab new uploader selalu corrupt. Penat je tunggu. Heh. Sebab tu, Mommy Pinky suggest korang klik je kat situ. Hehe.

Sekarang untuk pilih lagu dari Music Folder anda, klik Browse tu

Mommy Pinky pilih lagu Siti Nurhaliza, okeh. Contoh je ni.

Klik Upload, dan boleh la pergi menonton tv ke, blogwalking ke sebab memang berjanggut kalau nak tunggu..Haha

Ok, ini hasilnya. Tapi kita tak nak code yang ini.

Klik Direct URLs tu, code yang diperlukan akan terpapar di dalam box tu. Sila copy ye, jangan tengok je.. :)

Copy code di bawah ini,

<object id="audioplayer1" data="http://www.stormpages.com/rojakamoi/player.swf" width="290" height="24" type="application/x-shockwave-flash"><br/><param value="http://www.stormpages.com/rojakamoi/player.swf" name="movie"/><br/><param value="playerID=1&amp;soundFile=http://www.fileden.com/files/2010/3/1/2779493/Siti_Nurhaliza_-_Tahajjud_Cinta_-_06_-_Pintu_Rindu.mp3" name="FlashVars"/></object>

Gantikan kod berwarna biru dengan direct link anda. Ok, hasilnya seperti dibawah ini :)

Kalau tak berkenan bentuk mp3 nie, ada lagi satu yang korang boleh guna. Klik kat sini Muzicons

Klik URL

Paste direct link di dalam kotak seperti diatas. Seterusnya, korang bolehlah ubah warna dan sebagainya ikut kegemaran. Ambil code html dibahagian result untuk diletakkan dalam entry, ok :) Ini contohnya yang Mommy Pinky buat. Huhuh~ Selamat Mencuba :)

Panjangnya tutorial, harap korang faham :)

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---