បញ្ជាក់ ៖ ICON ដែលលោកអ្នកដាក់ម៉ៅ ពីលើ ហើយលោតចេញរូបភាពនោះ លោកអ្នកអាចប្ដូរវាបាន ដោយ Edit នៅត្រង់កូដ CSS។ គួរអានផងដែរនូវ ៖ របៀប Upload រូបភាពនៅក្នុងប្លុកករ ដើម្បីយក Link មកប្រើប្រាស់ ។
មើលគម្រូខាងក្រោមនេះ
៙ CSS មីនុយ ជាមួយនឹង ICON Hover Effect សម្រាប់ដាក់ក្នុងប្លុក ៖
- កត់ត្រាចូល (Log In) ក្នុងគណនី Blogger របស់លោកអ្នកជាមុនសិន។
- ចូលទៅកាន់ផ្នែក Layout >> រួចចុចលើតំណអក្សរ Add a Gadget នៅទីតាំងណាមួយ (ឧទាហរណ៍សូមមើលរូបខាងក្រោម)
- រមូរចុះ (scroll down) រកមើល gadget ដែលមានឈ្មោះថា HTML/JavaScript រួចចុចលើវាដើម្បីបើក (មើលរូបខាងក្រោមនេះ)
- ចម្លងកូដខាងក្រោមនេះ យកទៅបិទភ្ជាប់ក្នុង HTML/JavaScript Gadget ហើយចុចប៊ូតុង Save។
* បន្ថែម ៖ ចំពោះឈ្មោះ widget មិនចាំបាច់ដាក់ទេ។
** ពេលចុច Save ហើយ សូមចាប់ទាញវាទៅដាក់ជំនួស កន្លែង Page ហើយ អាច Remove Page ចោលបាន (របៀប Remove Page ចោល គឺគ្រាន់តែចុចពាក្យ Edit នោះលោកអ្នកនឹងឃើញ ប៊ូតុង Remove ហើយ)
កូដ ដែលត្រូវដាក់ក្នុង HTML/JavaScript
<style>
#btrix-nav{height:87px;list-style:none;margin:10px auto;overflow-y:hidden;width:624px}
#btrix-nav li{float:left}
#btrix-nav li a{border-bottom:1px solid #555;
border-top:1px solid #bbb;color:#FFF;display:block;height:61px;margin-top:24px;text-align:center;text-decoration:none;
width:120px}#btrix-nav li a span.aname{color:#fff;cursor:pointer;font:bold 17px/61px Arial;position:relative;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;top:0;transition:top .5s ease}#btrix-nav li a img{position:relative;top:0;transition:top .5s ease}#btrix-nav li a:hover{cursor:pointer}#btrix-nav li a:hover img{top:-85px}#btrix-nav li a:hover .aname{top:85px}#btrix-nav li:nth-child(1) a{background:#3eb006;border-left:1px solid #bbb;border-radius:5px 0 0 5px}#btrix-nav li:nth-child(2) a{background:#9bc704}#btrix-nav li:nth-child(3) a{background:#0dc3ff}#btrix-nav li:nth-child(4) a{background:#51a2ec}#btrix-nav li:nth-child(5) a{background:#6e3cab;border-radius:0 5px 5px 0;border-right:1px solid #555}
</style>
<div id="btrix-nav">
<li><a href="#"><span class="aname">Homes</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4byXRyeXrcmITVBMMfTAmFDkEM8Ksx8scw3hvqx2E9KbfYqLOUyuFmWE10LABlYDw4xCBw1fMT2mM3rDNKfP5taPCkF8swmTsBkR9Aj2W5hzh5kQFAcjgqs4bw5vkJ3FXg14tEEJeuC8/s1600/btrix-home.png" style=""></a></li>
<li><a href="#"><span class="aname">Download</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcpFyJkiDPb83s6SEskcjX17yiAav8lhscuRK9QmFI3N5h3MUdIeA5eSPMizXFSeYxiLjNj3r9fU8RpnyS3WLJMmTKxucwSrxppgJBQ5Rl9Z-_boTgS-eg0Xg0XAukUFErc-CUVgLifY/s1600/btrix-download.png" style=""></a></li>
<li><a href="#"><span class="aname"> MySql</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpfi7DINbO7kbkjCUl0yPHOdlRIVQp5hfOioOYjfzqHdRi61yPCDqEoqsuPOtXOTpyVkujjoRqCc4Zgg2vXvTMui1Oq-yot_Hrhu6E51CMpfxbHr01z8HxgTti2EvpV9q_fuPWqKO6qQ/s1600/btrix-mysql.png" style=""></a></li>
<li><a href="#"><span class="aname"> Html5</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcicoXq7LNENPDP8sGXGYSsuvwdvpYMmWczoJ9sbJffcMvoEdUUBz_xgn4gMPOeCEYhrooaqEmaykefKhyqHtEVrwKhQVvgHeIXJfPiHH4cgGFgnTzW6Uu8CP_13BlN6JtGP9kfh55hw/s1600/Btrix-html.png" style=""></a></li>
<li><a href="#"><span class="aname">Contact</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9FA0lnZMC-iXB3i1RHQ3-nqjDMuhG83KMgQsIWuAGw653J4R2cohyphenhyphen800_FPQDlVCvhSJPQFTEMegqhTSbXzjBpzZ20YQBSRabSmQeleTsdSU1gwqbhYajltjoAuBbkqMxioZvYsUeck/s1600/btrix-contact.png" style=""></a></li>
</div>
#btrix-nav{height:87px;list-style:none;margin:10px auto;overflow-y:hidden;width:624px}
#btrix-nav li{float:left}
#btrix-nav li a{border-bottom:1px solid #555;
border-top:1px solid #bbb;color:#FFF;display:block;height:61px;margin-top:24px;text-align:center;text-decoration:none;
width:120px}#btrix-nav li a span.aname{color:#fff;cursor:pointer;font:bold 17px/61px Arial;position:relative;text-shadow:1px 1px 1px rgba(0,0,0,0.5);text-transform:uppercase;top:0;transition:top .5s ease}#btrix-nav li a img{position:relative;top:0;transition:top .5s ease}#btrix-nav li a:hover{cursor:pointer}#btrix-nav li a:hover img{top:-85px}#btrix-nav li a:hover .aname{top:85px}#btrix-nav li:nth-child(1) a{background:#3eb006;border-left:1px solid #bbb;border-radius:5px 0 0 5px}#btrix-nav li:nth-child(2) a{background:#9bc704}#btrix-nav li:nth-child(3) a{background:#0dc3ff}#btrix-nav li:nth-child(4) a{background:#51a2ec}#btrix-nav li:nth-child(5) a{background:#6e3cab;border-radius:0 5px 5px 0;border-right:1px solid #555}
</style>
<div id="btrix-nav">
<li><a href="#"><span class="aname">Homes</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4byXRyeXrcmITVBMMfTAmFDkEM8Ksx8scw3hvqx2E9KbfYqLOUyuFmWE10LABlYDw4xCBw1fMT2mM3rDNKfP5taPCkF8swmTsBkR9Aj2W5hzh5kQFAcjgqs4bw5vkJ3FXg14tEEJeuC8/s1600/btrix-home.png" style=""></a></li>
<li><a href="#"><span class="aname">Download</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcpFyJkiDPb83s6SEskcjX17yiAav8lhscuRK9QmFI3N5h3MUdIeA5eSPMizXFSeYxiLjNj3r9fU8RpnyS3WLJMmTKxucwSrxppgJBQ5Rl9Z-_boTgS-eg0Xg0XAukUFErc-CUVgLifY/s1600/btrix-download.png" style=""></a></li>
<li><a href="#"><span class="aname"> MySql</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpfi7DINbO7kbkjCUl0yPHOdlRIVQp5hfOioOYjfzqHdRi61yPCDqEoqsuPOtXOTpyVkujjoRqCc4Zgg2vXvTMui1Oq-yot_Hrhu6E51CMpfxbHr01z8HxgTti2EvpV9q_fuPWqKO6qQ/s1600/btrix-mysql.png" style=""></a></li>
<li><a href="#"><span class="aname"> Html5</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcicoXq7LNENPDP8sGXGYSsuvwdvpYMmWczoJ9sbJffcMvoEdUUBz_xgn4gMPOeCEYhrooaqEmaykefKhyqHtEVrwKhQVvgHeIXJfPiHH4cgGFgnTzW6Uu8CP_13BlN6JtGP9kfh55hw/s1600/Btrix-html.png" style=""></a></li>
<li><a href="#"><span class="aname">Contact</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9FA0lnZMC-iXB3i1RHQ3-nqjDMuhG83KMgQsIWuAGw653J4R2cohyphenhyphen800_FPQDlVCvhSJPQFTEMegqhTSbXzjBpzZ20YQBSRabSmQeleTsdSU1gwqbhYajltjoAuBbkqMxioZvYsUeck/s1600/btrix-contact.png" style=""></a></li>
</div>
*** សម្គាល់ជាសំខាន់ ៖
- លោកអ្នកត្រូវផ្លាស់ប្តូរពាក្យ ៖ " Home, Download,..." ទៅជាពាក្យដែលលោកអ្នកពេញចិត្ត។
- ចំពោះ សញ្ញាទ្រុងជ្រូក ( # ) ជាកន្លែងបិទភ្ជាប់ Link URL របស់អ្នក។
* អរគុណ ចំពោះការអានអត្ថបទក្នុងប្លុកនេះ។
ពិតជាឡូយមែន និត :D
ReplyDeleteអរគុណ! ដែលបានមកមើលប្លុកខ្ញុំ :D
Delete