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.
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 = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// 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="https://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.
Selamat mencuba ^_^
Sharing is caring
terima kasih cik tom..
akak nak edit2 sikit blog akak tu..
nak pendek kan sidebar..
mungkin tutor ni boleh digunakan dimasa akan datang..
insyaAllah akak..blog akak makin lama makin cantik dan mantap..hee
ciktom kakD tak pandai la nak EDIT HTML bagai…huhuuhuhuhu…memang teringin nak buat utk blog bisnes kakD…adakah ciktom boleh tlg buatkan?hehehhe…
akak cuba dulu ye..kalau xdpt jugak insyaAllah ciktom cuba tolong ye…
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 :))
ok yunk..nanti ada masa boleh cuba ye..
cik tom, ade tutorial buat hidden box pada blogspot x? bahagian sidebar..nak sembunyikan icon2 ping kat blog KKO supaye kemas sikit…
ada kko..cuba tengok tutorial ni; https://www.ciktom.com/tutorial-buat-auto-slide-menu-hide-show-untuk-kemaskan-sidebar-updated/
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
dah komen yunk tp ciktom busy xsempat nak approve semua komen..cuba jangan tak cuba pulak ye..hee
rajinnya, lepas ni boleh buat tutor wp lak
insyaAllah akak..ni pun dah ada buat 1,2…
detail nih
detail untuk mudah faham..
thx 4 sharing
ur welcome…
aik yang atas blog mana?yang ni blog mana?haiyak conpiusss mas,cik tom.hihi
mas..tue contoh blog blospot ciktom..ni blog wordpress ciktom..kl ciktom nak cuba tutor blogspot, ciktom akan guna blog 1 lg..hee
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
thanks..boleh je yunk..
selamat berkenalab,,i follow you u follow me back ok
ok..
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 ^^
boleh je cuba yang mana2 pun yunk..ikut kesesuaian dan citarasa masing2 😉
nice tutorial cik tom..:)
thanks zalin 🙂
rajin cik tom wat tutorial erk^ ^
takdelah rajin sgt…kl dgt mood nk update je..heee..eh try bk blog tp xleh la..
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
selamat mencuba ye yunk..
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.
jom la tukar wp..best!heeee….cepat renew domain..nanti org lain sambar kan..
# tu ganti dgn url blog/url pages???ape tu?
yang tu dah jadi..tapi macam mana nak tulis entry dlm menu tu>lagi-2 utk blog yg jenis baru cam saya nih
yasmin letak je simbol “>”…ada kat keyboard tue yunkk….
# ganti dengan url atau link yang yasmin nak guna..contohnya link https://www.ciktom.com/disclaimer or apa2 link yang sesuai..
lama tak update blog? cik tom ada sakit apa2 ke?
ciktom busy..sbb tue xupdate lama…xde sakit apa2..alhamdulillah sihat setakat ni..
salam cik tom..
saya dh berjaya buat drop down tab menu..
thanks for the tutorial..sng nk faham 🙂
salam elyn..alhamdulillah baguslah..tahniah sbb berjaya 🙂
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 😉
tak terer pun..biasa2 je..masih diperingkat belajar lagi..so pe salahnya share info yang tahu kan..huhu
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
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> ..tmbh sehingga kesemua pages awak yg ada..lepas tue awk boleh remove gadget “pages” yg lama..
tq banyak2…ader la jgak tutorial dalam bahasa mlayu…
mudah sket nak paham…
banyak skang tutorial blog dalam bahasa melayu…yup lagi mudah nak faham kan..
Salam. Hi Cik Tom, favicon tu semalam tak muncul, petang ni baru ada..;) Kalau edit code HTML ni memang Kak Nur tak mahir.
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
wah, best juga ni.
nak cuba juga la nanti..
boleh cuba bila sha free2 nanti..good luck!
tak jadi la cik tom , npa eh >?
apa url blog?dah follow semua step betul2..try follow sekali lg step satu persatu..tgk 2nd time jadi x?
haiii.. terima kasih.. tutorial yg best..baru sye tawu nk buat cm kt atas 2.. hehek trima kasih lg skali
hi shiera….sama2..
Salam.. cik Tom..
nak tanye nape link menu yang syieda dah buat terlindung dengan entri ye? macam mane nak buat? tolong syieda @___@
salam syieda..sorry br smpt nk reply komen..ciktom dh singgah blog syieda..smua link menu ok..xterlindung pn dgn entri..
ok.. syieda dah buat semula.. last2 jadi.. hikhik.. tqvm cik tom tuk tuto ni.. =.=
ur welcome.
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?
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..
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
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”..
tq cik tom 🙂
sama2 🙂
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 🙂
boleh refer entry ini; https://www.ciktom.com/tutorial-buat-dan-ubah-ayat-linkwithin/
Jenuh intai2 sini nak buat.. nanti bila ada masa bebetul, kita buat ye kak ..
Jom baca entri terkini akinassufi …Teka Teki Benda UK
Dah try sakni… Tak jadi lah size dia. guane ehh?
Jom baca entri terkini Mawar Assufi …Teka Teki Benda UK
tak jadi macam mana ye??tutorial dah lama tinggal bab coding ni..kalau nak kena referesh dan study balik..hehe
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
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..