. Duniaku: Tutorial

Memaparkan catatan dengan label Tutorial. Papar semua catatan

Tutorial centerkan header

Ada Masalah header x center, hr ni Eiza nak kongsi tutorial ni... Tutorial nih untuk center kan header yg degil ke tepi jek.. so , copy code ni untuk center kan header anda .

Selamat mencuba

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

2. cari code nih :

/* Content

3. copy code nih :

.Header img {
margin-$startSide: auto; margin-$endSide: auto;}

4. letak ATAS

/* Content

5. save

Nampakkan Eiza ni skarang dah x tau nak buat apekan? Banyak masa terluang.. ni de sikit freebies untuk pointer untuk CBOX anda.. n sedikit hasil mengisi masa lapang. Freebies ni kesinambungan dari tutorial Eiza yg terdahulu. Ingin mencuba? Kliklah SINI . Harap suka kerana perkataan tu adalah transparent, blhlah sesuaikan gan background anda. Selamat mencuba...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWm43oGSIsouZ7xHhXMcro4qSBSdxgVlhdXWNuhYf98_31dVLp-7oWWVBhqAT9jvPoOHBx_iEukHCwXUsyTkpQiRuJOVESWIzFBnBDMMrd1a610AjZJrVGVeQC-Y4R4tL666x0DYGg29kP/s1600/d.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbuLJwkjeomdwjBgf23cSwfH1C5P1foD0J6Kux1yFx-Kfkl4Zflpyxj_TI45et0MWGIx8DcFJZNmlgmaHTSz8ZgwwGJIandNCrKcy_M4UmlVhK4NR5ESfauokx_02C33-u0b0faoClyqd/s1600/z1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrcamH9DN6ZhyghIDVqYTDx-ooHoaim-bCds4FjaZvUf_5cfSEQRzzOXQWHD5QSfujo8cwh7jveey58NHwBfUU8F_K7V1hWJUNKp8qhnlKzkWP1KYCfc6O2ojknqbVqVMJT2vohORndA5/s1600/z2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvU02D18uF8Wh8F1847RVxI7hCGmsoqzvVeCvK6N1A7kQ-eDZTyWRp-rSuQpGIeAEOTj_APVwKT1XL80eLakb-HIrucilbZKR-SDdoUN6wY-QdmUcUqO5UTargSSAStuHQxWP4MVXSrIAg/s1600/z6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSr1TNhqs-vLRC_jBcp9mALzBBjWZIaMseiom3M4HmcnK5m-4tyyYA50UuFcvOSAsskXW5Y896ovrdngNJ0U_U90H-rg7YNTHXpFX4BL0l_-Xov6GWw3zHAEddsf0_1DZs9EM86WYSqyp/s1600/z3.png

Tutorial : Origami Bunga kusudama

Hari ni mengambil masa tenang2kan fikiran n rehatkan minda. Nak ikutkan mood Eiza memang malas nak watpe2 sekarang ni. Tapi xpelah abaikan kemalasan berkenaan, sebab hr ni Eiza nak share tutorial ni. Bunga origami ni di ajar oleh sepupu Eiza. Jom kt belajar.

P/s : Sorry gambar kurang memuaskan

Langkah Pertama:

Kita ambil kertas warna atau kertas bungkus hadiah. potongkannya dan pastikan kertas itu berbentuk 4 segi sama.

kemudian, lipatkan kertas berkenaan menjadi 3 segi.

Lipat hujung segi ke tengah kertas. Buat ke dua2 bahagian

Lipatkan hujung seperti ini

Buat kedua2 bahagian

Lipat lebihan kedua2 belah

Lipatan itu menjadi seperti ini

Lipat sekali lagi seperti ini

Untuk mendapatkan keadaan kertas berkenaan seperti ini

Kemudian gulungkan seperti ini

Bentukkan seperti ini

Gumkan @ salotapekan bahagian ini

Ulangkan kesemua langkah2 tadi dan cantumkan kesemua kuntum menjadi seperti ini

Selamat mencuba, jika x paham sila ajukan soalan di bahagian komen.. trime kasih :)

Tutorial disable highlight

1. Log in > Design > Add a Gadget >Html/Jacascript

2. Copy kod di bawah :

<script type="text/javascript">
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>

3. Paste di ruangan html/javacript tadi tu

4. Lepas tu SAVE kan

Kredit : http://www.lyssasecret.com

Tutorial scroll bar

1. More Options > Template > Edit Html > Proceed.

2. Tekan F3 untuk cari code :

/* Header

3. Copy code di bawah ni dan PASTE di ATAS code /* Header tadi tuu.

::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #FFFFFF;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

4. Gantikan kod warna di atas tu ikut pilihan kamu.
( Boleh ambil kod warna di SINI)

5. Tekan Preview dulu . Kalau takde Error boleh SAVE.. :)

Tutorial : Brooch Bunga Ros

Comelkan bunga ros ni. Comel sanggat... Hari ni nak wat tutorial membuat brooch bunga ros ni.

Ok kita mulakan dengan Bismillah...

Bahannya adalah:
Gunting
Kain felt 2 warna
Gam
Pin

Cara-caranya:

Step pertama:

Potong kain felt berbentuk bulat. Eiza menggunakankain felt berwarna merah dan diameternya adalah 2cm. Untuk mendapatkan kuntum bunga sebesar duit 10 sen.

Makin besar bulatanya, makin besar kuntumnye.

2nd step:

Potong kain felt melingkar. Ala2 spring. Eiza potong ala kadar jek.. bab nanti bila belitkan x berapa nampak bentuknya. Gamkan tengah bunga, supaya nampak kemas dan tidak terbuka.

Potongannya bebas, kalau nk melengkung2 pun boleh, nak lurus pun boleh

3rd step:

Belit2 dan pusingkan dari tengah bunga hingga habis seperti di bawah. Nampakkan... kalau kita potong lengkung2, nampaklah macam kuntum-kuntum bunga.

Pusing-Pusingkan, Make sure ketat yek..

4th step:

Lilit sampai habis dengan kemas, hingga ke hujung. Gamkan yg hujung itu menjadi kuntum.

Gamkan yg hujung sekali

5th step:

Buat 2 kuntum daun menggunakan kain felt berwarna hijau dan sediakan tapak pin.

Daun, pin dan kuntum bunga

6th step:

Gamkan daun tadi di depan tapak pin. Eiza lebih suka pinkan kat depan tapak pin.

Daun boleh digamkan di pin atau terus di belakang kuntum bunga

Akhirnya inilah hasilnya brooch bunga ros ( pandangan depan )

Siap sudah ( pandangan dr depan )

Siap sudah ( pandangan dr belakang )

Tutorial singnature di bawah post

Nak buat cam Eiza ni? ok 1st step Log in > Design > Edit Html > Tick Expand Widget Templates

Tekan Ctrl + F dengan serentak . Dan cari kod ini :

<data:post.body/>

Pate URL Signature anda di bawah kod yang cari tadi

<img src="Url Signature Korang" />

Jadinya nanti camne

<data:post.body/>
<img src="Url Signature Korang" />

Da siap . SAVE...

Tutorial letak gambar disebelah post tittle

1st step klik Dashboard >> Template >> Edit HTML >> Tick Expand Widget
Lepas tuh copy code dekat bawah dan tekan Ctrl+F dan cari :

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

Lepas tuh dah jumpe kan ? Copy code ni pulak :

<img src="URL GAMBAR"/>

pastekan code yang baru copy tu diantara <a expr:href='data:post.url'> dan <data:post.title/></a> . Lepas tuh dea akan jadi mcm kat bawah ni :

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

Jgn lupa preview dulu eh, lepas puas hati baru save. Selamat mencuba

Blockquote cantik

CARA 1 : ( templete berbeza, so coding pun berbeza..harap maklum )

1.Login ke Blogspot, klik design/ layout > Edit HTML

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

.post-body {

3. Sila Copy code di bawah dan paste kan di ATAS code .post-body {seperti yang korang cari tadi

.post blockquote { background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 3pxsolid #FF0080; margin:1em 20px; }

4. Code yang BL warnakan MERAH, boleh la ditukar mengikut citarasa.

5. URL GAMBAR BACKGROUND BLOCKQOUTE boleh la direplace dengan URL korang nak

6. Preview, No Error, Save! =D

----------------------------------------------------------------------------------------

CARA 2 :Memandangkan ramai yang tak boleh test cara di atas..so BL akan ajar coding ini pula...

1.Login ke Blogspot, clik design/ layout > Edit HTML

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

.post blockquote {

3.Sila Copy code di bawah dan paste kan di BAWAH code .post blockquote { seperti yang korang cari tadi

background: url(URL image);
border-top: 1px dashed #000000;
border-left: 1px dashed #000000;
border-right: 1px dashed #000000;
border-bottom: 1px dashed #000000;

4. Sila letakkan URL anda di URL image
5. 1px adalah ketebalan : lagi banyak nombor lagi tebal, dashed boleh diubah kepada solid atau dotted.
6. Preview, No Error, Save! =D

-----------------------------------------------------------------------------------------

CARA 3 ( Template Designer ) : Bagi Pengguna Template Designer

1. Sila Klik Dashboard - Design - Edit HTML
2. Klik Download Full Template (kalau takut template korang hancuzz)
3. Tick pada kotak Expand Widget Templates
4. Cari kod di bawah ini di dalam kotak HTML, kalau nak mudah mencari tekan Ctrl+ F sahaja

.post blockquote {
margin:1em 20px;
}

5. Gantikan code yang dicari di atas dengan code ini:

.post blockquote {
background: #F430C0;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #020202;
margin:1em 20px;
}

#F430C0 untuk warna background nya.. Kalau nak gantikan dengan gambar sila replace code background: #F430C0; dengan code inibackground-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE);

6. Dan SAVE.. tengoklah hasilnya..

Freebies From The Photobucket...hehhe, Korang pilih la yang warna dia light2 je...kalau tak susah nak nampak tulisan....

SUMBER: Cik Farah Yang Baik Hati.. =)

p/s: sebenarnya, BL suka cara cik farah ni buat tutor...sebab nya dia suka buat experiment...BL rasa serba salah nak copy tutorial ini, tapi BL dah cek blog dia...dan Beliau pon sudah mengizinkan...=) korang terjah la blog dia nanti...heheh...cute ~.~ OK, Diya, tutor ni untuk awak...next Tutor BL akan ajar cara cute icon muncul bila hover blockquote...=D

Jangan lupa komen OK (^^,)V sELaMaT mEnCuBA!!

Toturial - Buat curved border sekeliling blog

Curved Border nih untuk bucu keliling blog tu , melengkung cket . tak kan jadi tajam .

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

2. cari code nih :

.content-inner {

3. copy code nih :

-moz-border-radius: 15px;
-webkit-border-radius: 15px;

4. letak BAWAH .content-inner {

5. save

Follow dan dashboard button

1. Pergi ke Dashboard >> Design >> Page Elements

2. Click Add A Gadget >> HTML / Javascript

3. Copy Code di bawah :

<div style="display:scroll; position:fixed; top:5px; right:50px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=Blog ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-jFM6ilkM7EU/UOlYt1XwTWI/AAAAAAAAA9E/XOCbq26jjMA/s1600/r.png" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-jFM6ilkM7EU/UOlYt1XwTWI/AAAAAAAAA9E/XOCbq26jjMA/s1600/r.png" /></a></div></div>

4. Gantikan Blog ID dengan Blog ID korang .

5. Pastikan Code dan SIAP ! Save kalau tak de ape² masalah .

Tutorial Daftar Cbox

1. Dapatkan Cbox di sini CBOX
2. Dekat bahagian atas tu kan , ada tulis SIGN UP ? Tekan Sign Up !
3. Lepas tu isi apa yang patut . Contoh macam ini :

4. Klik Create my Cbox !

5. Kemudian masukkan password .

6. Dah . Ok . Di bahagian Account Details , isi kan lagi sekali Password tadi . Tekan Apply !

7. Ok , macam mana nak cantikkan Cbox ? Nak color - colorful ? Pergi kat sini :

8. Pilih warna kesukaan... Then dah siap ? Tekan APPLY !

9. Dah tu , tekan Publish! Nampak kan ? Dekat sebelah Home !

10. Tekan Copy To Clipboard

11. Copy kod tu .

12. Pastu log in > Dashboard > Design > Add a Gadget > Html/JavaScript

13. Paste lah kod yang korang copy tadi tu kat ruangan tu .

14. Save ! Dah siap.

Tutorial sembunyikan Cbox

Nak buat macam Eiza punye ni? sila tinggalkan pesanan n pemintaan anda di tempat komen dibawah....

Pada kebiasaannya, Cbox akan berada di sidebar dan akan dapat dilihat terus. Kali ini akan menunjukkan tutorial untuk sembunyikan Cbox anda.:)

Antara sebab kenapa disembunyikan Cbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.

Tutorial sembunyikan Cbox seperti di bawah
1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:200px;
width:50px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/-SU8LbezhVUQ/UOgDDw9ZOnI/AAAAAAAAA04/zfHzToCxbfs/s1600/pppppp.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">

KOD CBOX DISINI

<div style="text-align:right"><a href="http://eihezalife.blogspot.com/2013/01/sembunyikan-cbox-anda.html" target="_blank"><small>tutorial di sini
<a href="http://eihezalife.blogspot.com/search/label/Freebies" target="_blank"><small>Freebies</small></a>
<a href="javascript:showHideGB()">
[tutup]

</a></small></a></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

Nota: Gantikan "KOD CBOX DISINI" dengan kod Cbox anda.
(Tiada Cbox.?)

3. Save dan lihat hasilnya.:)

. Duniaku

Iklan Penaja

Radio Pilihan Anda