Ubah Lebar Gambar Dalam Entri

Ada entri dalam blog yang memerlukan anda untuk meletakkan gambar sebesar yang mungkin bergantung kepada ruang yang ada. Sebelum ini tutorial sudah menunjukkan bagaimana untuk memaparkan saiz yang maksimum untuk gambar yang telah diupload.


Untuk kali ini, tutorial akan menunjukkan bagaimana untuk menguruskan saiz gambar yang telah diupload. Ini kerana apabila gambar terlalu besar, maka ianya akan melebihi ruang yang sepatutnya untuk entri.

Terdapat 2 cara untuk tutorial ini.

Cara 1:
Masukkan width="200" ke dalam kod gambar.

Contoh:

<img src="URL GAMBAR" width="500" >

Nilai 200 boleh ditukar bergantung kepada lebar ruangan entri anda. Kebiasaannya lebar entri bagi ssebuah blog antara 400 hingga 500. Jadi anda boleh cuba mana yang sesuai.

Contoh gambar dengan width 400




Cara 2:
Masukkan width="95%" ke dalam kod gambar.

Contoh:

<img src="IMG URL" width="95%" >

Cara kedua mengunakan peratus untuk menentukan saiz gambar. Kalau anda memasukkan 95%, maka gambar yang terhasil akan mengambil lebar 95% daripada lebar sebenar ruangan entri anda.


contoh width 95%



-------------

p/s: height jarang dipertimbangkan kerana width yang lebih penting.

Selamat Mencuba.:)

Paparkan Saiz Gambar Maksimum Dalam Blog

Penggunaan saiz gambar juga penting dalam menghasilkan entri. Ada entri yang menggunakan gambar dengan saiz kecil, tetapi bagi yang menggunakan gambar saiz besar, mungkin menghadapi sedikit masalah kerana gambar yang dipaparkan tidak menggunakan ruang yang ada semaksimum mungkin.

Ini contoh gambar apabila menggunakan option image size : large.
Walaupun menggunakan option, large, tetapi gambar yang dihasilkan tidak menggunakan ruangan post dalam blog secara maksimum.


Berikut adalah cara untuk menghasilkan penggunaan gambar yang maksimum dalam blog.

Apabila anda upload gambar, akan keluar kod seperti ini.
Buang kod seperti yang telah di highlightkan.



Note :
- Tidak kisah berapa nilai width atau height, asalkan buang kod tersebut.
- utk nilai s400, ada juga nilai lain seperti s1600, s128 dan lain². Kod yang ada perlu buang ini terletak sebelum nama gambar yang anda upload.

Selepas kod dibuang untuk gambar di atas, gambar akan menjadi saiz mengikut saiz asal gambar. Contoh di bawah.


Note: Bila menggunakan kaedah ini, tidak kisah kalau anda menggunakan image option small, medium atau large. Asalkan anda buang kod tersebut, gambar akan jadi maksimum saiz.

Selamat mencuba.:)..

----------------

Masalah gambar terlebih besar apabila buang kod.?

Tunggu tutorial seterusnya.:)

Scroll Box untuk Widget

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.


Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.:) Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini kerana jika jumlah pengunjung yang meletakkan url adalah banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..

Senang bukan..:)

Misterlinky - cara mudah untuk pengunjung masukkan link di blog

Sesetengah pemilik blog akan memasukkan link pengunjung sebagai exchange. Cara ini bagus untuk meningkatkan trafik blog. Kebiasaanya, link pengunjung akan dimasukkan oleh pemilik blog.

Tetapi dengan misterlinky, pengunjung sendiri akan meninggalkan link blog mereka pada blog² yang meletakkan widget ini. Secara tidak langsung dapat memudahkan kedua-dua belah pihak, pemilik blog dan pengunjung blog.

Berikut contoh widget misterlinky ini.



Untuk mendapatkan widget ini, anda boleh dapatkan (daftar) di www.misterlinky.net/

Setelah selesai mendaftar dengan linkwinky, dapatkan kod HTML kemudian paste di bahagian page element blog anda.

Antara kelebihan menggunakan misterlink ini adalah widget yang simple dan mudah untuk memasukkan url blog. Pemilik blog juga senang untuk menguruskan widget ini(jika ada link yang tidak dikehendaki)

Letak Facebok Button 'Like' Dalam Blog

Meletakkan button 'like' dalam blog dapat memberi gambaran secara kasar samada penunjung anda menyukai entri yang ada di blog anda. Selain itu, penggunaan button 'like' ini juga sedikit sebanyak dapat meningkatkan trafik blog anda.

Anda boleh lihat contoh button 'like' di blog ini dan juga di unwanted86.


Cara-cara untuk meletakkan button like ini adalah seperti berikut.

1. Login akaun blogger, dari dashboard > design > edit HTML > expand widget templates
( backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod berikut.

<data:post.body/>

3. Kemudian copy kod ini, dan paste di bawah kod yang anda cari di langkah 2.

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

contoh:


4. Save dan lihat hasilnya.:)

Letak Facebook Share Button dalam Blog

Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.

Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook. selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah blog.

Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan juga ohbest.

Cara untuk memasukkan facebook share button ini adalah seperti berikut.

1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi.


Code untuk Full

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

Code untuk Compact

<div style="float:right;padding:4px;">
<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>

2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)

3. Menggunakan fungsi find (ctrl + F), cari kod ini.

<div class='post-header-line-1'/>

jika tidak jumpa, cari kod ini.

<div class='post-header-line-1'>

4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)

5. Save template dan lihat hasilnya.

Recent Post dengan Thumbnail Widget

Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

Contoh adalah seperti gambar ini.


Cara-cara untuk meletakkan widget ini adalah seperti berikut:

1. Dari dashoard > desin > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod berikut.

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://URL ANDA.blogspot.com/";

</script>

<script src="https://sites.google.com/site/unwanted86/javascript/recentpostthumnail.js" type="text/javascript"></script>

Note:

Anda boleh ubah beberapa kod mengikut kesesuaian blog anda.

boxwidth - lebar widget
cellspacing - jarak antara cell (default sudah ok)
borderColor - Warna background (untuk melihat senarai kod warna, RUJUK SINI)
thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
fntsize - Size untuk tajuk
acolor - Warna tajuk.untuk melihat senarai kod warna, RUJUK SINI)
aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
numposts - Bilangan recent post yang dikehendak
home_page : http://URL ANDA.blogspot.com/ (Gantikal URL ANDA dengan url blog anda)


3. Save dan lihat hasilnya.:)

-----------------

-Bagi yang buat tetapi tidak menjadi, dari dashboard > settings > site feed
- Pada allow site feeds, pilih FULL

Jadikan Cursor Anda Berkilauan (sparkle)

Tutorial ini akan menunjukkan bagaimana untuk menjadikan cursor anda menghasilkan 'bintang²' yang berkerlipan. Terdapat pelbagai jenis warna yang telah diletakkan untuk memudahkan pemilik blog sesuaikan dengan warna thema masing². Kata lain yang mungkin sesuai ialah untuk menjadikan cursor anda sparkle.(tak tahu istilah betul apa untuk effect ini.:)

Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)

Sebelum itu, tutorial ini juga boleh digambungkan dengan tutorial tukar cursor pada blog anda. Semestinya untuk menjadikannya lebih menarik. Sudah di'test' dan dibuktikan boleh.:)

Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Pada ruangan HTML/javascript, masukkan kod berikut.

<script src="URL JS" type="text/javascript"></script>

Note: untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki

Biru - https://sites.google.com/site/unwanted86/javascript/biru.js

Hitam - https://sites.google.com/site/unwanted86/javascript/black.js

hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js

Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js

Putih - https://sites.google.com/site/unwanted86/javascript/putih.js

Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js

Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js

Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js

Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:

<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script>

3. Apabila sudah masukkan kod, save dan lihat hasilnya..

Senang bukan.?
Selamat mencuba.:)

Top Commentor Widget

Siapakah yang paling kerap komen pada blog anda.? Jika itu persoalannya, widget ini adalah jawapannya.:). Widget top commentor ini merupakan antara yang paling 'lengkap' ada ketika ini untuk sesiapa yang menggunakan platform blogger.

Ini kerana, dengan widget ini anda boleh menentukan siapakan yang paling kerap komen dengan ciri-ciri tambahan tertentu iaitu anda boleh tetapkan samada komen untuk keseluruhan blog anda sejak diwujudkan, ataupun pada jangka masa yang tertentu seperti sebulan atau lain-lain jangka masa Selain itu, dengan widget ni, senarai pengomen yang anda tidak mahu masukkan dalam senarai pun boleh dikecualikan.

Tutorial untuk memasang widget top commentor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Paste kod berikut ke ruangan HTML/javascript

<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://URL ANDA.blogspot.com
&ExcludedNick1=NAME1
&ExcludedNick2=NAME2
&ExcludedNick3=NAME3
&ShowHowMany=10
&ExcludeCommentsBefore=08-01-2010 (i.e. 01-01-2010)
&IncludeCommentsBefore=08-31-2010 (i.e. 01-31-2010)
&_callback=getYpipe
&_id=932ec72eca30a5b8a83365f4eb4349cd
&_render=json"
type="text/javascript"></script>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/top-commentor-widget.html">Get this widget here</a></small>

Note:

i.Tukarkan URL ANDA dengan url blog anda

ii.NAME 1, NAME 2, NAME 3 - letakkan dengan nama yang anda tidak kehendaki. Anonymous automatic terkecuali, Untuk tahu senarai nama yang mungkin anda tidak mahu, savekan dahulu, apabila dipaparkan diblog,baru anda tahu. Jika tidak mahu abaikan bahagian ini.

iii.SHOW HOW MANY - gantikan dengan berapa bilangan yang anda mahu dipaparkan

iv.Comment Before: Contoh yang diberi adalah coment untuk bulan 8 sahaja. Jika mahu senarai pengomen dari keseluruhan, tinggalkan kosong bahagian ini


3. Apabila selesai, save dan lihat hasilnya.:)

Popular Post Dalam Blog (berdasarkan page view)

Sebelum ini sudah ada tutorial untuk widget popular post berdasarkan komen terbanyak yang terdapat dalam sesebuah entri. Untuk kali ini, tutorial adalah untuk memasukkan popular post berdasarkan kepada jumlah bilangan page view bagi sesebuah entri.

Widget ini agak simple, diambil dari foxrecord.com. Widget ini akan berfungsi serta merta sebaik sahaja kod diletakkan di blog.

Tutorial untuk meletakkan widget ini adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod berikut ke ruangan HTML/javascript(tidak perlu ubah apa-apa)

<script src="https://sites.google.com/site/unwanted86/javascript/toppostpageview.js" type="text/javascript"></script>

3. Save dan lihat hasilnya. (anda mungkin perlu klik pada 3/4 link dalam blog anda untuk ianya terus berfungsi)


Note:
1:Jumlah popular post yang ditetapkan hanya 5.
2:Post terus diletakkan berdasarkan ranking tanpa memaparkan bilangan page view.

Selamat mencuba.:)

Animated Recent Post Widget

Update: Bagi sesiapa yang menghadapi masalah background widget ini tunjuk 'bandwidth exceed", boleh copy semula kod dibawah, dan masukkan semula url anda..

Kesulitan dikesali.


Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

(tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


Berikut adalah cara-cara untuk menggunakan widget ini.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. copy code berikut dan paste di ruangan HTML/javascript

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>

Note: gantikan URL BLOG dengan url blog anda..

3. Save dan lihat hasilnya.

-------------------

PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

Harap blog anda boleh menggunakan widget ini.
Selamat mencuba.:)

Tukar Cursor Untuk Blog Anda

Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telah diwarnakan seperti dibawah

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.

Mudah bukan.:)

Letak Widget Popular Post Dalam Blog

Anda menaip blog, tetapi adakah anda tahu dalam banyak-banyak entri yang anda ada, entri manakah yang paling popular.? Entri manakah yang mempunyai komen paling tinggi.? Tentu sukar untuk menentukan apatah lagi jika anda sudahpun mempunyai entri sehingga mencapai ratusan.:)


Tutorial kali ini akan menunjukkan cara bagaimana untuk meletakkan popular post( atau anda boleh panggil dengan nama lain) pada blog anda. Widget popular post ini adalah berdasarkan bilangan komen yang ada pada entri, bukannya berdasarkan page view. Dan semestinya tutorial ini adalah mudah sahaja.:)

1. Login akaun anda, dari dashboard > design > add a gadget > HTML/javascript

2. Dalam ruangan HTML/javascript, masukkan kod di bawah.

<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://URL BLOG.blogspot.com/";
</script>
<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>
</ul><br/><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>

Note:
-tukarkan URL BLOG dengan nama blog yang anda guna
-maxshowresult=5; tukarkan 5 dengan bilangan popular post yang anda mahu

3. Save dan lihat hasilnya..:)

Letak Button Back To Top

Meletakkan button 'back to top' biasanya digunakan untuk blogger yang kebiasaannya mempunyai entri yang panjang, ataupun entri blog tersebut sentiasa mempunyai komen yang banyak atau mungkin juga sebagai penyeri agaknya.:)
anda boleh melihat contoh back to top button di blog demo ini.



Walaupun terdapat pelbagai cara yang agak advance dengan kesan yang lagi hebat-hebat, tetapi entri ini akan menunjukkan cara yang paling ringkas untuk meletakkan button back to top ini. Tidak perlu pening kepala kerana ia hanya menggunakan beberapa step sahaja.:)

Berikut adalah tutorial untuk meletakkan button back to top dalam blog.


1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript

2. Paste kod di bawah ke dalam ruangan html/javascript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>

Masukkan url gambar dengan url gambar 'arrow back to top' anda.

Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.


http://img338.imageshack.us/img338/9871/2evyotw.gif


http://img132.imageshack.us/img132/5848/totopbutton.png


http://img175.imageshack.us/img175/7297/up3.png


http://img28.imageshack.us/img28/2494/30720265.png


http://img529.imageshack.us/img529/1986/96133335.png


http://img294.imageshack.us/img294/9831/14193731.gif

3. Apabila selesai save dan lihatlah hasilnya.:)

Cara Buat Textbox Dalam Blog

Membuat 'kotak' untuk apa sahaja yang anda ingin pamerkan dapat memudahkan para pengunjung untuk mengambil apa yang anda hendak kongsi, kebiasaannya kod atau mungkin juga lain-lain.

Contoh textbox sedia ada adalah textbox untuk code banner blog ini yang kelihatan di sebelah kanan blog ini.Textbox menjadikan code senang dicopy oleh pengunjung anda dan pada masa yang sama menampakkan kekemasan untuk meletakkan code dalam blog anda.


Tutorial ini akan menunjukkan kepada anda asas kepada textbox ini serta beberapa penambahan yang boleh dilakukan untuk memudahkan pemilik blog ataupun pengunjung.

Contoh kod yang hendak diletakkan didalam textbox adalah seperti berikut.

<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank">
<img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" />
</a></center>

1. Asas bagi textbox adalah.

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;">MASUKKAN KOD ANDA DISINI</textarea>

Note:
height: 100px; > Gantikan dengan ketinggian yang anda kehendaki
width: 200px; > Gantikan dengan lebar yang anda kehendaki
background: #8CEFFD; Gantikan warna background dengan kod tertentu. Untuk kod warna, rujuk disini.

Contoh bagi kod di atas.
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

2. Untuk buatkan semua kod tersebut di'select' dengan hanya sekali klik pada textbox. Kodnya adalah:

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onclick="this.focus();this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

Contoh textbox jenis ini adalah seperti berikut.
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

3. Untuk buatkan kod di'select' dengan hanya lalukan tetikus adalah seperti berikut

<textarea style="height: 100px; width: 200px; overflow: scroll; background: #8CEFFD;" onmouseover="this.focus()" onfocus="this.select()" >MASUKKAN KOD ANDA DISINI</textarea>

contox textbox jenis ini adalah
<center><a href="http://tutorialuntukblog.blogspot.com/" target="_blank"><br /><img src="http://4.bp.blogspot.com/_CEj8AwvwSNM/S4HEBN0gvhI/AAAAAAAAD8M/jFmA9RrjUA0/s400/blog+tutorial+bahasa+melayu.PNG" /><br /></a></center>

Mudah bukan.?
Kini anda boleh meletakkan kod didalam blog anda dengan lebih mudah dan kemas.

Selamat mencuba.:)

HTML Color Codes

Kod warna adalah penting untuk memasukkan warna background ke dalam sesuatu kod samada untuk pengubahsuaian layout atau penambahan gadget tertentu.


Berikut adalah kod warna yang ada untuk memudahkan semua sebagai rujukan.

Letak 'Recent Comments' dalam Blog

Meletakkan 'recent comments' adalah cara yang paling mudah untuk mengetahui entri manakah yang paling latest menerima komen samada dari pengunjung blog ataupun tuan punya blog.



Walaupun terdapat pelbagai cara untuk meletakkan 'recent comments' ini, tetapi cara yang akan ditunjukkan ini merupakan antara cara paling ringkas untuk meletakkan widget ini.

Tutorialnya adalah seperti berikut.

1. Login akaun blogger, kemudian dari dashboard > Design > add a gadget >HTML/javascript

2. Kemudian masukkan kod di bawah ke dalam HTML/javascript

<script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://URL blog anda/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-recent-comments-dalam-blog.html" target="_blank"/>Get widget here </a></small>

Nota: tukarkan URL blog anda dalam kod di atas dengan url blog anda.

3. Save dan tengok hasilnya..:)


TAMBAHAN:Ubahsuai juga boleh dilakukan seperti berikut.

1. Jumlah komen yang ditetapkan untuk dipapar adalah 5. Anda boleh mengubah bilangan komen yang dipaparkan. Lihat kod dibawah sebagai rujukan. Bilangan yang dicadangkan adalah antara 4 - 8

....a_rc=5;var m_rc=false...

2.Jumlah perkataan yang ditetapkan untuk satu comment adalah termasuk nama pengomen adalah 100. Anda boleh menukar jumlah tersebut mengikut keselesaan anda.

var o_rc=100;

3. Tarikh untuk komen juga boleh ditambah. Caranya tukar perkataan dalam kod berikut daripada false kepada true.

var m_rc=false;var n_rc=true;var o_rc=100

Selamat mencuba..:)

Letak Background Gambar Pada Blockquote

Sebelum ini sudah ada tutorial untuk menukar warna background bagi blockquote. tetapi untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa


Contoh background dengan background bergambar




Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kemudian di bawah kod tersebut, letakkan kod ini.

background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut


5. Apabila selesai, save template dan lihat hasilnya.:)

Cara dapatkan url gambar

Apabila menguruskan sesebuah blog, tidak akan terlepas untuk meletakkan gambar. Mungkin tujuan untuk meletakkan gambar adalah pelbagai, tetapi perkara penting untuk diketahui adalah url gambar. Url gambar boleh dikatakan sebagai 'alamat' kepada sesebuah gambar.

Sebagai contoh, untuk gambar ini, urlnya adalah ini http://3.bp.blogspot.com/_CEj8AwvwSNM/S7jQoxh5CBI/AAAAAAAAENA/UZiN0WCeDpE/blog+tutorial+bahasa+melayu.PNG

Walaupun anda boleh mengupload gambar menggunakan kaedah yang sudah tersedia, tetapi ada kalanya anda memerlukan url bagi sesebuah gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog.

Persoalan asas, bagaimana untuk mengetahui url bagi sesebuah gambar yang sudah tersedia dalam laman web.

Sebagai contoh gambar tadi, bagaimana untuk mendapatkan urlnya.
Disini diletakkan cara yang digunakan untuk beberapa browser yang berbeza.

Caranya mudah, pada gambar yang anda kehendaki dalam sesebuah laman web, right click pada gambar tersebut dan pilihan ada berbeza seperti yang ditunjukkan di bawah.

FIREFOX

GOOGLE CHROME

OPERA

SAFARI

INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)




-----------------------------
anda boleh cuba samada berjaya dengan masukkan url gambar dalam kod ini kemudian test pada ruangan post entri anda.

<img src="Masukkan URL gambar disini" />

p/s: perlu diberi perhatian ada sesetengah laman web yang anda tidak boleh copy gambar-gambar mereka seperti fotography dan lain². Tetapi rasanya kebanyakan tiada masalah asalkan mendapat kebenaran daripada empunya.

Letak sistem rating pada blog

Adakah anda rasakan pengunjung blog anda menyukai entri yang anda post dalam blog anda.?
Bagaimana anda menentukan samada mereka suka atau tidak entri pada blog.? Adakah semata² melalui komen yang di hantar.?

Kini dengan menggunakan sistem rating, anda dapat menilai tahap 'kesukaan' pengunjung blog anda terhadapa entri yang anda taip dengan lebih stylo.:)


Contoh sistem ini telah diletakkan di test blog

Cara untuk letak sistem ini agak senang kerana tidak memerlukan anda untuk ubah code html anda, semuanya tersedia dan anda hanya perlu ikuti beberapa langkah berikut.


1. Login akaun blogger anda.

2. Buka web http://www.outbrain.com

3. Pada paparan pilih option yang anda.

-->Digalakkan untuk mendaftar untuk mendapatkan maklumat rating dan juga (paling penting bagi aku) untuk membuang 'related post' yang didatangkan secara automatic dalam sistem ini.


4. Klik install dan paparan baru akan muncul


5. Pada paparan, pilih blog anda kemudian klik 'add widget'.


6. Selesai. (Anda boleh buat pengubahsuaianan daripada akaun yang anda telah buat sebelum ini)

Youtube : Video Player kepada MP3 Player

Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin mempersembahkan 'lagu' sahaja kepada pengunjung.

Tutorial ini akan menerangkan bagaimana untuk menjadikan video dari youtube kepada bentuk mp3 player.


Contoh anda ingin menukarkan video ini dalam bentuk mp3 player.


kepada


-----------
Tutorial untuk menukarkan keadaan ini adalah:

1. Dapatkan link video (URL) dari youtube.

Contoh untuk lagu di atas:
http://www.youtube.com/watch?v=_eYj0B5LwOo

2. Buang 'watch?' dan gantikan '=' kepada '/'

Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo

3.Masukkan link yang anda telah ubah ke dalam kod berikut.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>

contoh untuk kod di atas.

<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>

4.Dan hasilnya.



Senang bukan.?.:)