Tutorial : Pasang Energy Saving Mode Di Blog

WRITTEN BY : ARRIF TIME : 8:08 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Tutorial kali ni nak ajar macamana nak sayangi bumi dengan blog. Haha. Macamana caranya? Caranya ialah dengan memasang Energy Saving Mode dekat blog. Apa fungsinya? Fungsinya adalah untuk jimatkan tenaga. Macamana benda ni berfungsi? Macamni... Bila kita buka blog kita, lepas tu kita biarkan blog kita tanpa kita gerakan mouse/cursor kita lebih kurang dalam setengah minit. Then tiba-tiba akan jadi macamni :


Ha time ni lah dia tengah saving energy. Kalau nak balik pada blog kita, gerak kan mouse kauorang. So suka? Ha jom buat sebab bagus benda ni pasang dekat blog kauorang.


1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]

5. Cari kod dekat bawah ni :

<head>

6. Copy code dekat bawah ni pulak 

<script language="javaScript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

7. Paste dekat bawah/selepas code <head>
8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Mesej 'Selamat Tinggal' Untuk Blog

WRITTEN BY : ARRIF TIME : 7:53 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua.

Okay haritu aku ada buat tutorial pasal mesej 'selamat datang' ke blog kita kan? Kali ni pulak kita nak buat mesej 'selamat tinggal' pulak dekat blog kita. So baru lengkap, orang datang kita sapa, orang nak pergi kita ucap bye bye ye kan? Haha. So jom kita buat.



1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy code dekat bawah ni pulak

 <script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39; TERIMA KASIH DATANG KE BLOG SAYA, DATANG LAGI YAA? &#39;);
}
parent.window.onunload=goodbye;
</script>

7. Paste code tu dekat bawah/selepas </head>
PENGUBAHSUAIAN:
- TERIMA KASIH DATANG KE BLOG SAYA, DATANG LAGI YAA? :Tukar dengan ayat kauorang sendiri.

8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save'

Kalau nak tahu jadi ke tak, buka blog kauorang, lepas tu tutup, ada tak mesej tu.

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Mesej 'Selamat Datang' Untuk Blog

WRITTEN BY : ARRIF TIME : 7:36 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua..

Kali ni nak ajar kauorang semua macamana nak buat pop up window yang ada nota selamat datang bila orang masuk blog kita. Tak faham? Maksudnya macamni.. Bila kita buka blog orang lain, tiba-tiba keluar pop-up window yang ada nota/mesej "Selamat Datang Ke Blog Saya" atau sebagainya lah. Ha benda tu yang aku nak ajar. Hehe.



1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy code dekat bawah ni pulak

<script language='JavaScript'>alert(" NOTA/MESEJ ");</script>

7. Paste code yang dicopy tu dekat atas code </head>
PENGUBAHSUIAN :
- NOTA/MESEJ = Tukar dengan ayat atau mesej selamat datang kauorang sendiri

8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Related Posts Bawah Setiap Post/Entry

WRITTEN BY : ARRIF TIME : 1:08 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua yee.

Okay kali ni aku nak ajar macamana nak buat fungsi Related Post dekat bawah setiap post atau entry kita ni. Fungsi Related Post ni kan penting untuk blog kita sebab ia akan memaparkan post post yang terkait dengan post yang sedang kita baca. Dan ianya juga dapat meningkatkan ramai pembaca dekat blog kita. Ramai blogger menggunakan widget LinkWithin, tapi tu ada gambar/thumbnail. Related post yang aku aku ajar ni takde gambar. Bagus untuk loading blog. Bagi yang nak cuba, boleh lah ikut step step nya ni. 



1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy code dekat bawah ni, dan paste di atas/sebelum code </head> tadi tu.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png”) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src=’https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js’ type=’text/javascript’/>

7. Sekarang cari code ni pulak okay

<data:post.body/>

atau

<div class='post.body>


8. Kalau dah jumpa salah satu code tu. Copy code dekat bawah ni pulak
  
<b:if cond=’data:blog.pageType == “item”‘><div id=”related-posts”><font face=’Arial’ size=’3′><b>Related Posts : </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’><script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font><script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

9. Paste dekat bawah code <data:post.body/> atau <div class='post.body> tadi tu.

PENGUBAHSUAIAN:
http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png : Kauorang boleh tukar nak letak gambar apa.
- Related Posts : Kalau nak ubah ayat koauorang sendiri pun boleh.
- 5 : Tu bilangan post yang akan keluar nanti. Nak ubah boleh je.

10. Klik 'Preview Template'
11. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;).




Tutorial : Buat Button Back To Top Cara Mudah

WRITTEN BY : ARRIF TIME : 2:02 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Okay tutorial kali ni sangat mudah okay. Banyak cara nak buat button back to top kan? Yang ada tu sampai tak menjadi-jadi kan? Haha. Takpe,, kali ni aku bagi ajar cara paling mudah lah nak buat button arrow back to top tu. Ha meh follow tutorial ni..

Jadi kita mulakan.

1. Pergi 'Dashboard'
2. a. Untuk blogger yang guna 'Blogger Old Interface' : Buka ruangan 'Design' ==> 'Add Page Element'
    b. Untuk blogger yang guna 'Blogger New Interface' : Buka ruangan 'Layout' ==> 'Add a Gadget'
3. Pilih element/gadget 'HTML/Javascript'
4. Copy kod dekat bawah ni :

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Top">
<img src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/9-128.png" /></a>


5. Paste code tadi tu dekat bahagian 'HTML/Javascript'
PENGUBAHSUAIAN :
https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/9-128.png : Kauorang boleh tukar lah gambar/icon arrow kauorang sendiri. Boleh cari dekat iconfinder ataupun glittergraphic atau pun kat mana-mana lah.

5. Save dan lihat hasilnya dekat blog kauorang okay.


Tutorial : Letak Nota Di Bawah Setiap Post/Entry

WRITTEN BY : ARRIF TIME : 2:06 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua.

Okay kali ni aku nak tunjuk macamana nak letak nota dekat setiap bawah post kita. Macam letak nota ringkas yang sama lah untuk setiap post, takdelah susah-susah kita asik nak taip je. Okay faham? Bagus jom mulakan.


1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

<data:post.body/>


6. Dah jumpa kod <data:post.body/> ? Copy kod dekat bawah ni pulak

<hr/><center>
<b>NOTE ANDA</b>
</center><hr/>


7. Paste kan kod yang kauorang copy tadi dekat bawah atau selepas kod <data:post.body/>

PENGUBAHSUAIAN:
- Gantikan 'NOTA ANDA' kepada ayat kauorang sendiri okay

8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)


Tutorial : Cari Code Warna

WRITTEN BY : ARRIF TIME : 1:47 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera

Okay  tutorial kali ni tak perlu main coding bagai. Cuma nak bagitahu dekat mana kauorang perlu dapatkan kod untuk warna. Ye sangat penting benda ni sebab kebanyakan tutorial akan menggunakan coding warna ni. So macamana nak cari? 

Ada banyak sebenarnya tempat yang nak dapatkan kod warna ni, antaranya


So tu yang aku selalu gunakan untuk cari kod warna. Kadang aku malas bukak banyak  tab dekat Chrome ni, aku cari je code tu dekat Photoshop, bahagian warna tu. Senang kan? 


Tutorial : Disable Highlight Text

WRITTEN BY : ARRIF TIME : 1:18 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Haritu aku ada ajar Disable Right-Click With Warning dan Disable Right-Click Without Warning kan? Dan aku juga ada ajar Lindung Gambar Dari Kena Download kan? Ha tu semua sebab nak protect kita punya hasil dalam blog ni ye. Tutorial kali ni pun sama fungsinya, nak protect hasil dalam blog kita. Tapi ni kita nak disable highlight dekat blog kita. Fungsi ni sesuai untuk yang nak lindung entry kita yang asli daripada kena copy paste. Tapi tak sesuai untuk blogger yang buat tutorial okay? Nanti tak boleh copy kod kauorang.

Jadi kita mulakan.

1. Pergi 'Dashboard'
2. a. Untuk blogger yang guna 'Blogger Old Interface' : Buka ruangan 'Design' ==> 'Add Page Element'
    b. Untuk blogger yang guna 'Blogger New Interface' : Buka ruangan 'Layout' ==> 'Add a Gadget'
3. Pilih element/gadget 'HTML/Javascript'

4. Copy kod dekat bawah ni :

<script type="text/javascript">
/***********************************************
* Disable Text Selection script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>


5. Dah Copy kan? Paste kan kod tu dekat bahagian 'HTML/Javascript' tadi.
6. Tekan lah  button 'Save' dan lihat hasilnya dekat blog kauorang.


Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)


Tutorial : Floating Back To Top + Home Button

WRITTEN BY : ARRIF TIME : 12:42 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua.

Siapa nak buat button back to top dekat blog? Tapi ni siap dengan ada Home Button tau. Selalu kan kalau nak buat kena main edit-edit kode yang panjang kan? Kali ni nak permudahkan kerja kauorang buat benda ni. So boleh lah follow tutorial ni okay ?



Jadi kita mulakan.

1. Pergi 'Dashboard'
2. a. Untuk blogger yang guna 'Blogger Old Interface' : Buka ruangan 'Design' ==> 'Add Page Element'
    b. Untuk blogger yang guna 'Blogger New Interface' : Buka ruangan 'Layout' ==> 'Add a Gadget'
3. Pilih element/gadget 'HTML/Javascript'
4. Copy kod dekat bawah ni :

<a href='#' style='position: fixed; right: 1px; bottom: 260px;' title='back to top'><img height="21" src="http://4.bp.blogspot.com/_LZtXSNcp76A/SxuSQwW77uI/AAAAAAAAAsc/qXqE9on4u5k/s320/up.png" width="21" /></a><a href='http://arepskema.blogspot.com/' style='position: fixed; right: 1px; bottom: 287px;' title='home'><img height="21" src="http://3.bp.blogspot.com/_LZtXSNcp76A/SxuSNhQnfiI/AAAAAAAAAsU/vFPaDmaIMQE/s320/home1.png" width="21" />


5. Dah Copy kan? Paste kan kod tu dekat bahagian 'HTML/Javascript' tadi.

PENGUBAHSUAIAN :
- Right = Nak letak button tu sebela kanan atau kiri blog. Kalau nak kiri, tukar right kepada left
- URL warna merah tu adalah url gambar. Boleh ubah dengan gambar kauorang sendiri kalau nak, kalau tak nak tayah usik.
http://arepskema.blogspot.com/ kauorang tukar dengan URL blog kauorang sendiri

7. Tekan lah  button 'Save' dan lihat hasilnya dekat blog kauorang.


Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Nota Selamat Datang Di Blog

WRITTEN BY : ARRIF TIME : 12:22 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Harini aku nak ajar kauorang lagi satuu tutorial yang best dan senang nak buat. Bagi blogger baru tu yang nak cuba buat benda ni boleh lah try okay? Kali ni aku nak tunjuk macamana nak buat nota selamat datang atau pembuka kata lah senangnya ye. Fungsinya untuk bagitahu pembaca yang mereka dah pernah datang blog ke ke belum, kalau dah, berapa kali dan bila kali terakhir mereka datang blog kita. Macam dalam gambar bawah ni. 


Jadi kita mulakan.

1. Pergi 'Dashboard'
2. a. Untuk blogger yang guna 'Blogger Old Interface' : Buka ruangan 'Design' ==> 'Add Page Element'
    b. Untuk blogger yang guna 'Blogger New Interface' : Buka ruangan 'Layout' ==> 'Add a Gadget'
3. Pilih element/gadget 'HTML/Javascript'

4. Copy kod dekat bawah ni :

<div class="widget"><h4></h4> <div class="textwidget"><p style="text-align: justify;"><script type="text/javascript">
/***********************************************
* Display time of last visit script- by JavaScriptKit.com
* This notice MUST stay intact for use
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
***********************************************/
var days = 730; // days until cookie expires = 2 years.
var lastvisit=new Object();
var firstvisitmsg="Selamat Datang! Ini adalah kunjungan anda yang pertama di blog ini.";
lastvisit.subsequentvisitmsg="Terima kasih kerana sudi melawat blog ini. Kunjungan terakhir anda pada <b>[displaydate]</b>";
lastvisit.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1];
return'';
}
lastvisit.setCookie=function(name, value, days){
var expireDate = new Date();
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days));
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
lastvisit.showmessage = function() {
var wh = new Date();
if (lastvisit.getCookie("visitc") == "") {
lastvisit.setCookie("visitc", wh, days);
document.write(firstvisitmsg);
}
else {
var lv = lastvisit.getCookie("visitc");
var lvp = Date.parse(lv);
var now = new Date();
now.setTime(lvp);
var day = new Array("Sun", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat");
var month = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var dd = now.getDate();
var dy = now.getDay();
dy = day[dy];
var mn = now.getMonth();
mn = month[mn];
yy = now.getFullYear();
var hh = now.getHours();
var ampm = "AM";
if (hh >= 12) {ampm = "PM"}
if (hh >12){hh = hh - 12};
if (hh == 0) {hh = 12}
if (hh < 10) {hh = "0" + hh};
var mins = now.getMinutes();
if (mins < 10) {mins = "0"+ mins}
var secs = now.getSeconds();
if (secs < 10) {secs = "0" + secs}
var dispDate = dy + ", " + mn + " " + dd + ", " + yy + " " + hh + ":" + mins + ":" + secs + " " + ampm
document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", dispDate))
}
lastvisit.setCookie("visitc", wh, days);
}
lastvisit.showmessage();

</script><br />
<script>
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
</script>
<script>
document.write("Anda pernah singgah di blog AREP SKEMA  sebanyak <b>" + amt() + "</b> kali. Terima kasih. Sila datang lagi okay?.")
</script></p>
</div></div>


5. Dah Copy kan? Paste kan kod tu dekat bahagian 'HTML/Javascript' tadi.

PENGUBAHSUAIAN :
- Tukar ayat yang aku warnakan merah tu dengan ayat kauorang sendiri okay?

7. Tekan lah  button 'Save' dan lihat hasilnya dekat blog kauorang.



Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Cara Tukar Favicon Blog Dengan Mudah

WRITTEN BY : ARRIF TIME : 9:54 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua.

Ha tutorial kali ni pasal nak tukar favicon. Haritu aku ada buat tutorial nak tukar favicon dari gambar blogger tu jadi gambar yang kita suka kan. Tapi cara haritu tu kita edit pakai CSS, so mungkin agak sukar lah sikit. Tapi kali ni pun aku ajar yang lagi senang punya.

Jadi kita mulakan.

1. Pergi laman web http://www.favicon.cc/
2. Lepas dah pergi laman web tu kan. Kauorang follow step macam dalam gambar bawah ni :


Kauorang ikut betul-betul step ni tau. 3 step yang sangat mudah.
2.1.   Nombor 1 = Tekan 'Import Image'
2.2.  Nombor 2 = Tekan 'Choose File' dan kauorang pilih gambar yang kauorang suka yang ada dalam pc/lappy kauorang.
2.3.   Nombor 3 = Tekan 'Upload' dan automatik akan terupload favicon kauorang.

NOTA:
- Anak panah merah tu kauorang pilih je Option 'Keep dimensions'


Selesai step nombor 2. Teruskan dengan step nombor 3.

3. Akan keluar page macamni pula. Sila ikut step macam dalam gambar bawah ni : 


3.1 . Tekan 'Download Favicon'. Nampak tak? Kalau tak nampak tengok macam dalam gambar tu, yang aku kotakkan merah siap ada 2 anak panah. Ha tekan tu. Lepas tu terus terdownload ke pc/lappy kauorang favicon tu.

4. Daftar masuk Blogger.
5. Pergi bahagian 'Layout'
6. Tengok belah atas kiri, akan nampak tempat tukar favicon, [rujuk gambar bawah]


7. Klik 'Edit' dan pilih favicon yang telah kauorang download tadi tu. 
8. Save.

Jadi itulah cara mudah nak tukar favicon blog kauorang.

NOTA:
- Kalau nak tukar lagi favicon, sentiasa gunakan favicon.cc sebab gambar yang terhasil adalah format .ico , kalau format JPEG/PNG, blogger tak support sangat untuk favicon. :)


Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)


Tutorial : Cari Blog ID Dengan Mudah

WRITTEN BY : ARRIF TIME : 3:49 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Kali ni aku nak ajak macamana nak dapatkan Blog ID kauorang. Blog ID ni sangat berguna untuk sesetengah tutorial lain tau. Kadang ada widget/gadget/coding yang perlukan Blog ID kita ni tau. Okay sebenarnya banyak cara nak dapatkan Blog ID ni tau. Tapi aku bagi cara yang mudah okay. Sangat simple.

Jadi kita mulakan perlahan-lahan..

1. Daftar masuk Blogger.
2. Akan keluar bahagian 'Dashboard' [rujuk gambar bawah]



3. Bila dah keluar Dashboard. Sila fokus bahagian macam dalam gambar bawah ni. Kan ada banyak bahagian macam Posts, Pages, Comments, Google+, Stat, Earning dan seturusnya lagi lah kan. Kauorang klik je mana mana bahagian sama ada Posts, Pages, Comments, Google+, Stat, Earning dan seturusnya. Sebagai contoh aku klik bahagian Layout 



4. Lepas tu bila keluar bahagian Layout macam gambar bawah ni. Ha tengok bahagian atas tu, yang aku kotak kan warna merah siap ada anak panah tu. Ha itulah Blog ID kauorang. Boleh Copy dan paste dekat tempat yang kauorang perlu gunakan.

BLOG ID

Ha jadi senang kan nak cari Blog ID kauorang? Hehe. Dah belajar ye tahu kan? Hehe

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)


Tutorial : Cara Letak Gadget HTML/Javascript

WRITTEN BY : ARRIF TIME : 3:13 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera

Tutorial yang ni kan aku nak ajar macamana nak tambah element/gadget dekat bahagian Layout dan cara pilih element HTML/Javascript. Benda ni penting tau sebab kebanyakan tutorial lain banyak menggunakan fungsi ni tau. Ingat tu! Haha

Okay kita mulakan.

1. Daftar masuk Blogger.
2. Dekat bahagain menu tepi tu pilih 'Layout' [rujuk gambar dekat bawah]

PILIH LAYOUT (BULATAN MERAH)

3. Bila dah tekan 'Layout' tu kan, kan terus pergi dekat bahagian yang macam dalam gambar atas tu jugak kan? Ada banyak kotak-kotak tu kan. Jadi macamana nak letak gadget/element HTML/Javascript? Teruskan..

4. Klik 'Add a Gadget' [rujuk gambar bawah]
-NOTA: PILIH SAMA ADA NAK LETAK BAHAGIAN SIDE BAR ATAU BAWAH POST)

ADD A GADGET

5. Bila dah tekan, akan keluar window kecik macam gambar bawah ni kan. Scroll ke bawah sikit sampai jumpa gadget HTML/Javascript. Dan Klik icon tambah + yang warna biru tu okay. [rujuk gambar bawah]

HTML/JAVASCRIPT


6. Dah tekan tambah tu, automatik akan bertukar macam gambar bawah ni. 


7. Kauorang boleh lah isi bahagian Title dan Content tu. Lepas tu tekan lah Save

Mudah kan? Harap berguna dan permudahkan urusan kauorang dalam blogging ni. Hehe 

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)



Tutorial : Kenali Fungsi-Fungsi Di Bahagian Post

WRITTEN BY : ARRIF TIME : 2:24 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Hari ni aku nak bagitahu dan ajar serba sedikit fungsi-fungsi yang terdapat dalam bahagian 'New Posts'. Maksudnya fungsi-fungsi yangg tempat kita nak taip-taip dekat blog ni. Masih tak faham? Takpe. Kauorang teruskan baca sampai habis okay? Nanti kauorang faham lah ye.

Okay inilah yang aku maksudkan tu, aku nak terangkan satu persatu fungsi-fungsi yang terdapat dekat bahagian ini okay. Mungkin ada yang dah tahu, dan bagi yang blogger newbie tu mesti macam tak tahu sangat kan? Jadi aku tolong terangkan okay berdasarkan gambar dekat bawah ni :

BAHAGIAN NEW POST


Aku teangkan mengikut urutan nombor dan warna kotak yang aku dah bahagikan macam dalam gambar tu.

1. RUANGAN UNTUK TAIP TAJUK UNTUK ENTRI

2. RUANGAN UNTUK TAIP ISI ENTRI

3. 2 BAHAGIAN : 
- COMPOSE = UNTUK TAIP ENTRI BIASA
- HTML = UNTUK LETAK CODING DAN BOLEH DIPAPAR HASIL CODING TU

4. FUNGSI UNTU UNDO DAN REDO. KALAU SALAH TAIP TEKAN ANAK PANAH KE KIRI(UNDO) , KALAU TERPADAM APA KITA TULIS TEKAN ANAK PANAH KE KANAN (REDO)

5. BAHAGIAN TULISAN/FONT :
- F = JENIS FONT
- TT = SAIZ FONT
- NORMAL = FORMAT PENULISAN
- B = BOLD KAN TULISAN (BOLD)
- I = ITALIC KAN TULISAN (CONDONG)
- U = UNDERLINE KAN TULISAN (UNDERLINE)
- A = TUKAR WARNA TULISAN
- ICON HIGHLIGHT = UNTUK HIGHLIGHT/TUKAR WARNA BACKGROUND TULISAN

6. TAMBAH MEDIA KE DALAM POSTING :
- LINK = LETAK LINK UNTUK TULISAN/GAMBAR
- ICON GAMBAR = TAMBAH GAMBAR KE DALAM POSTING (BOLEH UPLOAD DARI PC/DARI BLOG/ALBUM PICASA/PHONE/WEBCAM/URL)
- ICON DIRECTOR = TAMBAH VIDEO DALAM POSTING KITA (UPLOAD/YOUTUBE/WEBCAM/PHONE)
- ICON KERTAS TERBELAH = BUAT JUMPLINK UNTUK ENTRI (FUNGSI READ MORE)

7.  BAHAGIAN FORMAT PENULISAN
- ICON GARIS-GARIS = FORMAT PENULISAN (ALIGN LEFT, ALIGN RIGHT, ALIGN CENTER, JUSTIFY)
- ICON 123 = UNTUK BUAT SENARAI PENOMBORAN (LIST BERBENTUK 123)
- ICON DOT DOT = UNTUK BUAT SENARAI (LIST BERBENTUK DOT DOT)
- ICON PEMBUKA KATA " = UNTUK BUAT BLOCKQUOTE DALAM POST
- ICON T ADA PANGKAH = BUANG SEMUA FORMAT PENULISAN YANG KITA NAK

8. BAHAGIAN PEMBETULAN PENULISAN :
- ICON ABC RIGHT = CEK EJAAN KITA
- ICON KAMUS/BUKU = TRANSLATE/TERJEMAH AYAT-AYAT DALAM ENTRI.

9. BAHAGIAN POST SETTING :
- LABELS = LETAK LEBEL BERKENAAN POST KITA
- SCHEDULE = TARIKH DAN MASA UNTUK POST KITA
- PERMAINLINK = URL YANG SESUAI UNTUK POST KITA (BOLEH EDIT ATAU AUTO)
- LOCATION = LETAK KAWASAN YANG KITA TENGAH BERADA
- OPTION = LAIN-LAIN SETTING UNTUK POST KITA

10. BAHAGIAN MENU :
- PUBLISH = UNTUK PUBLISH KITA PUNYA POST BILA DAH SIAP MENAIP
- SAVE = SAVE KITA PUNYA POST YANG DITAIP
- PREVIEW = KITA NAK TENGOK APA YANG KITA TAIP SEBELUM ENTRI DI PUBLISH
- CLOSE = TUTUP BAHAGIAN POSTING

Ha banyak tak? Tak banyak jugaklah fungsi fungsinya. Kalau banyak pun untuk kebaikan kita tahu semua fungsinya dalam blog ni. Kalau tak faham cakap tau. Harap dengan tutorial ni sedikit sebanyak dapat membantu kauorang dekat luar sana. Kalau aku ada tersilap tolong bagitahu okay? Mungkin ilmu aku belum cukup. ;)




Tutorial : Cara Buat New Post Dalam Blog

WRITTEN BY : ARRIF TIME : 1:22 PM TOTAL COMMENTS : 0


Assalamualaikum dan dan salam sejahtera semua.

Tutorial ni untuk newbie blogger ye. Bagi blogger yang baru berkecimpung dalam dunia blog ni kan, mesti kena tahu cara ni. Mesti kena tahu macamana nak buat New Post, atau bahasa senang je macamana nak taip-taip buat entry ni. Penting benda ni untuk kita sebagai blogger sebab kalau tak tahu dekat mana nak buat post dekat blogger, macamana nak ada post dekat blog kita ye tak?

Jadi kita mulakan

1. Daftar masuk Blogger.
2. Akan keluar bahagian 'Dashboard' [rujuk gambar bawah]

BAHAGIAN DASHBOARD BLOGGER

3. Lepas keluar bahagian Dashboard tu kan. Ada 2 cara untuk buat 'New Post'. Cara pertama ialah dengan menekan/klik butang yang warna oren tu, yang ada gambar pen/pensil tu ha. [rujuk gambar bawah]

TEKAN UNTUK TERUS BUAT NEW POST

4. Selepas tekan butang oren tadi tu, serta merta terus ke page untuk kita menaip, atau pun tempat nak buat kita punya post. [rujuk gambar bawah]

BAHAGIAN NEW POST

5. Nampak tak? Senang kan untuk buat 'New Post' dekat blog? So dekat bahagian tu kauorang boleh lah terus menaip macam biasa. Kauorang boleh explore sendiri fungsi-fungsi untuk penulisan tu dekat bahagian atas tu. Lebih kurang macam dekat Microsoft Word lah tu okay.


Cara yang kedua pula lebih kurang sahaja dengan cara pertama. Langkah-langkahnya macam dekat bawah ni :

1. Daftar masuk dekat Blogger
2. Akan keluar bahagian 'Dashboard'
3. Klik tanda anak panah dan pilih 'Posts' [rujuk gambar bawah]

PILIH POSTS

4. Lepas klik anak panah dan pilih bahagian 'Posts' tu, akan keluar bahagian macamni dekat gambar bawah ni, page ni dia tunjuk semua post yang kita dah buat atau pun post yang tersimpan dalam 'Draft', maksudnya kita belum 'Publish' [rujuk gambar bawah]

BAHAGIAN ALL POST

5. Bila dah keluar page macamtu, terus klik butang oren yang ada tulisan 'New Post' dekat bahagian menu sebelah kiri tu. [rujuk gambar atas]

6. Bila dah klik, secara automatik akan terus ke page untuk kita buat post. [rujuk gambar bawah]

BAHAGIAN NEW POST

7. Mudah juga kan cara yang ni? Lepas dah siap kauorang menaip tu, dah puas hati. Boleh terus save dan  'Publish' post kauorang dengan tekan butang yang warna oren dekat belah atas kanan tu [rujuk gambar bawah]


Jadi itulah cara-cara nak buat 'New Post' dekat blog. Selamat mencuba :) 
Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)




Tutorial : Cara Backup/Restore Blog Template

WRITTEN BY : ARRIF TIME : 8:59 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua.

Tutorial ni adalah tutorial yang asas tapi sangat penting bagi semua orang. Aku nak ajar semua benda asas iaitu cara Backup/Restore template blog kita. Benda ni lah penyelamat kita punya blog kalau-kalau terjadi perkara yang tidak diingini semasa kita tengok syok syok edit blog kita dekat bahagian Template. Kauorang kena belajar ni dan fahamkan dan ingat sampai bila-bila okay.

Jadi kita mulakan...

1. Log in Blogger
2. Pergi 'Dashboard' [tengok gambar bawah]

NI CONTOH BAHAGIAN DASHBOARD


3. Pilih bahagian 'Template' dekat bahagian dashboard menu . [tengok gambar bawah]
DASHBOARD MENU

4. Akan terbuka ke page yang macamni, terus klik butang 'Restore/Backup' dekat bahagian atas kanan. [rujuk gambar bawah]

TEMPLATE

5. Lepas dah klik butang 'Restore/Backup' tu. Akan keluar windows macamni pula. Terus klik butang warna oren yang ada tulisan 'Download full template'. Dan secara automatik akan terdownload file notepad [rujuk gambar bawah]

DOWNLOAD FULL TEMPLATE




FILE TEMPLATE SIAP
DI DOWNLOAD
====>








6. Selesai sudah backup template blog kauorang :) 


Tiba-tiba.. semasa tengah syok edit blog dekat bahagian coding semua tu kan? Masa nak save ada error. Atau pun tiba-tiba blog kita jadi cacat lepas kita edit. Lepas tu kita lupa code apa yang kita usik, tambah, edit, padam dekat bahagian Edit HTML tadi. Kita gelabah! 
Jangan gelabah. Kalau terjadi situasi macamtu kita boleh 'sihatkan' semula blog kita yang cacat tadi tu. Caranya adalah dengan Restore. Tapi yang penting, kena backup blog dulu baru boleh restore.  Lebih kurang dengan cara Backup template tadi. 


Bezanya bila keluar page yang macamni. Terus klik butang 'Open File'. Cari file template yang kita backup tadi. Lepas tu klik butang 'Upload' yang warna oren tu.


Dan blog kita kembali sihat semula :)

Kalau tak faham atau tak menjadi, bagitahu dekat aku okay ;)



Tutorial : Cepatkan Loading Blog Dengan jQuery LazyLoad

WRITTEN BY : ARRIF TIME : 7:58 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua pembaca ye :)

Blog kauorang loading lambat? Takpe jangan risau. Aku ada cara macamana nak cepatkan loading blog kauorang. Kita gunakan Jquery LazyLoad. Benda ni memang cepatkan sedikit loading blog kauorang kalau lambat, tapi taklah 100% berdesup lajunya. Tapi memang membantu.


Jadi kita mulakan perlahan-lahan..

1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy kod dekat bawah ni pula :

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='https://googledrive.com/host/0ByoCwyjwB1aDTXhnVVlxcTBadVk' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200}); }); </script>

7. Paste kan kod yang kauorang copy tadi dekat atas atau sebelum kod </head>
8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)





Tutorial : Lindungi Gambar Daripada Kena Download

WRITTEN BY : ARRIF TIME : 6:17 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua..

Hari ni aku nak ajar satu trik awesome untuk korang. Trik yang aku maksudkan tu ialah nak macamana nak buat biar semua gambar dalam blog kita tak boleh di Right-Click dan tak boleh di download oleh orang lain. Benda ni penting jugak bagi kauorang yang nak protect kauorang punya gambar daripada kena curi ni. haha.
Ada 2 trik yang aku ajar ni. Boleh buat salah 1, ataupun nak buat dua dua pun boleh. 


Jadi kita mulakan.

A. TRIK GAMBAR TAK BOLEH DI DOWNLOAD

1. Pergi 'Dashboard'
2. Buka ruangan 'Template'
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy kod dekat bawah ni pula :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

7. Paste kod yang di copy tu dekat atas atau sebelum kod </head>
8. Klik 'Preview Template'
9. Kalau tiada error, klik 'Save


B. TRIK DISABLE IMAGE RIGHT-CLICK

1. Pergi 'Dashboard'
2. Buka ruangan 'Template'
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

<body>

6. Ganti kod <body> dengan kod dekat bawah ni :

<body onmousedown='return false' oncontexmenu='return false' onselectstart='return false'>

7. Klik 'Preview Template'
8. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)







Tutorial : Pasang Fungsi Sitemap Yang Ringan

WRITTEN BY : ARRIF TIME : 4:36 PM TOTAL COMMENTS : 0


Assalamualaikum dan salam sejahtera semua..

Tutorial kali ni aku nak ajar macamana nak pasang fungsi Sitemap dekat blog kauorang. Korang tak tahu apa itu sitemap? Kalau tak tahu boleh tengok contoh apa itu sitemap dekat page Sitemap dalam blog aku ni. Jika kauorang tahu dan dah pasang fungsi ni dekat blog kauorang, baguslah. Tapi versi yang aku sediakan ni lebih ringan loadingnya. Maksudnya blog kauorang tak akan berat sangat bila pasang ni.

Jadi kita mulakan..

1. Masuk Blogger
2. Pilih bahagian 'Pages'
3. Pilih 'New Page'
4. Dekat situ ada terbahagi kepada 2 bahagian iaitu 'Compose' dan 'HTML' dekat belah atas kiri.
5. Pilih 'HTML' (klik HTML)
6. Tajuk page yang kita nak buat ni letak lah "Sitemap" atau apa-apa kauorang suka.
7. Copy kod dekat bawah ni :

<div style="background-color: none; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://bloggergubug.googlecode.com/files/daftarisi.js"></script><script src="http://urlblog.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
</div>


8. Paste dekat bahagian page tadi tu.
9. Tekan 'Preview' kalau nak tengok menjadi tak.
10. Kalau menjadi cantik. Tekan 'Save'

PENGUBAHSUAIAN :
- Gantikan http://urlblog.com dengan URL blog masing-masing okay

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;).




Tutorial : Letak Button Like, Tweet dan Google+ Bawah Entri

WRITTEN BY : ARRIF TIME : 2:11 PM TOTAL COMMENTS : 0


Assalamualikum dan salam sejahtera.

Tutorial kali ni aku nak ajar kauorang macamana nak letak button Facebook Like, Button Tweet dan jugak Button Google+. Fungsi-fungsi semua button ni penting dalam blog kita supaya kalau ada orang baca entri kita, senang diorang nak Like, nak Tweet atau guna fungsi Google+. 

Jadi kita mulakan.

1. Pergi 'Dashboard'
2. Buka ruangan 'Template'
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3.  Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

<data:post.body/>

Okay dah jumpa kan kod <data:post.body/> ? Teruskan..

5. Copy kod dekat bawah ni :

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='username twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</b:if>
<g:plusone size='medium'/>


6. Paste kod yang dicopy tadi tu dekat bawah kod <data:post.body/>

PENGUBAHSUAIAN :
- Tukar 'username twitter' yang aku warnakan merah tu dengan Username Twitter kauorang.

7. Klik 'Preview Template'
8. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;)