2013 ~ Tutorial Nursyurga

Sabtu, 2 Mac 2013

Double Dashed Hover Bila Cursor Menyentuh

Tahu tak macam mana double dashed ni? Macam ni gambar bawah ni ha..^^

1 . Dashboard > Design > Edit Html

2. Tekan Ctrl+F dgn serentak .. dan cari kod ini .. :

a:hover

3. Lepas korang jumpa . korang paste kan pulak kod kt ini kat bawah kod yang korang carikan tadi tuh.

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;

Korang boleh tukarkan kod warna merah diatas .dgn kod warna anda sendiri :face64:

4. Da siap . SAVE ! :) Lihat lah hasilnya ya! :)

Kredit to : Lyssa

Rabu, 16 Januari 2013

Cantikkan Kotak Komen 1

Salam korang semua.Tanpa membuang masa korang jom kita belajar cara nak cantikkan kotak komen.Mungkin ramai yang dah tahu pasal tutorial ini kan?OK.Bagi yang dah tahu itu bagosla.Tapi yang masih tak tahu pasal tutorial ini,jom kita tengok sama-sama contoh ini.

Tukarkan menjadi macam ni ^_^

1. Dashboard>Design>Edit HTML>Tick Expand Widget Templates

2. Cari kod ini:(Tekan Ctrl F serentak untuk mencari)

]]></b:skin>

3. Kalau dah jumpa ,Copy kod di bawah ini pulak

#comments-block{

margin:0;
padding:0;
}
#comments-block .comment-author{
background:#ff6699 !important;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

padding:5px;

font-size:15px;

font-weight:bold;

border:1px solid #ff6699;
}
#comments-block .comment-body{
margin: 0;

font-size: 17px;

border-left: 1px solid #ff6699;
border-right: 1px solid #ff6699;
margin-top: -5px; /*position*/

padding: 5px;
}
#comments-block .comment-footer{
margin:0;

font-size: 13px;

font-weight: normal;

margin-bottom: 20px;

border-left: 1px solid #ff6699;
border-right: 1px solid #ff6699;
border-bottom: 1px solid #ff6699;

-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

margin-top: -12px; /*position*/

padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ff6699 !important;
}

3. Paste di ATAS kod yang korang cari tadi.

Yang dibirukan,korang boleh tukar kepada dotted ataupun dashed
Yang dimerahkan,korang boleh tukar kepada warna kesukaan korang.Nak cari pelbagai warna boleh KLIK DI SINI

4. Save.

5. Bila dah save, korang kena setting ini dulu:

Pergi ke Settings> Comments>cari Comment Form Placement>tick Pop-up window >Save

6.View. Semoga berjaya^ ^

>sumber<

Letak Iklan Nuffnang Dalam Post

1. Pergi ke Template > Edit HTML > Proceed.

2. Tick kotak Expand Widget Templates.
3. Tekan Ctrl F atau F3 di keyboard anda & cari code ni:

atau

4. Pastu pastekan kod nuffnang kat atas code tadi. Tengok gambar bawah ni sebagai contoh. Kalau nak kemas sikit, letak macam ni

5. Dah siap? Ok, jangan lupa SAVE ^_^

Semoga berjaya ^_^

>sumber<

Link Berkedip Bila Cursor Menyentuh -2

Ok, ni versi kedua link berkedip bila cursor menyentuh. Kalau versi 1 link akan bertukar warna pelangi, kali ni link akan berkedip dan berbintang pulak, macam dalam gambar ni ^_^

Nak try? meh saya ajarkan.

1. Klik pada Design -- Edit HTML
2. Cari kod:

</head>

3. Pastu salin kod kat bawah ni dan letakkan diatas kod </head> tadi.

4. Kalau nak tukar jenis bintang, tukarkan kod warna merah di atas dengan kod bawah ni.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyaOEPn7SKb4CpreKixJ2pF_fwYzvQRAnXJHAJN3A80aHYmb5H4AWx8mSHUdVvUnPTrH-KWOagTTepiaE4R1sxenyfEUBzRFojP-P6lOoY1H-xXuqc-nsP84nJS0NbnaW9MG8zQFZAIg/s1600/str4.gif

Hasilnya akan jadi bintang yang macam ni.

Simpan template…selesai..

#p/s : tutor ni sesuai untuk template berwarna gelap. Tapi kalau korang rasa cantik, boleh je..takda masalah =)

Selamat mencuba ^_^

Link Berkelip Bila Cursor Menyentuh

Ingin link dalam blog anda berkedip warna warni bila cursor menyentuh?
Jom ikut cara-caranya =)

1. Login ke akun blogger
2. Klik template -- EDIT HTML
3. Cari kode </head>, tekan Ctrl F atau F3 untuk memudahkan pencarian
4. Kalau dah jumpa copy paste kode berikut tepat dibawahnya

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

5. SAVE template dan lihat hasilnya

Semoga berjaya ^_^

Cara Buat Automatik New Tab

1. Log in > Dashboard > Design > Edit Html

2. Cari kod ini : (Ctrl F untuk mudahkan pencarian)

<head>

3. Dah jumpa kan ? Bagus !! Copy kod ini pulak dan paste di bawah kod yang korang carikan tadi tu =)

<base target='_blank'/>

4. Last skali, terus SAVE..senang kan?

Selamat mencuba ^_^

Tukar Perkataan Pada Linkwithin

Memasang widget linkwithin blog merupakan suatu perkara yang baik kerana boleh meningkatkan page view kita.

Biasanya perkataan seperti pada widget ini adalah you might also like atau anda mungkin juga meminati.

Kalau korang nak tukar kepada perkataan lain, jom ikut step-step ni=)

Salin kod dibawah ni,

kemudian paste kan di atas kod linkwithin korang, macam dalam gambar bawah ni.

Yang warna merah tu boleh tukar dengan apa-apa perkataan yang korang rasa best.

Kalau takda lagi kod linkwithin, klik SINI.

Semoga berjaya ^_^

Buang Read More Pada Halaman Statik

Memasang readmore secara automatik memang menyenangkan kita kerana tidak perlu lagi memasukkan apa apa kod dan memilih bahagian mana teks yang hendak dipotong.Tetapi masalahnya adalah bila kita membuat halaman statik pada blog pun ada read more juga.

Halaman statik untuk meletakkan sitemap dan tukar link tentunya kita nak paparan penuhkan?Jadi tutorial ini adalah bagi rakan rakan ingin mengatasi masaalah dengan read more automatik ini.

1. Masuk ke design—edit HTML
2. Tandakan pada expand template widget
3. Cari kod dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><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>

</b:if>

<div style='clear: both;'/> </div>

4. Apa yang perlu kita buat ialah tambahkan kod warna merah padanya.
Ok,sekarang try preview. Kalau ralat, try cara bawah ni pulak.

5. Jika kod diatas takda, gunakan cara ini : cari kod dibawah ini:

<div class='post-body entry-content'>

kemudian letakkan kod ini dibawahnya:

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

6. Kemudian cari pula kod ini:

<div style='clear: both;'/> 

dan letakkan kod ini diatasnya:

</b:if>

Ok, sekarang try preview lagi sekali. Kalau ok, terus SAVE.

7. Kalau ralat jugak, maksudnya step 5 tak sesuai dengan blog awak. Ulang sekali lagi dengan gantikan step 5 dengan step ni. Cari kod :

<b:if cond='data:blog.pageType != "item"'>

Kemudian letakkan kod dibawah ni di ATAS kod yang dicari tadi. Kali ni insyaAllah takda ralat-ralat dah.

Priview & SAVE..

Selamat mencuba^_^

Selasa, 15 Januari 2013

Cara Ubah Warna Highlight

Ok, sekarang saya nak ajar ,macam mana nak ubah warna highlight.!

Macam kat bawah ni=)

Ok, jom ikut step-step di bawah ni ^_^

1. Log in > Dashboard > Design > Edit Html

2. Pastu korang cari kod ini : (Nak cari tekan Ctrl+F)

a:link {

3. Copy code kat bawah ni , and paste kan sebelum code yang anda cari tadi tu ok?

::-moz-selection {
background:#000000;
color:#FFFFFF;
}

::selection {
background:#000000;
color:#FFFFFF;
}

* Ini kegunaan Mozilla Firefox dan Google Chrome saja !
* Yang warna merah di atas , korang boleh tukar kan dgn warna kesukaan korang ok?
Nak cari warna , klik SINI. =)

Sudah siap ? Save ok ?! Dan Lihat hasilnya ..

SELAMAT MENCUBA =)

Kredit to : KLIK

Cara Letak Bitton Dashboard

Ok, untuk tutorial kali ni, kalau dah hilangkan kan navigation bar macam tutorial ni : KLIK, macam mana nak ke DASBOARD kan?
Meh sini saya ajarkan , cuba tengok bahagian atas , kanan blog ni.Ada button Dashboard macam kat bawah ni kan ?

Ok, mudah je caranya , sangat mudah and simple :)

Tak perlu nak ke Edit Html macam selalu =)

1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript

2. Paste kod di bawah ini , di ruangan Html tadi tu ..

[* yang warna merah tu korang boleh gantikan dengan url gambar korang sendiri=) ]

3. Dah siap? Ok, terus SAVE =)

Selamat mencuba ^_^

Kredit to : KLIK

Hilang Navigation Bar

Ok ,sekarang saya nak ajar kat korang , macam mana nak hilangkan navigation bar ok =)

Tapi , korang tahu ka , apa yang dimaksudkan dengan navigation bar ???

Oh,, tak tahu ye , cuba korang tengok gambar di bawah ni..

Ahaa . yang itulah navigation bar ! ^_^

Ok..ok.. jom kita buat sama-sama! Senang je ni =)

1. Log in > Dashboard > Design > Edit Html

2. Copy and paste code ini :

#navbar-iframe {
display: none !important;
}

3. Contohnya seperti berikut :

-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 01 Dec 2010
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Sudah siap ? Save and lihat hasilnya..

SELAMAT MENCUBA ^_^

Gambar Jadi Blur Melengkung Bila Cursor Menyentuh

Ok, kali ni taknak cakap panjang, terus ke step-stepnya ^_^

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak dan cari kod ini :

a:visited {

3. Ada tak ? Kalau ada bagus ! Paste kod di bawah ini , di bawah kod yang korang carikan tu ok ?

a img {
border-radius:10px;
border-width: 0;
}

img:hover {
filter: alpha(opacity=70);
opacity: .6;
-webkit-transition: 0.5s;
border-radius:10px;
}

4. Contohnya macam ini :

5. Bila dah paste , boleh lah korang SAVE !

6. Now , pergi dekat blog korang . Macam mana ? Menjadi tak ? =)

=SELAMAT MENCUBA=

Kredit to : KLIK

Border Pada Sidebar

Nak buat tak? ala..macam dalam gambar bawah ni, ce tengok anak panah bawah tu tunjuk kat mana.. Cantik dan lebih kemas kan? Jom saya ajarkan caranya.. ^_^

Tapi perlu diingat, TUTORIAL ini HANYA boleh digunakan untuk HTML/JAVASCRIPT ja tau?

1. Dashboard > Design > Add a Gadget > Html/JavaScrip

2. Copy Kod Di Bawah ini :

Masukkan apa -apa kod , ayat korang , dan ape saja lah di sini okeyy ?

</div>

3. Nota kaki

* Warna merah = Kod untuk warna background

* Warna Biru = Kod untuk warna border

* Bold Hitam = Masukkan kod apa - apa je (shoutbox , iklan , follower)

>>> Kod Warna , orang boleh dapatkan DI SINI !!!

Ok, kalau dah siap terus save..
Selamat mencuba ^_^

Kredit to : KLIK

Centerkan Tajuk Post dan Sidebar

Ok, kali ni untuk centerkan tajuk post dan tajuk sidebar pulak. Macam dalam gambar bawah ni..

Biasanya kan tak center, ce check di blog awak, kan?

Ok, jom ikut step-step ni..mudah je..^_^

1. Log in > Dashboard > Design > Edit html

2. Then , tekan ctrl + F and korunk cari kod ni

Untuk sidebar

h2 {

Untuk Post Title

h3.post-title {

kalau takda code tu, try yang ni pulak :

h4 {

3. Copy kod kat bawah nih =)

text-align:center;

4. Then , paste kat bawah kod yang korang cari tadi.
5. Jgn lupa save plak tau =)

=siap=

Selamat mencuba ^_^

Kredit to : KLIK

Tukar Home, Older + Newer Post kepada Icon

Ok, kali ni saya nak tunjukkan macam mana nak tukar icon yang comel pada Home, Older dan Newer Post. Alaa..macam gambar kat bawah ni..^_^

Nak jugak? meh sini nak ajarkan..

1. Log in > Dashboard > Design > Edit Html

2. Kemudian tick pada Expand Widget Templates .

3. Then , tekan Ctrl + F and cari perkataan :

<data:newerPageTitle/>

4. Tukarkan kod diatas ni dengan kod ni :

* Warna merah tu , korang boleh tukarkan dengan korang punya URL Gambar ok =)

Yang atas ni contoh je ^^

5. Then , Tekan Ctrl + F lagi sekali dan cari perkataan :

<data:olderPageTitle/>

6. Gantikan kod di atas dengan :

* Warna merah tu pun korang boleh tukarkan dengan korang punya URL Gambar ok =)

7. Last sekali , untuk buttom home pulak , korang cari :

expr:href='data:blog.homepageUrl'><data:homeMsg/>

8. Gantikan kod yang berwarna merah tu dengan kod di bawah :

Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar jugak ok =)

Itu pun kasi contoh je ^^

9. Kalau sudah siap , korang try preview dulu taw. kot2 lah tak jadi ke , susah pulak kang .! HAHA! Kalau menjadi , terus je SAVE =)

SELAMAT MENCUBA !!!

Kredit to : KLIK

Cara Buat Scroll Blog Archive

Tahu tak blog achive tu apa? macam ni haa.. Saya nak ajar macam mana nak letakkan scroll supaya lebih kemas.

Ok . Awak dah tahu kan? Awak punya Blog Archive yang Entry Lama-Lama tuh kan .. Mesti Jadi panjang ke bawah kan ? Kalau nak kemas kan lagii blog tuh . boleh lah guna tutorial ini . HEHE . Selamat Mencuba ! =)

1. Log In > Dashboard > Design > Edit HTML > Tick Expand Widget Templates

2. Tekan Ctrl F dan cari kod yang ini :

3. Sebelum awak jumpa kod yg kat atas ni , awak akan jumpa kod yang ini dulu :

4. Gantikan kod ini <div class='widget-content'> dengan kod yang ini

p/s : Awak boleh tukar Size Height 200px mengikut kesesuai blog ;)

5. PREVIEW dulu . kalau menjadi , terus SAVE ok ? :))

=SELAMAT MENCUBA=

Cara Meringankan Blog

Blog anda terlalu berat dan lambat loading? Mah nak ajar macam mana nak ringankan.

Dengan menggunakan Script Lazy Loader, insyaAllah blog anda akan terasa lebih ringan.

Ada dua cara untuk meletakkan Script Lazy Loader ni. Tapi kesan kedua-dua cara ni sama ja,takda beza pun. Jadi anda boleh pilih nak ikut cara mana.

Cara 1 : Add Gadget

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.

Akhir, sekali, klik Save.

Cara 2 : Coding

Kalau cara 1 tak dapat, ikut cara ni :

1. Jika tiada sebarang efek berlaku selepas kod di Save, sila paste kod tersebut sebelum atau di atas kod </body> pada script template.

2. Jika tiada seberang perubahan selepas kod di paste di atas atau sebelum kod </body>, sila paste kod tersebut sebelum atau di atas kod </head>

selamat mencuba ^_^