apa ini? doodle copycat? header?

Dah berapa hari ek tak update belog? Still, alhamdulillah, masih ada lagi yang sudi menjenguk belog ini. Trimaz..trimaz. So, hari ini aku nak update belog yang dah mula bersawang ni. Sejak kebelakangan ini, aku sibuk dengan urusan header dan template. Dari pagi ke malam asyik menghadap laptop, mujur tak jadi rabun!
Memandangkan semua tu dah siap, laju je aku update belog ni,HAHA.

Ada juga yang meminta agar header tu diubah, untuk menyiapkan header tu, tempahan yang lain turut tertunggak. ( Gila, skema siot!) .HAHA. Akey, ini antara header yang telah disiapkan.

header dengan status twitter

Yang ini untuk banner pulak.

Trimaz bagi siapa-siapa yang menempah tu k. Credit to google dan OSM jugak untuk gambar- gambar comel ini, HEHE. Btw, isu copy atau mengambil doodle sekarang ni memang dah HOT di antara para blogger! Dah ramai kot yang post pasal bab ni.

Antaranya :

hahazirah

pinkgajahstory dan banyak lagilah.

cilok dari pink gajah XD

Yang ini post satu blogger ni, tak tahu siapa. Walaubagaimanapun, tak patutlah marah- marah kan? Memang dah salah sebab ambil tanpa kebenaran. Kalau tetap nak guna juga, buatlah page untuk credit kalau dah padam watermark tu. Akupun pernah juga ambil tanpa kebenaran ( bocor rahsia! LOLX ) , tapi watermark tak padam. Kalau padam pun, aku bagi credit.

Aku faham sangat kalau idea, lukisan dan sebagainya yang kita buat sendiri tu kena ambil dan diakui yang segala hasil tu sebenarnya dia yang buat. Siapa dia? Orang yang mengambil tu lah. Apapun, benda ni dah bagi kita semua pengajaran termasuk aku, HAHA. 

Dan tahniah jugak bagi yang dah mula bagi credit dan membuang doodle tu. :D

Sama- samalah kita jadikan ikhtibar ekk. Kasihan mereka yang bersusah payah memerah otak, kita pula senang- senang mengambil, ye dak? Dan aku pun nak minta maaf kat sini, kalau aku pernah buat orang sakit hati dan minta maaf jugak kalau aku mengambil hasil seseorang tu dan tak bagi credit. * tetiba * .

macam mana nak tukar warna tulisan bila kena highlight

Haha, apa punya tajuklah. Sebenarnya nak pendekkan lagi tajuk tu, tapi takut ada yang tak paham pulak. Cea, entah- entah ada yang tambah tak paham dengan tajuk aku sekarang ni, LALALA. Akey, abaikan. Kita teruskan dengan tajuk kita kat atas tu k.

Ada yang tak paham lagi ke? Korang boleh tengok kat gambar bawah ni k.

Haa.. selalunya kalau kita nak highlight, bukan ke warna tu menjadi biru? Tapi apa yang dapat kita lihat kat sini, ianya telah berubah menjadi berwarna pink! Woah.. cantik bukan? Well, tak semestinya kita tukar jadi warna pink aje, boleh tukar warna lainlah. Janganlah takut...hehe!

dashboard--> design--> edit html--> klik expand widget

Tekan pulak F3 kat keyboard korang bagi memudahkan pencarian dan sila cari code ni.

 ]]></b:skin>

Dah jumpa? Baik, sekarang copy pulak code kat bawah ni.

 ::-moz-selection{

background:#F665AB;

color: #FFFFFF;

Tulisan berwarna merah tu ialah background bila korang dah highlight nanti manakal tulisan berwarna hijau tu pulak ialah warna tulisan. Korang boleh tukar mengikut citarasa korang sendiri. Nak tukar tapi tak tahu code warna? Boleh rujuk kat sini .

tutorial buat scrollbox/ kotak scroll/ kotak tarik?

Dari tadi nak update belog ni tapi tak tahu nak update apa. Banyak sangat yang nak update kat sini. Tapi aku dahulukan permintaan ni, di mana ianya telah diminta daripada seorang rakan blogger, cik comot . Nanti boleh jenjalan kat belog dia k.

Akey, jom kita teruskan tutor ni.

ini contoh scrollbox. Sama seperti macam tempat aku simpan linkies korang.

text/LINK

Nak buat? mula-mula, pergi ke design--> page element--> add a gadget--> javascript/html .

Copy code kat bawah ni dan paste kat kotak gadget korang.

<center><div style="border: 1px solid; color: #cccccc; height: 200px; overflow: auto; padding: 15px; width: 280px;">



text/LINK




</div></center>

height dan width tu korang boleh ubah sesuka hati korang.

********************************************************************************
 bagi yang nak buat text area pulak, ini contohnya. Seperti biasa, kena pergi ke page element dan seterusnya.

saya suka kamu


Baik, ini pulak code untuk text area.

<textarea id="textarea" rows="4" cols="23" name="textarea">ayat korang</textarea>

Perkataan berwarna tu bolehlah ubah.

Row : lajur melintang yang korang nak
cols : lajur menegak yang korang nak.

Tak rugi mencuba, sebab benda ni boleh membantu korang jimatkan ruang. Kat bahagian posting pun korang boleh letak, kat sidebar pun boleh letak. :)

cara ubah/ tukar tajuk linkwithin

Haiii, nampaknya belog aku ni dah jadi belog tutorial la pulok ek, bukan belog peibadi lagi, HAHA. Sejak dua menjak ni ada je orang tanya pasal tutorial. Kalau bukan kat formspring, kat facebook pulak dah. Bagi kat formspring tu, aku jawab kat sanalah jugak. Melainkan kalau korang minta aku buat tutorial kat dalam belog ni, barulah aku buat. Cett, apa punya ayat ni? =.=

Sebenarnya linkwithin ni bagus. Bagi bloggers yang baru singgah atau datang kembali dan terlepas entry korang yang lepas, mereka boleh merujuk semula ( ini bukan kes rujuk cerai amende k ) entry korang yang lepas. Ini kerana gadget linkwithin ni memaparkan entry yang berkaitan, siap dengan gambar lagi. Itupun kalau korang ada letak gambar kat entry tulah. So, benda ni mesti menarik pembaca korang untuk membaca entry- entry korang yang lepas sekaligus up traffic kan? Lebih- lebih lagi kalau tajuk nampak HOT ajer!

Akey, untuk yang bertanya, macam mana nak tukar ataupun ubah tajuk linkwithin tu, bolehlah rujuk kat tutor ni k.

Bagi yang dah mempunyai gadget linkwithin ni, kalau nak ubah pun boleh. Korang cuma perlu letak code ni kat depan atau sebelum coding linkwithin tu aje.

<script>linkwithin_text='ayat korang sendiri'</script>

kalau tak faham, boleh rujuk dalam gambar kat bawah ni. :)

Yang baru nak menggunakan linkwithin ni pulak, bolehlah pergi ke SINI. Ikut sahaja arahan kat site tu dan taddaaaa!! korang kini mempunyai gadget linkwithin, yeahh!

tutorial buat back to top

Button back to top ni sangat bagus untuk para blogger sebab tak payah nak susah- susah scroll, lebih- lebih lagi kalau entry owner tu panjang sampai nak buat orang tercirit- birit menunggu! Bila dah ada gadget ni, korang tak payahlah lagi susah-susah,just klik button back to top tu, ianya akan scroll dengan sendirinya. Hebat?

Baik, macam mana nak buat?

Sila log in ke dashboard korang k. Pastu pergi ke design--> add a gadget--> javascript/html.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top"><img src="url gambar korang" /></a>

Copy code kat atas ni dan paste kat kotak gadget korang. Url gambar tu, korang letaklah url gambar korang nak. Boleh design sendiri dan ambil code url tu atau boleh jugak cari kat mana- mana sites yang ada cute icon.

*************************************************************************  

Yang ni pulak, nampak lebih semat dan eleganse. Woah, gittttuuuu..!! Nak tahu kenapa aku cakap macam tu? Kalau korang prasan, bila korang scroll page blog ni, akan muncul arrow back to top kan? Bila page tu still kat atas, takde pun kan? 

Akey, benda ni dah lama kot aku pakai. Tak ingat since when, kuikuikui. Sehinggalah ada satu kenalan ni tanya macam mana nak buat, baru aku share. Bwaahaha!

Benda ni senang je. Tak nak cakap banyak, korang just copy dan paste kat kotak gadget korang kat page element korang tu k.

Nak yang mana? Pilih je.. Amboi, macam pilih sayur pulak dah.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.2/jquery.min.js" type="text/javascript">
60768/
black.js" type"text/javascript"></script&
</script> <script src="http://dl.dropbox.com/u/1
9gt;

<script src="http://ajax.googleapis.com/ajax/

libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

</script> <script src="http://dl.dropbox.com/u/1960768/blue.js" 

type"text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/

jquery/1.3.2/jquery.min.js" type="text/javascript">

</script> <script src="http://dl.dropbox.com/u/1960768/pink.js"

 type"text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/

libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

</script> <script src="http://dl.dropbox.com/u/1960768/

white.js" type"text/javascript"></script>

Akey, itu aje kot. Selamat mencuba k! ^^

credit to mr.piratz

tutorial letak benda comel/ image bergerak kat shoutbox

Akey, sebenarnya tutor ni dah banyak yang buat. Akupun malaslah nak post benda yang dah umum, ye dak? Tapi, kasihan pulak bila aku tengok masih ada yang tertanya- tanya, so here we are. Bersama dengan tutorial lagi! :p

1. Akey, mula- mula sila Log in dahulu ke shoutbox anda.
2. Pergi ke setting dan pilih smiley.
3. Korang boleh pergi kat myemo, glitter dan banyak lagi sites untuk ambil url code tu.
4. Then, paste url yang korang dah ambil tu kat kotak panjang ni. Macam kat bawah ni.

5. Kotak nombor dua tu pulak, korang isilah apa- apa yang korang nak untuk gambar tu. Contohnya, korang letak url code gambar tu buku, so bila korang tulis perkataan follow kat kotak nombor dua tu, gambar tu akan muncul instead follow word.

6. Dah siap letak, klik button add tu.

7. Save.

8. Dah boleh komen kat bawah ni kan? HAHA.

facebook lembap? try this!

Masuk mukabuku, asyik nampak komen dan status pasal " facebook " lembap aje! Ada yang cakap facebook dah nak tutup, tu sebab dah jadi lembap. Ada jugak yang cakap sekarang ni dah banyak member yang mendaftar masuk dan menjadi ahli, sebab tu makin lembap, sesak. Dan ada jugakkkkkk yang mengaitkan dengan kejadian baru- baru ni kat Jepun. Tak tahu mana yang betul.

Tetapi, korang boleh mengatasi masalah ni sekarang. Dengan mengikut tutor kat bawah ni, InsyaALLAH facebook yang korang rasa lembap tu akan menjadi pantas semasa loading nanti. Aku dah try dah, korang bila lagi kan kalau bukan sekarang?

Kalau nak, sila ikut tutor ni k.

Sila pegi ke COMPUTER--> ACER(C:)--> WINDOWS--> SYSTEM32 --> DRIVERS --> ETC

Pastu bukak fail host dengan menggunakan notepad. Tambah perkataan ni kat akhir tu sekali.

 203.106.85.66 www.facebook.com

contoh :

Dan kalau dah siap letak perkataan tu, bolehlah save.


Bagi yang menghadapi masalah untuk save ( macam akulah tu ), lepas korang dah letak perkataan tu, save je.  Pastu mesti dia keluar pop up yang mengatakan benda ni tak dapat nak save kat folder tu. So save je kat document dulu. File yang korang dah save kat document tu korang cuba copy atau terus gantikan file host yang asal kat folder tadi. 


Akey, tak paham? Macam ni, fila yang korang dah ubah tu korang tak dapat nak save kan? so korang save dulu kat document. Then cuba copy dan paste kat folder yang korang masuk tadi, yang ada file host tu. Pastu akan keluar satu pop up yang mengatakan file host tu are already exist! So, replace je file tu. Then save!


Itu jela kot.. 


:D


updated!


Akey, yang ni untuk pengguna linux dan ubuntu. Bagi pengguna dell dan lain- lain, aku tak tahu lagi.


1. Pergi ke application ->Accessories--> Terminal.


2. Pastu,  gedit /etc/hosts .


3. Bawah 127.0.1.1 , masukkan code ni.

 203.106.85.66 www.facebook.com

4. save!






credit : hehehunter

salah satu header dah siap ;p

First, maaf sesangat kepada pyka ( eh, nama hampir sama dengan aku, wahh..best dapat panggil nama sendiri. ) sebab lambat sikit hantar header preview tu kat pyka k. Saya ( instead of aku, tak sopan cakap dengan orang pakai aku kalo pomel.. ) baru dapat buat hari ni sebab semalam ada forum and balik lambat sikit. Balik- balik je kira nak buat terus tapi penatlah pulok. Malamnya takde elektrik, hmppph hampeh betul. Dan alhamdulillah, hari ni dapat pun siapkan header tu.

Tak tahulah kalau pyka suka atau tak header tu. Well, awal- awal lagi saya dah bagitahu yang peluang untuk mengubah header ada dua kali. So kalau nak ubah, sempat lagi. XD    . Btw, ini merupakan contoh header yang saya dah buat untuk pyka. Yang lain sila jangan copy k. Nak tempah sila baca terms kat sini dulu.

Sorry kalau tak cantik dan tak seperti yang pyka nak. Sebab tu saya bagi peluang dua kali untuk mengubah sebab saya pun bukannya professional pun. HEHE. And thanks jugak sebab sudi tempah k. ;)

Credit to little nubnubs' doodle. Nampak tu? tak remove watermark akey? HUHU.

rapatkan header dengan post blog/content

Halluuu.. tempat korang hujan tak? Kat sabah ni dah banjir gegiler! Nasib baik takde pape gak,huu. Tadi aku check formspring jap. Ada satu lagi soalan yang kena tanya kat aku ni. Semalam dah tolong sorang member belog touch up belog dia. Alhamdulillah, dah siap! Tapi tak tahulah kalau dia suka atau tak.

Akey, sebenarnya kan.. soalan tu kan. macam ni..

Kecian kalau tak tolong. Akupun tak tahu sape r nama dia ni. Segan kot nak gtau, kuikuikui. Bukan ape, aku just nak tahu nama dan belog korang tu sebab kalau korang tanya atau nak request apa- apa kat aku ni, aku boleh inform kat korang. Taklah aku terkial- kial nak pikir, camne aku nak gtau korang. Kalau malu nak gtau url belog, fine, gtau emel atau apa- apa je yang boleh aku pergi untuk inform kalau aku dah siap. HUHU.

HAHA, mesti bosan dok dengar aku membebel ni. Akey, kita teruskan dengan tutor kita ni.

First, pergi ke Design--> edit hmtl --> klik expand widget

pastu klik f3 pulak untuk memudahkan pencarian. Cari code ni.

/* Header
----------------------------------------------- */

Korang akan jumpa code # Header { kat bawah code yang korang cari tadi. Ada tak?

Akey, kat sana ada code 

 border: 6px solid $headerBgColor;

Akey, tulisan berwarna tu korang tukar menjadi 0 . Sekarang, cuba preview dulu. Kalau dah menjadi, bolehlah save!

-------------------------------------------------------------------------------------------------------***

Bagi template macam aku ni pulak. Korang pergi ke Design --> edit html --> klik expand widget.

Sama jugak macam tadi, cari code header tu. Yang ni aku yang godek sendiri- sendiri. Sebab code template ni berbeza dengan tuto yang aku cari atau jumpa. Akey, dah? 

Kalau ikut aku, aku cuma besarkan saiz- saiz header supaya senang dan nampak cantik sikit. Ketiga- tiga perenggan code tu, yang dah aku gariskan tu kena ubah saiz. Well, kalau korang tak nak pun takpe kot. Sekarang ni, apa yang korang perlu buat ialah...

Tukar saiz kat bahagian yang ada anak panah tu. Lagi besar saiz yang korang letak, lagi rapatlah header korang ke content korang. Header tu akan turun ke content korang mengikut nombor pixel yang korang letak. Pandai- pandailah adjust mengikut template k?

Jangan lupa untuk backup template terlebih dahulu. Takut ada yang nangis bergolek- golek kalau template rosak nanti, hee..

-out-

link pelangi/ link warna- warni/ rainbow link

HAHAHA.. tajuk yang lengkap! Sekarang ni nak buat pasal link pulak. Hari tu dah buat pasal link dengan efek marquee . Aku tak ingatlah kalau aku ada ke tak buat tuto pasal ni. Macam ada jer tapi bila aku check takde la pulok. Takpelah, aku buat tuto ni k since masih ada lagi yang tak tahu dan teringin nak belajar.

Akey, sekarang ni korang pergi kat design dan pergi ke page elements.

Add a gadget--> javascript/ html

copy paste code kat bawah ni.

 <script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">

/***********************************************

* Script edited by Ynn Ainul at http://fwzynn.blogspot.com/

* Please keep this notice intact

***********************************************/

</script>

tajuk tu biar kosong aje k. 

tukar font tajuk dengan mudah

Assalamualaikum! Hai! HAHA..macam ganas je bunyi kan? kan? Hari ni nak buat tutorial lagi ni. Ada sorang kawan baru tanya pasal ni.. 

Sebenarnya senang je nak tukar font tu. Boleh godek sendiri- sendiri je. Yang penting paham dan tengok betul- betul. Yang ni aku sendiri ubah. Terpaksalah tengok sesatu ayat tu. Scroll perlahan- lahan. Kalau nak ubah macam kevin dan Amanda buat tu, rasa malas nak pergi daftar akaun pelbagai. So baik buat sendiri ye dak? So, inilah yang aku nak ajar ni,khas tuk member yang bertanya. huhu. Macam mana nak buat tulisan kat tajuk post atau entry.

 klik gambar kalo tak nampak.

Ini adalah template aku. Rasanya lebih kurang sama je kot dengan template lain. Untuk template aku ni, aku kena ubah jenis- jenis font tu kat petak berwarna merah tu. Font Family tu lah tajuk- tajuk kat belog kita. Kat sana, aku dah tukar font jadi kristen itc. Ikutlah, korang nak tukar tulisan apa. Tapi korang kena juga ikut tulisan yang ada kat laptop korang. Kalau korang letak font yang lain, dan font tu takde kat laptop orang lain, diorang akan tengok font tu macam font biasa aje. Paham tak ni? Huhu, akupun tak tahulah nak explain macam mana lagi. =.=

Kalau takde code tu kat template korang. Cuba buat yang ini pulak.

Klik f3

Cari code ni.

.post h3 {

korang akan nampak code lebih kurang macam ni.

.post h3 {

font-size: 26px;

margin:0 0 5px 0;

color: black;

Sekarang ni, apa yang korang perlu buat ialah tambah code ni.

font-family: jenis tulisan yang korang nak

Code ni korang tambah kat atas font- size tu k.

Akey itu aje. Selamat mencuba. ;p

efek gambar melengkung / image hover effect

Dah dua hari tak jalan- jalan kat blog orang dan dah beberapa hari jugaklah tak update belog ni,kuikuikui. Still, masih jugak ada yang sudi singgah, trimas diucapkan. So, hari ni nak update sikit. Nak kongsi satu lagi tuto menarik. Tak rugi mencuba, ye dak?

Tengok,  Baca tajuk ni pun dah tahu kan pasal apa yang nak dikongsikan tu. Contoh tajuk tu macam gambar kat bawah ni lah.

sebelum

selepas


( menggunakan gambar yang sama, malas nak buat gambar baru T.T )

Haa.. itulah yang dimaksudkan dalam tajuk tadi. Kalau korang halakan cursor kat mana- mana gambar dalam blog ( jangan  nak ngada- ngada hala sini sana cursor tu kat belog aku, aku xpakai code ni, harap mahap =,= ) , gambar tu akan menjadi melengkung. 

Kenapa aku tak pakai kat dalam belog ni sebab kalau halakan cursor kat header aku, nampak tak cantik. Kang terserlah semua kecacatan ' beliau' , ewahhhhh. Tapi untuk korang takpe, hehe. Akey, cara untuk buat ni simple je. Macam korang tidur pastu bergolek golek * tak ada kaitan* .

First, korang pergi..

dashboard - design- edit html -tick expand widget

pastu klik f3 dan cari code ni.

a img

copy code ni dan paste kat bawah atau sebelah code a img tu.

-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px pink; -moz-box-shadow: 0px 0px 20px pink; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}

Yang pink tu korang bolehlah tukar dengan warna yang korang suka. Yang hijau tu pulak garis- garis kat border korang. Korang boleh tukar kepada dotted, solid, double atau inset.

Selamat mencuba ^^

link dengan efek marquee

Hari ni aku ada belajar sesuatu lagi dan tanpa berlengah, mestilah aku nak share dengan korang kan? Sebelum kepala aku ni pecah disebabkan pening, baik aku post dulu apa yang aku nak share ni. Tadi pun dah sakit kepala nak sentuh cantikkan blog kazen, imra'tu huhu.

Baru siap tolong buat header dan template dia. Isi dan  widget dia letak sendiri.

Akey, apa itu link dengan efek marquee? Korang boleh tahu dengan tengok kat bawah ni.



my blog
my 143
sister
friend



See? Nampak cantik je kan? So macam mana korang nak buat?

<marquee align=center direction=down onmouseover="this.stop()" onmouseout="this.start()">
<a href="Url Link_1">Nama Link 1</a><br>
<a href="Url Link_2">Nama Link 2</a><br>
<a href="Url Link_3">Nama Link3 </a><br>
<a href="Url Link_4">Nama Link_ 4 </a>
</marquee>

Perkataan yang korang perlu ubah hanyalah tulisan atau perkataan yang berwarna sahaja. Yang lain jangan usik. Tapi kalau korang berani dan pandai HTML, bolehlah godek- godek. hehe. Tak larang pun. Akey, sekarang ni, korang kena ubah perkataan yang berwarna tu pulak.

Perkataan berwarna biru tu merupakan arah link tu bergerak. Kalau nak ubah, korang bolehlah tukar kan perkataan biru tu kepada up, left atau right.

Seterusnya perkataan yang berwarna pink pulak, url link korang. Contohnya, url blog aku ni, http://syafeikaedora.blogspot.com. Tapi jangan pulak ikut url aku k! hehe. So, ikutlah url link yang korang nak letak tu.

Perkataan berwarna merah pulak ialah nama link korang. Lepas dah letak url tu, letaklah nama pulak. Nama tu akan muncul macam kat atas tu. Tak paham? belum buat memanglah tak paham. Cuba buat dulu k..

Korang boleh rujuk code html aku kat bawah ni. Ini yang aku dah buat untuk efek kat atas tu. Efek yang tengah bergerak- gerak tu. Haaaa.. amik ko, huhu..

<marquee align=center direction=up onmouseover="this.stop()" onmouseout="this.start()">
<a href="http://syafeikaedora.blogspot.com">my blog</a><br>
<a href="http://princespiro.blogspot.com">my 143</a><br>
<a href="http://pinkyzsya.blogspot.com/">sister </a><br>
<a href="http://cikkenittoncet.blogspot.com">friend</a>
</marquee>

Code ni terpulanglah korang nak letak kat mana. Nak letak kat post boleh, kat sidebar pun boleh! Takde probs.. ^^