tutorial : Fieldset Box

안녕하세요. 오늘은 모두에게 유용한 자습서를 가르치고 싶어요. Eh mintak maaf mintak maaf. Terbawa bawa pula Korea dekat sini. Maklumlah. Malaysia sekarang kan dah memang deman k-pop. Tak percaya??? try tanya kawan korang. Kenal tak Super Junior. Sure diorang jawab pantas 'Kenal'. Nak pulak ELF's perempuan. Eh cop, Kita dah keluar topik la pulak. Seronok duk citer k-pop k-pop sampai tak ingat motif entry kali ini.


Kali ini izzat nak ajar korang some useful code. Senang saja. Ini contoh Fieldset Box.

Dah nampak??? Kalau nak buat follow tutorial ni :

1. Design >> Page Element >> Add a Gadget >> HTML/JavaScript.
2. Copy code dekat bawah ni paste dalam kotak HTML tadi.

<fieldset><legend>YOUR TITLE</legend>YOUR TEXT</fieldset>

Kamus Oxford
YOUR TITLE : Tajuk Fieldset
YOUR TEXT : Ayat dalam fieldset. Boleh juga kalau nak letak code seperti code Shoutmix.

Kalau nak letak gambar sebaai title macam gambar dekat atas tu copy code ni.

<fieldset><legend><img src="URL GAMBAR"/></legend>YOUR TEXT</fieldset>

Kamus Oxford
URL GAMBAR : Url gambar. Boleh cari dekat SINI dan SINI
YOUR TEXT : Ayat dalam fieldset. Boleh juga kalau nak letak code seperti code Shoutmix.

3. Lepas siap save

TUTORIAL:: underline hover

Untuk code kali ni izzat nak ajar macam mana nak buat underline hover. Biasanya kita dengar header hover, blockquote hover dan link hover kan. Ni contoh underline hover.

Ini underline baru saya. Ohsem bukan?

Try hover mouse korang dekat underline izzat. effect yang izzat buat is transparent. Korang boleh buat pelbagai lagi effect sebenarnya. Tapi hari ni izzat nak ajar effect transparent. 

Mula mula macam biasa pergi Design >> Edit HTML

Ctrl+F search code ni

/* Header

Kalau jumpa paste code dekat bawah ata code /* Header tadi

u{
-webkit-transition:.4s;
text-decoration:none;
border-bottom:1px solid #FF95A9;
padding: 0.1px;
}
u:hover{
color:transparent;}
}

warna merah tu size border. Kalau nak tebalkan sikit just upkan no tu.

warna oren tu warna border.

Nie contoh code izzat

u {
color:#000000;
border-radius:3px;
-webkit-transition-duration: 2s;
}
u:hover {
background: #000000;
color: transparent;
}

TUTORIAL:: header hover like mine

Bonjour reader. Hari ini izzat ingin ajar macam mana nak buat Hover Header macam izzat. Cuba tolak cursor ke header izzat, ia akan ketepi betul? Credit goes to lettha for the code 

Cari code

#header h1 {

kalau tiada cari code 

h1.title {

Paste code dibawah di atas code #header h1 { atau h1.title { tadi

#header:hover{
padding-left: 30px;
-webkit-transition-duration: 5s;
}

Kalau tak sesuai adjust sikit code yang izzat highlight.

Preview dan kalau tiada error bolehlah Save Template.

TUTORIAL:: Welcome box di header

Rajin betul izzat share tutorial ini dekat korang. Hari ini izzat nak Kongsi tutorial "Welcome box di header".

THE CODE
1. Pergi Design >> Page Element >> Add a Gadget pilih HTML
2. Paste code ini di dalam kotak tadi

<div style=" position:absolute; top:0px; left:125px;"><img src="URL GAMBAR"/></div><div style=" position:absolute; top:35px; left:150px;"><center>YOUR WORD</center></div>

URL GAMBAR tu URL untuk background. Sila lihat freebies bawah.
YOUR WORD ayat korang.Ikut suka hati korang nak letak ayat apa contoh "unchanted world of mine" atau "BLOG TAHIK AYAM".Use your creativity

Boleh adjust kedudukan ayat atau background tu dengan adjust code yang izzat highlightkan merah.

FREEBIES

http://i1095.photobucket.com/albums/i464/daeyoung1/yellow-1.png

http://i1095.photobucket.com/albums/i464/daeyoung1/pink.png

http://i1095.photobucket.com/albums/i464/daeyoung1/green.png

http://i1095.photobucket.com/albums/i464/daeyoung1/biru.png

http://i1095.photobucket.com/albums/i464/daeyoung1/purple-1.png

TUTORIAL:: update marque box

Tutorial ni direquest oleh bunga-watie.Update marque box ni adalah kotak untuk kita update status kita.Contohnya macam dekat 'cream says' izzat tu.

HOW TO DO IT
1. Pergi Design > Page Element
2. Add a gadget > HTML/javascript
3 Copy paste code dekat bawah dalam kotak gadget tadi

<center style="text-align: right;"><span class="Apple-style-span" style="color: #000000; font-family: verdana ;"><b></b></span></center>YOUR TEXT<div style="Background-image:url(URL GAMBAR); repeat; padding -moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;: 5px; border:2px solid #000000;"><center><marquee>YOUR UPDATE</marquee>

#000000 : Warna text anda.
YOUR TEXT : Contoh macam izzat punya izzat tulis 'cream says'.
URL GAMBAR : Url background kotak tu.
2 : Size border
#000000 : Warna border
YOUR UPDATE : Update yang korang nak tuliis

4. Save

TUTORIAL:: pop window di buton SHOW|HIDE

Dengan kesihatan yang sebegeni izzat still nak update tutorial.Buat masa sekarang ni izzat tak boleh nak update entry yang berunsurkan personal atau lain lain.Otak bagai dah tepu sumpah tak larat nak berfikir .Dengan badannya yang bagai mencecah 100[darjah celcius] memang meletihkan izzat.Alhamdulillah semua chickenpox dah keluar.Tak lah rasa gatal/miang sangat.

Tutorial yang izzat nak ajar hari ni adalah tutorial yang berasaskan [SHOW|HIDE] button.Cuba korang scroll ke bawah sikit sampai dekat "Grand Merci".Dekat situ ada button 'more credit here'.Akan keluar banyak tab yang di linkkan ke iklan Churp Churp izzat di internet browser yang anda gunakan sekarang betul tidak??? Berikut yang izzat maksudkan dengan pop window di buton SHOW|HIDE.Ianya sangat berguna kepada pengguna pengguna Churp Churp.

TO DO IT
1. Pergi design > Page Element
2. Tekan Add a Gadget > HTML/JavaScript
3. Copy paste code dibawah dalam kotak Gadget tadi

<input onclick="window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
" type="button" value="SHOW|HIDE" />

Kalau nak button SHOW|HIDE tu center copy code ni pulak

<center><input onclick="window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
window.open('LINK IKLAN CHURP CHURP ANDA');
" type="button" value="SHOW|HIDE" /></center>

LINK IKLAN CHURP CHURP ANDA : Letak link iklan Churp Churp.Boleh juga kalau nak letak link yang lain.
SHOW|HIDE : Ayat di button tu.Boleh tukar macam 'Credit Here' atau lain lain.
4. Save dan siap.

TUTORIAL:: tag nama bloger di ruangan komen

Sebelum izzat mula izzat ingin mengucapkan terima kasih kepada Wamozuwaha atas tutorial yang amat membantu ini. Jadi hari ini izzat nak share tutorial yang izzat baru belajar iaitu 'Tag nama Blogger di ruangan komen'. Refer gambar dekat bawah kalau nak tahu apa yang izzat maksudkan dengan 'Tag nama Blogger di ruangan komen'.

Tertarik untuk buat??? Ikut step dekat bawah

GETTING THE BLOG ID
Ada lagi ke yang tak tahu cara nak amik Blog ID ni??? Kalau masih tak tahu sini izzat tunjukkan. Caranya tekan sama-ada Posting,Comments,Setting,Design,Monotize, ataupun Stats. Lepas itu tengok di bahagian link. Ada tertulis 'blogID=[NOMBOR blogID]'. Copy nombor tersebut lepas tu save dahulu di notepad atau pun yang sewaktu dengannya. Kalau nak tulis atas kertas kotor/kosong pun boleh.


EDIT THE HTML CODE
1. Pergi design > Edit HTML 
2. Ctrl+F search code <data:commentPostedByMsg/>
Kalau code tu tiada cuba tick pada Expand Widget Templates
3. Lepas dah jumpa copy paste code bawah ni di bawah code <data:commentPostedByMsg/> tadi.

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID KORANG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='http://3.bp.blogspot.com/_3TLQUQnfZ8A/TBsk-ANVrPI/AAAAAAAAAHs/0NIewfyVreQ/s1600/replygray+2.png'/></a></span>

MERAH : Letak blogID yang disave di notepad atau yang ditulis di atas kertas tadi
UNGU : Link gambar. Boleh tukar kepada gambar favourite asalkan bersaiz kecil.
4. Save.

Korang try bukak satu post korang yang telah dipublish, tengok dekat ruangan komen dibawah tu akan ada button reply. Refer gambar dekat bawah kalau tak faham apa yang izzat maksudkan.

Tanya kalau tak faham. "Malu bertanya, blog jadi mangsa"XD

wishlist dalam blog

Refer gambar di bawah kalau nak tahu wishlist ni camne.

credit; google

Let's start;

1. Design > Page Element > Add Gadget > HTML/JavaScript

2. Copy code kat bawah;

<form name=myform><input type="checkbox" name="mybox" value="1" checked />TEXT ANDA<br /><input type="checkbox" name="mybox" value="2" disabled />TEXT ANDA<br /><input type="checkbox" name="mybox" value="3" checked />TEXT ANDA<br /></form>

3. Paste code kat atas dalam HTML tadi.

4. Save.

merah; boleh tukar samaada "checked" atau "disabled"
oren; wish korang tulis dekat situ

buat slide shoutbox

Mesti ramai dah tahu kan tutorial ni, tapi izzat nak kogsi jugak sebab mungkin ada blogger newbie yang masih lagi tak tahu nak buat camne.

Jom mula tutorial;

1. Dashboard > Design > Add Gadget > HTML/JavaScript

2. copy paste code kat bawah dalam kotak gadget tadi

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOekYBLDANf_KC7-xAKlGC87qAD6xiv1shz96RahuuDR-m4CgPxfyuxhHEZ1Hzay-U41RcN78LxHYp9KEmIOj-pIsnSDkyHpB2eGE_LLBFuEL1DPXkKpI0iy9kE4JRNLmbOKv47apPoxB/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
CODE SHOUTBOX KORANG KAT SINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

3. Save

Merah: yang tu korang tukar la dengan URL gambar yang korang nak.

Oren: boleh tukar ikut kehendak sendiri.

Kelabu: code shout box korang.

disabled right click without note

Fungsi widget ni same je macam disabled-right-click-with-note tu.Cuma yang ni kalau right click mouse dia takkan keluar apa-apa note atau warning.

Let's bertutor;

1. Dashboard > Design > Add Gadget > HTML/JavaScript

2. Copy paste dalam kotak gadget tadi

<script language=JavaScript>
<!--
//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dauspozi.com
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
// -->
</script>

3. Save and done.

disabled right click with note

Pernah tak korang pergi ke blog mana mana dan bila korang tekan right click dekat mouse tu dia keluar kotak pastu ada ayat dalam kotak tu yang tertulis macam 'Tak baik copy mengcopy ni' atau 'Nak copy ker? Boleh belah' and lain lain.Nak buat jugak?

Jom start;

1. Dashboard > Design > Add a Gadget > HMTL/JavaScript

2. Copy paste code kat bawah dlm kotak HTML tadi

<script language=javascript>

<!--

//edit by unwanted

var message="AYAT KORANG";

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function("alert(message);return false")

// -->

</script>

3. save

Merah : ayat yang korang nak letak dalam kotak tu.

button follow dan dashboard ala ala tumblr

Tutorial ni izzat nak ajar camne nak letak button follow dan dashboard macam izzat punye\Cube intai belah kanan atas blog, tu la yang izzat nak ajar/

1. Dashboard > Design > Add a Gadget > HTML/JavaScript

2. Copy code kat bawah ni pastu paste kat HTML tadi ;

<a style="display:scroll;position:fixed;top:15px;left:15px;" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:15px;left:75px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a>

merah : Blog id korang. /refer gambar kat bawah\

3. Save.

cara nak buat spoiler

Tutorial kali ni izzat nak ajar camne nak buat spoiler \rujuk gambar/

credit : kaq pija

ni sebelum tekan button Show|Hide tu

credit : kaq pija

ni lepas tekan button Show|Hide tu.

Let's start;

1. Dashboard > Design > Add Gadget > HTML/JavaScript

2. Copy code kat bawah ni;

<div id="spoiler" style="display:none">
YOUR CONTENT
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">OPEN | CLOSE</button>

3. Paste dalam HTML tadi.

4. Save.

merah; boleh letak apa-apa yang korang nak
oren; boleh ubah ayat yang korang nak

Credit gambar; nurhafizapija     

jenis border untuk blog

PERINGATAN; code tutorial ni cuma berfungsi untuk pengguna "Google Chrome".Kalau mozilla tu izzat tak pasti jadi ke tak.

Tutorial kali ni izzat cuma nak kongsi bentuk-bentuk border yang boleh korang guna buat blockquote, body blog, sidebar dan lain-lain.

Example A

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

Example B

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

Example C

-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

Example D

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

Example E

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

Example F

-moz-border-radius: 35px;
border-radius: 35px;
}

buang navbar

Tak tau navbar tu apa? refer gambar bawah;

Jom start;

1. Dashboard > Design > Edit html
2. Ctrl + f pastu cari code /* Variable definitions
3. Copy paste code bawah dekat atas code /* Variable definitions

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

4. Preview.Kalau takde keluar apa2 error, save je lah.

blog archive versi kalendar

Refer gambar dekat bawah kalau tak tahu tutorial ape yang izzat nak ajar kali ni

Dah tengok? Jom start.

1. Design > Page Element > Add Gadget > HTML/JavaScript
2. Copy paste dalam kotak Gadget tadi

<div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="URL BLOG";
Calendar.timeZone="+08:00";
Calendar.timeZoneCheck = true;
Calendar.drawTable();
</script>
<style>
</style>

oren; letak la url blog korang.Pastikan korang letak nama link je contohnya: "creamyapplesmurfette.blogspot.com" dan bukannya "http://creamyapplesmurfette.blogspot.com/".
merah; yang tu korang takperlu tukar kalau korang duk kat malaysia.

Ringankan blog guna Jquery lazy load.

Jquery lazy load ni adalah code yang meringankan blog kita.kalau blog korang memang berkapah gambar-gambar yang korang langsung taknak buang.Widget ni memang TERBAIK untuk korang.Tak la lari pengunjung yang datang kat blog korang sebabnya lambat nak tunggu loading blog.


FIRST METHOD


1. Pergi Dashboard > Design > Add a Gadget > HTML/Javascript
2. Pastu copy paste code kat bawah ni dalam kotak Gadget tadi ;

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMhK2z1Sj15a8Xedsyf5soID0LnshUsG5CxQ2sfwpvS-uyPw4SHHsUjXLSIbAqbMf89YJf3TQ45xy9ivU62MO7LK0mmhAi5VV9O-9AR8uf34qPbLYelsH3d5CqmMrhaqso0aNO944Hvc/s1600/grey.gif"});});</script>

3. Then save je la


SECOND METHOD


1. Pergi Dashboard > Design > Edit HTML
2. Tick Expand Widget Templates
3. Ctrl+f search </body> ataupun </head> ;
4. Paste code bawah dekat atas code </body> ataupun </head> tadi ;

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMhK2z1Sj15a8Xedsyf5soID0LnshUsG5CxQ2sfwpvS-uyPw4SHHsUjXLSIbAqbMf89YJf3TQ45xy9ivU62MO7LK0mmhAi5VV9O-9AR8uf34qPbLYelsH3d5CqmMrhaqso0aNO944Hvc/s1600/grey.gif"});});</script>

5. Preview.Kalau takde error tekan save.