Cara Menukar Icon Pada Address Bar

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu). Contohnya disebelah alamat Ana ada icon greenstar dan jika di Blogspot maka icon default yang akan timbul adalah gambar seperti ini : Ini namanya "Favorite Icon/Favicon"

Kalau rasa nak tukar dengan icon/gambar yang kita inginkan, caranya sangat mudah, cuma dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira-kira 50x50 pixel (sebenarnya tiada ukuran yang tepat, cuma kita nakkan file yang lebih kecil dan cepat dibuka). ok .....next masuk ke "Layout => Edit HTML" pastu copy kode dibawah dan pastekan sebelum kode</head>

<link href='http://almansuqie-tips.com/starstar21.gif' rel='SHORTCUT ICON'/>

Tukar text yang ditebalkan dengan warna biru dengan link gambar/icon yang sudah Antum uploadkan. Ana biasa upload di Photobucket dan juga di Imageshack..Kalau Antum nak upload kat tempat lain pun boleh. Asalkan dapat link gambar tu.

ok setle...Selamat mencuba!!

Cara Membuat Brilliant Button

Ini antara contoh Brilliant Button. kita boleh gunakannya untuk membuat button link kita sendiri atau apa saja laman yang kita rasa berguna untuk disimpan. Untuk membuatnya Antum boleh pergi ke dua laman ini.

LucaZappa.com
Button Maker

Setelah button siap direka, iaitu pada pilihan warna, text dll maka savela button tersebut ke dalam komputer Antum. Pastu upload button tersebut untuk dapatkan linknya seterusnya ditambah ke dalam blog. Boleh upload di Photobucket atau Imageshack

Memasang Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Kalau nak emoticon lain Antum boleh ke Chokilala.com. Disana ada macam² emoticon yang comel dan menarik. Chokilala memang pandai buat emoticon. Ok untuk yang ini, caranya begini..

Tutorial ini memerlukan kepada langkah berikut:-

1. Menggunakan Web Browser Firefox, mesti guna Firefox, yang lain tak boleh.. nak pulak IE yang kurang best tu. Maka bertukarla ke Firefox. Download Sini. Pastikan sudah menggunakan Firefox untuk step seterusnya.

2. Memasang Add-ons Greasemonkey. Kalau belum Install Disini. Senang aje. Ikut arahannya. Bila selesai, akan muncul icon kepala monyet yang berjambul dibawah.

3. Seterusnya install script emoticon Yahoo! Messenger dengan mengetik Script Ini. Bila keluar satu kotak, klik pada Install.

Ok selesai.. Emoticon sudah wujud di post editor Antum. Selamat beremosi dalam menulis.

Tambahan: Kalau gambar di posting Antum telah diborderkan, maka setiap emoticon yang ditampilkan akan berserta dengan border. Untuk hilangkan border tersebut, tambahkan kode ini sebelum ]]></b:skin>

img.emoticon {
border: 0;
}

Menambah Icon Di Sidebar Link

Nak kasi link di sidebar lebih menarik?? Ok kita boleh tukar Icon yang sedia ada atau tambah Icon baru. Caranya mudah saja..

1. Macam biasa Loggin ke Blogger => Layout => Edit HTML. Cari kode dibawah.

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

2. Dah jumpa?? Tukar kode diatas seperti dibawah.

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("Alamat Gambar Disini") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}

3. Gantikan tulisan berwarna merah dengan URL gambar/icon Antum. Tulisan hijau adalah border/garisan dibawah link.. Kalau Antum xnak kasi buang saja.

Ok Done...

Memasang Icon Back To Top

Icon back to top ini sebenarnya berguna untuk melakukan lompatan dari halaman paling bawah menuju halaman paling atas, jadi Antum tidak perlu lagi menggunakan scrollbar pada browser.Caranya memasangnya pun sangat mudah.

1. Loggin ke Blogger => Layout => Edit HTML, kemudian letakan kode dibawah ini diatas tag </body>

<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='http://i302.photobucket.com/albums/nn113/aburifaie/Jumptotop2.gif'/></a>

2. Simpan template dan lihat hasilnya..Kalau nak tukar icon gantikan text yang berwarna merah.

Sumber: o-om.com

Cara Menukar Tarikh Posting kepada Icon Kalender

Langkah pertama ialah kita mesti menukar format tarikh terlebih dahulu, caranya seperti biasa Login dulu ke blogger seterusnya pilih Settings-->Formatting, gantikan"date header format" atau "format tarikh menjadi (mm.dd.yyyy) pilih yang formatnya bulan.hari.tahun contohnya (1.13.2008) ...perhatikan betul-betul kat sini, kalau silap pilih nanti ade masalah dengan icon kalendar tu, kalau dah yakin betul klik save.

Langkah yang kedua pilih menu Layout => Edit HTML . Jangan lupa tandakan pada kotak Expand Widget Templates. Sebelum tu, kalau nak selamat sila back up template ataupun Download Full Template.

Kemudian cari kode ini <TITLE><data:blog.pageTitle/></TITLE>(tempatnya dibahagian paling atas) kalau dah jumpa, letakkan script berikut ini dibawahnya.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://almansuqie-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. Kemudian cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalau tidak ada cuba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalau dah jumpa letakkan script berikut dibawahnya

.dateblock {
background: url("http://www.geocities.com/almansuqie08/yellowcalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://www.geocities.com/almansuqie08/yellowcalend.gif adalah gambar icon kalender. Antum boleh menukarkannya dengan gambar-gambar dibawah ini. Caranya gantikan bahagian yang diboldkan dengan kode gambar berikut ini, contohnya, kalender yang berwarna merah, caranya Antum ganti text bluecalend.gif dengan redcalend.gif. ok.

blackcalend.gif	blue2calend.gif	bluecalend.gif
greencalend.gif	orangecalend.gif	pinkcalend.gif
redcalend.gif	ungucalend.gif	yellowcalend.gif

Seterusnya kode color:#3366CC; adalah kode warna
tarikh, Antum boleh tukarkan dengan warna yang lain. Kode warna DISINI.

4. langkah selanjutnya cari kode ini <data:post.dateHeader/>, kalau nak mudah copy kode tersebut, kemudian tekan Ctrl-f dan paste di dalam kotak yang disediakan, terus jumpa kan. Pastu gantikan kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template Antum dan lihatlah hasilnya. menjadi ke tidak?

Kalau tulisan bulan dan tarikhnya terlalu keatas cuba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

6. Kalau tarikhnya berubah menjadi tulisan "Undefine" mesti Antum tidak memperhatikan tutorial ini betul-betul. Cuba lihat lagi tutorial ini dari awal dan ikut stepnya betul-betul. ok.

semoga berjaya..