Top Social

Tutorial buat menu tab comel di tepi blog [ hover rotate -5deg]

Friday 12 March 2021

Menu tab comel di tepi blog nampak menarik bila ada hover effects -5deg dan buatkan kau orang suka nak main main dengan hover tu. Seriously nampak style juga. Contoh macam bawah ni. 

Tutorial buat menu tab comel di tepi blog

Disebabkan ada yang bertanya dan ada masa nak buat tuto simple ni.


sumber : N comel

Sebelum mulakan tutor ni, save dulu template blog kau orang

1. Log in blogger>>Dashboard>>Design>>Edit HTML

2. Click pada expand widget templates

3. Cari code ]]></b:skin>
*tekan serentak ctrl+f dan masukkan code no 3 di dalam box untuk memudahkan pencarian

4. Copy code bawah ni
/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }
*Customize coding ikut kesesuaian blog,korang boleh tukar jenis font,warna font,size font,warna background dan position tab menu tu.


5. Pastekan code no 4 sebelum code  ]]></b:skin>

6. Cari code </body>
*tekan serentak ctrl+f dan masukkan code no 5 di dalam box untuk memudahkan pencarian

7.Copy code bawah ni
<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL BLOG'>Home</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
<li><a href='URL/LINK '>Tajuk</a></li>
</ul>
</div>
</div>
*letak link menu dan tajuk menu pada code di atas ni

8. Paste code no 7 sebelum code </body>

9. Preview

10. Kalau dah ok tekan SAVE

kalau buat tak menjadi, mungkin ada masalah coding dalam template. So, sila switch template baru dan buat  semula macam template asal. So, kalau tak jadi masa first time buat tu, kau orang kena switch pada template baru dan buat balik blog. Sebelum switch template baru,save dulu template lama.


Post Comment
Post a Comment