Cara Menambahkan Icon Navbar Di Template Median Tech Ui

Cara Menambahkan Icon Navbar Di Template Median Tech Ui

Pada Kesempatan Kali Saya Benar-Benar Bingung Ingin Mengulas atau Membahas Topik Apa Untuk Blog ini, dan konten ini berasal dari pribadi saya sendiri karena banyak yang menggunakan template Median Tech Ui tapi salah satu dari mereka tidak mempunyai navbar yang komplit sama seperti saya saat ini.
tujuan icon-icon ini dibuat agar tampilan template kalian terlihat lebih profesional dan SEO pastinya.
baiklah, tanpa harus berlama-lama silahkan kalian simak caranya sebagai berikut:

Cara Memasang Icon Tool Dan Icon Lain nya Di Template Median Tech Ui

Jika Penjelasan ini kurang jelas?, silahkan kalian berkomentar sesuai kendala yang kalian alami di tutor kali ini
  1. Login Terdahulu Ke Blogger.com dan masuk dengan email kalian
  2. lalu yang harus kalian lakukan hanyalah ke menu tema dan klik edit HTMl
  3. Kemudian salin Skrip-skrip dibawah ini dan letakkan dibagian yang kalian ingin kan
  4. Jangan Lupa Kalian Cari Kode Berikut ini biar tidak kebingungan <li class='submenu break'>

class='submenu break'>
<input class='sub-menu hidden' id='offsub-menu2' name='dropdown-menu' type='checkbox'/>
<label class='link' for='offsub-menu2'>
<svg class='icon' viewBox='2 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 2.000000)'><path d='M3.5 8.389C3.5 7.117 4.54 6.081 5.817 6.081H18.183C19.455 6.081 20.49 7.117 20.49 8.389V11.446C18.847 12.467 16.953 13.182 14.959 13.533C14.411 12.426 13.271 11.7 11.99 11.7C10.72 11.7 9.575 12.423 9.011 13.524C7.029 13.175 5.142 12.463 3.5 11.446V8.389ZM10.704 3.5H13.286C13.958 3.5 14.521 3.961 14.688 4.581H9.301C9.469 3.961 10.031 3.5 10.704 3.5ZM9.384 15.101C9.764 15.154 10.111 14.92 10.211 14.556C10.434 13.744 11.149 13.2 11.99 13.2C12.822 13.2 13.544 13.756 13.746 14.552C13.832 14.888 14.134 15.118 14.473 15.118C14.507 15.118 14.542 15.116 14.576 15.111C17.145 14.755 19.592 13.846 21.654 12.482C21.864 12.342 21.99 12.108 21.99 11.856V8.389C21.99 6.289 20.282 4.581 18.183 4.581H16.206C16.019 3.13 14.788 2 13.286 2H10.704C9.202 2 7.972 3.129 7.784 4.581H5.817C3.712 4.581 2 6.289 2 8.389V11.856C2 12.108 2.126 12.343 2.337 12.482C4.396 13.84 6.833 14.745 9.384 15.101ZM11.2451 15.3841V16.6781C11.2451 17.0921 11.5811 17.4281 11.9951 17.4281C12.4091 17.4281 12.7451 17.0921 12.7451 16.6781V15.3841C12.7451 14.9701 12.4091 14.6341 11.9951 14.6341C11.5811 14.6341 11.2451 14.9701 11.2451 15.3841ZM20.5086 15.4169C20.5386 15.0329 20.8516 14.7269 21.2446 14.7269C21.6576 14.7269 21.9926 15.0619 21.9926 15.4749C21.9926 15.4813 21.9807 15.6353 21.963 15.8639C21.9198 16.4213 21.8423 17.4221 21.8196 17.8079C21.7626 18.7459 21.3986 19.7029 20.8456 20.3689C20.0756 21.2969 19.0946 21.7309 17.7606 21.7339C17.1416 21.7349 14.5836 21.7359 12.0246 21.7359C9.4666 21.7359 6.9076 21.7349 6.2896 21.7339C4.9546 21.7309 3.9736 21.2969 3.2036 20.3679C2.6516 19.7029 2.2866 18.7459 2.2306 17.8079C2.20754 17.4277 2.13173 16.4502 2.08816 15.8884C2.06939 15.6464 2.0566 15.4815 2.0566 15.4749C2.0566 15.0619 2.3916 14.7269 2.8046 14.7269C3.1976 14.7269 3.5106 15.0329 3.5406 15.4169C3.5406 15.4169 3.6946 17.1659 3.7276 17.7179C3.7646 18.3289 4.0126 18.9939 4.3586 19.4099C4.8486 20.0009 5.3906 20.2319 6.2916 20.2339C7.5276 20.2359 16.5206 20.2359 17.7576 20.2339C18.6596 20.2319 19.2016 20.0009 19.6906 19.4109C20.0376 18.9939 20.2856 18.3289 20.3226 17.7179C20.3546 17.1659 20.5086 15.4169 20.5086 15.4169Z'/></g></svg>
<span class='name' itemprop='name'>Kerjasama</span>
<svg class='icon name' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
</label>
<ul class='sub-first'>
<li itemprop='name'><a href='#' itemprop='url'>Content Placement</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Pasang Iklan</a></li>
<li itemprop='name'><a href='https://www.cybertips.my.id/2020/11/Guest%20Post%20Gratis.html' itemprop='url'>Guest Post</a></li>
<li itemprop='name'><a href='/p/partner-blog.html' itemprop='url'>Partners</a></li>
</ul>
</li>
Silahkan Edit Teks Yang Berwarna Sama Seperti Teks Ini

lalu tambahkan juga skrip dibawah ini bila perlu


  <li class='submenu break'>
<input class='sub-menu hidden' id='offsub-menu3' name='dropdown-menu' type='checkbox'/>
<label class='link' for='offsub-menu3'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M17,31H15a3,3,0,0,1-3-2.64,12.68,12.68,0,0,1-1.95-.8,3,3,0,0,1-4-.25L4.69,25.9a3,3,0,0,1-.25-4A12.68,12.68,0,0,1,3.64,20,3,3,0,0,1,1,17V15a3,3,0,0,1,2.64-3,12.68,12.68,0,0,1,.8-1.95,3,3,0,0,1,.25-4L6.1,4.69a3,3,0,0,1,4-.25A12.68,12.68,0,0,1,12,3.64,3,3,0,0,1,15,1h2a3,3,0,0,1,3,2.64,12.68,12.68,0,0,1,1.95.8,3,3,0,0,1,4,.25L27.31,6.1a3,3,0,0,1,.25,4,12.68,12.68,0,0,1,.8,1.95A3,3,0,0,1,31,15v2a3,3,0,0,1-2.64,3,12.68,12.68,0,0,1-.8,1.95,3,3,0,0,1-.25,4L25.9,27.31a3,3,0,0,1-4,.25,12.68,12.68,0,0,1-1.95.8A3,3,0,0,1,17,31ZM9.91,25.33a.94.94,0,0,1,.51.14,11,11,0,0,0,2.83,1.17,1,1,0,0,1,.75,1V28a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-.39a1,1,0,0,1,.75-1,11,11,0,0,0,2.83-1.17,1,1,0,0,1,1.21.15l.28.28a1,1,0,0,0,1.42,0l1.41-1.41a1,1,0,0,0,0-1.42l-.28-.28a1,1,0,0,1-.15-1.21,11,11,0,0,0,1.17-2.83,1,1,0,0,1,1-.75H28a1,1,0,0,0,1-1V15a1,1,0,0,0-1-1h-.39a1,1,0,0,1-1-.75,11,11,0,0,0-1.17-2.83,1,1,0,0,1,.15-1.21l.28-.28a1,1,0,0,0,0-1.42L24.49,6.1a1,1,0,0,0-1.42,0l-.28.28a1,1,0,0,1-1.21.15,11,11,0,0,0-2.83-1.17,1,1,0,0,1-.75-1V4a1,1,0,0,0-1-1H15a1,1,0,0,0-1,1v.39a1,1,0,0,1-.75,1,11,11,0,0,0-2.83,1.17,1,1,0,0,1-1.21-.15L8.93,6.1a1,1,0,0,0-1.42,0L6.1,7.51a1,1,0,0,0,0,1.42l.28.28a1,1,0,0,1,.15,1.21,11,11,0,0,0-1.17,2.83,1,1,0,0,1-1,.75H4a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1h.39a1,1,0,0,1,1,.75,11,11,0,0,0,1.17,2.83,1,1,0,0,1-.15,1.21l-.28.28a1,1,0,0,0,0,1.42L7.51,25.9a1,1,0,0,0,1.42,0l.28-.28A1,1,0,0,1,9.91,25.33Z'/><path d='M16,23a7,7,0,1,1,7-7A7,7,0,0,1,16,23Zm0-12a5,5,0,1,0,5,5A5,5,0,0,0,16,11Z'/></g></svg>
<span class='name' itemprop='name'>Tools</span>
<svg class='icon name' viewBox='0 0 512 512'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z'/></svg>
</label>
<ul class='sub-first'>
<li itemprop='name'><a href='https://www.cybertips.my.id/p/tool-css-minifier.html?m=1' itemprop='url'>CSS Minifier</a></li>
<li itemprop='name'><a href='https://www.cybertips.my.id/p/parse-html.html' itemprop='url'>HTML Parse</a></li>
<li itemprop='name'><a href='https://www.cybertips.my.id/p/word-counter.html' itemprop='url'>Word Counter</a></li>
<li itemprop='name'><a href='https://www.cybertips.my.id/p/tool-css-minifier.html' itemprop='url'>Color Picker</a></li>
</ul>
</li>

Silahkan Pilih Diantaranya, apabila ingin menambahkan ketiga skrip ini juga tidak masalah



<li class='break'>
<a class='link' href='https://paypal.me/xyrusjr' itemprop='url' rel='nofollow noreferrer noopener' target='_blank'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
<span class='name' itemprop='name'>Donate with Paypal</span>
</a>
</li>

Berikut Adalah Cara Menambahkan Icon Navbar Di Template Median Tech Ui
Ingat !!! Bila ada kekeliruan Berkomentar lah agar saya tau apa yang kalian alami saat mengikuti tutorial kali ini.

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post