Bertemu lagi dengan admin kali ini akan membuatkan tutorial meletakan sub menu icon yang menarik seperti tampilan yang berbeda. ya seperti codeweb.my.idmisalnya hehe. dari bebebrapa sobat tentunya pengen memiliki sebuah blog yang profesional agar lebih berbeda dari blog yang lain sobat dapat ikuti tutorial kali ini. rumahcodeprangkat akan membahas tentang bagaimana cara membuat sub menu icon yang indah dapat dilihat contoh menu navbar icon svg dibawah ini ya sob.
 |
| Gambar tampilan icon svg navbar |
Sudah melihat hasilnya jika tertarik dengan tutorial kali ini kita lanjut yang pertama masuk ke dashboard blogger nya terus cari
- Pilih tema
- klik tanda titik diseblah tulisan tema
- Edit html
- Tips (Gunakan CTRL+F untuk mempermudah pencarian. ketikan di pencarian seperti ini <!--[ Standar menu ]--> atau ketik navbar dan sesuaikan dengan template blogger yang sobat miliki dan paste code dibawah home
<!--[ Dropdown style 1 ]-->
<li class='drp br'>
<input class='drpI hidden' id='drpDwn-5' name='drpDwn' type='checkbox'/>
<label class='a' for='drpDwn-5'>
<!--[ Icon ]-->
<b:include name='folder-icon'/>
<!--[ Title navigation ]-->
<span class='n' title='Tools'>Tools</span>
<b:include name='arow-down-icon'/>
</label>
<ul>
<!--[ Change attribute href='#' to add url ]-->
<!--[ Change attribute href='#' to add url ]-->
<li itemprop='name'><a href='https://rumahcodeperangkat.blogspot.com/p/parse-code.html' itemprop='url'>Converter HTML TO git</a></li>
<li itemprop='name'><a href='https://homindek.github.io/profolio/live.html' itemprop='url'>Live Editor HTML,CSS,JS</a></li>
</ul>
</li>
Dan pada code diatas sesuaikan id <!--[ Folder icon]-->
<b:includable id='folder-icon'>
Dan icon folder yang saya berikan warna hijau sama kan nama iconya agar dapat memanggilnya .
Hasil pencarian sub menu
letakan code berikut dibawah </b:includable> sesudahnya atau dibawah icon sosial media untuk memanggil fungsi icon folder.
- icon folder
<b:includable id='folder-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
2. icon download
<!--[ Download icon ]-->
<b:includable id='download-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line class='svgC' x1='9.8791' x2='9.8791' y1='12.791' y2='0.75'/><polyline class='svgC' points='12.7951 9.8642 9.8791 12.7922 6.9631 9.8642'/><path d='M14.3703,5.2587 C17.9493,5.5887 19.2503,6.9287 19.2503,12.2587 C19.2503,19.3587 16.9393,19.3587 10.0003,19.3587 C3.0593,19.3587 0.7503,19.3587 0.7503,12.2587 C0.7503,6.9287 2.0503,5.5887 5.6303,5.2587'/></g></svg>
</b:includable>
3. icon lock untuk privacy plicy
<!--[ Lock icon ]-->
<b:includable id='lock-icon'><svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><pathd='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'/><line class='svgC' x1='8.4103' x2='8.4103' y1='12.1562' y2='14.3772'/><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'/></g></svg>
</b:includable>
4. Shield done icon
<!--[ Shield done icon ]-->
<b:includable id='shield-done-icon'><svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline class='svgC' points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg>
</b:includable>
Dibawah ini ada gambar untuk penempatan code diatas dapat dilihat pada gambar dibawah.
 |
Gambar penempatan code icon diatas
|
klik demo untuk melihat hasil dari code diatas
Muncul dengan fitur premium atau tampilan ui dan icon yang menarik untuk digunakan , yang berarti Saya harap kalian menyukai template blogger premium tahun 2023. jika tertarik download templatate diatas .Umpan balik Anda yang berharga sangat disambut, jadi tolong beri saya umpan balik yang berharga di bagian komentar di bawah untuk tutorial cara menambahkan icon menu yang menarik dan setiap kemungkinan perbaikan. Ikuti situs ini untuk menjadi yang pertama tahu tentang tema baru, daftar baru Template Blogger Teratas, dan konten bermanfaat lainnya.
Mengirimkan komentar pada sebuah postingan di media sosial atau situs web dapat menjadi cara yang efektif untuk berinteraksi dengan orang lain dan berbagi pandangan atau informasi. Namun, perlu diingat bahwa komentar yang tidak tepat atau tidak pantas dapat memberikan dampak buruk pada diri sendiri maupun orang lain.
Berikut adalah beberapa peringatan yang perlu diperhatikan saat mengirimkan komentar di postingan:
Hindari berkomentar dengan kata-kata yang kasar, merendahkan, atau mengandung unsur kebencian, pelecehan, atau diskriminatif.
Periksa kembali kesalahan ejaan atau tata bahasa dalam komentar yang dikirimkan, sehingga pesan yang ingin disampaikan dapat dipahami dengan baik oleh pembaca.
Jangan mengirimkan komentar yang tidak relevan atau tidak berhubungan dengan topik yang dibahas pada postingan.
Hindari mengirimkan informasi pribadi atau rahasia dalam komentar yang dikirimkan, karena hal ini dapat membahayakan privasi dan keamanan diri sendiri maupun orang lain.
Dengan memperhatikan beberapa peringatan di atas, kita dapat mengirimkan komentar yang tepat dan memberikan kontribusi positif pada diskusi atau interaksi di media sosial atau situs web.
