Ini Setelah sebelumnya mtt superminima ini aikatsu pernah membagikan top menu nav led warna warni, kali ini mtt superminima ini 5,7 atau 3 itu lucu aikatsu akan membagikan part 1-3 menu navigasi dengan icon aikatsu efek hover Di Blog. Apakah Ini Aikatau Lucu Ke Ichigo 1A 2 3, Aoi 1E 2 3, Ran 1D 2 3, Otome 1B 2, Yurika 2, Sakura 1C 2 dan Kaede 2. Mungkin Ini Apakah Saja Ini ada Menu Navigasi Ini Bosan Ini Aikatsu Idol Academy. Ini Blog Ada Cheat Game Maharani Ini. Naah Ada 3 Menu Navigasi Aikatsu Siapa Ini.
Bagaimana Ini Tampilan 3 Navigasi ini? Apakah kamu ini dapat melihat klik kedemonya ini part 1-3 demo saja untuk ini lebih ayo jelasnya lagi itu ayo.
3 Menu Navgasi Dengan Icon Aikatsu Efek Hover
1. Masuk Blogger2. Klik Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Letakkan Ini Kode Disini 1-3 Part Ini CSS dan HTML
Keterangan CSS Sebelum Tambah Ketik <style> dan </style>
Part 1 Sama Seocips Ichigo, Otome, Sakura, Ran dan Aoi
#aikatsu-btrix-nav {margin: 5px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#aikatsu-btrix-nav li {float: left;}
#aikatsu-btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#aikatsu-btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#aikatsu-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#aikatsu-btrix-nav li a:hover {cursor: pointer;}
#aikatsu-btrix-nav li a:hover img {top: -85px;}
#aikatsu-btrix-nav li a:hover .aname {top: 85px;}
#aikatsu-btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#aikatsu-btrix-nav li:nth-child(2) a {background: #9bc704;}
#aikatsu-btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#aikatsu-btrix-nav li:nth-child(4) a {background: #51a2ec;}
#aikatsu-btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
<div id="aikatsu-btrix-nav">
<li> <a href="#"><span class="aname">Ichigo</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYLzZGEyoZpVOcu1xMJks0G_Bohq-AlbQ9Zly646MRslZf2QGpP1u-xcYIhojhafrKLGlbwq7XgZbqovXFWd516uzi0OLaVo2gcMPPQBX7sluQ8Qsh3EqAdYGPDPEWaUqnQuANogmsjVA/s320/Ichigo_hoshimiya_by_tloz_freack123-d5jq46c.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Otome</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLr8P73UvYfDvm3SwqBgMadt6-8h02h_264Iy-_vr2OjaPWOEJuVj-xHKR61OWbqyB19i9YzVoPLPm4usQ_CFFJfogBnuuz7-l1_L5mwhkBOojKqRyMaOKqe7t4hpazpoXas4XH22occ/s1600/Otome_Arisugawa.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Sakura</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpoD7DrhP641omCEaWIGzifRtpypk4jK120m9UsCQbyD0fOP3WwO38cXdGyulf_iz17_To9UF21qSsBVmzudTHkJA6VZF8-CCtGrJRmNQ-GSG-ZmjJxYRrKnw3qBNEuCRJAPi53r_wz6E/s1600/Sakura_Kitaoji.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Ran</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5D0HWN588xiuLbOgeJV7Qk1ut8RstyqESSL_Dw5VnMq1yxauA2QKuQ2apXt5bAy9kS_baha_HHwRIVEABM8jPY4px7pRJF038WZbvj-BuTuKqN_BR17U81yKyWzz8xV2gSJ-9WbL0lIQ/s1600/Ran_Shibuki.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Aoi</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtqTKUMJghgDcv2y2woRljSJ_MpQfHrz39TThtqqkY1yVdx5ZayLgAhEs7SuisOXUT3mPSA7mo8cFw16jO-jOthAdNQiOfwDal-WuJ7tnZuWZNGvQLV7zxH2YKS3A5ntGE72vd5O6qC0/s1600/Aoi_Kiriya.png" /> </a> </li> </div>
atau Part 2 Lengkap Ichigo, Aoi, Ran, Otome, Yurika, Sakura dan Kaede
#aikatsu-btrix-nav {margin: 5px auto;list-style: none;width: 852px;height: 87px;overflow-y: hidden;}
#aikatsu-btrix-nav li {float: left;}
#aikatsu-btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#aikatsu-btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#aikatsu-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#aikatsu-btrix-nav li a:hover {cursor: pointer;}
#aikatsu-btrix-nav li a:hover img {top: -85px;}
#aikatsu-btrix-nav li a:hover .aname {top: 85px;}
#aikatsu-btrix-nav li:nth-child(1) a {background: HotPink;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#aikatsu-btrix-nav li:nth-child(2) a {background: Blue;}
#aikatsu-btrix-nav li:nth-child(3) a {background: Purple;}
#aikatsu-btrix-nav li:nth-child(4) a {background: Orange;}
#aikatsu-btrix-nav li:nth-child(5) a {background: Black;}
#aikatsu-btrix-nav li:nth-child(6) a {background: LightPink;}
#aikatsu-btrix-nav li:nth-child(7) a {background: Red;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
<div id="aikatsu-btrix-nav">
<li> <a href="#"><span class="aname">Ichigo</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYLzZGEyoZpVOcu1xMJks0G_Bohq-AlbQ9Zly646MRslZf2QGpP1u-xcYIhojhafrKLGlbwq7XgZbqovXFWd516uzi0OLaVo2gcMPPQBX7sluQ8Qsh3EqAdYGPDPEWaUqnQuANogmsjVA/s320/Ichigo_hoshimiya_by_tloz_freack123-d5jq46c.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Aoi</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtqTKUMJghgDcv2y2woRljSJ_MpQfHrz39TThtqqkY1yVdx5ZayLgAhEs7SuisOXUT3mPSA7mo8cFw16jO-jOthAdNQiOfwDal-WuJ7tnZuWZNGvQLV7zxH2YKS3A5ntGE72vd5O6qC0/s1600/Aoi_Kiriya.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Ran</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5D0HWN588xiuLbOgeJV7Qk1ut8RstyqESSL_Dw5VnMq1yxauA2QKuQ2apXt5bAy9kS_baha_HHwRIVEABM8jPY4px7pRJF038WZbvj-BuTuKqN_BR17U81yKyWzz8xV2gSJ-9WbL0lIQ/s1600/Ran_Shibuki.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Otome</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLr8P73UvYfDvm3SwqBgMadt6-8h02h_264Iy-_vr2OjaPWOEJuVj-xHKR61OWbqyB19i9YzVoPLPm4usQ_CFFJfogBnuuz7-l1_L5mwhkBOojKqRyMaOKqe7t4hpazpoXas4XH22occ/s1600/Otome_Arisugawa.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Yurika</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKSsvUFVtu361FAO9JWwhFwcYUmJAAl_6C-wIcIgWE5qc2J3R3-SOUl1HsSbnIrUKbVcTcOOlSLkhzY8rrECJj1sUopye-RhZqkpKLIS52jhhD7hfHaVly6v1y6mchjToyK7grb9mQXs/s1600/Yurika_Todo.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Sakura</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpoD7DrhP641omCEaWIGzifRtpypk4jK120m9UsCQbyD0fOP3WwO38cXdGyulf_iz17_To9UF21qSsBVmzudTHkJA6VZF8-CCtGrJRmNQ-GSG-ZmjJxYRrKnw3qBNEuCRJAPi53r_wz6E/s1600/Sakura_Kitaoji.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Kaede</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRy-3XMZPQdlZhmhBbWTkxg0AqujcSnebVRXKy88DiNXm3w_6e9LTOp2_Wwzuusl3fCMt7TFQaz07j3Zp3hkb3nRYqsPUuH-N_kconASNBe7JrufeeB6BgIf6SFh4CPl6OWvLcpYx42E/s1600/Chara08_sp.png" /> </a> </li> </div>
atau Part 3 Sederhana Ichigo, Aoi dan Ran
#aikatsu-btrix-nav {margin: 5px auto;list-style: none;width: 362px;height: 87px;overflow-y: hidden;}
#aikatsu-btrix-nav li {float: left;}
#aikatsu-btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#aikatsu-btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#aikatsu-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#aikatsu-btrix-nav li a:hover {cursor: pointer;}
#aikatsu-btrix-nav li a:hover img {top: -85px;}
#aikatsu-btrix-nav li a:hover .aname {top: 85px;}
#aikatsu-btrix-nav li:nth-child(1) a {background: HotPink;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#aikatsu-btrix-nav li:nth-child(2) a {background: Blue;}
#aikatsu-btrix-nav li:nth-child(3) a {background: Maroon;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
<div id="aikatsu-btrix-nav">
<li> <a href="#"><span class="aname">Ichigo</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYLzZGEyoZpVOcu1xMJks0G_Bohq-AlbQ9Zly646MRslZf2QGpP1u-xcYIhojhafrKLGlbwq7XgZbqovXFWd516uzi0OLaVo2gcMPPQBX7sluQ8Qsh3EqAdYGPDPEWaUqnQuANogmsjVA/s320/Ichigo_hoshimiya_by_tloz_freack123-d5jq46c.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Aoi</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtqTKUMJghgDcv2y2woRljSJ_MpQfHrz39TThtqqkY1yVdx5ZayLgAhEs7SuisOXUT3mPSA7mo8cFw16jO-jOthAdNQiOfwDal-WuJ7tnZuWZNGvQLV7zxH2YKS3A5ntGE72vd5O6qC0/s1600/Aoi_Kiriya.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Ran</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5D0HWN588xiuLbOgeJV7Qk1ut8RstyqESSL_Dw5VnMq1yxauA2QKuQ2apXt5bAy9kS_baha_HHwRIVEABM8jPY4px7pRJF038WZbvj-BuTuKqN_BR17U81yKyWzz8xV2gSJ-9WbL0lIQ/s1600/Ran_Shibuki.png" /> </a> </li> </div>
5. Lihat Hasil Blog