Tutorial : Cara Pasang Butang Facebook, Twitter & Formspring Terapung !

Salam !

Pernah tengok tak orang pasang widget social networks terapung kat blog ?  Sape nak letak widget ni jom kita teruskan tutorial =)

baca lagi...

Cara Letak Butang Facebook, Twitter & Formspring Terapung

1. Langkah 1 Go to >> Add page element >> Pilih Html
2. Langkah 2 Copy & Paste code di bawah nie
   
   
   
3. <style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> <div style='display:scroll; position:fixed; top:200px; left:-12px;'>
       <a class='linkopacity' href=' http://www.facebook.com/USERNAME ' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://YOUR_Facebook_IMG_URL" /></a><br />
       <a class='linkopacity' href=' http://twitter.com/USERNAME' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://YOUR_twitter_IMG_URL" /></a><br />
       <a class='linkopacity'  href=' http://formspring.me/USERNAME '  imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='formspring'><img border="0" src="http://YOUR_Formspring_IMG_URL" /></a><br /></div>
   
   
   
4. Langkah 4 Edit kod di bawah yang berwarna merah dengan menggantikan dengan username korang. Contohnya :http://www.twitter.com/muhdfirdaus.
   
   
5. Langkah 5 Edit kod di bawah yang berwarna biru, jika korang nak gantikan gambar widget ikut warna pilihan korang sendiri. Contohnya : dari original link http://YOUR_twitter_IMG_URL .

Cara Mengurangkan Blog Errors & Warnings !

Salam !

Yo guys ! Aku baru terjumpa satu benda best nih. Korang tahu tak, apa punca blog korang berat dan tak mesra SEO (search engine optimizer) ? Salah satu sebabnya ialah, korang ni sebenarnya penternak blog errors dan warnings !
Macam blog aku ni...hahaha nampak je tenang tanpa buaya..tapi siapa sangka, bila aku check tadi, blog aku mengandungi 233 Errors, 66 warning(s) !! Mak aih...ini yang aku rasa nak buat renovation secara besar besaran ni !

gambar errors dan warnings yang membiak di dalam blog aku...

Nak tahu cara bagaimana nak tahu blog korang ada errors dan warnings ? 

Baca lagi...

Cara Mengurangkan Blog Errors & Warnings !

1. Go to this address :  http://validator.w3.org/
   
   
2. Masukkan alamat blog anda dan click Check !
   
3. Kalau dah tau blog korang banyak errors, pergilah renovate balik blog korang tu. Sebenarnya, errors ni datang bila kita suka godek godek blog, tambah widgets, javascripts, dan banyak lagi perhiasan dalam blog tu. Kalau tak usik apa apa sangat, maka kuranglah bilangan errors tu ! Errors dan warnings tu menandakan betapa susahnya SEO nak masuk ke blog korang dan berat betul blog korang tu.

Tutorial : Cara Pasang Nuffnang Di Setiap Entri.

 here is tutorial special for you. Jom pasang iklan nuffnang di setiap entri. Mudah je...

Contoh iklan nuffnang di bawah setiap entri. 

Cara Pasang Nuffnang Di Setiap Entri.

1. Go to >> website nuffnang. Copy kod iklan segiempat sama tu.
   
2. Go to >> Dashboard >> Settings >> Formatting (kemudian scroll ke bawah sekali)Paste kod iklan nuffnang di bawah >> Post Template
   Contoh :
   
   <center><!-- nuffnang -->
   <script type="text/javascript"> 
   nuffnang_bid = "36750ed3b6ec3101a3f1d28b67cd9c3a";
   </script>
   <script type="text/javascript" src="http://synad2.nuffnang.com.my/j.js"></script>
   <!-- nuffnang--></center>
   
   
   
3. Jangan lupa letak ><center>Kod iklan nuffnang anda di sini sebelum save.></center>  
4. Save dan Siap ! 
5. Untuk pastikan iklan dah bleh appear di bawah entri, sila publish entri baru.  Sekian trimas. =) 
   

Tutorial : Twitter Terbang !

Salam ! Its time for tutorial !

Aku tau korang mesti suka benda benda kawaii ni kan ? Kalau tak comel, tak sah ! Haa...dah ramai dah bela burung twitter dalam blog.

Susah dowh nak tangkap burung ni, dia terbang merata rata...laju pulak tu. Nasib baik dia tak berak merata rata. Hahaha..burung ni memang cute la...I wonder kalau dorang boleh tukar icon burung ni jadi gajah terbang..

  Baca lagi...

Cara  Pasang Burung Twitter Terbang :

Go to >> Design >> Add Page Element

>> Pilih Html / Javascript

>> Copy dan paste kod di bawah 

• <script type="text/javascript" src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script><br />

• <script type="text/javascript">

• var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjss4vesFY2MX296yMrWl8IRjmw6qIjBbrJ7zWvq5X6FnBRuCEbxytTzD0rfQbfuXgO8_8xUfXyU1oEaTbjbueaeKqQroI23B5i7aagEUqFDQFlKLPEiJdTwyjjgPdMm8Iioil7vmu_CUB/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/USERNAME";var tweetThisText = "Twitter - http://twitter.com/USERNAME http://URL WEBSITE/";tripleflapInit();</script>

USERNAME: tukar ke username account twitter korang
URL WEBSITE: tukar kepada URL link website korang

Save & Siap !

Contoh : htt://twitter.com/muhdfirdaus ; http://www.apa-cerite.blogspot.com

Tutorial : Buat Cursor Ciptaan Sendiri.

SALAM,..

 Selama ni memang malas nak buat. Hari ni hari sabtu...so godek sikit lah photoshop yang dah berhabuk tu. Aku tau korang boleh buat cursor lebih lawa dari aku. Korang nak cuba buat cursor sendiri tak ? Jom !

Cara Buat Cursor Blog Gambar Sendiri : 

• Langkah 1
• Pergi kat Photoshop >> New >> Name :  Cursor Blog
• Pastikan saiz widht, height, resolution sama seperti di bawah.

• Langkah 2
• Kemudian, pergi kat >> Custom Shape Tool >> Pilih Arrow dibahagian atas bar menu.

• Langkah 3
• Bermainlah dengan Blending Option, Layer Style untuk mencantikkan cursor korang tu. Dan pastikan korang ubah kedudukan cursor supaya senget (tekan Ctrl+Alt+I) macam kat bawah ni.

• Langkah 4
• Aku tau korang lagi terror photoshop kan ? Kalau korang nak letak gambar sendiri pun boleh gak. Korang crop la gambar korang sekecil yang boleh supaya dia fit cursor korang nanti. Contoh gambar muka pada cursor ? Hehehe...tengok bawah ni : Walaupun buruk, aku sure korang boleh buat dengan lebih baik.

• Langkah 5
• Dah siap cursor ciptaan sendiri tu, kita nak save pulak. Save as >> CompuServe.Gif

• Langkah 6
• Lepas semuanya dah siap, upload gambar cursor korang yang dah siap tadi di Image Hosting atau blog gambar untuk mendapatkan Image Location. Contohnya aku dah upload gambar cursor di blog bergambar aku dan aku Right Click >> Copy Image Location macam ni : 

• Langkah 7
• Langkah terakhir, Log In ke Blogspot Account korang. Go to >> Add Page Element >> Pilih Html >> Copy & Paste Kod dibawah :
  
• <style type="text/css">body {cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4x7Z1rAurIQhACBOE2zQ28JWrOwmy_v3RGz0hRBJimB1YnEPNwHtTw7yn5h_BEF65Lz_Cik9TdX0MF0vEZ7e1mY9pm5WjBglGkeoKMSXzZ8EvPxU6Ka0UxlZcVfD0fMXnugcgusRV_hI/s1600/neoncursor.gif"),default}</style>
  
• Tukar link url image yang berwarna merah di atas dengan Url Image korang yang korang copy sebentar tadi (lihat langkah 6) 
• Click Save, dan Preview Blog korang ! Siap.

Tutorial : Cara Pasang Headline News Bergerak.

Salam !


 Tak ramai blogger yang nak guna, tapi aku rasa widget ni agak menarik ! Kalau nak letak di blog, jom ikuti tutorial aku ni =)

 

baca lagi... Cara Buat Headline News Bergerak

Cara Buat Headline News Bergerak :

• Go to >> Add Page Element
  
  

• Pilih Html
  
  
• Copy dan paste kod di bawah.

<script type="text/javascript">
var hn_url_blog = "http://silampuneon.com";
var hn_jumlah_post = 100;
var hn_warna_latar = " #FFFFFF";
var hn_warna_garis = " #FFFFFF";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = false;
</script>
<script src=" http://oktri.googlecode.com/files/Headlinenews-oktri1.js ">
</script>

• Tukar / Edit kod yang berwarna merah mengikut info dibawah :   
  

  
  
• hn_url_blog = URL blog anda (ganti dengan url blog anda)
  
  
• hn_jumlah-post = jumlah judul artikel yang di tampilkan
  
  
• hn_warna_latar = kode warna untuk latar belakang headline news
  
  
• hn_warna-garis = kode warna garis bingkai
  
  
• hn-posisi = (bottom/top) bottom untuk posisi bawah blog, top untuk posisi atas blog
  
  
• Kemudian Save. Siap !

Tutorial: Blockquote Like Mine

Assalamualaikum

So today ada orang request macam mana nak blockquote macam saya punya nih. Preview:

Blockquote macam ini. Credit to this awesome blog! :) Do visit.

Untuk Tempate Designer:
1. Dashboard > Design > Edit HTML > *tick Expand Widget Templates*
2. Tekan ctrl + f and search code ni : .post blockquote {
3. Pastekan code yang akan saya bagi nanti dekat bawah code tu.

Untuk Blogskins:
1. Dashboard > Template > Edit HTML
2. Pastekan code yang saya bagi sebelum code </style>

.post blockquote {
border:1px solid grey;
background:url(URL background);
color: #222;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
box-shadow: inset 20px 0 0px 0 grey;
padding: 10px 10px 10px 26px;
}

blockquote:hover{
-webkit-transition: 2.5s;
-moz-transition: 2.5s;
border:1px solid black;
background:url(url background);
box-shadow: inset 750px 0 0px 0 black;
color: white;
}

Yang grey dengan black tu, korang tukar dengan warna border korang sendiri sebelum dan selepas hover.
Untuk blogskins, code .post blockquote { tu tukar dengan blockquote { sahaja.

Kbye.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Youtube (New Coding!)

Assalamualaikum,

Sebulan lebih tak berusik blog ni. So today, buat tuto pasal youtube. Kalau korang tengok, banyak youtube player sekarang ni dah tak lawa, dah tak cun macam dulu kan? Youtube ni menggedik sikit. So a big big big thank you to this awesome blogger, AFIQAH sebab share coding baru untuk youtube player.

Do visit her blog! So, jom tengok coding baru youtube player ni.

Live previeww: 

Haa, kan lawa tuh. Tapi ni untuk transparent, autoplay, replay and size dia kecik. Kalau nak warna lain, taknak autoplay, tak nak replay, nak tukar size, godek sendiri. Tak susah pun. Here is the code:

<center><embed src="http://www.youtube.com/v/IJ028Gsedeg?version=1&autoplay=1&loop=1&color1=0xffffff&color2=0xffffff&amp;hl=en_US" type="application/x-shockwave-flash" width="30" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></center>

Nota kaki:
Merah: Tukar dengan link youtube korang. Tak tahu camne? Tengok sini.
Biru: Itu kod autoplay. Kalau korang taknak autoplay, delete jelah.
Hijau: Itu pulak kod untuk replay. Kalau taknak replay, delete.
Oren: Untuk width, ikut kesesuaian blog korang lah. Normal orang buat 30 or 200.
Pink: Height. Adjust kalau perlu.

OK SAMPAI SINI SAJA LAH BYE

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Buang Word Verification

Assalamualaikum

.

Memang tutorial ni takde sape request, but semua blogger wajib buat kot. Sebab benda ni annoying giler. Korang tahu ke tak ape 'word verification' tu ape? Tengok gambar ni :

Sekarang dah tahu kann? Kadang kadang, kalau kita nak komen tu, mesti benda ni keluar kan?

Jadi, korang kenalah remove benda ni. Cara dia senang jer punn ;)

• Dashboard > Settings > Comments

• Search this : " Show word verification for comments? "

• Lepas tu, korang terus select No.

• Lepas tu, tekan  SAVE SETTINGS  !

There, senang kann? So, lepas ni, lagi ramailah yang nak komen entri korang. 

Kbai.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Transparent and Kecikkan Video Youtube

Assalamualaikum

.

Hari ni nak ajar korang macam mana nak buat Youtube player like mine :)

Ada video tapi, kecik and muat muat je kat tepi tu kann? Macam dalam gambar ni.

Haa, macam tuh :) Muat muat jer dekat sidebar tu. Okay, jom.

• Kalau template designer, pergi ke Dashboard > Design > Add A Gadget > HTML/JavaScript.
• Kalau classic template/blogskins, korang copy je kod kat bawah ni, and paste dekat tempat yang sesuai kay :)
• Then, copy kod dibawah ni dan pastekan di tempat kosong yang disediakan.

<center><object type="application/x-shockwave-flash" style="width:240px; height:125px;"data="http://www.youtube.com/v/5ULOnzSna6I?color1=FFFFFF&amp;color2=FFFFFF&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0"><param name="movie"value="http://www.youtube.com/v/5ULOnzSna6I? color1=FFFFFF&amp;color2=FFFFFF&amp;rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0" /></object></center>

Nota Kaki :

Hijau : Okay, itu width sidebar SAYA. Korang boleh adjust ikut sidebar korang punya size. 

Pink : Itu link video youtube korang. Kalau tak tahu, jap agi saya ajar. Tunggu jap jee..

Oren : Okay, kod tu untuk auto replay. Kalau korang taknakm just delete kay?

Okay, that's the code. Sekarang nak ajar macam mana nak ambik link youtube tu kan.

CARA CARA NAK AMBIL LINK YOUTUBE

• First pergi dekat Youtube.
• Then, pilih lagu mana yang korang suka.
• Okay cara nak ambik link, tengok gambar ni.

(klik untuk JELAS)

• Okay, Step ke empat dalam gambar tu. Lepas korang copy yang tu, korang tukar dengan kod warna pink yang saya bagi tadi. Tu je :)
• TAPI, KORANG COPY SEKALI DENGAN TANDA " ? " TU! WAJIB.
• Btw, lagu dalam gambar tu ialah lagu Someone Like You. Suka lagu tu ♥

OK sekian sahaja untuk hari ini.

Kbai.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Blockquote Blink Blink [Flash Blockquote]

Assalamualaikum

.

 Hari ni saya nak ajar buat blockquote yang blink blink punya. 

HAHA, tahu tak macam mana? Kalau nak tahu macam mana, trylah kod yang saya bagi ni :)

Preview jer, kalau berkenan Save! Jangan malas malas okay?

UNTUK TEMPLATE DESIGNER

• Pergi ke Design > Edit HTML
• Tekan CTRL + F and search kod ni :

.post blockquote p {

• Copy kod dibawah ni, dan paste kan dekat ATAS kod .post blockquote p{  tadi. 

.post blockquote {
background:url(URL BACKGROUND); padding 5px;
border: 1px solid #901EE2;
-moz-border-radius: 30px;
colour: #FFFFFF
}

blockquote:hover {
background: url(URL BACKGROUND)repeat right bottom;
border: 1px solid #901EE2;
-moz-border-radius: 30px
}

Nota Tangan :
MERAH : tukar dengan url background sendiri :)
HIJAU : ketebalan border. makin besar makin tebal.
PURPLE : type of border. Boleh tukar dengan solid / dashed / dotted / double / grooved.
KUNING : Warna border. pilih di SINI.

Oh yer, saya kredit tuto ini kepada : PUTRI AFFEA .

Dia buat tuto yang awesome! Visit her blog kay ♥

And untuk yang blogskins punya, korang tunggu okay ? Sebab sekarang puku 4.10 AM

Mata ni dah kuyu giler dah XD Tu je nak share :)

Kbai.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Hit Counter (Free)

ASSALAMUALAIKUM

Hari ni nak ajar camne nak buat hit counter.

Tahu tak hit counter tu ape?

Kalau tak tahu, tengok gambar kat bawah ni.

Haa, bendalah tu. Okay jom start.

• First, korang pergi dekat [sini]
• Then, korang 'isi tempat kosong dengan jawapan yang betul' XD kalau tak paham, tengok gambar ni.

(klik untuk gemuk) 

• Lepas dah copy kod tu, korang paste je dekat mana mana tempat yang korang nak. Tapi elok letak dekat atas kod shoutbox korang.

Haa, macam tu je cara dia. Senang kann?

Kalau tak paham, inform yea. Nanti saya cuba tolong ;)

Kbai.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com

Tutorial : Blockquote Takde Side

ASSALAMUALAIKUM

Hari ni nak ajar buat blockquote macam dalam gambar ni.

Haa, tak tahu nak namakan jenis apa, saya bagi nama 'Blockquote takde side'. Sebab memang dia takde side. Okay ready? Jom start .

Tapi saya tak tahu kalau template designer boleh atau tak, tapi korang boleh try :)

• Dashboard > Template > Edit HTML
• Tekan ctrl + f dan search kod : blockquote {
• Copy kod di bawah dan paste di BAWAH kod blockquote { tadi. But, make sure korang delete dulu lah kod blockquote yang lama.

blockquote {
background:url(URL BACKGROUND);
padding-left:12px;
padding-right:12px;
color:#FFFFFF;
margin-right:4px;
border-bottom: 1px solid #5B5B5B;
border-top: 1px solid #5B5B5B;
padding:8px;
-webkit-transition:1s;
}
blockquote:hover {
background:#F3BFFF;
color:#CF1FFF;
-webkit-transition:1s;
padding:8px;
border-top: 1px solid #B700FF;
border-bottom: 1px solid #B700FF;
}

Info warna:
Merah : untuk background korang sebelum hover. boleh tukar dengan kod warna.
Pink : warna tulisan sebelum hover.
Kuning : warna border atas bawah sebelum hover.
Biru : warna background selepas hover
Purple : warna tulisan selepas hover
Hijau : warna border atas bawah selepas hover.
Kod warna boleh cari di sini.

Paham kann? Untuk template designer lebih kurang sama jer. 

Tapi rasanya template designer boleh kot guna tuto ni. Cubalah.

Tapi untuk blogskins, mesti wajib jadi! HAHA :D

Kbai.

FROM:   -MUHD FADLIN-http://miserymakescars.blogspot.com