Menu Tab di Blog








Tutorial Menu Tab di Blog. Ada permintaan daripada seorang blogger ni minta Beeha buat Menu Tab macam di atas post entry Beeha.


*boleh klik gambar untuk lebih jelas*


So ini caranya...

1. Apa apa pun Sign In Blog ---> Dashboard ---> Template ---> Edit Html

2. Search this code :
]]></b:skin>

3. Kemudian copy code di bawah ini dan pastekannya sebelum ]]></b:skin>.
a.beeha{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:2px;
margin-top: 15px;
display:inline-block;
text-transform:uppercase;
text-align:center;
letter-spacing: 2px;
background: #91E3C8;
color:#A46EA2;
border: 3px solid #772a49;
width:100px;
padding:2px;}
a.beeha:hover{
color: #fff;
background:  #9F8668;
-moz-box-shadow: inset 0 0 5px 5px #EBD6FF;
-webkit-box-shadow: inset 0 0 30px 30px #EBD6FF;
box-shadow: inset 0 0 30px 30px #EBD6FF;
}


NOTE :
Merah: Ubah warna.
Hijau : Ketebalan border
Biru : Width border tersebut

Bagi sesiapa yang ingin menukar background dari warna kepada yang ada corak , sila gantikan code background di atas dengan code di bawah ini.
background: url(LINK IMAGE) ;

4. Dah siap, click Preview and Save kalau takde error.


5. Next step click Layout ---> Add A Gadget ---> Html/Javascript

6. Copy code di bawah ini dan pastekan di kotak html tersebut.
<a class="beeha" href=" LINK PAGE ANDA">NAMA MENU TAB</a>
<a class="beeha" href="LINK PAGE ANDA">NAMA MENU TAB</a>
<a class="beeha" href="LINK PAGE ANDA">NAMA MENU TAB</a>
<a class="beeha" href="LINK PAGE ANDA">NAMA MENU TAB</a>

Untuk yang nak tambah lagi menu tab, just copy code di bawah ini dan pastekan dibawah code tadi.
<a class="beeha" href="LINK PAGE ANDA">NAMA MENU TAB</a>

7. Dah siap? tunggu ape lagi, klik SAVE jea lah.. :D . Korang boleh ubah kedudukan kotak code tadi mungkin di bahagian kotak blog post ataupun cross column.



Nak tutorial yang lain? Boleh inform Beeha di chatbox, In shaa allah Beeha akan kongsi ilmu yang mana Beeha mampu buat. :D Thank you.










Beeha Azman

You Might Also Like

4 Comments

  1. kimchaaJanuary 27, 2016 at 8:53 PM

    Rajinnya beeha buat tuto ^^

    ReplyDelete
    Replies
    1. Beeha AzmanJanuary 27, 2016 at 9:23 PM

      Sebab ada permintaan, tu Beeha buat jugak. Kalau ikut malas mmg taknak buat. Heheheee

      Delete
  2. UnknownJanuary 28, 2016 at 11:21 AM

    as salam beeha cmna nak contact xnaik pa2 pun dekat blog beeha

    ReplyDelete
  3. AnonymousJanuary 28, 2016 at 12:51 PM

    malas dah sekarang nak edit blog..pakai apa yang ada jer...pening nak fikir

    ReplyDelete

Feel free to leave your comment here. Thank you. ;)

instagram