Tab Menu Simple Tapi Cantik

ewah..ewah,tajuk entri kemain lagi kan..konpiden abis..hahaha..tapi betullah,bagi bui tab menu ini paling cantik pernah bui ada..^_^..so ,korang nak jugak tak..wah,ramainya yang angkat tangan..hihihi..ok,merapu x guna..jom belajar..

mula2,g DASHBOARD > TEMPLATE > EDIT HTML > PROCEED > TICK EXPAND WIDGET TEMPLATE

cari kod
]]></b:skin>

pastu copy kod ini

a.menutab {
background:url(URL BACKGROUND);
display: inline-block;
font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 2px solid #eee;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 4px 9px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #ccc;
background:#E6A9EC;
color:#fff;
}

dan paste di atas kod yang pertama tadi


URL BACKGROUND tu korang tukar dengan background yang korang suka k
#E6A9EC tu korang tukar ikut warna yang korang nak


ok,siap part ni..preview dulu,kalau takder apa2 error baru save template


sekarang part 2 pulak


g LAYOUT > ADD A GADGET > HTML/JAVA SCRIPT


copy kod ini dan paste di dalam ruang kosong tu yer (takyah letak tajuk kat widget tu yer)

<center>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
</center>

dah letak semua URL LINK dan TAJUK TAB,korang bolehlah save..widget ni kena letak di atas header baru menjadi..

kadang2 kebanyakan template widget tu takder kat atas header,so kalau nak tambah ruang atas header tu korang tengok TUTORIAL TAMBAH RUANG ATAS HEADER ni..

Tutorial Tambah Ruang Atas Header

mula 2 g  DASHBOARD > TEMPLATE > EDIT HTML > PROCEED > TICK EXPAND WIDGETS TEMPLATES

cari kod ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

delete semua kod tu dan gantikan dengan kod ini

<b:section class='header' id='header' preferred='yes'>

preview,kalau takder apa2 error bolehlah SAVE

ok,lepas tu g LAYOUT..korang tengok ada tak ruang bertambah di atas header..kalau ada bermakna success..tahniah buat korang..hehe

Background Blog Cantik

ini sesaja letak buat penyeri..

V

V 

entry kali ni simple jer..x der mood nak buat tuto..

dasar pemalas..hahaha..sila lah kutuk jika perlu..^_^

tapi walaupun simple,

bui nak hadiahkan korang tempat nak carik 

background blog yang cantik2 dan osem2..

nah..ambik..klik jer sesuka hati..hehe

KOLEKSI BACKGROUND BLOG CANTIK-CANTIK

ok,sekian

cepat say THANK YOU pada bui..^_^

Cara Letak Link Blog Lain Ke Blog Sendiri

tuto ni khas bui buat untuk blogger2 baru yang baru2 nak berjinak2 dengan dunia blog ni..nampak mudah bagi yang dah tau,tapi akan nampak susah bagi yang tidak tau..

ok,kita mula belajar


mula2 g DASHBOARD > LAYOUT > ADD A GADGET (rujuk gambar)

pastu korang pilih Blog List (scroll bawah sampai jumpa ea)

dah tekan tanda + tu nanti akan keluar page macam ni

korang klik Add a blog to your list nanti akan keluar pula page ini

dekat kotak biru tu korang letaklah link blog yang korang suka,contohnya..

dah letak link, korang klik Add,pastu Save..kalau nak letak blog yang lain jugak,jangan save dulu..Add banyak2 sampai 10 blog ker,pastu baru Save..

bila korang Save,dekat layout korang akan ader keluar link blog yang korang dah save tadi..oh,ya tajuk My Blog List tu korang boleh tukar ikut suka hati masing2 yer

ok,siap sudah..^_^

Cara Buang Footer Bawah Blog

tengok gambar untuk korang faham apa benda yang bui katakan itu k

sebelum

selepas

dah faham dan nampak perbezaan kan..?so nak belajar tak..k,jom..

mula2 g DASHBOARD > DESIGN > TEMPLATE > EDIT HTML > PROCEED

tandakan Tick Expand Widgets

cari kod

]]></b:skin>

dah jumpa..?

pastu korang copy kod dibawah dan paste di atas kod tadi

.footer-outer{display:none;}

seperti ini

]]></b:skin>
.footer-outer{display:none;}

preview dulu..kalau jadi bolehlah save yer..^_^

Cara Nak Buat Ayat Bawah Entry

entry ini bui copy dari SINI..^_^


gara2 entry simpel (simpel la sangat kan..^_^) semalam,ada beberapa blogger tanya macam mana nak buat ayat tu 

ala..entry ini  TESTING 1,2,3

so kalau korang tengok bahagian komen SYIELA , MRS VELENTINE , DEQLA MANJEW , KNIEDAZ  , SHIMA dan CIK NANA bertanya macam mana nak buat..

ala senang banget itu ibuk2..^_^..follow jer step2 dibawah ok


mula2 g SETTING > POSTS AND COMMENTS


tengok bahagian post template..ada kotak kosong kan..? tengok gambar kat bawah

so,dekat kotak kosong tu korang taip  jer pape ayat yang korang suker..nanti setiap kali buat entry takyah susah2 taip,otomatik ayat tu akan tercongok siap2 dekat situ..bolehlah jimat masa kan

pastu..jangan sesekali lupa SAVE SETTING, kalau tak save confem la x jadi..


senangkan..so,g try sekarang..^_^..

Cara Delete Akaun Facebook

bui baru lepas delete akaun fesbuk yang dah lama tak berupdate..tapi bukan akaun fesbuk yang utama k..akaun fesbuk sampingan jer..hehehe

jadi,untuk rujukan diri sendiri di kemudian hari bui nak share dengan korang semua cara2 mendelete akaun fesbuk..jom layan tuto

mula2 log in ke akaun fesbuk yang hendak korang delete

lepas tu klik jer link ni
DELETE MY ACCOUNT

pastu,korang klik lah perkataan 'Delete My Account' tu..

nanti akan keluar page lain,korang ikut jer arahan2 yang diberikan sehingga selesai yer

sekian....^_^

TUTORIAL MEMBUAT AYAT BERKELIP

mula2 taip ayat seperti biasa
cth :- tekoyong itu sangat lambat

bagaimana mahu membuat ayat 'tekoyong itu sangat lambat' berkelip-kelip adalah dengan menambahkan kod html pada permulaan dan akhir ayat

seperti ini yer

<blink> tekoyong itu sangat lambat </blink>

nanti akan jadi sebegini

tekoyong itu sangat lambat

mudah sajakan

**********

catitan Bui

tapi malangnya,tutorial ayat berkelip ini hanya akan jadi jika anda menggunakan browser Mozilla Firefox..kalau guna chrome atau IE,statik jer ayat tu..huhu

Tutorial Dashed Hover Dekat Link

kalau tak faham apa yang bui maksudkan pasal title dekat atas,korang boleh klik dekat mana2 link yang ada dalam blog bui ni yer

so kalau dah tau apa tu,dan kalau berminat nak buat macam tu jugak,korang boleh try tutorial ni..jom

mula2
TEMPLATE > EDIT HTML > PROCEED


cari kod ini

a:hover {

dah jumpa..?ok,kalau dah jumpa korang copy kod dibawah

border-bottom: 5px dashed #FFC0CB;
text-decoration: none;
color: $(link.hover.color);
}

dan paste dibawah kod yang pertama tadi
tulisan yang berwarna biru tu korang tukar ikut citarasa masing2 yer
ok,dah siap..boleh preview dan save

jangan lupa baca entry di INI BLOG BUI

Edit Sesuka Hati

salam sayang semua..cehhhh..tetiba pulak kan..bukan nak cerita kisah best ataupun buat tutorial pun pagi ni yer..kepala manyak pening maaaa..hehehe..

lepas ni nak rehatkan otak yang terasa berpinar2 sebab telah menyeksa diri mengedit blog sesuka hati..dah perangai buruk (cepat jemu) datang..jadi terimalah akibatnya buiii..ngeeee

dan setelah berhempas pulas memerah idea,edit kod segala..blog BUI TUTORIAL berubah wajah lagi..bui tau memang tak cantik tapi asalkan hati bui senang melihatnya pun dah kira ok

lepas ni manalah tau mood nak update tutorial mencurah2 datang..mencurah2 lah sangat kan..hahaha..

tapi rasanya bui dah bertekad..bui akan update blog

1 entry sehari untuk blog INI BLOG BUI 

dan

1 entry seminggu untuk blog BUI TUTORIAL

sabtu dan ahad,sekiranya bui dapat hidayah insyaallah akan ada entrylah nanti..

sesungguhnya bui tak larat mak jemah sekalian..dengan kerja lagi,dengan anak2 lagi,dengan hubby lagi..aduhaiiii..serius,memang tak larat..

***entry kembar dengan Ini Blog Bui..next entry on 24/4/2012

Tutorial Buat Post Footer Background

✿ 14 April 2012 - 205 pagi ✿

selalunya bila buat tutorial memang bui akan buat eksperimen dekat blog sendiri dulu dan kalau menjadi,barulah bui berani nak buat tuto dan ajar korang pulak

kali ni bui nak ajar macam mana nak buat background dekat post footer (ala-ala macam blog INI BLOG BUI k)..

korang tengok gambar ni

nice kan..kalau korang nak buat macam ni jugak bolehlah cuba tutorial ni..jom

mula2
DASHBOARD > DESIGN > EDIT HTML (tak perlu tanda expand widget templates)

lepas tu,tekan F3 dan cari kod ini

.post-footer {

bila dah jumpa,korang copy kod dibawah

padding : 15px;
border-top : 3px dashed #F6E3CE ;
background-image: url(URL IMEJ BACKGROUND);
margin: 1.5em 0 0;
}

pastekan/gantikan dengan kod di atas dibawah kod yang pertama tadi seperti ini :-

.post-footer {
padding : 15px;
border-top : 3px dashed #F6E3CE ;
background-image: url(URL IMEJ BACKGROUND);
margin: 1.5em 0 0;
}

ok,tulisan biru tu korang ubah ikut citarasa sendiri yer..PREVIEW dulu,kalau puas hati barulah SAVE TEMPLATE..

tutorial letak button twitter tu,bui buat next entry ok..tunggu..

Tutorial Letak Fan Page Facebook Dalam Blog

ok,tadi dah belajar TUTORIAL BUAT FAN PAGE FACEBOOK kan..sekarang kita belajar macam mana nak letak fan page facebook dalam blog pulak..jom..

mula2 bukak fan page korang dekat facebook tu

klik Manage pastu klik Edit Page (tengok gambar)

dah klik,nanti akan keluar macam ni

 korang klik pada Resources..akan keluar pulak macam ni

korang pilihlah Use Social Plugins tu yer..

nanti akan keluar pelbagai pilihan..korang pilihlah LIKE BOX

dah tu akan keluar pulak box macam ni..korang isikan url fan page korang yer

contoh url (bui pinjam Cik Pip punya url)

https://www.facebook.com/wanitacollection

lepas tu korang editlah like box tu ikut kesesuaian blog masing2..

dah puas hati baru klik Get Code..

PENTING!!!

sila klik IFRAME dan copy kod itu tadi dan paste kan dalam blog

(sila tengok gambar)

seperti biasa,

design > add gadget > html/java script

dan copy kod di atas tadi tu dalam ruang kosong html/java script tadi..

preview dulu,kalau puas hati bolehlah save..DONE!!

sekian,terima kasih..hehehe

psstt : bui ada buat LIKE BOX ni dekat INI BLOG BUI

Tutorial Buat Fan Page Facebook

tutorial ni Cik Pip yang tanya..rajin sungguh Cik Pip belajar yer..hehe..ok,tanpa membuang masa mari kita sama2 belajar macam mana nak buat fan page dekat facebook

mula-mula klik sini

CREATE FACEBOOK PAGE

pilih Brand or Product (tengok gambar)

lepas tu isikan tempat kosong tu seperti ini

dah isi,korang klik Get Started tu ok..

akan keluar page macam ni

korang isilah apa2 yang patut k..ok,dah siap part buat fanpage facebook ni..lepas tu korang tambahlah info-info dekat fanpage korang tu..jangan lupa promote dengan kawan2 supaya LIKE fanpage..hehe

ok,dah siap..next tuto..TUTORIAL LETAK FAN PAGE DALAM BLOG

Tutorial Buang Garisan Bawah Link

lama dah bui tak buat tutorial..bukan apa,kalau nak buat tuto kena buat dengan hati yang gigih..lagipun tutorial sekarang berlambak2 dah orang buat..cuma kena rajin google dan rajin mencuba

bui buat blog ni pun sekadar nak berkongsi ilmu selain nak jadikan sebagai koleksi sendiri..kot2 manalah tau nak ubah itu ini,cuma refer dengan blog tutorial bui jer..takyah susah2 bukak blog orang

amboii..panjang pulak mukadimahnya..orite,meh belajar

tutorial ni sebenarnya Deqla yang tanya..maaflah dik sebab dah terlalu lama pertanyaan tu terbiar tanpa jawapan (ampunkan hamba penunggu gua..hahaha)

alamak..merapu again..ok,stop

mula2
DASHBOARD > DESIGN > EDIT HTML > CLICK EXPAND WIDGET TEMPLATES

tekan F3..taip perkataan
underline

dah jumpa tak..?kalau dah jumpa korang gantikan semua perkataan tu dengan
none

sekarang,SAVE..dah siap..senangkan..*_*

bila korang halakan cursor pada link,garisan tu tidak akan muncul lagi..

Tutorial Centerkan Imej Header

mula2 pergi ke
DASHBOARD > DESIGN > TEMPLATE DESIGNER > ADVANCED > ADD CSS

copy kod dibawah

#header-inner img {
margin-left: auto;
margin-right: auto;
}

pastekan di ruangan css tadi seperti ini

klik untuk tumbesaran

preview dulu..kalau ok dan puas hati barulah klik Apply to Blog

p/s : jangan lupa baca entry di INI BLOG BUI

Tutorial Cursor (Sparkle)

apa itu sparkle cursor?
lihat cursor bui ada benda2 jatuh kan..
itulah sparkle cursor..jom belajar..

mula2 pergi ke
DASHBOARD > DESIGN > ADD GADGET > HTML/JAVA SCRIPT

copy kod dibawah dan paste dekat ruang kosong html tadi

<script type="text/javascript">
                </script>
     <script type="text/javascript">
            // <![CDATA[
            var colour="#0000ff";
            var sparkles=100;
 
            var x=ox=400;
            var y=oy=300;
            var swide=800;
            var shigh=600;
            var sleft=sdown=0;
            var tiny=new Array();
            var star=new Array();
            var starv=new Array();
            var starx=new Array();
            var stary=new Array();
            var tinyx=new Array();
            var tinyy=new Array();
            var tinyv=new Array();
            window.onload=function() { if (document.getElementById) {
              var i, rats, rlef, rdow;
              for (var i=0; i<sparkles; i++) {
                var rats=createDiv(3, 3);
                rats.style.visibility="hidden";
                document.body.appendChild(tiny[i]=rats);
                starv[i]=0;
                tinyv[i]=0;
                var rats=createDiv(5, 5);
                rats.style.backgroundColor="transparent";
                rats.style.visibility="hidden";
                var rlef=createDiv(1, 5);
                var rdow=createDiv(5, 1);
                rats.appendChild(rlef);
                rats.appendChild(rdow);
                rlef.style.top="3px";
                rlef.style.left="0px";
                rdow.style.top="0px";
                rdow.style.left="3px";
                document.body.appendChild(star[i]=rats);
              }
              set_width();
              sparkle();
            }}
            function sparkle() {
              var c;
              if (x!=ox || y!=oy) {
                ox=x;
                oy=y;
                for (c=0; c<sparkles; c++) if (!starv[c]) {
                  star[c].style.left=(starx[c]=x)+"px";
                  star[c].style.top=(stary[c]=y)+"px";
                  star[c].style.clip="rect(0px, 5px, 5px, 0px)";
                  star[c].style.visibility="visible";
                  starv[c]=50;
                  break;
                }
              }
              for (c=0; c<sparkles; c++) {
                if (starv[c]) update_star(c);
                if (tinyv[c]) update_tiny(c);
              }
              setTimeout("sparkle()", 40);
            }
            function update_star(i) {
              if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
              if (starv[i]) {
                stary[i]+=1+Math.random()*3;
                if (stary[i]<shigh+sdown) {
                  star[i].style.top=stary[i]+"px";
                  starx[i]+=(i%5-2)/5;
                  star[i].style.left=starx[i]+"px";
                }
                else {
                  star[i].style.visibility="hidden";
                  starv[i]=0;
                  return;
                }
              }
              else {
                tinyv[i]=50;
                tiny[i].style.top=(tinyy[i]=stary[i])+"px";
                tiny[i].style.left=(tinyx[i]=starx[i])+"px";
                tiny[i].style.width="2px";
                tiny[i].style.height="2px";
                star[i].style.visibility="hidden";
                tiny[i].style.visibility="visible"
              }
            }
            function update_tiny(i) {
              if (--tinyv[i]==25) {
                tiny[i].style.width="1px";
                tiny[i].style.height="1px";
              }
              if (tinyv[i]) {
                tinyy[i]+=1+Math.random()*3;
                if (tinyy[i]<shigh+sdown) {
                  tiny[i].style.top=tinyy[i]+"px";
                  tinyx[i]+=(i%5-2)/5;
                  tiny[i].style.left=tinyx[i]+"px";
                }
                else {

                  tiny[i].style.visibility="hidden";
                  tinyv[i]=0;
                  return;
                }
              }
              else tiny[i].style.visibility="hidden";
            }
            document.onmousemove=mouse;
            function mouse(e) {
              set_scroll();
              y=(e)?e.pageY:event.y+sdown;
              x=(e)?e.pageX:event.x+sleft;
            }
            function set_scroll() {
              if (typeof(self.pageYOffset)=="number") {
                sdown=self.pageYOffset;
                sleft=self.pageXOffset;
              }
              else if (document.body.scrollTop || document.body.scrollLeft) {
                sdown=document.body.scrollTop;
                sleft=document.body.scrollLeft;
              }
              else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
                sleft=document.documentElement.scrollLeft;
             sdown=document.documentElement.scrollTop;
              }
              else {
                sdown=0;
                sleft=0;
              }
            }
            window.onresize=set_width;
            function set_width() {
              if (typeof(self.innerWidth)=="number") {
                swide=self.innerWidth;
                shigh=self.innerHeight;
              }
              else if (document.documentElement && document.documentElement.clientWidth) {
                swide=document.documentElement.clientWidth;
                shigh=document.documentElement.clientHeight;
              }
              else if (document.body.clientWidth) {
                swide=document.body.clientWidth;
                shigh=document.body.clientHeight;
              }
            }
            function createDiv(height, width) {
              var div=document.createElement("div");
              div.style.position="absolute";
              div.style.height=height+"px";
              div.style.width=width+"px";
              div.style.overflow="hidden";
              div.style.backgroundColor=colour;
              return (div);
            }
            // ]]>
            </script>

#0000ff tu adalah warna benda2 jatuh tu..macam bui punya adalah warna biru
anda boleh ubah warna tu ikut selera masing2

save dan lihatlah hasilnya..*_*