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 ◕‿◕

---

Ubahsuai LinkWithin

LinkWithin ialah widget blog yang muncul di bawah setiap pos, menghubungkan kepada cerita berkaitan dari arkib blog kita. Kelebihan yang unik ialah ia dipaparkan dalam bentuk thumbnail jadi, pengunjung akan lebih berminat untuk melihat entry kita yang lepas². Bagi yang masih belum menggunakan widget ini bolehlah install dulu disini ye www.linkwithin.com

Widget ini boleh diubahsuai supaya kelihatan seperti di atas. Ayat asal "Anda mungkin juga meminati:" boleh ditukar kepada ayat anda sendiri. Malah boleh ditambah juga gambar atau icon comel. Caranya mudah sahaja. Hanya tambah sahaja kod di bawah ini di atas kod LinkWithin tersebut.

<script>linkwithin_text=' <img src="alamat url gambar" border=0> Ayat Yang Ingin Dimasukkan ' </script>

Ini contoh kod yang betul

<script>linkwithin_text=' <img src="http://dl10.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif" border=0> Entry Ini Menarik Juga Tau ! ' </script>

<script>

var linkwithin_site_id = 1549651;

</script>

<script src="http://www.linkwithin.com/widget.js"></script>

Save. Siap ^^

Selamat mencuba ye.

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Reply Komen

Dengan adanya reply di bahagian komen akan memudahkan tuan blog balas komen pengunjung. Berminat tak? Hasilnya seperti di bawah ini.


Cara nak buat mudah je. Sebelum tu, jangan lupa backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.

Tandakan kotak Expand Widget Templates
Cari kod di bawah

<b:include data='comment' name='commentDeleteIcon'/>

Tips untuk memudahkan pencarian,
Lihat keyboard korang, Tekan key Ctrl dan key F serentak.
Untuk pengguna Mozilla Firefox, korang akan nampak imej ni
Masukkan kod di ruang sebelah find, klik Next.
Paste kod ini selepas kod <data:post.body/> tadi.

Copy pula code di bawah ini dan paste di bawah code tadi,

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to Comment]</a></span>

Haip, belum siap lagi.

Ambil Blog ID anda, dan gantikan di YOUR BLOG ID

Tak tau Blog ID tu ape?
Cuba tengok atas, bahagian address link sekarang. Semua nombor selepas blogID tu la Blog ID anda :)

Tak faham lagi? Perhati pic dibawah ni



Ok Sekarang Boleh Save :)

Ops, nak tukar ayat?

tukar di [Reply to comment]

Kalau nak tukar ke gambar cute, tukar [Reply to comment] tu dengan code di bawah ni,

<img alt='Reply To This Comment' src='URL GAMBAR ANDA'/>

Ouh, selamat mencuba :)
erk, Mommy Pinky tak test pun tutorial ni..kalau tak jadi, tolong beritahu ok ;)
Credit to : Sue

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Kotak Komen Comel

Nak ubah kotak komen agar nampak lebih comel seperti di bawah ini?
Bukan sahaja kita suka tengok, manalah tahu mungkin boleh menambah minat pelawat untuk komen juga kan :)


Cara nak buat mudah je. Sebelum tu, jangan lupa backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.

Cari kod di bawah. Lebih kurang pun tak pe.

#comments-block{.... #comments-block .deleted-comment{
font-style:italic;
color:gray;
}

Ambil semua kod dibawah dan gantikan semua kod di atas tadi
 

#comments-block{
margin:0;
padding:0;
}

#comments-block .comment-author {
background: #ff86a8;
border:1px solid #ff86a8;
font-size: 12px;
margin:6px 0px;
border-radius:10px 10px 0px 0px;
padding:10px;
}

#comments-block .comment-body{
margin: 0;
font-size: 13px;
border-left: 1px solid #ff86a8;
border-right: 1px solid #ff86a8;
margin-top: -7px;padding: 5px;
}

#comments-block .comment-footer{
margin:0;
font-size: 11px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #ff86a8;
border-right: 1px solid #ff86a8;
border-bottom: 1px solid #ff86a8;
margin-top: -12px;
padding: 5px;
border-radius:0px 0px 10px 10px
}

#comments-block .deleted-comment{
font-style:italic;
color:gray;
}

#comments-block .comment-author a{color:#000 !important;}
#comments-block .comment-footer a, .comment-body a{color:#ff86a8 !important;}

Tips:
Kalau nak ubah warna kotak komen boleh la ubah kod warna #ff86a8




Save sahaja.

SIAPP!!
Eh, belum lagi..
Sila ke Settings / Comments

Tick Embedded below post untuk Comment Form Placement seperti gambar di bawah ini.



Itu sahaja :)
Selamat mencuba.

setiap hari duk buat tutorial je keje aku sekarang. Ada sapa-sapa tak suke? ;pKredit to Liyana Lunia, i love u lah sebab ajar Mommy Pinky :)

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Listing Comel

Masuk ke bahagian
Kemudian klik Add a Gadget
Pilih gadget seperti di bawah


Salin kod di bawah dan isi di ruang kotak ini


HTML Code pic anda<a href="url entry">Tajuk entry</a>

Tips:
Html Code untuk pic yang menarik/cute boleh usha di www.glitter-graphics.com

Contoh kod Mommy Pinky,

<img border="0" src="http://bit.ly/WqQaEU" /> <a href="http://www.mommypinky.com/2012/12/blouse-peplum-exclusive.html" target="_blank">Peplum Exclusive </a> 
<img border="0" src="http://bit.ly/WqQaEU" /> <a href="http://www.mommypinky.com/2013/02/peplum-lace-dania_5.html" target="_blank">Peplum Lace Dania </a>

Hasil seperti dibawah ini,

Peplum Exclusive
Peplum Lace Dania

Selamat mencuba :)

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Membuat blockquote

Blockquote ni memang cunn sangat kalau kita guna untuk highlight ayat dalam entry. Kalau korang rajin buat tutorial boleh jugak highlight kod html supaya mudah orang nak nampak kod mana perlu copy paste tu kan.

Contoh Ini Contoh

HAI SAYA CONTOH
YANG BACKGROUND BELAKANG NI HAA.

Cara nak buat mudah je. Sebelum tu, jangan lupa backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.


Cari kod di bawah

.post blockquote {

Tips senang nak cari kod,
Tengok keyboard korang, Tekan key Ctrl dan key F serentak.
Kalau guna Mozilla Firefox, korang akan nampak imej ni
Masukkan kod di ruang sebelah find, klik Next.

Gantikan kod

.post blockquote {
margin:1em 20px;
}

dengan kod dibawah ini

.post blockquote {
background: url(http://mykawaiistore.com/blockquote.png);
padding: 3px;
margin: 3px 3px;
border: 2px dotted #fff;
border-left: 5px solid #fbdceb;
border-right: 5px solid #fbdceb;
}

Untuk tambah efek hover bolehlah ditambah kod ini

.post blockquote:hover {
background: url(http://mykawaiistore.com/blockquotehover.png);
padding: 3px;
margin: 3px 3px;
border: 2px dotted #fff;
border-left: 5px solid #e6f6ee;
border-right: 5px solid #e6f6ee;
}

Siap ^^
Boleh ubah direct link yang berwarna merah untuk masukkan imej yang korang suka

Cara nak guna?
Bila nak letak kod atau tulisan atau apa-apa je la dalam blockquote, just highlight kan ia, dan klik simbol blockquote seperti di bawah


Nak tukar animated picture pun boleh

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Share & Like Facebook Button

Kelebihan button like & share ni ialah ia akan publish di facebook, kalau korang like entri tersebut. Dan kawan-kawan facebook lain akan teruja lah nak tengok apa yang korang like tu kan? So, traffic meningkat. Bagus kan?

Cara nak buat mudah je. Sebelum tu, jangan lupa backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.

Tandakan kotak Expand Widget Templates
Cari kod di bawah

<data:post.body/>

Tips untuk memudahkan pencarian,
Lihat keyboard korang, Tekan key Ctrl dan key F serentak.
Untuk pengguna Mozilla Firefox, korang akan nampak imej ni
Masukkan kod di ruang sebelah find, klik Next.
Paste kod ini selepas kod <data:post.body/> tadi.

Button Like

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=280&amp;height=24&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:280px; height:24px'/>

Button Share

<div style="float:left;padding:0px;"><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/><script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Siap ^^
Button like & share akan muncul dibawah entry secara automatik.
Kalau rasa nak letak button like dan share diatas setiap entry, paste kan sebelum kod

<div class='post-body entry-content'>

kredit to : www.liyanaa.com dan www.arcx13.com

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---

Ubah Smiley Cbox

Rasa nak buat tutorial pulak malam-malam gini. Kali ni nak share cara-cara ubah smilies @ emoticon di Cbox.

Ok,
Cbox yang memang dah sediakan smiley. Tapi versi yang boring macam ni.
Aloo, boringnyaa. Haha


So kita bagi gempak sikit jadi macam kat bawah ni ,


(Ini contoh Mommy Pinky punya tau!)

Caranya, gile kentang senang. Heh

Log In ke Cbox / Options / Smilies

Hasilnya seperti di bawah ni,

Tak payah teragak-agak REMOVE je semua smiley yang ada tu.
Ngahaha. Syuhh !



Ok, tiba masa nya untuk menggantikan dengan smiley yang lebih cute ;)
Bagi yang masih kurang arif bab url, Mommy Pinky cadangkan pergi ke emo.huhiho.com je.
Mommy Pinky tunjuk satu contoh ye.
Macam mana nak buat





Sila copy code Direct Link ye kawan-kawan

Paste code tadi pada bahagian URL
Jangan lupa tick dahulu Show Image Preview


Ruang code isi dengan smiley seperti ini :)
Ruang alt.code tu bolehla isi apa-apa yang sama maksud, contohnya hehe
Save!!

(updated : 14/06/10)
OPSS!!!
Mommy Pinky dapat banyak aduan, page emo.huhiho.com dah tak boleh view. Tak pe, Mommy Pinky akan tunjuk cara menggunakan image dari Glitter-Graphic. Lebih banyak pilihan lagi :)

Contoh : www.glitter-graphics.com/graphics/178500



Copy this HTML code to your (myspace) profile or website:
<a href="http://www.glitter-graphics.com"><img src="http://dl10.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif" width=50 height=50 border=0></a>

To post on Glitter-Graphics.com and forums, use this BB code:
[url=http://www.glitter-graphics.com][img]http://dl10.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif[/img][/url]


Url gambar boleh diambil dengan mudah melalui BB Code. Ia terletak antara [img]Url gambar[/img]

iaitu,

[url=http://www.glitter-graphics.com][img]http://dl10.glitter-graphics.net/pub/369/369170ouydbetbmz.gif[/img][/url]

url gambar adalah bahagian yang di bold kan
Seterusnya, cara adalah sama seperti diatas :)

Jadi, bila blogger lain datang komen, automatik akan keluar emoticon cute korang tu.
Selamat mencuba!


Sapa-sapa yang tak berjaya tu, cuba sampai dapat ye. Hehe

---

Dah habis baca ke? Jemput tinggalkan komen ◕‿◕

---