Thursday, 26 May 2016

Tutorial: Drop Menu Sidebar

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

 "Dengan menyebut nama Allah Yang Maha Pemurah lagi Maha Penyayang”

Assalamualaikum dan selamat malam,
Harini aku nak update tutorial sikit. Ekceli taktau sangat nama apa hahaha! Banyak benda aku dah lupa nama hikhiks. So tutorialnya macam di atas. Korang boleh tengok di bahagian sidebar aku. Tuto ni direquest oleh kak Syahidah Fadilah. Okay tanpa buang masa meh nengok tuto ni okay. Boleh la guna untuk mencantikkan korang punye belog. Hohoho!

  1. Buka dashboard atau blogger.com
  2. Layout --> Add gadjet --> Past code di bawah ni.
<center><style type="text/css">
.slide {
width: 230px;
padding: 0px;
background: ;}
.slide2 {
padding:3px;
display:block;
height:13px;
width:230px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.slide2:hover {
height: 150px;
}
nav1{
font-family:Short Stack;
padding-top:1px;
font-size:12px;
color:#000;
text-align:center;
text-transform :uppercase;
background: pink;
letter-spacing:2px;
height:25px;
padding-left:6px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
</style>
<div class="slide"><div class="slide2"><nav1>TAJUK1</nav1>
<div style="height:150px; overflow:auto;margin-top:3px;">
<center>LINK 1 DISINI<br /></center></div>
</div></div></center>
<div class="slide"><div class="slide2"><nav1>TAJUK 2</nav1>
<div style="height:150px; overflow:auto;margin-top:3px;">
<center>LINK2 DISINI<br /></div><center>

</center></div></div>
<div class="slide"><div class="slide2"><nav1>TAJUK3 </nav1>
<div style="height:150px; overflow:auto;margin-top:3px;">
<center>LINK3 DISINI</center><br /><br /></div></div></div>
Aku ada bold kan code code dan nama perlu korang letak. Aku bold dan letak warna warni supaya korang tak keliru dengan codding ni hihi

Korang dah paste semua tu boleh lah preview. Amacam jadi tak? Kalau tak jadi bagitau eh kot aku salah codding. Tapi sebelum publish ni aku dah pasang dh dulu di blog aku. Memang jadi. Benda ni remeh sikit, sekali salah codding dia akan lari sikit tau. Goodluck! Semoga dapat membantu. Ada tak nak request tuto? Pm ecah okay.

Lots of love ecahh,

5 comments

26 May 2016 at 22:40

Nak try laa. hehee thanks for sharing

27 May 2016 at 01:00

Nice tuto.. Cikla dh Cuba,.. Menjadi lah....

27 May 2016 at 01:51

Tp why x boleh nk klik pulak ye..Huhu

27 May 2016 at 10:41

wahh, laju update. TQ CAH! da jadi, hee

CikHasyani
2 March 2017 at 13:39

Thank you aisyhah...
first time terus menjadi...
Salam perkenalan dari Cik Yani

Post a Comment