AlmansuQie™ Tips & Tutorial Blog

Memasukkan Quran dalam PowerPoint

2010-11-01T17:59:00.005+02:00

Assalamualaikum...Ana rasa mungkin ramai dikalangan kita yang mengalami kesulitan untuk memasukkan penulisan al Quran dalam Microsoft Power Point.. Ana pun pening bila nak buat slide yang memerlukan ayat2 quran. Bila guna cara copy paste biasa ayat quran akan jadi terbalik. Cari punya cari jumpa satu cara yang Ana kira paling mudah dan disukai ramai. Nak tau ikut step dibawah.

1. Buka perisian Microsoft Word...

2. Klik kat Add-Ins => Quran..Kalau xde download kat SINI. Extract file guna Winrar. Install Quran tersebut..

Get All : Untuk Ayat al-Quran dan Terjemahan.
Get Ayat : Untuk Ayat al-Quran sahaja.
Get Terjemah : Untuk Terjemahan sahaja.

3. Pilihla surat dan ayat yang nak dipaparkan. Pastu editla ayat2 tu kasi cantik, tukar color ke ape ke, ikut suka la..sebagaimana yang dikehendaki pada slide nanti.

4. Pastu klik Ctrl+A dan Copy ayat2 tersebut.

5. Buka Perisian Microsoft PowerPoint.

6. Pada ruangan Home > klik tanda anak panah di bawah fungsi Paste => pilih => Paste Special => Paste as : Picture (Enhanced Metafile) atau Microsoft Office Word Document Object.

7. Dah siap.......Selamat Mencuba

Cara Memasang Total Post & Total Komen

2010-04-24T10:40:00.004+02:00

Assalamualaikum..Pekabor semua?? Sebagai permulaan setelah lama meniggalkan dunia blogging..kira post pertama yang ditulis di tanahair ni..kita mula dengan perkara mudah aje..Pasang Total Post dan Total Komen.

Macam biasa dalam keadaan Loggin. Copy kod2 dibawah dan paste di Add a Gadget => HTML/Javascript.

Gantikan text merah dengan nama blog Antum..Dah siap klik save yer..

Alamat Blog Ini Diciplak !!

2009-09-10T14:34:00.004+02:00

Untuk makluman semua..Alamat blog ni telah diciplak.. Ana baru dapat tahu tadi. Dengan hanya kesalahan pada satu huruf akan membawa anda ke laman Mega Site of Bible Studies and Information.

Cuba klik link ni http://almansuqie-tips.blogpot.com

Cuma sebagai peringatan pada pengunjung & mengelakkan fitnah. Untuk masuk ke blog ni pastikan alamat diisi dengan betul. Alamat diatas hanya ditulis dengan blogpot. Tanpa huruf S. Ana sangat kecewa dengan keadaan ini.

Harap Maklum..

Blog Ini Akan Ditutup !!!!!! Yahoo!

2009-09-06T10:46:00.009+02:00

Assalamualaikum... Rasanya dah lama sangat tak update blog ni dengan tutorial dan tips. Dan rasanya banyak soalan dan permintaan yang belum dijawab dan ditunaikan. Ape² pun bebanyak terima kasih kepada pengunjung setia blog ini yang masih sudi datang walaupun sudah lama tidak dikemaskini.

Nampaknya minat untuk membikin blog semakin meningkat. Follower blog ini pun dah melebihi 200 orang. Ana mintak maaf kalau ade soalan berbentuk email yang tidak terjawab. Pertanyaan di Cbox yang tidak sempat dilayan. YM yang tidak direply. Komen tanpa respon dan juga permintaan untuk mencantikkan blog yang tidak dibalas.

Untuk makluman, AlmansuQie Blogger Services terpaksa Ana hentikan setakat ini dan akan beropersi semula di lain waktu jika diizinkan Allah.
Sebenor-benornye... Kami akan pulang ke tanahair tidak lama lagi. Jika diizinkan akan berangkat sebelum Raya Fitrah ini.. Ini la sebabnya dah lama xngadap blog. Terpaksa menguruskan dan menyelesaikan segala urusan disini.

Ermm..Pada sahabat semua mintak doakan segala urusan kami dipermudahkan. Kalau ada masalah dalam mengedit blog boleh tinggalkan komen pada tutorial yang sepatutnya.. Insyaallah Ana akan kembali mengaktifkan blog ini di Malaysia nanti.

Jangan percaya tajuk post ni ek.. saje wat gempak..Ana xkan tutup. Ini ruang kita berkongsi maklumat dan banyak manfaat kan.. Gunala yang mana ada di dalam blog ini yer.. Segala kekurangan harap dimaafkan.

Sekian.. Thanks to all... Syukran 3ala Hudhurikum..

Adobe Photoshop 7 ME (Arabic)

2009-08-22T16:36:00.009+02:00

Bagi yang berminat dengan perisian photoshop, Ana hadiahkan dengan software Adobe Photoshop 7 ME (Middle Eastern). Photoshop 7 ME ini available untuk banyak font termasuk Arabic. Lebih memudahkan Antum untuk membuat sebarang design menggunakan tulisan Arab. Klik link dibawah untuk Muat Turun.

Adobe Photoshop 7 me.part1.rar
Adobe Photoshop 7 me.part2.rar

Pas klik link diatas akan muncul laman 4shared. Klik butang download seperti dibawah.
Kemudian akan loading beberapa saat. Dah siap klik link macam kat bawah ni yerk.

Syukran Ila: Banatien

Cara Memasang Meta Tag Di Blog

2009-07-27T16:29:00.009+03:00

Rasanya meta tag ni dah kurang popularnya. Tapi masih boleh digunakan untuk memudahkan blog kita diindeks oleh enjin pencarian like Google, Yahoo!, MSN, Amazon dan macam2 lagi.. Tapi jangan ingat bila dah pasang Meta Tag ni blog kita sudah mesra dengan enjin pencarian. Tapi ini salah satu cara untuk blog kita mudah diindeks. Ha ini soalan abang Man kita..

man: tuan, mcmana nak masukkan meta tag dlm blog...free punyer bleh? dah cuba try test tp xjd2 pun...

Ni cara pasangnye..Loggin ke Blogger. Pilih Layout dan kebahagian Edit HTML. Cari kod ni. Dibahagian paling atas.

Tukar text merah bersesuaian dengan blog Antum. Lihat Contoh:

Dah siap klik Preview. Kalau xde error klik Save yer..

Widget Posting Terkini Bergambar

2009-07-25T20:56:00.000+03:00

Sebelum ini Ana ada 'post'kan Cara Menampilkan Posting Terkini. Untuk kali ini ada sedikit kelainan. Widget terbaru ciptaan Kranthi ni memang cool la. Siap dengan gambar thumbnails dan bilangan komen sekali. Ana pun terus beralih ke widget ini.

Ok caranya. Dalam keadaan Loggin. Layout => Page Elements => Add a Gadget => HTML/Javascript. Tambahkan dengan kod berikut.

Keterangan:

boxwidth - Lebar Widget Ini (Tukar sesuai dengan sidebar Antum)
bgTD - Warna background (Tukar sesuai dengan template Antum)
borderColor - Warna Border (Tukar dengan warna yang Antum suka)
thumbwidth & thumbheight - Lebar dan Tinggi Gambar (yang asal dah ok)
fntsize - Saiz tulisan untuk tajuk post.
acolor - Warna tajuk post.
aBold - Untuk tebalkan tajuk atau tidak. (true atau false)
numposts - Jumlah post yang ingin dipaparkan.
home_page : http://almansuqie-tips.blogspot.com (Tukar dengan alamat blog Antum)

Edit apa2 yang patut yer.. Kalau nak guna kod warna klik SINI. Dah siap save.

p/s : Pastikan Antum pilih YES pada Settings => Site Feed => Full => Allow Blog Feeds.

Sumber Asli : Bloggertriks

Memasang Email Form Pada Blog

2009-07-19T16:45:00.003+03:00

Satu laman yang berjudul EmailMe Form ini menyediakan satu layanan percuma untuk kita membuat emel form dan boleh disumbatkan kedalam blog atau web masing2. Untuk mudah difahami, sesiapa pun boleh menghantar sebarang maklumat ke emel kita terus dari blog. Contoh klik SINI. Boleh juga diletakkan terus formnya begini.. Ini cara membuatnya.. Masuk kelaman EmailMeForm ini. Klik sign up for free disebelah kanan.

Lengkapkan maklumat di ruangan seperti diatas. Dah siap, klik sign up dan kod pengaktifan akan dihantar ke emel Antum. Buka emel Antum dan aktifkannya.

Setelah sign in. Klik Create New Form di halaman panel Antum.

Lengkapkan maklumat pada step pertama ini.

Dah siap klik lagi next hingga selesai sampai step keenam.. Ana xdapat nak tunjuk satu2.kalau xfaham boleh tinggalkan komen yer..

Hide/Show Elements Di Sidebar

2009-07-09T08:27:00.005+03:00

Pernah tengok expandable posting x? Contoh kat blog Ana yang ini AlmansuQie. Cara membuatnya disini. Ok, kali ni kita nak buat hide/show widget pada sidebar pulak. Sekaligus dapat menjimatkan ruang. Redhwan ade tertanya2. Boleh juga gunakan cara ini untuk hide/show pautan.

Redhwan: Assalamualaikum..Tanye sikit, macam mana nak buat pautan kita pada sidebar boleh expand dan collapse macam blog archive?

1. Pertama masuk ke Layout => Edit HTML dan tambahkan kod berikut selepas kod ]]></b:skin>.

2. Klik save template dan selesai di bahagian ini. Pergi ke bahagian page Elements => Add a Gadget => HTML/Javascript. Tambah kod ni..

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Pautan</a></ul>
<ul class="texthidden" id="keyword">
<li><a href="http://link.com">Link 1</a></li>
<li><a href="http://link.com">Link 2</a></li>
<li><a href="http://link.com">Link 3</a></li>
<li><a href="http://link.com">Link 4</a></li>
<li><a href="http://link.com">Link 5</a></li>
</ul>

4. Tukarkan link2 berwarna merah dengan link Antum yer.. Text biru mesti nama yang sama. Warna ungu boleh ditukar jadi perkataan atau gambar. Yang ni khas untuk pautan. Untuk sembunyikan widget pulak buat macam ni.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Cbox')"> [+/-] Kotak Jerit</a></ul>
<ul class="texthidden" id="Cbox">
...............kod cbox disini...............
...............kod cbox disini...............</ul>

5. Macam tu la jugak pada mana widget yer. Siap!! Selamat mencuba!!

Cara Justify Text Di Sidebar

2009-07-08T10:36:00.006+03:00

Biasanya text2 yang ada disidebar akan berada di posisi kiri. Memang kurang menarik. Samada text menggunakan gadget text, HTML/Javascript atau Bloglist. Kita boleh justifykan text tersebut dengan beberapa cara. Ada 3 cara yang biasa Ana gunakan. Sebenarnya nak jawab soalan Man di Cbox ni..

man: tuan, mcmana nk buat text yg kita create dlm gadget supaya center alignment atau justified? text nmpak xmnarik sbb tersandar sebelah kiri je...

Ok...kita boleh justify pada semua text di sidebar atau pada widget2 tertentu saja. Kalau nak justifykan semua, cari kod berikut dalam Edit HTML Antum.

.sidebar {
......
......
text-align:justify;
}

Tambah saja kod merah seperti diatas.

Kalau nak justifykan pada widget tertentu, boleh pilih 2 cara ni.

Antum bukak Layout => Add a Gadget. Pilih HTML/Javascript atau Text. Masukkan kod merah seperti contoh dibawah.

<div style="text-align: justify;">The Al-Qur'an is fully Approved by THE MINISTRY OF HOME AFFAIRS MALAYSIA (KDN) with assistance from THE DEPARTMENT OF ISLAMIC DEVELOPMENT MALAYSIA (JAKIM)
(Ref. No. KDN.Q.03/914/2.3/Q/77/98)</div>

Cara kedua ni pening sikit yer..Kalau susah guna aje 2 cara diatas. Masuk ke Edit HTML dan cari id untuk widget text Antum.. Lihat contoh.

<b:widget id='BlogList1' locked='false' title='' type='BlogList'/>
<b:widget id='HTML2' locked='false' title='Laman Pilihan' type='HTML'/>
<b:widget id='Text3' locked='false' title='Hadis' type='Text'/>

Text merah tu contoh id untuk BlogList Widget. Biru untuk id HTML/javascript. Ungu untuk gadget text.

Jika sudah dikenalpasti widget yang ingin dijustifykan, tambah kod begini sebelum kod ]]></b:skin>.

#BlogList1 {
text-align:justify;
}
atau

#HTML2 {
text-align:justify;
}
atau

#Text3 {
text-align:justify;
}

Preview dan lihat hasilnya.. Kalu jadi save la.

Ok selesai, harap membantu. Pilih mana2 cara yang mudah. Selamat mencuba!!

Link Dibuka Dengan New Tab

2009-07-07T02:29:00.005+03:00

Sebarang link yang ditambah dalam blog kita samada dibahagian sidebar, posting, atau dimana saja adalah boleh dibuka dengan tab yang baru.. Dengan cara yang sangat mudah. Semudah mengupas kekacang.. Ok untuk yang belum tahu boleh rujuk cara ni yer..

Boleh gunakan salah satu kod dibawah.

1. target="_blank"
2. target="_new"

Caranya, tambah kod diatas tu pada akhir setiap alamat. Contoh dibawah.

1. <a href="http://almansuqie-tips.blogspot.com" target="_blank">
2. <a href="http://almansuqie-tips.blogspot.com" target="_new">

Tambah la kod tu kat mana2 je link yang kita nak bukakan di tab yang baru.. Kat tab vertikal pun boleh yer abang man.

Request Tutorial & Pertanyaan Disini

2009-07-06T13:00:00.001+03:00

Ruangan ini untuk sesapa yang nak mintak tunjuk ajar peribadi berkenaan blog masing2. Atau ada pertanyaan berkenaan kod HTML yang payah untuk Ana jelaskan di Cbox. Mana2 kod atau script yang berkaitan akan Ana post disini. Pertanyaan dari Man...Masalah pada menu vertikel..ade icon yang menghiasi.

Man: tuan, tolong saya buat menu tab vertical...dah copy paste tp ada prob skit dgn display dkt blog...easyreadquran.blogspot.com...tq.

Cari kod ni dalam template kamu Man...

.sidebar ul li {
list-style: disc url(http://www.blogblog.com/moto_son/diamond.gif) inside;
vertical-align: top;
padding: 0;
margin: 0;
}

Delete kod berwarna merah..Insyaallah akan hilang icon tu..

kamsiah: salam...akak nak tanya,boleh ke akak 'hilangkan' link tab yg dah disediakn kat tempalte akak..kalau boleh camner caranya?

Ok kak.. buang salah satu dari kod berikut..

-------------tab akak yang atas------------------

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://kamsiah-yusoff.blogspot.com/'>Home</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/feeds/posts/default'>Posts RSS</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/feeds/comments/default'>Comments RSS</a></li>
<li><a href='#'>Edit</a></li>
</ul>
</div>
<div id='NavbarMenuright'>

<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>
</div>
</div>

-------------------Ni UNTUK TAB YANG BAWAH---------------------

<div style='clear:both;'></div>
<div id='outer-wrapper'><div id='wrap2'>
<div id='content-wrapper'>
<div id='navigation'>
<ul>
<li class='selected'><a href='http://kamsiah-yusoff.blogspot.com'>Home</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/2008/03/awards.html'>Awards and Gift</a></li>

<li><a href='http://kamsiah-yusoff.blogspot.com/2008/03/photo.html'>Photo's Gallery</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/2009/03/resepi.html'>My Recepies</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/2008/03/hobi.html'>Hobbies</a></li>
<li><a href='http://kamsiah-yusoff.blogspot.com/2008/03/buku.html'>My Books</a></li>
<li><a href='http://friendster.com/kamsiah70'>My Friendster</a></li>
</ul>
</div>

Kalau xnak dua2 delete je seme kod tu

Blog² Pilihan AlmansuQie™

2009-07-03T04:34:00.003+03:00

Assalamualaikum semua.. Ruangan Blog Terpilih dibahagian bawah akan digantikan dengan widget lain tidak lama lagi.. Semua link2 sahabat akan di letakkan dalam posting ini sekaligus jadi Blogroll Ana. Sesape yang 'link'kan Ana di blognya saja akan tersenarai. Jadi, bagi sahabat2 yang sudah menge'link'kan Ana dan tidak tersenarai, sila tinggalkan alamatnya di ruangan komentar yer.

Ikhwah
Hafiz Aiman Ust Amir Fairuz Alex Al Aman Nuruddin Ray Zul Ikhwan Abu Sout Syekhul Islam Lubuk Zai Mustakim Alex Syamsul Kedai Bestari KembaraMursyid TerataiOnline Jiwa Terasing Datuk Sir Sana-Sini Blog Farhan Rais Ridzuan AlKindy Wan Hanafi

Akhawat
Ummi Humaira Haryanies Green Heart Aisyah Ulya Mis Ziera Koleksi Hidayah Mujahidah Asrar Tinta Aisya Nur Ilham Kak Izzah Kak Awwa Madihays Uwais Alqarnain Cahaya Mardhiah SyauQah Wardah Miss Zana Kak Tie Kak Zurainy Bahiyah Masyitah Afzanur Ainur Farihah Qurainie Ummu Naielah Farah Deeba MamaQaypo Nurul Aiman Bintu Hasan

Pendidikan
Cikgu Maz PKG Rembau Cikgu Dee Cikgu Nizam Darul Quran KKB I-Hub Darul Quran PKG Kuala Pilah PPIKPAB PKG Johol Cikgu Azleen Doa Harian Pondok Dar Salam Maahad Ansori SK Bandar Tua PPIKPAB

All For Blog
Tiny Url Graphics Arcade Bigoo.ws Emoticon AdiWidget™Contact Emailer Flash Vortex My Hibah

Peribadi
Shoubrawi Kembara Sufie PIBGSRASU Umrah Bestari Huzaifah Rifaie Ummu Rifaie Fatimah Villa Kasturi

Mengetahui Tahap Keberatan Blog

2009-07-01T10:47:00.000+03:00

Ghairah untuk menghiasi dan mencantikkan blog. Apa yang menarik dan cantik mesti nak disumbatkan ke dalam blog. Tanpa disedari blog kita semakin berat loadingnya. Bila dah berat orang pun xnak datang blog kita lagi. Sape yang rugi kan.. kita ngn blog kita jugak...

Ok kat bawah ni ade bendalah yang boleh kita guna untuk mengetahui saiz blog kita dan tahap kecepatan loadingnya. Mudah je nak guna bendalah ni, cuma masukkan alamat blog atau web dah klik check.. Hasilnya akan muncul dibawah. Perhatikan "Saiz" blog Antum tu.. "Load Time" dan "Avarege Speed per KB" akan berubah2.

Kalau saiz blog tu melebihi 150 kb, cuba la usaha untuk kecilkannya. Kasi buang aje widget2 yang kurang manfaatnya tu. Seperti jam, kalendar, animasi, dan sebagainyala. Dan paling penting jumlah posting yang dipaparkan tidak melebihi 7. Ok jom uji test..

Cenderahati Buat Semua Follower

2009-06-30T05:19:00.007+03:00

Semalam berniat nak kasi hadiah kat follower blog ni yang ke-seratus.. Sebelum tu Ana ucapkan Terima kasih pada seme follower ye. Tanpa Antum siapala AlmansuQie ini. Ok follower kita yang bertuah ni Ana nak kasi ape yer. Nak bagi gift jauhla plak. Ana rasa baik kita kenali yang keseratus ni.. Hadiah Review bolehla kan?

Namanya Noorashikin Binti Uyub. Tajuk blog TamanLamanku. Mem'famours'kan dirinya dengan nikname Ekino.. Mula2 Ana ingat orang jepun mana sesat masuk blog ni, sekali Melayu la plak Boleh baca profile lengkapnya Disini.

Kenapa Ana rasa nak review blog Ekino ni?

Pertama.. Blognya memang colorfull abis. Dihiasi dengan 3 warna utama, hijau, pink dan putih. Warna yang menyejukkan mataku ini. Ana memang suka blog yang colorfull dan berwarna cerah. Kalau warna gelap mataku akan kabur. Maklumla dah semakin tua ni. Templatenye direka oleh julietANNA.

Terus apa lagi ya.. Ok blog ni boleh dikategorikan sebagai blog peribadila. Nak tau lebih pila sana na.. Ekino.

Ok yang last. Ape kurengnya.. Blog ni ade pasang soundtrack. Ini hanya pandangan Ana. Lagu pada blog hanya akan buatkan pengunjung lari, termasuk Ana sendiri. Ana suka buka banyak blog dalam satu masa, pakai speaker luar pulak tu, mana blog yang bernyanyian tu mesti Ana close tanpa sempat baca. Tak jadi nak jalan2. Bayangkan kalau 5 blog dengan lagu masing2. boleh pusing kan. hehe.. Ini hanya pandangan, kalau tuan blog selesa dengan semua tu, terpulangla kan, dah memang blog die.

Sampai sini saja. Antum boleh kunjung ke blog Ekino untuk melihat secara life. Ok.. ni gift untuk semua Follower Ana. Harap sudi terima. Ini hasil photoshop dalam keadaan kelam kabut. Sekodar jela ek. Tapi kalau memberatkan blog Antum, xpayahla amik yer.

Cara Membuat Banner Di Blog

2009-06-24T19:11:00.005+03:00

Entri kali bukanla tutorial atau trik yer. Sekadar ingin menjelaskan saja. Ramai gak yang tanya cara nak buat Banner ni. Ponin den dibuatnye. Ok untuk buat banner ni senang la bagi orang yang berotak kreatif dan mahir dalam rekabentuk grafik juga menggunakan software yang power2 la. Ana pula, yang kurang kreatif ni hanya bemula dengan Adobe Photoshop 7, pastu CS3 dan sekarang CS4 untuk menghasilkan sebarang banner dan grafik.

Ana rasa masih ramai yang tak tahu apekebenda adobe photoshop ni. Memang susah nak jelaskan dan mengajar adobe di ruangan ini. Ana dulu pun bertalaqqi dengan guru2 adobe dari Shoubra berkenaan cara2 asas menggunakan photoshop ni. Sampai sekarang xpandai2 lagi.

Bagi yang sudah ada software photoshop ni, boleh la cari tutorial berkenaan dengannya. Banyak sangat.. Ana cadangkan cari tutorial dari youtube kerana mudah difahami lebih jelas melalui video. Klik SINI untuk lihat contoh tutorial dari youtube.

Selesai berkenaan adobe. Ana cuba cari laman yang menyediakan layanan membuat banner ni. Jumpa la satu dan ini Ana rasa yang terbaik. Antum boleh cuba membuat sebarang banner dengan ukuran pelbagai di Banner Fans ini. Harap dapat membantu.

Untuk menghasilkan Button rujuk SINI

Wallahua'lam.

Disable Sesetengah Komen Pada Post

2009-06-24T03:51:00.010+03:00

Untuk pengetahuan pada yang belum tahu, sebenarnya kita boleh disable mana2 komen pada sesuatu post tanpa menjejaskan komen pada post2 yang lain. Mungkin ramai yang sudah tahu caranya. Kekadang kita menulis sesuatu entry tanpa mahukan sebarang reaksi dari pembaca. Ade ke orang yang xnak dikomen artikelnye??? Adela kot.. Kalau x nape blogger menyediakan kemudahan ini.

Ok caranya yang tersangat mudah. Pada ruangan post editor, klik Post Option. Sebaris je dengan ruangan menulis label. Boleh lihat screenshoot dibawah.

Pilih Don't allow untuk disable. Show existing tu tuk paparkan komen2 yang dah ade. Kalau xnak paparkan semuanya klik yang bawah sekali. Ok... Siap

Mengubah Saiz Lebar Colom

2009-06-21T18:36:00.008+03:00

Cerita pasal template ni.. Ada yang tanya macam mana nak ubah saiz colom yang ada dalam template kita? Untuk kali ini Ana akan cuba bagi tips yang mudah tapi pening. Sekaligus dapat menambah kefahaman kita berkenaan kod CSS. Walaupun Ana sendiri xtau ape tu CSS. Untuk pengetahuan, sebenarnya mana2 template yang kita download dan gunakannya boleh diubah saiz dan bentuknya, warna juga gayanya. Makna kata boleh ubah dari sebuah pondok usang menjadi banglow mewah!

Ok kekadang ade template cantik yang kita guna tapi saiz colom tidak memuaskan hati kita. Untuk itu, lihat caranya. Ini kod bagi colom di blog yang tersedia pada template Minima.

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
#footer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Kod2 merah adalah lebar setiap colom tersebut. Ana terangkan lebih lanjut. Bersedia untuk pening..

1. Pertama, kod header dan outer ini.

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
font: $bodyfont;
}

Ok sekarang size header kita adalah 900px. Juga saiz outer. Outer ni kita xnampak sebenarnya. Die ni kotak yang merangkumi main wrapper dan sidebar. Jika kita ingin mengubah lebar header, outer juga wajib diubah. Biasanya saiz kedua ni mesti sama.

2. Seterusnya pada bahagian Main Wrapper dan Sidebar. Ana gabungkan keduanya untuk mudah difahami.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}

Main wrapper ni adalah kotak untuk posting kita. Dengan saiz 435. Sidebar adalah kotak samada dikiri atau kanan. Jika kita mahu mengubah saiz sidebar, maka saiz main wrap juga mesti diubah.

Contoh: Dengan lebar header dan outer 900px. kita ingin membesarkan colom main/posting dengan 520px. Maka kita mesti mengecilkan saiz sidebar sedia ada kepada 150px atau bla bla.. Begitu juga sebaliknya. Jika sidebar dibesarkan, maka saiz main/post mesti ditambah nilainya. Penatnye nak wat teori ni..

Begitula pada mana2 bahagian pun. Harap xpening lagi.

Tambahan: kod margin. Adalah kod untuk jarak satu colom dengan yg lain. Boleh diubah begini.

margin:10px; (jarak kiri kanan atas bawah adalah 10px)
margin-left:5px; (jarak kiri saja 5px)
margin-right:5px; (jarak kanan saja 5px)
margin-top:5px; (jarak atas saja 5px)
margin-bottom:5px; (jarak bawah saja 5px)

Sekian unutuk kali ini.. Selamat Mencuba..

Ubahsuai Penampilan Cbox Anda

2009-06-14T14:46:00.009+03:00

Sebelum ini Ana ada buat tutorial berkenaan Cara Memasang Cbox pada blog. Untuk kali ini, Ana akan cuba memberi sedikit sentuhan untuk mencantikkan lagi Cbox kita agar tidak terlalu suram dan memboringkan..

1. Ok perkara pertama yang perlu kita utamakan adalah warna Cbox kita. Kalau boleh kasi masyuk dengan warna template kita. Banyak yang Ana jumpa masih menggunakan warna default, blue classic! Ok untuk tukar warna klik Look & Feel => Edit Style pada akaun Cbox Antum. Cuba suaikan warna cbox Antum dibahagian ini.

Dah berpuas hati klik butang Apply dan siap.

2. Seterusnya menggantikan Smiley sedia ada dengan yang lebih menarik.

Klik Options => Smilies. Delete smilies yang lama tu kalau xminat. pastu ganti dengan link yang baru. Untuk smilies YM9 guna link ini. Cuma tukar nombornya saja untuk smilies yg lain.

http://i302.photobucket.com/albums/nn113/aburifaie/smiley/1.gif

Lihat Contoh Ini:
Klik new row untuk menambah smilies. Jangan lupa disimpan (save) jika sudah selesai menambah link dan kodnya.

3. Trik berikut ini adalah cara untuk memendekkan link url yg diisi pada Cbox.Cth: [link], [Email]. Kalau pada Shoutmix akan diset secara auto. Tapi tidak pada Cbox.

Klik Options => Posting Options.

Pada bahagian Message Options, klik On(Short Link) pada Autolinking.
Klik butang Save jika selesai.

4. Ok Trik terakhir untuk kali ini ialah untuk menambah text atau gambar pada Cbox. Tengok Cbox Ana. Ade ditambah dengan flash. Mungkin disini ada yang keliru. Harap dapat faham. Buka kod Cbox Antum yang ada di blog.

<div id="cboxdiv" style="text-align: center; line-height: 0">
<tr>
<td align="center">
<img style="border-top:#F804FF 1px solid;border-left:#F804FF 1px solid;border-right:#F804FF 1px solid" width="320" src="http://i302.photobucket.com/albums/nn11213/aburifaie/pesan-11.gif"/>
</td>
</tr>
<tr>
<td align="center">
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="250" src="http://www2.cbox.ws/box/?boxid=184583126&boxtag=2765&sec=main" id="cboxmain" scrolling="auto" style="border:#F804FF 1px solid;" width="320" allowtransparency="yes" name="cboxmain"></iframe></div>
<tr>
<td align="center">
<img style="border-left:#F804FF 1px solid;border-right:#F804FF 1px solid" width="320" src="http://i302.photobucket.com/albums/nn11453/aburifaie/slidbox.gif"/>
</td>
</tr>
<tr>
<td align="center">
<div><iframe frameborder="0" marginheight="2" marginwidth="2" height="78" src="http://www2.cbox.ws/box/?boxid=188345126&boxtag=2765&sec=form" id="cboxform" scrolling="no" style="border:#F804FF 1px solid;border-top:1px solid #F804FF" width="320" allowtransparency="yes" name="cboxform"></iframe></div>
</td></tr></td></tr></div>
<br/>

Kod2 merah adalah yang akan ditambah tuk diisi dengan gambar atau flash. Antum cuma gantikan Link bewarna biru saja.. Ana harap Antum dapat tokok tambah sendiri. Trik ni sesuai bagi Antum yang sudah memahami kod2 html. Bagi newbie boleh wat slow2.

OK..Harap Membantu...

Memasang Label Berbentuk Awan

2009-06-14T10:40:00.001+03:00

Label yang biasa kita gunakan adalah yang memanjang kebawah. Agak kurang menarikla. Sekarang kita boleh buat label yang lebih cantik dengan bentuk awan sekaligus dapat menjimatkan ruang di sidebar kita. Ni cara membuatnya.. Sebelum tu pastikan sekurang²nya ada satu post yang berlabel dan tambahkan label di sidebar Antum.

1. Loggin ke blogger => Layout => Edit HTML dan cari kode ]]></b:skin> kemudian tambahkan kode dibawah tepat diatasnya.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Seterusnya cari kode </head> dan tambahkan kode berikut diatasnya.

3. Gantikan kode warna tulisan yang telah dimerahkan mengikut kesesuaian blog Antum. Kode RGB DiSINI.

4. Kemudian cari kode dibawah. Tulisan merah bergantung pada tajuk label Antum.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

5. Gantikan kode diatas dengan yang dibawah ni yer..

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6. Dah siap.. cuba Preview dulu.. berhasil x?? Kalau sudah, save la templatenye yer..

Sumber: http://phydeaux3.blogspot.com/

Iklan / Pesanan Ala2 Navbar

2009-06-11T11:38:00.004+03:00

Memasang barisan iklan atau pesanan ala2 navbar ini memang berguna. Ia juga boleh ditutup seakan2 sama dengan fungsi popup window. Macam2 kegunaannya, boleh diisi dengan iklan, pesanan, informasi dan apa saja yang Antum inginkan. Seperti blog ini, Ana sarankan pengunjung supaya menggunakan Firefox untuk paparan terbaik. Ok caranya..

1. Dalam keadaan Loggin. Pada Layout pilih Edit HTML. Tambah kod berikut sebelum ]]></b:skin>.

#mta_bar {background:url(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif);
border-bottom: 0px solid #808080; margin: 0 0 15px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; height:23px;overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { margin:3px;float: left; text-align: center; font-family: Georgia; font-size: 12px; font-weight: bold; font-style: normal; color: #FFFF66; width:92%;}
#mta_bar .right {margin:3px;font-family: Georgia; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #ffff66; text-decoration: none;}
#mta_bar .right a:hover {font-size: 10px; color: #ffff66; text-decoration: none;}
#left_bar a { text-decoration: none; color: #ffff66; }
#left_bar a:hover { text-decoration: none; color: #ffff66; }

2. Kod merah adalah warna latarbelakang. Lihat DISINI untuk warna lain.

3. Seterusnya tambah kod dibawah sebelum kod </head>.

4. Akhir sekali tambah kod berikut selepas kod <body>.

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://www.mozilla.com/en-US/firefox/personal.html' target='_blank'>Sila Gunakan Pelayar Firefox Untuk Paparan Terbaik</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i302.photobucket.com/albums/nn113/aburifaie/tutup.gif' style='cursor:hand;cursor:pointer;'/></span></div>

5. Gantikan text merah dengan link dan kalimat Antum sendiri. Untuk text bergerak, tambah kod ini.

Contoh: <marquee>Sila Gunakan Pelayar Firefox Untuk Paparan Terbaik</marquee>

6. Dah siap klik save yer..

Sumber Asli : O-Om

Highlight Script/Kode Pada Postingan

2009-06-10T09:15:00.000+03:00

Membuat Highlight pada script atau kode di postingan akan lebih menampakkan pembaca. Macam blog ini. Setiap kali ada script/kode Ana akan highlightkan. Ini caranya.. Tapi Ana baru je upgrade highlight ni. BroSKL boleh pakai yang ni dulu.

1. Login ke blogger pastu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

.alert {
background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border: 1px solid #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, Antum tukarla mengikut kesesuaian template Antum.Boleh dapatkan script warna DISINI.

3. Pastu klik butang save yer..

Cara Posting..

Tambahkan kode ini <p class="alert"> sebelum kode/script yang akan dihighlight. kemudian tambahkan kode </p> diakhir script/Kode.

Perhatikan contoh dibawah.

<p class="alert">.alert {
background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border: 1px solid #223344;}</p>

Selamt Mencuba!!

Memasang Auto Read More ( Terbaru)

2009-06-05T08:30:00.003+03:00

Read More atau baca selanjutnya kali ini sangat mudah dan tidak memeningkan. Tidak seperti sebelum ini yang memerlukan kita menggunakan kod <span class="fullpost"> atau <span id="fullpost"> untuk memotong entri. Ramai jugak yang tanya Ana bab tanam kod tu, ramai xberjaya.

Read More terbaru ni canggih sikit, kerana pemotongan entry dilakukan secara automatik tanpa perlu memasukkan kod. Dan lagi, Read More ini boleh menampilkan gambar pertama yang ada dalam entri tu diawal entri, walaupun gambar tersebut berada di tengah atau dihujung. Ok tak nak terang banyak2, kita cuba terus.. Ini contoh Auto Readmore yang Ana buat kat satu blog.

Sebelum kita mula, pada yang dah guna Read More sebelum ni, pastikan remove kod2nya terlebih dahulu. Kalau rasa nak pakai Auto Read More ni la. Kalau malas xyahla.

1. Cara Membuat Read More
2. Cara Membuat Read More v2

i. Ok ini caranya. Masuk ke Edit HTML. Tanda pada kotak Expand Widget Template yer.

ii. Tambahkan kod dibawah sebelum kod </head>.

iii. Keterangan kod diatas. Kod2 merah boleh diubah ikut selera masing2.

var thumbnail_mode = "float"; (Kedudukan gambar thumbnail.("float") disebelah kiri. Kalau xmau ganti dengan ("no-float").
summary_noimg = 250; (Jumlah huruf yang ingin ditampilkan tanpa gambar thumbnail.)
summary_img = 250; (Jumlah huruf yang ingin ditampilkan beserta gambar thumbnail.)
img_thumb_height = 120; (Tinggi Gambar)
img_thumb_width = 120; (Lebar Gambar)

iv. Seterusnya cari kod berikut. Gunakan Ctrl+f untuk lebih cepat.

<data:post.body/>

v. Dah jumpa? Gantikan/Replace dengan kod dibawah.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

vi. Tulisan READ MORE - diatas boleh diubah. Nak tulis baca lagi ke, ape ke, silakan. Kalau xnak ade tajuk lepas tulisan Read More tu, buang kod ini <data:post.title/>.

vii. Boleh preview dan lihat hasilnya. Kalau dah menjadi klik tombol Save tu.

Selamat Mencuba.

Sumber: o-om.com

Kembali Ke Alamat Asal

2009-06-05T00:45:00.000+03:00

Assalamualaikum.. Ni nak kasi tau kat semua, blog ni kembali ke alamat asal dari .via.my. Ana memilih untuk rujuk kembali setelah diceraikan beberapa ketika. Biasala kan pakai free domain ni. Mesti ada kekurangan. Ada masalah dengannya. Sebelum ni pun ada sahabat yang ngadu xboleh nak buka blog ni. Tup2 Ana sendiri pun payah nak bukak sekarang ni. Xpela nati balik Malaysia boleh beli Domain sendiri kan. Ampun Maap Semua Yer..

Pasang Star Rating Pada Posting

2009-06-01T21:18:00.006+03:00

Ingin tahu rating sesuatu post dalam blog kita, boleh pasang widget ni. Seperti dibawah post ini ada lima bintang warna kuning. Kalau rasa post ni bagus boleh la bagi bintang skit. Ok ini disediakan kod javascript untuk ditanam dalam template. Caranya..

1. Macam biasa dalam kedaan Loggin. Edit HTML. Tanda pada kotak Expand Widget Template. Cari kod berikut.

2. Dah jumpa, tambahkan kod berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
var OutbrainPermaLink='Your-Post-Permalink-Here';
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://www.geocities.com/almansuqie/limabintang.js' type='text/javascript'/>
</b:if>

3. Tambahan: Kod <p><data:post.body/></p> kemungkinan sudah berubah atau tiada lagi sekiranya Antum gunakan Read More. Tapi jangan kecewa, cuba cari tulisan Read More tu. Tambahkan kod diatas diakhir kod Read Morenya.

4. Dah siap klik save..

5 Template Menarik Blogger Styles

2009-05-30T05:52:00.012+03:00

Untuk blogger baru yang ingin mendapatkan template menarik boleh lihat disini. Ini antara 5 template menarik yang Ana ambik dari BloggerStyles untuk dikongsi bersama. Saje nak preview kat sini. Kalau nak cari lebih banyak lagi, boleh ke sana yer.

Zinmag Remedy

Exotic Vacation

Zinmag Tribune

Bizmag

Black Magic

Sumber : BloggerStyles

Cara Memasang Top Commentator

2009-05-29T07:11:00.012+03:00

Nak pasang top commentators? Ini caranya.. Widget ni macam yg kita tahu akan menampilkan pengomen terbanyak di blog kita. Ana tak pasang kat blog ni pasal xde sape nak komen. Bak kate orang take and go.haha.. Untuk MamaQaypo yang bertanya, Ana cuba cari2 dan jumpa script widget ni kat blog Anang. Syukran buat Anang. Untuk tahu lebih lanjut sila ke blog Anang yer. Ok ini scriptnya..

1. Copy dan paste kod berikut di Layout => Page Elements => Add a Gadget => HTML/Javascript.

2. Gantikan BLOGNAME tu yer, semestinya nama blog Antum. Pastu angka 10 tu jumlah pengomen yang nak ditampilkan. Dah siap klik save.

3. Atau kalau nak yang mudah, isikan data2 pada form dibawah.

Widget Untuk Pengomen Terbanyak

Kredit : Anang's Blog

Mengalihkan Alamat Blog Ke Alamat Lain

2009-05-24T23:20:00.006+03:00

Orang putih kata "How To Redirect Blogger URL To Another URL". Maksudnya macam tajuk diatas. Contoh boleh klik link ini http://kawafirku.blogspot.com. Caranya..

1. Loggin ke blogger => Layout => Edit HTML.

2. Tambahkah kod dibawah selepas kod <head>. Bahagian paling atas.

3. Gantikan text merah dengan alamat baru Antum. Dah siap save..

Sekian..

Jadikan Tulisan Read More Icon

2009-05-21T08:55:00.006+03:00

Khas untuk Cik Farah, tokey muffin kite Payah Ana nak jelaskan kat shoutbox. Kene tukar, ganti, tambah kod html ni. Caranya senang saja, sama macam kita nak buat link bergambar. Hanya gantikan sebarang tulisan dengan kod image ini. <img src='http://alamat gambar.gif'/>.

Ok sekarang Ana tumpukan untuk gantikan tulisan Read More. Berpandukan tutuorial ini.

1. Cara Membuat Read More
2. Cara Membuat Read more V2

Loggin ke blogger => Edit HTML. Tanda kotak Expand Widget Template. Pastu cari kod Read More Antum ni.

# Untuk no.1, cari kod ini.

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

# Untuk no.2/v2, cari kod ini.

Dah jumpa, gantikan tulisan merah dengan kod image ini. Kalau Antum dah tukar dengan tulisan lain, gantikan saja.

Preview. Dah ok klik Save.

Tambahan tuk farah. Enti punya tu lain sikit. Cari kod css ni, delete background tu tau.

#showlink {
background: transparent url(http://i302.photobucket.com/albums/nn113/aburifaie/readmore-1.jpg) no-repeat left;
....
....
}
#hidelink {
background: transparent url(http://i302.photobucket.com/albums/nn113/aburifaie/readmore-1.jpg) no-repeat left;
.....
.....
}

SABILY 9.04 – Ubuntu Muslim Edition

2009-05-19T19:38:00.001+03:00

Sabily.. Satu nama yang menarik, nama baru untuk Ubuntu Muslim Edition. Direka khas oleh Sabily Team untuk umat islam sejagat. Bagi yang belum tahu, Sabily ini ialah salah satu Sistem Operasi Linux yang berkerja dalam komputer. Wallahu A'lam.

Saja nak tulis pasal ni, seminggu dua ni duk try install Sabily ni.. Pening la jugak, dah bukan bidang kita kan, tapi mesti nak cuba. Itula manusia. Ana kena belajar lagi pasal Linux ni. Unik sikit kalau nak dibandingkan dengan windows.

Paling menarik, kita boleh mencubanya terlebih dahulu tanpa perlu menginstall apa2 kedalam komputer.

Sabili ini ada 3 versi:

1. Pertama, Versi Kecil (935 MB): berisi paket utama Sabily.
2. Kedua, Full Version (1,4 GB): boleh terus rujuk di sini.
3. Ketiga adalah Versi Penuh dengan bacaan Al Quran (2,8 GB): Versi ini sesuai untuk sesiapa yang tidak menggunakan internet.

p/s: Juga ada versi CD (184 MB) yang berisi paket Sabily jika Antum ingin transform Ubuntu biasa 9,04 (Jaunty Jackalope) menjadi Sabily.

Bagi yang berminat boleh Download Disini..

Ana cadangkan download menggunakan Torrent Client. Ok ini aje yer...Maassalamah.

Background Pada Tajuk Post

2009-05-16T04:44:00.010+03:00

Cara menambah background pada tajuk posting adalah sama seperti menambah Background Pada Tajuk Sidebar, cuma pada kod css yang berbeza. Dah ramai bertanya tapi lupa nak postkan. Ok untuk tajuk post cari kod ini.

.post h3 {
........
........
........
........
}

1. Untuk background bercolor cuma tambahkan kod warna kedalamnya.

.post h3 {
background: #000;
........
........
........
}

2. Gantikan kod warna biru tersebut ikut kehendak masing2 yer. Kod warna Disini.

3. Jika ingin membuat background bergambar tambahkan kod berikut.

.post h3 {
background:url(http://alamat gambar antum.jpg)repeat-x;
........
........
........
}

4. Gantikan alamat gambar tersebut. Ok siap.. Preview dan lihat hasilnya. Puas hati terus save yer.

Cara Invite Teman Untuk Edit Blog

2009-05-14T20:10:00.000+03:00

Apa tujuan kita invite orang tuk jadi Admin blog kita? Ni antara jawapannya.

1.Pertama, kita hanya view blog kita untuk insan terpilih sahaja. So siape yang tidak di jemput tak akan dapat masuk ke blog kita.

2. Kedua kita buat blog secara berkumpulan. Macam blog projek.

3. Ketiga, kita nak mintak tolong kawan editkan template atau sebagainya. Ha yang ni khas untuk sahabat2 yang gagal untuk memasukkan kod ke dalam template. So mintakla bantuan kawan yang lebih arif. Nak minta tolong Ana pun boleh, insyaallah. Ok ini cara untuk invite orang yer..

1. Loggin dan pada Dashboard klik Setting.

2. Seterusnya pada setting klik Permision.

3. Pada bahagian blog Authors, klik ADD AUTHORS.

4. Masukkan email dan klik INVITE.

5. Kawan yang diinvite akan dapat satu email jemputan. Tunggula kawan kita tu aktifkan link yang diterima. Bila sudah diaktifkan maka kawan kita tu akan jadi salah seorang admin tapi hanya boleh edit pada bahagian posting tidak pada template.

6. Untuk membolehkan teman mengedit template, klik pada grant admin privileges di sebelah emailnya.

7. Ok sekarang teman dah boleh edit template. Setting terakhir akan kelihatan seperti ini.

8. Kalau dah xperlukan author kedua tu klik je revoke admin.

Ok sampai sini je..

Menambah Background Pada Blog

2009-05-11T03:50:00.011+03:00

Ini cara untuk menambah latarbelakang pada blog kita.. Contoh macam blog ini, Ana hiasi dengan background bintang2 kebiruan. Background ini sesuai untuk template yang tidak terlalu besar, atau ukuran lebar tidak melebihi 950px. Kalau besar macam mana nak nampak kan. Ok caranya..

1. Antum pilih la apa2 gambar yang ingin dijadikan background. Kalau nak cantik gambar tu mesti ikut saiz resolution dekstop Antum. Biasanya 1204x768px. Upload gambar tersebut untuk dapatkan linknya.

2. Seterusnya cari kod dibawah.

body {
background:#000000;
margin:0;
color:#333333;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

3. Dah jumpa, gantikan dengan kod dibawah.

body {
background-image:url(http://alamat gambar.jpg);
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed;
background-position:bottom left;
background-repeat:no-repeat;
}

4. Gantikan tulisan merah dengan alamat gambar Antum.

5. Preview dan lihat hasilnya. Klik butang save jika Antum berpuas hati.

Menambah Kotak Pada Footer

2009-05-09T03:30:00.010+03:00

Footer adalah salah satu bahagian penting pada satu² blog. Biasanya kita akan isikan dengan copyright, jenis template atau sebagainya. Boleh juga diisi dengan segala macam widget. Ok kali ini kita akan cuba membahagikan footer ini kepada 3 colom. Caranya..

1. Macam biasa terus ke bahagian Edit HTML. Jangan tanda pada kotak ~~Expand Widget Template~~. Sebelum tu backup template dengan Download Full Template untuk langkah berjaga2. Tambahkahkan kod CSS ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

2. Kemudian cari kod berikut.

<b:section class='footer' id='footer'/>

3. Kalau xwujud, cari yang seakan2 dengannya. Dah jumpa, gantikan dengan kod dibawah.

4. Kod berwarna merah adalah warna garisan dibawah colom tersebut. Antum boleh tukar warnanya mengikut citarasa masing2. INI KOD WARNA. Boleh preview tuk lihat hasilnya, jika berhasil klik butang save..

Selesai..

Sumber Asli : BlogerBuster

Menambah Lowbar Pada Template

2009-05-07T00:53:00.005+03:00

Atas permintaan dari seorang sahabat yang ingin menambah beberapa colom dibahagian bawah template. Macam blog ni la. Sekaligus dapat menjimatkan ruang yang terhad pada sidebar. Ok terus kepada cara penanaman kod yer..

1. Macam biasa loggin dan terus ke bahagian Edit HTML.

2. Tambahkan kod css ini dimana yang Antum suka, yang penting sebelum kod ]]></b:skin>.

/* ----- LOWER SECTION ----- */
#lower-wrapper {
margin: 0px 0px 0px 0px;
padding: 0;
width: 865px; /* Panjang kotak utama */
font: georgia;
color: #0066cc;
background: #000000; /* Background Kotak Utama */
border: 3px solid #F2F2F2; /* Border Kotak Utama */
}
#lowerbar-wrapper {
float: left;
margin-left: 10px;
padding: 0px 0px 0px 0px;
width: 200px; /* Panjang Lowerbar */
line-height: 1.0em;
background: #D8D8D8; /* Background Lowerbar */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 840px;
text-align: center;
background: #D8D8D8;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {
float: left;margin-left: 10px;
padding:0px;
}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 0px 0px;
}
.lowerbar h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerads h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerbar ul {
list-style:none;
margin-left:0px;
padding:5px;
}
.lowerbar ul li {
list-style: none;
background: url(alamat icon Antum) no-repeat;
margin:0;
padding:0px 0 2px 19px;
line-height: 1.3em;
}
.lowerbar a {color: #006699; text-decoration: bold;}
.lowerbar a:hover {text-decoration: none;color: #C94093;
}
.lowerbar a:visited {text-decoration: none; color: #6131BD;}

3. Perhatikan kod2 diatas, cuba suaikan dengan template Antum. Tengok kod2 berwarna merah. Kod Warna Disini. Seterusnya cari kod ini..

4. Dah jumpa tambahkan kod berikut diatasnya.

5. Selesai bahagian penanaman kod..Sebelum save lebih baik Preview dulu. Kalau berhasil Alhamdulillah, jika tidak, jangan sedih.. Mesti ade perbezaan pada kod template Antum..Cuba alihkan kod pada step 4..Mesti Berani mencuba yer..

p/s : Kalau ade kemusykilan, nyatakan pada komen dibawah yer...

Avatar MyBlogLog Pada Kotak Komen

2009-05-06T02:21:00.009+03:00

Pada sahabat yang bertanya.. Sebenarnya ada dua cara untuk pasang avatar pada kotak komen, setakat yang Ana jumpa. Ana lebih suka menggunakan avatar MBL ni. Pernah juga menggunakan avatar author komen, tapi ada beberapa masalah. Ok caranya...

1. Pertama, mestila kene ada akaun MyBlogLog kan, kalau xde daftarla dulu. Dah selesai baru boleh ikut step seterusnya..

2. Kalau dah ade akaun, terus ke bahagian Layout => Edit HTML. Tandakan pada kotak Expand Widget Template.

3. Tambahkan kod dibawah sebelum kod </head>.

4. Seterusnya cari kod ini.

<b:loop values='data:post.comments' var='comment'>

5. Dah jumpa, tambahkan kod berikut dibawahnya.

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Ok siap..Klik save template..

Selamat mencuba..

Sumber Asli : O-Om.com

Emoticon di Kotak Komentar

2009-05-05T14:08:00.007+03:00

Kali ini pasal emoticon lagi..cuma dipasang pada kotak komen dibawah posting pula. Untuk membuat kotak komen berada di bawah posting, boleh lihat tip ini. Kotak Komentar Dibawah Posting

Ok ini cara memasangnya..Sebelum tu Download Full Template untuk langkah berjaga2.

1. Loggin => Layout => Edit HTML. Tandakan pada kotak Expand Widget Template.

2. Tambahkan kod berikut dibawah kod </body>. Di bahagian paling bawah.

3. Seterusnya cari kod berikut..

4. Dah jumpa, letakkan kod dibawah selepas kod <p class='comment-footer'>

5. Ok selesai, klik save template dan cuba lihat hasilnya. Kalau xjadi jangan marah yer, maby xsesuai dengan template Antum.

Dropdown Menu With Colour

2009-05-04T12:46:00.007+03:00

Sebelum ini Ana ada postkan Cara Membuat Dropdown Menu tanpa warna pada backgroundnya. Semalam jalan2 jumpa pula yang boleh diwarnakan. Seperti diatas.

Ok caranya lebih kurang sama, cuma ditambahkan dengan kod warna.

<center><select onchange="window.open(this.options[this.selectedIndex].value)" style=" WIDTH: 150px; COLOR: #146d03; BACKGROUND-COLOR: #ffff66"
name="select" size="1"> <option value="0" <option value="0" selected>Tajuk Menu</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option></select></center>

Gantikan kod merah mengikut warna yang Antum gemari. Kod warna Disini.

Untuk tambahkan link cuma tambah kod dibawah sebelum kod </select></center>

<option value="Link Tambah">Text Tambah</option>

Script Total Posts & Total Comments

2009-05-03T16:02:00.006+03:00

Kebanyakkan teman sudah tahu cara untuk memasang Total Posts dan Total Comments, Banyak blog2 tutorial yang menulis tentang ini. Sekadar untuk simpanan peribadi Ana dan untuk perkongsian bersama rakan². Contoh seperti dibahagian bawah Recent Reader blog ini. Ok berikut scriptnya...

1. Total Posts : 1000

2. Total Comments : 19870

3. Gantikan tulisan berwarna ungu dengan nama blog Antum.

4. Untuk pemasangan, cuma tambahkan di bahagian Layout => Page Elements => Add a Gadget => HTML/Javascript. Atau kat mana saja yang Antum suka..

Emoticon Yahoo! Messenger 9

2009-04-30T23:43:00.008+03:00

Akhirnya berjaya juga membuat script emoticon Yahoo! Messenger 9. Ok bagi sesiape yang pernah menggunakan mana2 script emoticon macam ni, just klik saja Disini untuk install.

Untuk yang pertama kali boleh rujuk tip dibawah.

Memasang Emoticon Di Post Entry

Ana ade tambah beberapa emoticon yang agak menarik. Hasilnya akan ada di post editor begini yer..

Slider ala Zinmag Primus Template

2009-04-29T13:04:00.013+03:00

Hari ade kesempatan nak ~~buat~~ tulis tutorial pasal ni. Sebenarnya slider ni Ana ambil dan edit dari template Zinmag Primus ini. Terjumpa template ini dan dihiasi dengan slider yang menarik. Dah lama mencari akhirnya jumpa jugak. Terima kasih pada Theme Author: Jinsona Design.

Ok ini caranya..Sebelum tu Ana nak kasi tau, maby sesetengah template xsesuai dengan tuturial ni, so kene pandai² sendiri la. Ana akan letakkan kod² asal dari template Zinmag dan sedikit tambahan.

1. Masukkan kode rss ini sebelum kode ]]></b:skin>

#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px; /* Panjang Slider */
float: left;
position: relative;
height:200px; /* Lebar Slider */
}

.slide h2 { /* Tajuk Post */
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px; /* Panjang Tajuk Post Slider */
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet { /* Petikan Post */
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p { /* Post By Disini */
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img { /* Gambar Pada Slider */
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper { /* Butang Stop */
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

2. Kemudian masukkan javascript ini dibawah kode ]]></b:skin>.

3. Kemudian cari kode dibawah ini:

4. Tambahkan kode berikut dibawahnya.

<div id='casing'>


<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

</div>

</div>

</div>
<div class='clear'/>

5. Selesai proses penambahan kode.

Tambahan:

1. Perhatikan text² yang berwarna dan ikut saje arahannya.

2. Slider ini berukuran panjang 1000px. Tukarkan mengikut kesesuaian template Antum. Boleh edit di bahagian kode css atau pada step pertama.

3. Kalau nak tambah bilangan post, tambahkan saja kod dibawah sebelum </div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

4. Kalau ade yang kurang jelas sila tinggalkan komen dibawah yer. Jangan malu bertanya..

Ok... Selamat Mencuba!

Cara Menukar Icon Pada Address Bar

2009-04-16T10:27:00.000+02:00

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>

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

Menukar MBL Recent Reader ke Versi Lama

2009-03-31T17:54:00.007+02:00

Tampilan MyBlogLog versi lama ini nampak lebih kemas. Widget ini telah diubahsuai dari yang asal agar kelihatan lebih kemas. Bukan Ana yang ubahla.. Boleh tengok tutorial asal di Blogger Sifu ini.

1. Untuk menukar MBL recent reader ke versi lama sila gantikan kod sedia ada dengan kod dibawah. Pastikan Antum menukar ID_MBL dan NamaUserMBL dengan kod id Antum (ada dalam kod baru tu).

2. Text biru juga boleh ditukar mengikut selera Antum.

3. Seterusnya ke bahagian Layout => Edit HTML. Tambahkan kod dibawah sebelum kod ]]></b:skin>.

td.mbl_fo_hidden{
display:none;
}
td.mbl_join_img{
}
td.mbl_join{
}
tr#tr0{
display: none
}
th.mbl_h{
display:none;
}

OK siap......

Cara Menghilangkan Tajuk Blog

2009-03-25T22:23:00.005+02:00

Tajuk untuk sesuatu blog memang penting bagi memberi gambaran kepada pengunjung mengenai blog tersebut. Cuma yang kurang bestnye text dan color yang disediakan oleh blogger tidak banyak pilihan dan kurang menarik serta susah untuk dipadankan dengan image di header. Biasanya kita akan menampilkan tajuk blog terus ke dalam image di header. Seperti blog ini.

Ok ada dua cara untuk menghilangkan tajuk blog di header. Cara pertama boleh rujuk disini "Memasukkan Gambar Di Header"

Cara kedua dengan menambah kod ini visibility:hidden; di bahagian header.

Dalam keadaan Loggin. Dibahagian Layout pilih Edit HTML. Cari kod lebih kurang begini.

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

atau..

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
visibility:hidden;
}

Tambahkan kod berwarna merah.

Ok siap...

Background Pada Posting

2009-03-21T17:36:00.005+02:00

Banyak tujuan kita memasang background pada post entry, antaranya untuk mencantikkan setiap entry dan menonjolkan kalimah2 yang penting untuk pengunjung. Ada dua bentuk background yang boleh kita gunakan, background berwarna dan bergambar.

Lihat contoh:

Untuk background berwarna:-

Contoh Penulisan Disini....
Contoh Penulisan Disini....
Contoh Penulisan Disini....

Ini kod untuk background berwarna.

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
Contoh Penulisan Disini....
</div>

kod merah adalah warna background dan border. Kod warna DISINI.

Untuk background bergambar pula:-

Contoh Penulisan Disini....
Contoh Penulisan Disini....
Contoh Penulisan Disini....

kod untuk background bergambar.

<div style="background:url(http://i302.photobucket.com/albums/nn113/aburifaie/green_backgroundcopy.jpg); padding:5px;">Contoh Penulisan Disini.....</div>

Gantikan text merah dengan alamat gambar Antum

Siap....Selamat mencuba

Cara Membuat Brilliant Button

2009-03-21T09:53:00.005+02:00

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

Cara Membuat Menu Tab Vertical

2009-03-10T09:58:00.008+02:00

Sebelum ini Ana ada posting cara membuat Menu Horizontal. Hari ini Ana kongsikan cara membuat Menu Vertikal (memanjang kebawah) pula. Seperti gambarajah diatas.

1. Loggin ke blogger. Pada halaman Layout pilih Edit HTML. Masukkan kod dibawah sebelum ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* Lebar Menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*Warna background Menu Vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*Warna Background bila Mouse diarahkan*/
color: white;
border-bottom: 1px solid black;
}

2. Perhatikan kod2 berwarna merah. Tukarkannya bersesuaian dengan blog Antum. Kod warna Disini. Setelah selesai klik butang save.

3. Seterusnya beralih ke bahagian Page Elements. Di bahagian sidebar, klik Add a Gadget => HTML/Javascript. Masukkan kod berikut.

<ul class="vertikalmenu">
<li><a href="/">Â» HOME</a></li>
<li><a href="http://almansuqie-tips.blogspot.com">Â» AlmansuQie Tips</a></li>
<li><a href="link kedua">» Al Quran & Sunnah</a></li>
<li><a href="link ketiga">» Peribadi</a></li>
<li><a href="link keempat">» Hadis 40 AnNawawi</a></li>
<li><a href="link kelima">» Himpunan Doa</a></li>
</ul>

4. Gantikan text2 berwarna merah dan biru. Selesai..

Cara Membuat Link Download

2009-03-08T09:03:00.007+02:00

Menjawab pertanyaan pkgkualapilah dengan detail, Ok caranya mudah sekali..Ada dua cara kita boleh gunakan untuk buat link download.

1. Pertama dengan text link.. Biasa kita tulis Download Disini. Ok untuk yang ini boleh refer pada Tip Memasukkan Link Di Postingan.

2. Cara kedua dengan menggunakan kod ini..

3. Gantikan text merah dengan link Download Antum dan text ungu dengan link Icon Donwload Antum. Ini hasilnya.Klik icon untuk Download Mozilla Firefox 3.

Blogspot Dengan Gaya Wordpress

2009-03-08T03:42:00.005+02:00

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget. Contoh blog Ana ni..Bila berada di laman utama, semua widget muncul dan bila dibuka salah satu post, sebahagiannya akan tersembunyi. Menarik tak?? Sekaligus mempercepat proses loading.. Ok caranya..

1. Loggin ke Blogger, pada Layout pilih Edit HTML. Jangan lupa tandakan pada kotak "Expand Widget Template"

2. Seterusnya cari kod widget yang nak disembunyikan. Contoh, Ana nak sembunyikan "Recent Reader". Ini kodnya..

<b:widget id='HTML18' locked='false' title='Recent Reader' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> <b:include name='quickedit'/>
</b:includable>
</b:widget>

3. Tambahkan kod berwarna merah.

<b:widget id='HTML18' locked='false' title='Recent Reader' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

4. Siap untuk satu widget. Kalau nak sorok yang lain gunakan cara ni juga yer. Dah siap semua, klik Save dan lihat hasilnya.

Selamat Mencuba!!

Sunber: Kolom Tutorial

Cara Menghilangkan Status Message

2009-03-07T22:26:00.004+02:00

Status message ini akan muncul di atas posting bila kita tekan label atau kita search artikel dalam blog tersebut. Ada sesetengah orang tidak suka dan rasa menyemak je kan, dan terasa nak buang terus status ini. Ok jangan risau, ini cara membuangnya.

1. Sekiranya kita menekan label, ia akan muncul begini,

2. Sekiranya artikel yang kita cari menggunakan kotak search yang disediakan atau pada navbar tiada, maka status begini akan muncul.

3. Loggin ke Blogger, pada layout pilih Edit HTML. Jangan lupa tandakan pada kotak “Expand Widget Templates”. Untuk langkah berjaga2 sila "Download Full Template dulu".

4. Seterusnya cari kod ini.. Guna Ctrl+F untuk lebih cepat. Delete kod berwarna merah.

<div class='blog-posts'>

<b:include data='top' name='status-message'/>

5. Siap padam klik butang save.. Insyaallah xkan muncul lagi. Kalau Antum memerlukannya kembali, cuma kembalikan kod merah tu ke tempatnya.

Membuat Animasi Dengan Photoshop

2009-03-06T03:54:00.003+02:00

Membuat Link Pelangi Berkerlipan

2009-03-02T00:40:00.006+02:00

Nak cantikkan link2 di blog Antum? Jadi warna warni seperti pelangi. Lebih menarik perhatian. Indah berseri.. Ok caranya..

1. Masuk ke Edit HTML dan cari kode <head>

2. Kemudian pastekan kode dibawah selepas kode <head>

3. Lihat contoh.

4. Siap!! Klik Save dan Lihat hasilnya.

Menambah Colom Di Post Body

2009-03-01T23:07:00.005+02:00

Alangkah seronoknye mengedit template ni..nak pula bila berhasil kan.. mesti senyum sorang2.. sebenarnya kod2 HTML ni mudah je untuk difahami, kalau hari2 duk mengadap je.. Ok, kali ini Ana nak kongsi cara menambah elements pada post body. Dah lama nak publishkan tapi masa tak mengizinkan. Caranya begini yer.. Disarankan untuk Download Full Template bagi yang masih baru sebagai langkah berjaga2.

1. Masuk ke Edit HTML, tambahkan kod dibawah sebelum kod ]]></b:skin>

/*Kotak Post
-----------------------------*/
#kotakpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#kotakpost{
width:530px;
}
#kotakkiri{
width:250px; /*lebar kotak kiri*/
float:left;
margin:4px;
}
#kotakkanan{
width:250px; /*lebar kotak kanan*/
float:right;
margin:4px;
}

2. Perhatikan kod yang berwarna merah diatas, pastikan sama dengan lebar main-wrapper di blog Antum. Kalau nak tahu lebarnya cari kod ini.

#main-wrapper {
width: 410px;

3.Seterusnya bahagikan kotak kiri dan kanan, perhatikan kod biru diatas yer.

4. Selesai langkah pertama, seterusnya cari kod berikut.

5. Ini paling penting, tambahkan kod dibawah ini. Lihat contoh.

6.Untuk dua kotak dibawah post body tambah begini.

7. Untuk dua kotak diatas post body tambah begini.

8. Alhamdulillah selesai dan klik save... Insyaallah akan muncul 2 kotak diatas atau dibawah post body Antum pada page elements.

Selamat mencuba..

Cara Membahagikan Posting

2009-02-24T20:11:00.007+02:00

Tutorial ni bukan la Ana yang buat.. Ini hasil kepandaian Amanda Fazani sohib BloggerBuster. Ana sekodar edit sikit2 aje.. Sebenarnya dah ade template yang dibuat khas dengan bentuk ini, namanya Minima Magazine Template. Contoh Template ni, tp lebih kemas.Ok caranya begini..

1. Pilih Layout => Edit HTML. Tambahkan kod dibawah selepas </head>

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
height:285px;
width: 238px;
float: left;
overflow: hidden;
}
</style>
</b:if>

2. Antum ubahkan lebarnya mengikut lebar main-wrapper. Contoh blog Ana ni, saiz main-wrapper 512px, jadi Ana saizkan dengan 238px untuk dapatkan 2 kotak. Maby boleh dapat 3 kotak jika main-wrapper yang lebih besar.

3. Seterusnya klik preview dan lihat hasilnya... kalau dah berjaya savela.

p/s: sila gunakan Read More V2

Membuat Read More V2

2009-02-19T23:24:00.006+02:00

Sebelum ini Ana dah postkan Cara Membuat Readmore yang bila ditekan akan teruskan memaparkan keseluruhan tanpa perlu loading. Ok sekarang ni kita buat readmore yang lain sikit. Tutorial ini sebenarnya terbit lebih awal.. kira version 1, tapi disebabkan Ana postkan kemudian maka jadilah V2. Ok ini caranya..

1. Pilih Layout => EditHTML. Tandakan pada kotak "expand widget template". Cari kod ini..

2. Kalau dah jumpa gantikan dengan kod di bawah.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

3. Tulisan merah boleh diubah..Siap dah...Klik Save.

4. Seterusnya paling penting. Untuk buat readmore pada entry, gunakan kode ini. lihat contoh.

Awal penulisan bermula<span class="fullpost">Penulisan yang selebihnya yang ingin direadmorekan</span>

Jenis-Jenis Border, Tambah dan Buang

2009-02-15T22:24:00.011+02:00

Ape itu border?? Entahla..Garisan luar la gitu.. Template kita biasa dihiasi dengan border, untuk image, header, sidebar dan macam² la. Ok kali ini kita sama² mengenali jenis2 border yang disediakan untuk blogger. Biasanya kod border adalah seperti ini.

border:1px solid $bordercolor;

1. Merah adalah saiz border, Boleh dibesarkan dan dikecilkan. Selain dari px, boleh juga menggunakan kod ini.

*1px (atau lebih)
*thin
*medium
*thick

2. Biru adalah jenis-jenis border, Antaranya ialah:

*none
*hidden
*dotted
*solid
*dashed
*double
*groove
*ridge
*inset
*outset

3. Ungu adalah warna border. Boleh juga guna kode warna. Dapatkan kod warna Disini.

Ok kita terus kepada jenis-jenis border. Contoh pada image pada posting.

.post img {
border:2px solid #ff00ff;
}

.profile-img {
border: 2px dashed #ff00ff;
}

.post img {
border:2px outset #ff00ff;
}

.post img {
border:2px inset #ff00ff;
}

.post img {
border:6px ridge #ff00ff;
}

.post img {
border:6px dotted #ff00ff;
}

Contoh lain tu kasi cuba sendirila di blog Antum ye..

Kalau nak buang border pula begini yer..

.post img {
border:0px;
}

Ok sampai sini dulu..

Sumber:Tip For New Blogger

Cara Memasukkan Gambar di Header v2

2009-02-15T20:40:00.007+02:00

Sebelum ni Ana dah buatkan tips untuk memasukkan sebarang gambar ke dalam header. Tutorial ni Ana buat khas untuk sahabat Manns'gor kerana tidak berjaya memasukkan gambar ke dalam header dengan tips sebelum ni. Sian Manns. Ok caranya begini..

Sediakan gambar header berukuran 660x250 (tinggi ikut sukala) dan uploadkan untuk dapatkan linknya.. Mudah upload di Photobucket

1. Loggin => Layout. Kali ini kita ke bahagian Edit HTML. Cari kod dibawah..

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

2. Tambahkan kod berwarna merah..

#header-wrapper {
background-image:url(http://i302.photobucket.com/albums/nn113/aburifaie/91.jpg);
height:250px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

3. Tukar link yang kelip² tu dengan link gambar Antum.Ini link header Ana. Xboleh guna. Tukarkan kod tinggi sekiranya gambar Antum lebih atau kurang dari 250px tinggi. Pastu klik preview dan lihat hasilnya.. Insyaallah gambar sudah muncul..

4. Tapi belum siap.. Border di dalam masih menyibuk kan.. Antum boleh buang atau besarkan die.. Cari kod ini, bawah sikit je.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Kod merah tu ialah border, kalau nak buang delete aje.. kalau nak besarkan tambah dengan kod height:238px; seperti ini..

#header {
height:238px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Ok siap Alhamdulillah..

Cara Memasang Chat Box

2009-02-04T14:32:00.009+02:00

ChatBox atau Shoutbox..satu ruang untuk berkomunikasi diantara tuan blog dengan pengunjungnya. Ada macam² jenis chatbox yang biasa digunakan oleh blogger, antaranya Cbox, ShoutMix, Oggix, Tag-World, GoogleTalk dan lain².

Ok harini Ana nak buat tutorial khas untuk Cbox. Sebab Ana sendiri pun guna cbox, dan juga untuk yang bertanya. Ok caranya..

1. Masuk ke laman ini. Klik Cbox ni.

2. Klik pada Get your own free Cbox now! atau sign up di atas untuk daftar akaun.

3. Isikan maklumat di ruangan ini.. dan klik Create my Cbox jika selesai. Gambar dibawah akan muncul jika Antum sudah berjaya daftar.

4. Seterusnya Daftar masuk kedalam akaun menggunakan username dan pasword yang Antum create tadi.. Kalau boleh pasword ni sentiasa diingati.

5. Untuk mendapatkan kodnya klik pada publish!. Jika mahu menukar warna cbox ini klik pada Look & Feel => Edit Style.

6. Copy kod yang diberikan dan paste kedalam blog. Pergi ke bahagian Layout => Page Elements => Add a Gadget => HTML/Javascript.

Ok siap...!

p/s: Kalau nak edit color Cbox ini setelah ditambah di blog, cukup sekadar menekan butang save dan refresh blog Antum tanpa memasukkan kod yang baru.

Membuat Read More di Template Classic

2009-02-01T12:41:00.008+02:00

Template Classic pun boleh buat readmore rupanya.. Manala Ana tau kan, xpernah guna pun tempalte classic ni. Terjun je dalam dunia blogging ni terus guna yang baru kan. Tutorial ni hanya untuk simpanan peribadi. Kalau ade kengkawan yang masih still classic bolehla dijadikan panduan. Ok ini cara...

1) Loggin => Template.

2) Masukkan code CSS atau style sheet Summary post (Yg berwarna merah) tu di antara <style type="text/css"> dan </style>

Contoh:

Name: Ms. Moto (Pinky Lee variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
----------------------------------------------- */

/* Primary layout */

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: #555;
background: #d7b url(http://www.blogblog.com/moto_ms/outerwrap.gif) top center repeat-y;
font: small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif;
}

3) Kemudian untuk meletakkan pautan Read More.. Cari code Blog Item Body dan letakkan code pautan tersebut di bawahnya.

<$BlogItemBody$>

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

4) Lepas tu Save Template.

5) Kemudian seperti biasalah letakkan code Span Full Post di setiap entri Antum atau bila nak Create post yg baru iaitu:

Contoh:

Ini adalah ringkasan ceritaku blabla pokpek!
<span class="fullpost">
Dan ini adalah selebihnya dari ringkasan tersebut
</span>

6) Kalau nak buat read more setiap kali posting, Antum boleh letakkan kode ini di bahagian Settings=> Formatting=>Post Template.

summary here
<span class="fullpost">
Type rest of the post here
</span>

Sumber : Muncet.com

Memasang Emoticon Di Post Entry

2009-01-31T18:19:00.008+02:00

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

Cara Membuat Dropdown Menu

2009-01-29T01:25:00.007+02:00

Dropdown Menu...sesuai untuk blog yang diisi dengan link yang banyak. Sampai panjang bebenor jadinye, nak² pula template yang satu sidebar. Puas Ana nak scrool je kebawah.hehe. Bila sidebar panjang maknanya posting pun banyakla kene show, bila posting lebih dari 7 biasanya akan lambat nak loading..ok melarat pulak..

Ini bentuk dropdown menu, caranya begini..

1. Loggin => Layout => Page Elements => Add a Gadget => HTML/Javascript. Tambah kode berikut dalam content.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

2. Gantikan text merah dengan link kamu. Text biru tajuk link tu..Lihat contoh:-

<select onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected="selected">Tips² Blogging</option>
<option value="http://almansuqie.blogspot.com/">AlmansuQie</option>
<option value="http://almansuqie-tips.blogspot.com/2009/01/cara-memasukkan-senarai-link.html">Cara Memasukkan Senarai Link</option>
<option value="http://almansuqie-tips.blogspot.com/2009/01/menambah-efek-salji.html">Menambah Efek Salji</option>
<option value="http://almansuqie-tips.blogspot.com/2008/12/cara-membuat-kotak-search.html">Cara Membuat Kotak Search</option>
</select>

Hasilnya seperti diatas..

3. Kalau nak tambah link lagi, tambah kode ini sebelum kode </select>

4. Link² ini akan dibuka di laman yang sama. Kalau nak buka di laman yang baru, cuma gantikan kode berwarna ungu dengan kode di bawah.

Mengelakkan Widget Hilang

2009-01-28T11:52:00.015+02:00

Biasanya kalau kita upload template baru, widget² dalam template lama kita akan hilang. Masalah pula nak mengisi balik widget kan. Kalau sebelum ni Ana akan copykan setiap widget dalam notepad dan pastekan balik dalam template baru. Memang lambat dan melecehkan. Bila dah pandai sikit, Ana copy kod2 dari source template yang lama. Cepatla sikit..

Tapi bila dah lama mengadap makhluk HTML ni, jumpa la pulak cara yang lagi senang dan mudah. Just dengan bebrapa langkah. Ok caranya begini..

1. Loggin Ke Blogger => Layout => Edit HTML

2. Sebelum tu kenal pasti setiap kedudukan widget, samada di bahagian Sidebar,Header, Main Wrapper atau Footer.

Ni contoh widget di bahagian sidebar blog Ana.

Contoh widget di bahagian Main Wrapper.

Contoh widget di bahagian Footer.

3. Ok.. yang berwarna merah tu adalah contoh widget di blog kita. Copy semua widget² ni dan paste ke dalam notepad. Kalau widget Antum ade lagi di bahagian lain jangan lupa dicopy.

4. Seterusnya uploadkan template baru, nanti akan keluar amaran seperti gambar di bawah:

5. Nanti dulu.. Jangan klik Confirm & Save lagi.

6. Cari kode dibawah dan pastekan semua widget dari notepad tadi dibawahnya.

7. Kemudian klik Save Template dibawah. Bukan ~~Confirm and Save~~.

Tambahan:- Kalau ada widget2 id yang sama, tukarkan saja dengan id yang lain. Contoh: kalau dah ada widget ID HTML1,tukarkan kepada HTML11 atau HTML110. Kalau ragu2 nak buat, boleh cuba dulu di blog test.Insyaallah jadi. Xpun simpan dulu semua kod2 widget Antum dalam notepad.

Selamat Mencuba..

Cara Menukar Template

2009-01-28T04:56:00.010+02:00

Mahukan template yang lebih mesra dan menarik.. Senang aje, tukarla template tu. Ini khas tuk seorang sahabat yang bertanya. Kalau nak buat template sendiri memang agak rumit. Perlu kepada pemahaman kod² html. Untuk yang mudah cari saja template² yang berlambak dipasaran maya ni.Ok untuk cari template sila la klik di Tips Archive sebelah kanan ni dengan title "Template". Disitu ada beberapa laman yang menyediakan free template. Kalau sudah jumpa template yang diinginkan, terus download ye. Jika file yang didownload berbentuk .zip,please unzip kan dulu.

Seterusnya Loggin ke Blogger => Layout => Edit HTML

Klik Browse (no.3 diatas) untuk cari file template yang didownload tadi. kemudian tekan butang Upload (no. 4)

Sebelum tu, kalau masih ada rasa cinta pada template sebelum ni jangan lupa Download Full Template dulu dan disimpan. Nanti kalau nak kembali pada cinta pertama just uploadkan balik je.

Klik butang save jika sudah selesai..

Cara Memasukkan Senarai Link

2009-01-25T23:51:00.014+02:00

Khas untuk KakWan yang bertanya, bagaimana cara untuk menambahkan senarai link di sidebar? Caranya sangat mudah, semua sudah disediakan oleh blogger. Ada 3 jenis gadget yang disediakan oleh Blogger, List, Link List dan terbaru Blog List. Disini Ana sertakan dengan snapshoot sekali supaya mudah difahami dengan lebih jelas. Caranya begini. Kita abaikan List dan Ana mulakan dengan Link List.

1. Seperti biasa Loggin ke Blogger => Layout => Page Elements.

2. Klik pada Add a Gadget dibahagian sidebar (bahagian lain pun boleh).

3. Seterusnya pilih pada Link List seperti dibawah.

4. Ruangan seperti ini akan muncul. Masukkan link dan Nama Laman pada ruang yang disediakan dan klik ADD LINK. Lakukan cara yang sama untuk link seterusnya. Klik butang save jika sudah selesai.

5. Selesai untuk Link List. Kita berpindah kepada Blog List pula. Ia akan muncul di Sidebar seperti gambar dibawah. Keistimewaannya berbanding Link List adalah ia akan menampilkan sekali posting terkini bagi setiap blog dalam senarai kita.

6. Cara yang sama. Add a Gadget.

7. Pilih pada Blog List

8. Klik Add To List untuk memasukkan link. Cara yang sama untuk link seterusnya. Klik save jika selesai.

Tambahan: Link List akan dibuka di laman yang sama jika diklik. Untuk membukanya di laman yang baru caranya DISINI.

Hilangkan "Subscribe to:Posts (Atom)"

2009-01-23T04:22:00.006+02:00

Ok..ni cara untuk hilangkannya. Senang saja.. Macam biasa Loggin dan terus ke Edit HTML. Cari kod dibawah dan tambahkan dengan text berwarna merah.

.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}

Cara Membuat Menu Tab Horizontal

2009-01-15T01:02:00.019+02:00

Nak buat link tab macam Ana?Ni caranya.Istimewa link tab ini, bila klik akan dibuka di window/tab yang baru.. Ni contoh tab yang ana guna.Tab ni ana dah tambahkan dengan kotak search. Ok ini caranya.

1.Macam biasa Loggin => Layout => Edit HTML. Tambahkan kode dibawah sebelum kode ]]></b:skin>

/* linktab

================== */

#linktab{
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif) ;
width: 864px;
height: 30px;
font-size: 11px;
font-family: georgia, Tahoma, Verdana;
color: #ffff66;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
#tabright {
width: 200px;
height: 30px;font-size: 11px;
float: right;
margin-right:10px;
margin-bottom:50px;
padding: 0px;
}
#tabright a img {
border: none;
margin: 5px;
padding: 0px;
}

#linktab ul {
margin:0;
padding:1px 10px 0px 0px;
list-style:none;
}
#linktab li {
display:inline;
margin:0;
padding:0;
}
#linktab a {
float:left;
background:transparent;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#linktab a span {
float:right;
height: 35px;
display:block;
background:transparent;
padding:7px 6px 4px 6px;
color:#ffff66;
border-right: 1px solid #000;
}
#linktab a span {
float:none;
}
#linktab a:hover span {
color:#fff;
}
#linktab a:hover {
background-position:0% -42px;
}
#linktab a:hover span {
background-position:100% -42px;
}

2. Warna kod oren untuk panjang tab,Tukar mengikut size main-wrapper Antum. Warna biru pula untuk text dan ungu untuk border,tukarla mengikut selera Antum. Kod Warna Disini.

3. Juga Gantikan kode gambar ni. Disini Ana ada sediakan beberapa warna. Cuma gantikan text tebal merah.

(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif)

tabbiru.gif

tabhijau.gif

tabkuning.gif

tabmerah.gif

tabungu.gif

4. Kemudian tambah kode berikut dibawah kode ini <div id='content-wrapper'>

<div id='linktab'>
<ul>
<li><a href='URL Link Disini'><span>Home</span></a></li>
<li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
</ul>

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div></div>

p/s: Kalau xnak kotak carian, buang kod ini.

Siap..

My Contact

2009-01-14T19:55:00.002+02:00

Antum Boleh Menghubungi Ana Terus Samada

Melalui E-Mail : almansuqie@yahoo.com

Atau

YM : almansuqie

Atau

Melalui H/P : +20103351640

Cara Menghilangkan Tarikh Pada Posting

2009-01-10T17:49:00.006+02:00

Assalamualaikum.. Ok ini cara untuk menghilangkan tarikh pada posting. Disini ada dua cara. Pertama Loggin ke Blogger => Layout => Page Elements kemudian klik pada butang Edit seperti rajah dibawah.

Seterusnya hilangkan tanda pada item date seperti dibawah.

Kalau item diatas tiada atau cara ini tidak berhasil, Antum terus klik pada Edit HTML diatas dan cari kode ini.

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#000;
height: 0px;
visibility: hidden;
}

Tambahkan dengan kode berwarna merah.

Siap...

Cara Membuat Top Post

2009-01-08T17:06:00.018+02:00

Widget ini akan menampilkan posting yang popular berdasarkan kepada jumlah komen pada setiap posting. Lagi banyak komen lagi topla post tu,hehe. Widget ni ciptaan Amanda Fazani. Ok ni caranya..

1. Loggin ke Blogger =>Layout =>Add a Gadget => HTML/Javascript. Tambahkan dengan kod dibawah.

2. Gantikan namablog dengan Nama blog Antum.. Angka 10 adalah jumlah top post yang akan ditampilkan.

3. Kalau nak hilangkan nombor pada top post ini just buangkan saja kode ini.

document.write('<ol style="text-transform: capitalize;">'); dan document.write("</ol>");

4. Simpan..

Sumber: O-OM

Cara Menambah Efek Salji

2009-01-01T12:59:00.007+02:00

Efek salji ni sesuai untuk background yang gelap sebab salji ni kan warna putih. Lihat demo Disini. Caranya senang saja..

1. Loggin ke Blogger => Layout => Add a Gadget => HTML/Javascript, dan isikan dengan script di bawah.

2. Klik Save dan siap..

Sumber: dynamicdrive.com

Cara Membuat Kotak Search

2008-12-23T15:21:00.011+02:00

Kotak search ni kita isi untuk mencari sebarang artikel dalam blog kita. semua dah tau kan.. ok ini caranya..

1. Loggin ke Blogger => Layout => Add Gadget => HTML/Javascript. Tambahkan kod dibawah ini.

2. Tukarkan namablog dengan nama blog Antum. Nombor 30 adalah panjang kotak tersebut. Dah siap letaklah ditempat yang sesuai di sidebar Antum.

Menukar Tulisan Older Post

2008-12-14T15:38:00.010+02:00

Older Posts, Home, Newer Posts. Link² ini akan ada di bahagian bawah posting. Ok sekarang kita akan tukar link² yang berbentuk tulisan ini dengan icon. Nampak lebih cantik dan menarik. Begini caranya..

1. Loggin ke Blogger => Layout => Edit HTML.Tandakan pada kotak Expand Widget. Cari kode dibawah. Gunakan Ctrl+F.

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

2. Gantikan tulisan yang berwarna dengan kode image ini.

3. Lihat contoh ini.

<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'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/newer.gif'/></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'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/older.gif'/></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://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
</b:if>
</b:if>

</div>

4. Hasilnya begini..

Tambahan: kode² yang asal tu boleh juga di tukar dengan tulisan lain (kalau xmau guna icon)

Memasang Kotak 'Alert Message'

2008-12-13T05:21:00.003+02:00

Kotak Alert Message ini akan muncul di awal loading. Kita boleh la kasi tau kat pengunjung ape² kan, sebagai maklumat atau amaran awal bila masuk blog kita.. Kalau lafazkan salam lagi bagus kan. Ok ikuti tutorial ni.

1. Loggin ke Blogger => Layout => Add Gadget => HTML/Javascript. Tambahkan dengan kode dibawah.

2. Tukarkan tulisan biru dengan kalimat Antum Sendiri.. Tulisan purple tu akan muncul jika pengunjung kita Disable Javascript.

siap..

Sumber : Tips For New Blogger

Ascii Keyboard Code

2008-12-11T06:20:00.008+02:00

Disini Ana sediakan kode² bagi sesetengah simbol yang biasa digunakan dalam penulisan.. Tapi ramai la yang belum tau kode²nya, termasukla hamba ni.. hehe. Ana terjumpa kode²ni di laman http://rmhh.co.uk/ascii2.html. Ana tidak senaraikan semuanya disini. Sekodar yang Ana boleh gunakannya saja.. Nak tau yang lain boleh ke laman asal ye.. Caranya mudah saja. Tekan tombol Alt+Kode. Contoh Alt+0169 bagi simbol ©.

0169 = ©

0187 = »

0174 = ®

0128 = €

0153 = ™

0186 = º

0188 = ¼

0189 = ½

0190 = ¾

0191 = ¿

0185 = ¹

0178 = ²

0179 = ³

Membuat Pesanan Di Posting

2008-12-10T17:02:00.007+02:00

Ana cuba buat Tutorial ni.. tetiba menjadi pulak, pening la jugak nak buat nye. Tapi Ana puas hati bila melihat hasilnya. Xla sia2 duk mengadap makhluk syasyah ni. Ok pesanan ni akan muncul di setiap akhir posting. Kita boleh tulis apa saja, kalau nak isi iklan pun boleh rasanya. Tutorial ini sesuai bagi yang menggunakan 'Read More' macam Ana. Yang lain pun sesuai cuma ade perbezaan la skit. Begini caranya ye..

1. Loggin ke Blogger => Layout => Edit HTML. Tandakan pada kotak Expand Widget dan cari kode dibawah.

2. Tambahkan kode ini sebelumnya.

<h5><br/><center>
<b>PESANAN ANTUM DISINI</b>
</center><br/></h5>

3. Gantikan text berwarna merah megikut citarasa Antum.

4. Seterusnya scroll ke bahagian Posting dan tambahkan kode dibawah.

.post h5 {
background: #E7F398 url(http://i302.photobucket.com/albums/nn113/aburifaie/comen.jpg)no-repeat top left;
border: 3px solid #81BEF7;
font-family: Georgia;
font-size:12px;
color:#B404AE;
-moz-border-radius:12px;
}

5. Text merah adalah background. Biru warna border. Purple warna tulisan. Kasi tukar la ikut template Antum..heheh dah siap.

Background Pada Tajuk Sidebar

2008-12-09T03:46:00.001+02:00

Ingin menjadikan tajuk sidebar lebih menarik?? Mudah saja, kita boleh meletakkan background yang bermacam² mengikut kretiviti masing². Ok mari lihat caranya..

1. Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

.sidebar h2 {

2. Tambah kode ini selepasnya..

background:url(http://i302.photobucket.com/albums/nn113/aburifaie/sl.jpg)repeat-x;

3. Gantikan alamat background yang berwarna merah. Siap..

Tambahan:- Kalau Antum xjumpa kode .sidebar h2 { di template Antum, boleh guna cara ini. Tambah kode dibawah di bahagian sidebar.

.sidebar h2 {
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/sl.jpg)repeat-x;
color: #FFFF66;
font-size: 11px;
font-family: Georgia;
font-weight: strong;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:center;
}

Gantikan alamat background yang berwarna merah. Biru warna tulisan. Ungu size tulisan. Hijau kedudukan tulisan.

Cara Membuat Menu Tab View

2008-12-08T11:59:00.016+02:00

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna. Dapat jimatkan ruang sekaligus memudahkan pembaca mencari maklumat.

Ini paparan makhluk yang akan terhasil melalui tutorial ini. Nape xsama macam Ana punya?? Ha yang Ana tu dah banyak ditokok tambah. Asalnya macam ini jugak. Kalau Antum nak cantikkanya kita boleh cerita lain masa. Ok ini stepnya.

1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ni ]]></b:skin> kalau nak cepat jumpa klik je Ctrl+F dan cari.

2. Masukkan kode dibawah sebelumnya.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Lihat keterangan pada tulisan berwarna merah. Just tukar tulisan yang berwarna biru. Untuk kode warna boleh dapatkan DiSINI

4. Seterusnya tambahkan kode berikut sebelum kode </head>

5. Cukup untuk bahagian ini. Klik Save Template.

6. Seterusnya pergi ke Page Elements => Add Gadget => HTML/Javascript dan tambahkan script dibawah.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 1.1">Tajuk Isi 1.1</a></li>
<li><a href="Url Isi 1.2">Tajuk Isi 1.2</a></li>
<li><a href="Url Isi 1.3">Tajuk Isi 1.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 2.1">Tajuk Isi 2.1</a></li>
<li><a href="Url Isi 2.2">Tajuk Isi 2.2</a></li>
<li><a href="Url Isi 2.3">Tajuk Isi 2.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 3.1">Tajuk Isi 3.1</a></li>
<li><a href="Url Isi 3.2">Tajuk Isi 3.2</a></li>
<li><a href="Url Isi 3.3">Tajuk Isi 3.3</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

7. Lihat kode2 diatas.
#Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
#Text yang berwarna Merah Adalah text bagi kotak tajuk.
#Text yang berwarna Ungu adalah isi menu ini. Antum boleh isikannya dengan link, gambar, banner, script dll.
# Untuk menambahkan jumlah menu just copy text yang kelip2 tu dan tambahkan dibawahnya.

Ok. Selamat Mencuba

Membuat Horizontal Link List/Label

2008-12-07T02:26:00.011+02:00

Hari ini nak kongsi dengan Antum cara nak jimatkan ruang sidebar kita dengan membuat "Horizontal Link List/Label". Tau kan rupanya?? Macam gambar dibawah. Jom layan..

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

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline;
}

2.Kekadang ade kode yang digabungkan terus macam ni.

.sidebar ul li {
display:inline;
}

3. Tambah kode warna merah tu yer.. Cara ini akan terkesan untuk semua link list termasuk Archive dan Label.

Ok sekarang kita nak khususkan untuk satu2 link saja.. (Abaikan yang diatas sekiranya Antum memilih cara dibawah).

1. Pertama untuk link list. Cari kode dibawah.

<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>

Text merah tidak semestinya dalam tulisan diatas.. Kekadang rupa lain yer.. Kalau nak senang, tengok tajuk link yang kita tulis di sidebar tu, contoh yang color biru tu.. Dah jumpa tambahkan kode merah dibawah dalam bahagian sidebar.

/* Sidebar Content */

#LinkList2 li{
display:inline;
}

2. Ini untuk Label pulak..Antum cari guna cara sebelum ni..sama je.. kenalpasti dah tambahkan di bahagian sidebar.

/* Sidebar Content */

#Label1 li{
display:inline;
}

Ok Siap..Alhamdulillah

Cara Membuat Text Area

2008-12-06T17:47:00.006+02:00

Text Area ni kita buat untuk isikan link blog kita. Kira kalau kawan2 atau sesape yang nak 'link'kan blog kita boleh terus copy kode yang telah disediakan.Contoh macam ana buat ni... Caranya sangat mudah..

1. Layout => Add Gadget => HTML/Javascript dan tambahkan dengan kode dibawah.

2. Tukarkan text biru dengan alamat blog Antum dan text ungu dengan alamat image Antum. Nombor2 yang merah tu tukarla mengikut kesesuaian blog Antum..

Membuat Artikel Yang Berkaitan

2008-12-04T16:51:00.008+02:00

Tujuan memasang "Related Post" atau artikel yang berkaitan ini adalah bagi memudahkan pembaca untuk mendapatkan sebarang maklumat yang berkaitan dengan artikel sebelumnya. Related Post ini akan berada di bawah posting. Contoh seperti di bawah posting ini. Kaitan artikel adalah berdasarkan pada Kategori atau label yang sama. Ok, ini cara membuatnya.

1. Login ke blogger => Layout =>Edit HTML.Tandakan pada kotak "Expand Widgets Template". Kemudian buka "SCRIPT INI"dan copy semua script yang ada didalamnya.

2. Kemudian cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Terdapat dua kode yang sama seperti ini bagi template yang sudah ditambah dengan "Read More". Jadi tambahkan script tadi dibawah kode yang pertama.

3. Klik save dan lihat hasilnya.

Kalau nak tukar tajuk "Related Posts by Categories". Sila ke Edit HTML semula dan cari tajuk tersebut. Jangan lupa tanda kotak Expand Widgets dulu, kalau tidak tak jumpa la. Ok siap.

Menambah Icon Di Sidebar Link

2008-11-28T09:46:00.003+02:00

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

Memasukkan Gambar Di Header

2008-11-27T19:40:00.000+02:00

Header yang menarik dapat memberikan satu gambaran kepada setiap pengunjung blog kita.. Ana sangat suka bila terjumpa blog2 yang headernya menarik dan kreatif. Biasanya Ana lepak lama skitla kat blog depa sambil2 membaca entry yang disediakan. Ok ini cara yang disediakan oleh blogger untuk kita memasukkan sebarang gambar ke dalam blog header.

1. Loggin ke Blogger => Layout dan klik pada Edit Header

2. Paparan seperti dibawah akan muncul. Gambar yang akan dimasukkan mestilah sudah di'resize'kan mengikut saiz header dengan menggunakan sebarang software photo editing. Ana biasa guna "Adobe Photoshop".

3. Seterusnya Antum boleh 'upload'kan gambar kedalam header dari dalam komputer ataupun dari webhosting seperti Photobucket dan Imageshack. Kalau nak upload dari komputer, klik pada butang browse dari cari gambar tersebut. Masukkan link gambar sekiranya ingin upload dari webhosting.

4. Ok dah siap loading gambar yang di'upload' tadi?? Sebelum save, pilih kedudukan gambar samada dibelakang title "Behind title and description" atau sebaliknya "Instead of title and description"

Dah siap.....

Memasang Icon Back To Top

2008-11-26T04:26:00.004+02:00

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>

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

Sumber: o-om.com

Cara Memasukkan Link Di Postingan

2008-11-25T03:09:00.003+02:00

Ada satu cara mudah untuk memasukkan apa2 link ke dalam posting kita. Just hitamkan mana2 text yang hendak dijadikan link, kemudian klik pada icon link yang telah disediakan dan masukkan linknya..

Link ini akan dibuka di halaman yang sama. Untuk membukanya di halaman yang lain, Klik Edit Html dan cari link yang telah dimasukkan kemudian tambahkan kode ini target=_"blank" di akhir link seperti dibawah.

<a href="http://almansuqie-tips.blogspot.com/"target=_"blank">AlmansuQie</a>

Kotak Komentar Pada Setiap Postingan

2008-11-24T01:02:00.008+02:00

Assalamualaikum....Membuat kotak komentar di setiap postingan adalah satu pilihan terbaik. Ini akan memudahkan pengunjung untuk meninggalkan sebarang komentar, pesanan atau kritikan tanpa membuka tetingkap yang baru dan melambatkan. Caranya begini yer..

1. Login ke draft.blogger.com. Mesti pelik kan? draft.blogger ini lebih kurang macam blogger.com jugak la, fungsi yang sama cuma ada beza sikit je.

2. Pilih halaman Settings kemudian Comments. Tandakan pada kotak (Embedded below post)

3. Pilih (Save Changes) dan lihat hasilnya.

4. Untuk lihat hasilnya cuba klik mana2 tajuk postingan Antum. Jika kotak komen sudah ada di dibawah posting maka ianya berhasil dan cukup setakat ini. Bagi yang tidak berhasil, jangan risau, mungkin ada masalah dengan template Antum. Cuba cara dibawah.

5. Pilih Layout => Edit HTML". Tandakan pada kotak "Expand widget templates" dan cari kode dibawah.

6. Gantikan dengan kode dibawah.

7. Pilih (Save Changes) dan lihat hasilnya. Insyaallah dah menjadi tu..Kalau boleh doala dulu sebelum save..heheh..

Selamat Mencuba!!

The Cutest Blog On The Block

2008-11-23T01:20:00.007+02:00

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja. Loggin ke Blogger => Layout => Add Gadget =>HTML/Javascript.

Tambahkan kode yang disediakan ke dalam kotak kontent. Ini untuk template Minima dan yang sewaktu dengannya saja. Template lain Ana tak pernah cuba lagi. Nak tau cuba la..

Cara Membuat Scrolling Links

2008-11-22T13:43:00.002+02:00

Scrolling Links ni dapat jimatkan ruang sidebar kita yang terlalu panjang dengan link2. Antum boleh tukar ketinggian dan background color scrolling ni. Lihat text yang dimerahkan..Dapatkan kode warna DiSini.

<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc">
<ul type="circle">
<li><a href="http://almansuqie.blogspot.com/" target="_blank">AlmansuQie</a></li>
<li><a href="http://ummu-rifaie.blogspot.com/" target="_blank">ummurifaie</a></li>
<li><a href="http://alhuzaifie.blogspot.com/" target="_blank">Huzaifah</a></li>
</ul>
</marquee>

AlmansuQie

ummurifaie

Huzaifah Rifaie

Cara Menghilangkan Navbar

2008-11-21T19:11:00.009+02:00

Diatas ini adalah bentuk-bentuk Navbar yang disediakan oleh Blogger/blogspot yang terdiri daripada empat warna. Blue, Tan, Black dan Silver. Kita boleh tukarkannya mengikut kesesuaian template kita di Layout=>Edit Navbar.

Kedudukannya adalah di bahagian paling atas blog. Kegunaanya pula adalah untuk Sign In/Out, Customize blog, dll.

Kembali kepada tajuk, sesetengah orang rasa kurang sedap mata memandang bila Navbar ni ade di blog mereka dan ingin menghilangkannya. Ana dengar orang kata kalau hilangkan Navbar ini kita telah melanggar Term of Service (TOS) dari Blogger.com? Tapi Ana rasa tidak, sebab kalau kita tengok template-template baru yang disedikan oleh blogger2 yang pakar semuanya tanpa Navbar. Setakat ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Maknanya, bolehla kan.

Ok disini Ana akan bagi dua cara..Pertama untuk menghilangkan terus Navbar dan yang kedua adalah dengan membuat "Auto Hide".

1. Loggin ke Blogger => Layout => Edit HTML.

2. Untuk menghilangkannya tambahkan kode berikut.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

3. Untuk membuat "Auto Hide" tambahkan kode berikut.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

4. Tambahkan mana-mana kode diatas selepas kode <b:skin><![CDATA[/* seperti contoh dibawah.

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Green Star
Designer: abu Rifaie
URL: http://almansuqie.blogspot.com/
Date: 12 November 2008
----------------------------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Membuka Link&Label Di Window/Tab Yang Baru

2008-11-20T19:11:00.008+02:00

Ana ingat xde cara untuk buka link&label di window/tab yang baru.. Tengah jalan2 terjumpa satu cara yang sangat mudah. Ana biasa la guna untuk buka gambar atau link di posting.. Ini dia bendalahnye { target='_blank' }. Rupanya boleh tambah bendalah ni untuk buka link&label di window yang lain..Ok ini caranya.

1. Loggin ke Blogger => Layout => Edit HTML". Jangan lupa tandakan pada kotak Expand Widget. Kalau nak selamat download full template dulu yer.

2. Untuk Link sila cari kode dibawah. Pastikan kode yang betul..Perhatikan yang berwarna biru, ni yang default. Kalau Antum dah tukar sila cari tajuk link tersebut. Kemudian tambahkan yang berwarna merah sepeti kode dibawah.

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>

3. Untuk Label pulak sila cari kode dibawah. Caranya sama jugak. Tengok kode ini betul-betul. Tambahkan yang berwarna merah.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

Yahoo! Messenger Pingbox

2008-11-19T14:54:00.007+02:00

Pernah ternampak widget ni di Blog?? Ana rasa widget ni masih baru coz tak ramai yang guna.. Yahoo PingBox ni bestla jugak.. Ana dah gunakannya di blog Peribadi.. Widget ni macam status messenger gak la tapi ade beza sikit.. Pelawat boleh berchating dengan kita menggunakan box ni tanpa membuka instant msg, dengan syarat kita available/online la. Kalau tidak tak dapat amatla.

Untuk dapatkannya boleh klik pada gambar diatas..

Status Yahoo! Messenger

2008-11-19T14:22:00.008+02:00

Cara menambah status Yahoo! Messanger di blog memang mudah..semua da sedia maklum. Biasanya kita akan menggunakan icon-icon seperti dibawah. Ikut tutorial ini..

1. Loggin to Blogger => Layout => Add Gadget dan tambahkan kode berikut ke dalam kotak content.

2. Tukarkan ID"al_islam"kepada ID Yahoo! Messenger Antum. Nombor" 9 " adalah jenis icon Yahoo! Messenger. Boleh lihat gambar diatas.

3. Save..

Cara Membuat Recent Comments

2008-11-18T08:34:00.007+02:00

Hari ini kita nak buat "RecentComments" pulak.Apa tujuan kita pasang bendalah ni?? Jawapannya mudah, untuk mengetahui komen terbaru dari pengunjung kita. Kita boleh letak di halaman utama, biasanya disidebar.Ok ni caranya...

1. Loggin ke Blogger=>"Layout=>Add Gadget=>HTML/JavaScript" dan tambahkan kode berikut ke dalam kotak content..

2. Angka 10 adalah bilangan komen yang akan ditampilkan. Tukar YourBlogName kepada nama blog anda.Ok Siap...

Cara Menampilkan Posting Terkini

2008-11-17T18:02:00.006+02:00

Recent Post (Postingan Terikini)ini adalah satu widget yang akan menampilkan senarai posting yang terbaru di sidebar kita?? Caranya sangat mudah..

1. Loggin to Blogger dan klik "Layout"=>"Add Gadget"=>"HTML/Javascript".

2. Copy kode dibawah dan paste di kotak content..

3. Tajuk tu isila dengan apa2 yang berkaitan pastu save.

4. Tukarkan YourBlogName dengan nama blog korang. Kalau nak isi nama blog orang lain pun boleh. Contoh blog ni, Ana letakkan recent post blog peribadi Ana..

5. 10 adalah Jumlah post yang akan ditampilkan..

Ok..dah siap..good luck

Disable Right Click

2008-11-17T11:05:00.015+02:00

Bagi sesiape yang kedekut macam Ana ni, sesuai la nak gunakan tutorial ni.. Bukan kedekut sebenarnya, tapi nak jaga la hasil penat lelah yang kita buat, takkan kita nak senyum pulak bila orang curi hasil ciptaan kita kan, dah la xbagi kredit pun..hehehe

Ok ape2 pun kat bawah ni Ana tampalkan script untuk "disablekan right click".

1. Script ni bila kita klik kanan akan keluar tanda amaran. Antum tukar la text yang diboldkan dengan ayat Antum sendiri..

Source : By Maximus

2. Script dibawah ni xde tanda amaran macam yang atas... nak tau cuba la tambah di blog Antum..

Source: Renigade

Caranya, macam biasa Loggin ke Blogger "Layout=>Add Gadget=>HTML/Javascript".
Copy mana2 kode diatas dan paste di kotak content pastu save..Kalau boleh Antum letakkan di awal sidebar..Kalau tak masa page Antum tengah load orang boleh klik jugak..Ini sekadar mencegah atau amaran, tapi kalau orang nak curi, macam2 cara diorang boleh guna..

3. Cara yang last ni paling mudah. Cari kode <body>

Dah jumpa gantikan dengan kode dibawah.

Selamat Mencuba!!

Hilangkan Nombor Di Label

2008-11-17T00:52:00.008+02:00

Kalau Antum nak hilangkan nombor di label senang saja caranya..tekan3 siap..jom layan..

1. Loggin to Blogger=>Layout=>"Edit HTML".Jangan lupa tandakan pada kotak Expand Widget.

2.Cari kode ini.

(<data:label.count/>)

3. Dah jumpa, hazafkan (delete) dan save template.

Jadikan Huruf Besar Di Awal Posting

2008-11-17T00:08:00.008+02:00

Assalamualaikum..teringin nak buat huruf besar di awal posting macam ni?? nampak bergaya kan?? Caranya sangat mudah. Jom layan...

1. Macam biasa "Loggin to blogger=>Layout=>Edit HTML" dan cari kode dibawah.

.post-body {
margin:0 0 .75em;
line-height:1.6em;
....
....
}

atau kode ini.

.post {
margin:.5em 0 1.5em;
padding:1.5em;
border: 1px solid #0000FF;;
}

2. Tambahkan kode berikut dibawahnya..

.post bt {
float:left; color:
headerBgColor;
font-size:50px;
font-family: Georgia;
line-height:40px;
padding-top:1px;
padding-right:5px;
}

3. Tengok kode diatas..size font, line height,dan yang lain2 tu boleh ditukar ikut citarasa Antum.

4. Dah siap klik butang save.

Ok cara nak jadikan sesatu huruf tu besar, just kepitkan huruf atau kata yang akan dibesarkan dengan kode<bt>....</bt> sebagai contoh :

<bt>A</bt>ssalamualaikum...

ok..selamat mencuba!!

Your Name
Your Email Address
Subject
Message
Attachment