Tutorial: Download & Install Font

Hey there , kali ni tutorial aku nak ajar cara nak download dan install font dalam komputer masing-masing . Okay ready ? Let's start it !

 Pergi website SINI . Pilih jenis font yang korang suka dan click download di sebelahnya .

 Lepas habis download , pergi kat file download korang tu . File tu dalam bentuk WinZip file kan ? So sekarang kita nak extract file tersebut .

 Click kanan mouse tu > Winzip > Extract to > Pilih folder mana nak letak download tu . Lepas dah extract korang akan jumpa macam ini

 Now , copy benda tu dan pergi ke Control Panel kat komputer korang . Kemudian korang akan jumpa banyak-banyak file situ kan ? Cari file Fonts .

 Dah cari click situ dan pastekan font download korang kat situ . 

 Nak tau font korang tu ada ke tak pergi Microsoft or Wordpad , check kat situ . Kdone ada kan :)

Tutorial: New Style Blockquote #4

Kali ni aku nak share dengan korang semua macam mana nak buat blockquote style baru . Nak tau rupanya sila view gambar di bawah . Mau ? Okay ikut step bawah .

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Search this code :

.post blockquote { or blockquote {

 Copy these code and pastekan kat bawah code korang cari tadi

background:url(URL BACKGROUND);
border-top: 1px solid #000000;
border-left: 35px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin:1em 20px;
}
blockquote:hover {
background:url(URL BACKGROUND);
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 35px solid #000000;
border-bottom: 1px solid #000000;
margin:1em 20px;
-webkit-transition: 1.5s;
}

 Preview dahulu kemudian baru save

Tutorial: New Style Blockquote #3

Yeaahh tuto's again . Kali ni pasal buat blockquote juga . Banyak en style dia , haha . Jom kita buat . Sebelum tu tengok gambar bawah ni kalau still tak faham camne rupanya .

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Search code ni :

.post blockquote { or blockquote {

 Copy pula code kat bawah

background-image: url(URL BACKGROUND);
border:1px solid #000000;
border-left:10pt double #000000;
padding: 3px;border-bottom-left-radius: 10px;
border-top-left-radius: 10px;}
.post blockquote:hover {background-url(URL BACKGROUND)
;-webkit-transition-duration: 2.5s;background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
border:1px dashed #000000;
border-right:10pt double #000000;}

 Now , pastekan kat bawah code yang korang cari tu

 Preview kalau jadi ke tak kemudian save template

Tutorial: Hide Youtube Player

Kali ni aku nak share dengan korang macam mana nak hide youtube player . Kira orang tak boleh tau apa lagu yang main kat blog korang . Jyeaah let's start it !

 Dashboard > Layout > Add Gadget > Choose HTML/Java Script

 Contoh code youtube player aku :

<center><object width="200" height="25"><param name="movie"value="http://www.youtube.com/v/a6LabYZhS8Y?fs&amp;autoplay=1&amp;hl=en_US&amp;color1=0xffffff&amp;color2=0xffffff" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/a6LabYZhS8Y?fs&autoplay=1&amp;hl=en_US&amp;color1=0xffffff&amp;color2=0xffffff" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object></center>

Nota Bit-bot :

ABC : Tukarkan semua angka tu kepada "0"

ABC : Link youtube korang , pastikan tick use old embed code

Tutorial: New Style Blockquote #5

Kali ni punya blockquote dia ada shadow bila korang sentuh cursor kat blockquote tersebut . Then , ada icon comel keluar kat situ . Yeaah wanna to try ? Let's do it !

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Search this code :

.post blockquote { or blockquote {

 Copy these code and pastekan kat bawah code korang cari tadi

background:url(URL BACKGROUND);
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-radius: 5px;
margin:1em 20px;
padding: 5px;
}
.post blockquote:hover {
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
-moz-box-shadow: 0 0 10px #BDBDBD;
-webkit-box-shadow: 0 0 18px #BDBDBD;
}

 Preview dulu takut tak menjadi . Kalau dah okay baru save !

Tutorial: Facebook Like Button Bawah Post

Kali ni aku nak share dengan korang macam mana nak buat facebook like button kat bawah setiap post . Okay let's start it !

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Then , cari code ni

<data:post.body/>

 Copy pula code and pastekan kat bawah code <data:post.body/>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

 Preview dulu jadi ke tak . Kalau jadi baru save okeh !

Tutorial: "Assalamualaikum" Pada Setiap Entri

Aku nak share dengan korang harini macam mana nak letak perkataan Assalamualaikum kat setiap entri . Kalau korang perasan kat blog aku pun ada buat . Jom kita mulakan .

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Search code ni :

<div class='post-body entry-content' atau <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

 Next , copy pula code kat bawah

<center><img src='URL GAMBAR'/></center><br/>  

 Pastekan code tu kat bawah code yang korang mula-mula cari tadi .

 Preview kemudian baru save .

FREEBIES :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJzHZbMK-1BxYcxjmFMGzsW6RSG1ZsVdBVnI39Du-tT7Ry-Q3aaGptrI9b3Xc3RgUm9_WpsIDdiGGW_QWH2URiLnJq83SwWlvHgzqQuZmM_tOkbePglutvzJFWWfzdgPRSk1wmehoQCfEQ/s1600/1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj54b4ip_S0mToy_I4tPsvm-wS5U5gsD49NjOOfOYrm3Dk2EMPPcd3FebECot_TlNoePJlZTcXLYmgtUOJjCIaHykEl8VLKnRjrO96SdzY-UCMBcCW6mh2QNxLcnYhtK0PAZ5ZwdVPX4E6_/s1600/eedapunye2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ7Y7vfp8jbf8Stgt5GWhItdWbDVPNNG_W2ugZHCVYB0eQOB37dvAR46PI0zdrALGR97hFsbS-IXVQzJ1ZN9sGxvN53-nfKsJfs0drz_ki9Y2Jfc9cfM-lH_yPeX_fROdfik9XOJtTf_wJ/s1600/eedapunye.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_QQq3XNlvC4DqrzpEDMUn7KYM4k-OooILfGw12Tw9eqIA_N5T9PzxVu4Gvhv2ogy1vp54faxS9XdmC1mETkqSUFB_VNbvZHKGmq5YD8EFG8H0SMC7Kliiwhj5HNq3uqE8OPKL5OfE90a/s1600/freebies1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62bRRU9G9swBbBNsK25z2Mgm3XIPq_2eVUHfZ-OssrZEyz9B0jcLpewzceSccKiUVS8_wI1U2F5pIuCkj6KMNK4tPCYaAHNwxluILismGDQEGTzSrCrTUJwHWkfdGLyUAaGxI9hqFGNaX/s1600/3.png

Freebies Credit ; Eda Latif

Tutorial: Delete Tarikh Atas Post Title

Tuto kali ni pasal nak hilangkan tarikh atas post title blog korang . Follow this step .

 Dashboard > Layout > Blog Post

 Tekan edit tersebut dan dia akan keluar macam ni

 Yang aku buat kotak merah tu , korang untick tau .

 Then , save layout . Cuba korang preview mesti menjadi punya , haha .

Tutorial: Tulisan "Link" Membesar

Tutorial ni untuk membesarkan link . Bila korang sentuh link , dia akan jadi besar . So aku akan ajar korang macam mana nak buat . 

 Dashboard > Design > Edit HTML > Tick Expand Widget Template

 Search this code :

a:hover {

 Copy code kat bawah and pastekan bawah code yang korang cari tadi

font-size: 22px;font-weight: bold;text-decoration:none;}

 Preview dahulu baru save template