anis's tutorial: January 2012

Thursday 26 January 2012

Tutorial 19-->Letak Gambar Sebelah Tajuk

Salam you all !!!..
Daa lame anis tak wat tutorial kan..
;D sebok nakkk hiass blog..

K..petang yang redup ini..
Anis maw ajar macam mana nak letak gambar comellll kat sebelah tajuk..
Tengok anis punye..comellll kan..?
Kucing main gitar..haha..tak laa susah mana. nye punn.. =D

Cara-caranya adalah..:-

1.Login--->Design--->Edit HTML--->Tick Expand Widget

2.Tekan Ctrl+f dan copy paste kod berikut dan enter

<a expr:href='data:post.url'><data:post.title/></a>

3.dah jumpa dah kan??k letakkan kod dibawah ANTARA kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>

<img src="url gambar"/>

P/S:--Korang tukarlah "url gambar" dengan url cute you alll !!..
~tata~

***SELAMAT MENCUBA***

Sunday 22 January 2012

Tutor 18-->Meletak Disabled Highlight Text

Salam..

hey3..hujan dah berhenti ! haha *niyh pon nak cerita
Nak keluar lepak2 dalam longkang..huhuh..
K..tadi kan tutorial "diabled right click"..
Tapi sekarang "diabled highlight text" pulak ! ..
Untuk mengelakkan dicuri oleh "copy cat" laa tuw..

Hehe..Step dia mudaaaaaah sangat !

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget >HTML/Javascript .

3. Copy code di bawah ini dan pastekan kedalamnya

<script type="text/javascript">/************************************************ Disable Text Selection script- © 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 routetarget.onselectstart=function(){return false}else if (typeof target.style.MozUserSelect!="undefined") //Firefox routetarget.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

4. Sila SAVE dan tengok hasil tangan anda..k baiii..nak cabut ! dok longkang !

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Tutorial 17-->Meletak Disabled Right Click

Salam petang lagi..
Tadi kata kan hujan lebat..
Tapi sekarang dah reda sikit..hhihi...

Ok aku banyak cakap dah !
Kalau korang nak letak disabled right click..
Silalah mencuba tutorial niyh..

Ramuannya adalah :

1. Login ke Blogspot .

2. Klik Layout > Add a Gadget >HTML/Javascript .

3. Copy code di bawah ini dan pastekan kedalamnya

<script language=JavaScript></script>

Tak de lah banyak sangat kan..
4. Lepas itu save then test..menjadi tak?*eceh ! kembang lah tu*

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Tutorial 16-->Memasang Button "like" Untuk Fb

Salam petang semua..
Petang niyh hujan lebat laa..
k..petang niyh..anis mau ajar cam mane nak buat button like FB..
hihih..mestilah korang ada fb kn !?
Cara ini dapat menaikkan traffic blog anda dan mempromote blog untuk dibaca :)

Cara-caranya adalah:

1.Login ke Blogspot, clik design/ layout > Edit HTML > jangan lupa untuk clik pada Expand Widget Templates.

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

<data:post.body/>

3. Then copy paste code INI, di BAWAH code di atas ye..

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

4. Try PRIVIEW dan kalau menjadi SAVE!

gOoD LuCk !

bye !!!!!!!!!!

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Saturday 21 January 2012

MY TUTOR

Anis bagitau dari a-------->z..tengok2..banyak kan anis dapat buat tutor..hihi..alhamdulillah

"Never Give Up To Be Success"

Tutorial 1-->Welcome Blog

Tutorial 2-->Cara Membuat Floating Up & Home Button

Tutorial 3-->Membuat Page Number Pada Blog

Tutorial 4-->Membuat Link Rainbow/Pelangi

Tutorial 5-->Note Di Bawah Setiap Post/Entry

Tutorial 6-->Cara Mengubah Warna Hightlight

Tutorial 7-->Cursors Comel-comel

Tutorial 8-->Cara Membuat Blog

Tutorial 9-->Snow Ball Effect

Tutorial 10-->Fireworks Di Blog

Tutorial 11-->Cute Profile

Tutorial 12-->Mencantikkan Scroll Bar Blog

Tutorial 13-->Membuat Page Pada Blog

Tutorial 14-->Membuat Floating Button

Tutorial 15-->Icon Cute Di Blog Archieve

Tutorial 16-->Memasang Button FB di Blog

***SELAMAT MENCUBA***

Tutor 15-->Icon Comel di Blog Archieve

Assalamualaikum,

Nak buat tak tutorial yang macam ni??

nak lettew..comel

Tapi korang kena buat tutorial ini dulu :

Sign In Blogger > Design > Layout > Add Gadget >Blog Archieve

Pastikan setting korang macam gambar di bawah eh.. ( kalau dah already add sila tukar setting seperti gambar di bawah )

klick untuk membesar..

Cara-cara nak meletakkan Icon comel untuk Blog Archive adalah seperti berikut :

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates

2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then enter!

<a expr:href='data:i.url'><data:i.title/>

3. Padam/delete code yang korang cari tadi iaitu code <a expr:href='data:i.url'><data:i.title/> dangantikan/replace dengan code di bawah :

<a expr:href='data:i.url'><img src="URL ICON"/><data:i.title/>

http://dl9.glitter-graphics.net/pub/718/718449s271pnji46.gif
http://dl6.glitter-graphics.net/pub/1823/1823186lcyfg9vqaj.gif
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif

K bye...mau tidoo..:)

***SELAMAT MENCUBA***

Tutor 14-->Membuat Floating Button

Assalamualaikum.

Rasa sayang lah nak tinggalkan buat tutorial ni..
Walaupun mataku sudah berpinar-pinar @_@..

Di malam hari yang hening ni aku nak ajar cara-cara nak buat floating button. Apakah fungsi floating button ni? Okeh, benda ni memudahkan reader connect dengan korang. Contoh kalau click button Facebook terus boleh tengok facebook profile korang dan sebagainya. Lagipun cara ini dapat ringankan blog korang. Korang dapat kurang berat blog korang. Contoh, kalau korang letak facebook badge, twitter badge atau sekawan dengannya memang memberatkan blog untuk loading tapi kalau korang guna floating button untuk connect dengan reader korang dapat kurangkan ber"kb-kb" berat badan ooppps berat blog korang.
Tampa berlenggah-lenggah lagi mohh aku ajorkan cara nak buat benda alah ni..karang aku merepek sampai berkilo-kilo karang korang juga yang susahkan..
Kalau sesiapa yang masih blur..meh tengok gambar ni..kasi faham sikit.

cantik dan kemas kn..??

Faham tak wahai kawan-kawan? Kalau tersuka jom ikuti langkah-langkah yang penuh dramatik ini :

1. Sign in blogger > > Design > Add Gadget > Html/Java Script
2. Copy coding di bawah dan paste ke dalam Html/Java Script

<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:140px; left:-12px;'>
<a class='linkopacity' href='http://www.facebook.com/anismdnor' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRledPyLMzH-GTBU7Z3Wy_2qLUN9OCTz4iAhzgXMAlf3Tg0JW8i_P5IklN4DX8X11F0NtvpSzlAHl33ZLPTzbkLC_gwDBnVi8ssU0L-trpMHu1p_DfrPvji_Nh-aoboBJWD7CJX2EAAgM/s1600/facebook1.png" /></a><br />
<a class='linkopacity' href='http://twitter.com/#!/nami_farina' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLAQwOdDRiCa6R6sjIDZSF09azCihiCgiKiD7EHDgT4VhrZm68Sm7-TD5VKY_pdOCEu6YZGm_uMZWcEdIHJxu5InRcFVzcGdB2Q2b4FkRuxxM5scC8xJWgIVSITINm2NtoFiC1dURwrRo/s1600/twett.png" /></a><br />
<a class='linkopacity' href='http://sayasukamenulisdanberleter.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiDE80oAHgQYfc_Muq1W16Y6Yzme0os8QLbRxTNJXnZwiSsHaWkKHhQsqNCmAYjx0vkBC3zV25SrhaWa3Ip4UFXCA7FoZ-KWFSUv51VOYSXquF8xsevnZ6MXspiEkTTXcM_ZCx_Gcm14/s1600/blogger_64x64.png" /></a><br />
</div>

3. Tulisan warna merah ialah link url korang ( contoh, Facebook, Twitter ), dan link biru link url gambar/icon. Kalau nak tambah lagi button copy tanda ni je sebelum code </div>
left boleh tukar kepada right kalau suka.
# Ubah font warna hijau sekali
4. Faham tak? dan SAVE je

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu3fh17_yRi-fhzmE6SOKGTM37npxMc5wtO9f4cm5oOp0l6vy4xW2y0ZEKiSD6_k8O5USrNE9N6EvggdneiltWsWI1HQkBJnN56MIOwKdZv8eBzk_iKyYJ13NN_2Y-BEa__qiGj88BF9A/s1600/blogger-icon-big.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZbaqwrSjhQGCsAdf5O72Dy7T5IEGhzCsoNTiofxFZh2uR2Swp262OXIRIf4xtZRXkjrK3VsUjDtlkq7qHfr8X51U52Z7-U32MOrJBHx29qYZZWowzpfJ1wuaoXWIqKoKngIpRlxysDA/s1600/Facebook-icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyVCdYLAH87epqGFG5k2Z9IRQvEMazlrhyHFI7FNjO8-Vk_wwxHyYIPMau83UrzphZLKQtDhQBf_9k7pr1oFoywH8Zx2lTcyzAYizQpAbJteipDm0xOfhX2NepJn2XsvtMG1wSKuF_7c/s1600/TwitterIcon.png

Nak yang lain??carik sendiri.. !..hhihih..
Suke tak??komen tau..

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Tutor 13-->Membuat Page Pada Blog

huaargh !..ngantuk2 teruskan jugak buat tutorial nye..hehe

Jom kita menambah widge untuk mencantikan lagi blog kita.
Malam ini saya mahu ajar cara-cara untuk meletakkan number muka surat bagi menggantikan Older Post atau Newer Post.
Order dan Newer post ini kadang-kadang menyusahkan pembaca untuk melihat page kita.
Saya sendiri pun susah untuk melihat page orang itu kalau page dia tak ada halaman muka surat.
Nak tahu tak macam mana yang saya katakana sebagai halaman muka surat. Adalah seperti ini dibawah blog saya.. yang ada page 1, 2, 3,4,5

kemas kan??

Ramuan yang perlu di letak adalah seperti berikut

Login ke Blogspot .

Klik Layout > Add a Gadget Javascript / HTML

Copy kod di bawah dan Pastekan kedalamnya…

<style>.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #bbb;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #bbb;background-color:#bbb;}.showpagePoint {color:#fff;text-decoration:none;border: 1px solid #fff;background: #000;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #bbb;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333;}
</style>

<script type="text/javascript">
function showpageCount(json) {var thisUrl = location.href;var htmlMap = new Array();var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";var isLablePage = thisUrl.indexOf("/search/label/")!=-1;var isPage = thisUrl.indexOf("/search?updated")!=-1;var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';

var pageCount=5;var displayPageNum=3;var firstPageWord = 'Awal';var endPageWord = 'Akhir';var upPageWord ='Sebelumnya';var downPageWord ='Selanjutnya';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp = post.published.$t.substr(0,10);var title = post.title.$t;if(isLablePage){if(title!=''){if(post.category){for(var c=0, post_category; post_category = post.category[c]; c++) {if(encodeURIComponent(post_category.term)==thisLable){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}
postNum++;htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}}}//end if(post.category){
itemCount++;}
}else{if(title!=''){if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}
if(title!='') postNum++;htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}itemCount++;}}
for(var p =0;p< htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){if(fFlag ==0 && p == thisNum-2){if(thisNum==2){if(isLablePage){upPageHtml = labelHtml + upPageWord +'</a></span>';}else{upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';}}else{upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}
fFlag++;}
if(p==(thisNum-1)){html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';}else{if(p==0){if(isLablePage){html = labelHtml+'1</a></span>';}else{html += '<span class="showpageNum"><a href="/">1</a></span>';}}else{html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';}}
if(eFlag ==0 && p == thisNum){downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';eFlag++;}}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){if(!isLablePage){html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';}else{html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';}}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){html += downPageHtml;html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';}
if(postNum==1) postNum++;html += '</div>';
if(isPage || isFirstPage || isLablePage){var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){html ='';}
for(var p =0;p< pageArea.length;p++){pageArea[p].innerHTML = html;}
if(pageArea&&pageArea.length>0){html ='';}
if(blogPager){blogPager.innerHTML = html;}}
}</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script><div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://blogkomputers.blogspot.com">Grab this Widget ~ Navigasi Halaman</a></div>

Mudah kan sayang??hehe..good luck !

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Tutor 12-->Mencantikkan Scroll Bar Blog

Assalamualaikum, alhamdulilah..tutorial anis dah lebih 10..
Anis baru je buat tutorial petang tadi,..sampai lah ke pukul 10:00 p.m..
Huh lame bebeno..
k lah..Anis nak tunjuk cara-cara nak mncantikkan scroll bar korang..
cantik..tak pecaye?>tengok lah scroll bar anis..yang kat tepi tu..

Tapi tutorial ini hanya sesuai dengan penggunaan GOOGLE CROME sahaja, kalau guna Mozilla korang takkan nampak effectnya. So kalau nak lihat hasilnya. Sila download dan install GOOGLE CROME anda.

1. Sign in Blogspot > Design > Edit Html

2. Cari code di bawah , Ctrl F dan paste dalam kotak find..enter!

]]></b:skin>

3. Copy code di bawah dan paste sebelum/di atas code yang dicari tadi.

::-webkit-scrollbar {height:12px;width: 12px;background: #FF1493;}::-webkit-scrollbar-thumb {background-color: #BA55D3;-moz-border-radius: 10px;border-radius: 10px;}

4. Sekarang korang boleh tukar :
Warna background scroll bar : #FF1493
Warna scroll bar : #BA55D3
More colour? Click here

5. Preview, kalau dah puas hati dan menjadi silalah tekan SAVE!

P/s : KOmen-komenlah yer lepas mencuba!

huaarrhh ! ngantuk dah..bye..gud nite !!!!

Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

***SELAMAT MENCUBA***

Tutor 11-->Cute Profile

Assalamualaikum..
Kali ini nak share for caring cara-cara nak buat cute profile/about me atau biodata comel seperti gambar di bawah

hehe..comel kan..nak lettew

Cara-caranya adalah seperti berikut :

1. Sign in blogger > Design > Add Gadget > Html/JavaScript

2. Copy code di bawah dan paste ke dalam Html/Java Script

Code untuk gambar korang :

<center><a href="URLGAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URLGAMBAR" /></a></center>

3. Letak URLGAMBAR korang, pastikan dua-dua sama url nya. Dan letakkan pula di bawahnya coding code icon comel.
4. Pastikan korang ubah saiz gambar korang lebar(width) 200 dan tinggi (height) 150 agar lebih sesuai dengan saiz sidebar korang. Boleh guna PHOTOSCAPE.

Code icon comel :

<center><img src="URL ICON"/>Tajuk</center><center><img src="URL ICON"/>Tajuk</center><center><img src="URL ICON"/>Tajuk</center><center><img src="URL ICON"/>Tajuk</center>

4. Tukar URL ICON dan Tajuk korang.

5. Save jer.. :)

Url Icon boleh ambil kat sini kalau malas nak cari.

http://dl4.glitter-graphics.net/pub/1009/1009254cq7evun01h.gif
http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif
http://dl6.glitter-graphics.net/pub/437/437716tvik3339uq.gif
http://dl10.glitter-graphics.net/pub/1009/1009300rsetro2tmi.gif
http://dl9.glitter-graphics.net/pub/438/438969azkmwb42oa.gif
http://dl3.glitter-graphics.net/pub/898/898423u7ylo25wtf.png
http://dl9.glitter-graphics.net/pub/1328/1328329h5cmi3di50.gif
http://dl9.glitter-graphics.net/pub/718/718449s271pnji46.gif

k salam ! good luck kawan !

***SELAMAT MENCUBA***