Kotak Komen Comel

ditaip Zana Mn jam 11:32 AM 63 komen





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;
}

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.

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.
Selamat mencuba ^^

Tutorial di rujuk di blog www.liyanaa.com tapi Mommy Pinky dah ubahsuai sedikit kod untuk sesuaikan dengan blog ini. Terima kasih :)








Listing Comel

ditaip Zana Mn jam 9:44 PM 10 komen






Listing Comel ni memang berguna kalau nak buat senarai yang kita suka. Boleh guna kod yang sama untuk di bahagian page dan posting juga. Bukan terhad di sidebar je, ok. Di bawah ni cara² nak buat listing comel di bahagian sidebar. Contoh yang Mommy Pinky buat listing comel di page boleh tengok di sini (klik)

Masuk ke bahagian
Kemudian klik Add a Gadget
Pilih gadget HTML/JavaScript, kotak seperti di bawah akan dipaparkan


Salin kod di bawah dan isi di ruang kotak ini
<img border="0" src="alamat link gambar" /> <a href="alamat link post">Tajuk Listing</a>

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 :)
Tips: Kod gambar yang menarik/cute boleh cari di www.glitter-graphics.com









Membuat blockquote

ditaip Zana Mn jam 6:16 PM 31 komen




Bagi sebahagian blogger blockquote sudah tidak asing lagi didengar namun bagi newbie korang patut mengetahuinya. Blockquote sangat berguna untuk highlight ayat di dalam artikel. Kebiasaannya, dalam blog ini, blockquote digunakan untuk highlight kod html di dalam tutorial.

Contohnya seperti di bawah
Bagi sebahagian blogger blockquote sudah tidak asing lagi didengar namun bagi newbie korang patut mengetahuinya. Blockquote sangat berguna untuk highlight ayat di dalam artikel. Kebiasaannya, dalam blog ini, blockquote digunakan untuk highlight kod html di dalam tutorial.

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 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.

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









Share & Like Facebook Button

ditaip Zana Mn jam 10:22 AM 40 komen





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








Ubah Smiley Cbox

ditaip Zana Mn jam 11:43 PM 21 komen





Di atas merupakan smiley yang original. Cbox ialah salah satu kotak chat percuma yang selalu diletakkan dalam blog untuk pelawat yang singgah ke blog kita tinggalkan mesej kepada tuan blog. Kalau blog korang masih belum ada kotak chat, bolehlah daftar di www.cbox.ws



Ini smiley yang dah diubah. Yang mana lebih menarik, mestilah yang ni kan?
Log In ke Cbox > Options > Smilies
Korang akan nampak smiley macam kat bawah ni



Dibahagian Use smilie set korang pilih Custom dan klik Apply


Sekarang, pergi ke www.glitter-graphics.com dan cari smiley yang korang nak.
Contoh : www.glitter-graphics.com/graphics/178500
Korang akan nampak smiley macam ni dan dua jenis kod seperti di bawah



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]

Untuk menggunakan smiley di atas, kita perlukan direct link kod imej atau url gambar.
Url gambar boleh diambil dengan mudah dengan HTML code atau BB code.
direct link kod imej berwarna merah.
copy kod tersebut dan masukkan di bahagian url seperti dibawah dan klik enter.



Seterusnya Save changes.
Klik New Row untuk tambah smiley yang lain.
Siap ^^

Pengguna chat box yang lain boleh cuba cara ni, lebih kurang je caranya









Favicon

ditaip Zana Mn jam 11:52 AM 47 komen






Ada dua cara mudah untuk ubah favicon.
Cara pertama, masuk ke bahagian
Pilih Gadget Favicon, Upload gambar.
Siap ^^




Cara kedua, backup dulu template tu ye.
Cara backup template,
masuk ke bahagian
Tengok sebelah kanan atas, klik
Klik
Save File.

Cari kod di bawah
</head>
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 sebelum kod </head> tadi.
Untuk ubah favicon cute, ganti je kod url imej yang berwarna merah.
<link href='http://mykawaiistore.com/fav1.gif' rel='SHORTCUT ICON'/>
Siap dah. Selamat mencuba ^^


Gambar cute boleh cari di www.glitter-graphics.com









Ubah Icon Sebelah Blog List

ditaip Zana Mn jam 2:12 PM 41 komen






Nampak tak ada icon sebelah sis, hubby dan bro tu?
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.
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.
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Delete semua code di atas, gantikan dengan kod di bawah
Untuk ubah icon cute, ganti je kod url imej yang berwarna merah.
gambar cute boleh cari di www.glitter-graphics.com

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url(http://dl8.glitter-graphics.net/pub/1866/1866928oi3l89co7v.gif) no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}

Ok, sekarang boleh klik
Seterusnya, masuk ke bahagian
Pilih Gadget Blog List


Perkara paling penting jangan tick ruang icon tu. Kalau tak, nampak icon tu je.
Siap dah. Selamat mencuba ^^


kredit to : www.mieyabubbletalk.com









 

Copyright © 2008-2017 By Zana Mn. All rights reserved | Sign in, MP Design