Tutorial Buat Dropdown Tab Menu (Blogspot)

Salam 1 Dunia dan Malaysia.. Kali ini cik tom nak share tutorial buat dropdown tab menu untuk platform blogspot. Camane pulak dropdown tab menu tue?? Dropdown tab menu tue yang ada main menu kita nampak pastu setiap main menu ada anak2 menunya sekali macam kat blog cik tom ni. Cuma blog cik tom sekarang guna platform wordpress so kalau nak buat boleh direct buat kat pages meanwhile untuk blogspot kena tambah2 sikit pada code edit html dan juga page elements. Gambar bawah ini contoh hasil tab menu kat blog testing blogspot cik tom.

dropdown tab menu

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>klik DOWNLOAD FULL TEMPLATE untuk backup file.

STEP 2

Pada” Edit HTML”, tekan “ctrl+f” untuk cari code </head> dan copy code dibawah sebelum code </head>;

<style>
#sddm
{ margin: 0;
padding: 8px 100px 10px 0px;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #ff0000;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #ff0000}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #ff0000;
/*border of the drop down menu*/
border: 1px solid #000000}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #000000;
/*font of each menu element*/
font: 12px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #ff0000;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>

**code warna contoh; #ff0000 dan lain2 code warna tue boleh tukar kepada warna yang disukai; HTML Color | Code Warna Html dan HTML Code Color | Warna Kod HTML 2.

STEP 3

Klik “Save Template”.

STEP 4

Daripada DASHBOARD>DESIGN>PAGE ELEMENTS>ADD A GADGET(Sila ambil “add a gadget” yang kedudukan bawah header)>HTML/Javascript
**pada yang takde “add a gadget” bawah header boleh rujuk pada entry; Adding A Section (With Add A Gadget Link) In Blogger Layout by BloggerSentral

STEP 5

Copy code di bawah ke dalam “Content“. Sila tinggal kosong/blank pada “Title“;

<ul id="sddm">

<li><a href="http://www.ciktom.com">Home</a></li>
<li><a href="#">Disclaimer</a></li>

<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Tutorial BS & WP>></a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Tutorial Blogspot</a>
<a href="#">Tutorial WordPress</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Resepi>></a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Resepi Lauk Pauk</a>
<a href="#">Resepi Kek</a>
<a href="#">Resepi Puding</a>
</div>
</li>

<li><a href="#">Tips Blog</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Owner </a></li>

</ul>

*tanda # boleh gantikan dengan url blog/ url pages dan boleh tukar pada tajuk menu tab yang sesuai.

STEP 6

Klik Preview dan Save jika tiada sebarang error pada coding.

Untuk tutorial lebih advance sehingga level 4 dropdown menu seperti dalam gambar di bawah boleh rujuk di entry; Installing A Multi Level CSS Dropdown Menu by Bloggersentral.

Blogsentral: Tutorial Dropdown Menu
Blogsentral: Tutorial Dropdown Menu

Selamat mencuba ^_^

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

71 thoughts on “Tutorial Buat Dropdown Tab Menu (Blogspot)

  • December 12, 2011 at 2:08 pm
    Permalink

    terima kasih cik tom..
    akak nak edit2 sikit blog akak tu..
    nak pendek kan sidebar..
    mungkin tutor ni boleh digunakan dimasa akan datang..

    Reply
    • December 26, 2011 at 12:12 am
      Permalink

      insyaAllah akak..blog akak makin lama makin cantik dan mantap..hee

      Reply
  • December 12, 2011 at 3:42 pm
    Permalink

    ciktom kakD tak pandai la nak EDIT HTML bagai…huhuuhuhuhu…memang teringin nak buat utk blog bisnes kakD…adakah ciktom boleh tlg buatkan?hehehhe…

    Reply
    • December 26, 2011 at 12:12 am
      Permalink

      akak cuba dulu ye..kalau xdpt jugak insyaAllah ciktom cuba tolong ye…

      Reply
  • December 12, 2011 at 9:26 pm
    Permalink

    ciktom cayunk.. kita buat darik dulu x jadik sampai tensen. pastu dah malas nak buat. nanti bila kepala dah x pening kita nak buat juge.. huhuhu~
    dah siap bookmark dah nih! hehehehe :))

    Reply
    • December 26, 2011 at 12:10 am
      Permalink

      ok yunk..nanti ada masa boleh cuba ye..

      Reply
  • December 13, 2011 at 8:13 pm
    Permalink

    cik tom, ade tutorial buat hidden box pada blogspot x? bahagian sidebar..nak sembunyikan icon2 ping kat blog KKO supaye kemas sikit…

    Reply
  • December 13, 2011 at 10:06 pm
    Permalink

    haritu dah komen ciktom… tapi agaknya error.. kita dah bookmark siap siap masa ciktom publish… hehehehe…

    kalo x lepas buat ciktom kena aja jugak!!!! hehehe

    Reply
    • December 26, 2011 at 12:09 am
      Permalink

      dah komen yunk tp ciktom busy xsempat nak approve semua komen..cuba jangan tak cuba pulak ye..hee

      Reply
  • December 13, 2011 at 11:38 pm
    Permalink

    rajinnya, lepas ni boleh buat tutor wp lak

    Reply
    • December 26, 2011 at 12:08 am
      Permalink

      insyaAllah akak..ni pun dah ada buat 1,2…

      Reply
  • December 15, 2011 at 2:37 am
    Permalink

    aik yang atas blog mana?yang ni blog mana?haiyak conpiusss mas,cik tom.hihi

    Reply
    • December 26, 2011 at 12:04 am
      Permalink

      mas..tue contoh blog blospot ciktom..ni blog wordpress ciktom..kl ciktom nak cuba tutor blogspot, ciktom akan guna blog 1 lg..hee

      Reply
  • December 15, 2011 at 3:16 am
    Permalink

    salam perkenalan,,cik tomato..sy suka sngt ngn blog awk..banyak tutorial yang sy pelajari dr blog awk..sy newbie dalam dunia blog nie..sy ikhlas hati nak jadi follower awk,,so,blh x cik tomato follow sy balik..
    kerjasama anda amatlah sy hargai

    Reply
  • December 15, 2011 at 3:17 am
    Permalink

    selamat berkenalab,,i follow you u follow me back ok

    Reply
  • December 17, 2011 at 11:04 pm
    Permalink

    salam sis CT semoga ceria selalu dan tak jemu2 beri kitorg tutorial 🙂

    hari ni baru je buat menu bar yg baru..tapi letak kat sidebar pulak.nanti dah bosan kite nak cuba apply yg sis CT kgsikan ni pulaklah…

    selamat berhujung minggu ^^

    Reply
    • December 25, 2011 at 11:57 pm
      Permalink

      boleh je cuba yang mana2 pun yunk..ikut kesesuaian dan citarasa masing2 😉

      Reply
  • December 19, 2011 at 10:41 am
    Permalink

    nice tutorial cik tom..:)

    Reply
  • December 21, 2011 at 1:51 pm
    Permalink

    rajin cik tom wat tutorial erk^ ^

    Reply
    • December 25, 2011 at 11:53 pm
      Permalink

      takdelah rajin sgt…kl dgt mood nk update je..heee..eh try bk blog tp xleh la..

      Reply
  • December 21, 2011 at 2:48 pm
    Permalink

    wahhhh…nt dla pun nk try la buat..smart ahh buat tab cam gitu..thanx cik tom share ilmu ni..byk ilmu yg ciktom taw..best tol

    Reply
  • December 22, 2011 at 3:22 am
    Permalink

    cik tom..pena buat benda ni tapi tak jadi.hehee coding tak mesra alam betul.teringin bertukar ke wp..hehe

    #domain dah tamat..lupa nak renew.

    Reply
    • December 25, 2011 at 11:49 pm
      Permalink

      jom la tukar wp..best!heeee….cepat renew domain..nanti org lain sambar kan..

      Reply
  • December 22, 2011 at 1:43 pm
    Permalink

    # tu ganti dgn url blog/url pages???ape tu?

    Reply
    • December 22, 2011 at 2:15 pm
      Permalink

      yang tu dah jadi..tapi macam mana nak tulis entry dlm menu tu>lagi-2 utk blog yg jenis baru cam saya nih

      Reply
      • December 25, 2011 at 11:47 pm
        Permalink

        yasmin letak je simbol “>”…ada kat keyboard tue yunkk….

        Reply
  • December 24, 2011 at 12:26 am
    Permalink

    lama tak update blog? cik tom ada sakit apa2 ke?

    Reply
    • December 25, 2011 at 11:45 pm
      Permalink

      ciktom busy..sbb tue xupdate lama…xde sakit apa2..alhamdulillah sihat setakat ni..

      Reply
  • December 25, 2011 at 2:15 pm
    Permalink

    salam cik tom..
    saya dh berjaya buat drop down tab menu..
    thanks for the tutorial..sng nk faham 🙂

    Reply
    • December 25, 2011 at 11:40 pm
      Permalink

      salam elyn..alhamdulillah baguslah..tahniah sbb berjaya 🙂

      Reply
  • December 25, 2011 at 3:49 pm
    Permalink

    Salam CikTom 🙂
    lama dah sy tak buat BW.
    Ciktom ni terer CSS ni. Bolelah sy belajar sikit2.
    Dulu sy ada blogspot. Nanti nk try tutorial CikTom ni 😉

    Reply
    • December 25, 2011 at 11:39 pm
      Permalink

      tak terer pun..biasa2 je..masih diperingkat belajar lagi..so pe salahnya share info yang tahu kan..huhu

      Reply
  • December 26, 2011 at 4:26 pm
    Permalink

    assalmualikum…ciktom saya dah guna tutorial code yang ciktom senaraikan tue cuma saya tak tahu macam mana nak ubah saiz,serta ertikal saya nak bawa masuk ke colum page tersebut

    Reply
    • December 26, 2011 at 4:55 pm
      Permalink

      wslm..ok dah nampak jadi…cuma najmi kena adjust2 saiz, warna dan ayat dalam tab menu dropdown ikut kesesuaian blog najmi..yang ciktom bagi dlm blog ni contoh je..
      1. nak ubah saiz apa?boleh try n error ubah saiz pada nombor dlm code padding, margin, width..pastu tgk hasilnya…ni kena kreatif n try error..
      2. untuk url “HOME” tue najmi ubah kepada url blog najmi; “http://www.najmimerbokutara.blogspot.com/”..tab menu yang lain najmi just ubah kepada tajuk tab menu yang najmi gunakan..
      3. utk masukkan pages ke dlm tab menu yg baru ni..1st copy link pages yg asal..contohnya tab menu “CONSERT” url; http://www.najmimerbokutara.blogspot.com/p/consert-di-putri-jaya.html….nanti awk adjust/ tambah code dlm step 5; <li><a href="http://www.najmimerbokutara.blogspot.com/p/consert-di-putri-jaya.html">CONCERT</a></li&gt; ..tmbh sehingga kesemua pages awak yg ada..lepas tue awk boleh remove gadget “pages” yg lama..

      Reply
  • December 26, 2011 at 7:37 pm
    Permalink

    tq banyak2…ader la jgak tutorial dalam bahasa mlayu…
    mudah sket nak paham…

    Reply
    • December 27, 2011 at 1:03 pm
      Permalink

      banyak skang tutorial blog dalam bahasa melayu…yup lagi mudah nak faham kan..

      Reply
  • December 26, 2011 at 9:34 pm
    Permalink

    Salam. Hi Cik Tom, favicon tu semalam tak muncul, petang ni baru ada..;) Kalau edit code HTML ni memang Kak Nur tak mahir.

    Reply
    • December 27, 2011 at 1:03 pm
      Permalink

      salam kak nur..takpe mana2 cara pun nak buat favicon blog tue..ciktom pun pernah share tutorial favicon blogspot guna edit html dan juga upload via page element…hee

      Reply
    • December 27, 2011 at 3:57 pm
      Permalink

      boleh cuba bila sha free2 nanti..good luck!

      Reply
  • January 27, 2012 at 10:43 pm
    Permalink

    tak jadi la cik tom , npa eh >?

    Reply
    • January 28, 2012 at 4:56 pm
      Permalink

      apa url blog?dah follow semua step betul2..try follow sekali lg step satu persatu..tgk 2nd time jadi x?

      Reply
  • February 10, 2012 at 2:11 pm
    Permalink

    haiii.. terima kasih.. tutorial yg best..baru sye tawu nk buat cm kt atas 2.. hehek trima kasih lg skali

    Reply
  • February 15, 2012 at 4:28 pm
    Permalink

    Salam.. cik Tom..
    nak tanye nape link menu yang syieda dah buat terlindung dengan entri ye? macam mane nak buat? tolong syieda @[email protected]

    Reply
    • February 22, 2012 at 10:00 am
      Permalink

      salam syieda..sorry br smpt nk reply komen..ciktom dh singgah blog syieda..smua link menu ok..xterlindung pn dgn entri..

      Reply
      • February 22, 2012 at 9:50 pm
        Permalink

        ok.. syieda dah buat semula.. last2 jadi.. hikhik.. tqvm cik tom tuk tuto ni.. =.=

        Reply
  • February 17, 2012 at 2:18 pm
    Permalink

    Cik tom, sy buat dah jadi..tapi masalah lain pulak. dropdown item utk yg pertama je boleh..bila point cursor ke list kedua takde keluar color link. nak adjust kat mana ye? Cik tom guna var timesout & var closetime tu berapa ye?

    Reply
    • April 21, 2012 at 2:41 pm
      Permalink

      ciktom punya blog ni guna setting wordpress tp yg ciktom test utk blog jenis blogspot mmg sebiji guna code yg diberi dlm tutorial ini dan menjadi..

      Reply
  • February 19, 2012 at 10:51 am
    Permalink

    sis ..mntk tlg blh ??sy dh buat semue step kt ats tu ..n now cmner ye nak post kt new tab tu ??kalu blh nak post byk2 post dlm satu2 tab tu ..huhuhu

    Reply
    • February 22, 2012 at 9:53 am
      Permalink

      nak post kat new tab..setiap kali ana buat entry masukkan dia punya label..contoh url label; http://sophisticatedgirllife.blogspot.com/search/label/Degree..so nanti masukkan je url ni dalam link new tab tue..pastu setiap kali ana post entry under label degree akan keluar pada new tab tue..means kalau sesapa buka new tab menu “degree” akan keluar semua post under label “degree”..

      Reply
  • February 20, 2012 at 12:49 pm
    Permalink

    err nak tanya satu lagi boleh? camne nak pos kat bahagian bawah pos kita tu ada ruangan ‘anda juga mungkin meminati : ada 2 3 pos lain2..sorry banyak tanya 🙂

    Reply
    • February 17, 2016 at 11:51 am
      Permalink

      tak jadi macam mana ye??tutorial dah lama tinggal bab coding ni..kalau nak kena referesh dan study balik..hehe

      Reply
  • October 27, 2016 at 12:38 pm
    Permalink

    salam… boleh cik tom tgk kan blog sy x? menu drop down xjadi.. semua kod yg saya masukkan, sama ja jdnya… dia xdropdown.. dia appear semua sekali kat atas tu… tq atas pertolongan

    Reply
    • November 16, 2016 at 4:02 pm
      Permalink

      wslm..sorry dear..ciktom mmg busy dan dah lama tinggal bab coding ni..kalau nak check kena study balik..skang plk xde masa..minta maaf sangat2 ye..

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE