Cara Pasang Logo Home Blog di Header Linkmagz

"tutorial singkat cara pasang icon home blog di header template linkmagz mas sugeng, catatandroid bagikan karena belum ada yang bahas hal ini. cekidot!"

YZG 30 August 4 Comment

Cara menambahkan icon home di menu header melayang template Linkmagz mas sugeng, hayo siapa yang memakain template terpopular keluaran mas sugeng yang satu ini?

Tentunya bagi kalangan blogger baik lokal maupun interlokal (Internasional kamsudnya) pasti tak asing lagi dengan template linkmagz.

Linkmagz merupakan suksesor dari template Viomagz, walaupun sebenarnya setiap template buatan mas sugeng selalu saja melegenda dan menarik hati para penggemar setianya.

Bukan hanya menarik, performa, kecepatan, kelengkapan, dan kesempurnaan skor menjadi hal penting yang selalu mas sugeng berikan di tiap hasil karyanya. Thanks to him, hats off!

Icon Blog ke Home di Sticky Header

Oke back to topic, salah satu sedikit yang dirasa kurang lengkap dalam template yang satu ini adalah ketiadaannya icon blog yang berfungsi juga sebagai tombol ke home pada menu navigasi header.

Saat kita scroll ke bawah pada tampilan mobile, bar sticky header di atas layar hanya terdapat tombol(icon) menu, switch dark mode, dan tombol pencarian.

Sehingga jika kita ingin menuju beranda situs/blog kita mesti mengklik tulisan beranda pada breadcrumbs, atau membuka terlebih dahulu menu navigasi untuk kemudian memilih beranda.

Kurang afdol rasanya jika tidak ada logo blog kita yang langsung menuju tampilan awal/home di floating header tersebut. Oke yuk disimak tutorial dibawah ini:

Tutorial pasang icon ke home di Menu Header Template Linkmagz

DEMO? kurang lebih seperti icon header diatas pada situs catatandroid ini.

Login ke dashboard blogger lalu masuk ke menu Template
Search
```
<div class='nav-secondary'>
```
Perhatikan tak jauh dibawahnya terdapat baris pemanggil tombol menu seperti berikut
```
<button aria-label='menu' class='navmenu-button'>
```

Copas kode ini di bawah </button>

<a expr:href='data:blog.homepageUrl'> <img alt='icon blog catatandroid' src='URL ICON BLOG KALIAN' style='height:30px;width:30px;margin:0 15px 0 0;vertical-align:middle' title='icon blog catatandroid'/> </a>

Sehingga kurang lebih terlihat seperti berikut ini

<div class='nav-secondary'>
  <b:include name='searchIcon'/>
  <b:include name='darkmodeSwitch'/>
</div>
<button aria-label='menu' class='navmenu-button'>
  <div/>
  <div/>
  <div/>
</button>
<a expr:href='data:blog.homepageUrl'>
  <img alt='icon blog catatandroid' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjWbrNe8sPHfsw16ZncHymtBvZrdtPkfy8LfCJymNg3vqvngIc2l6UtG2en1z69dLFvbbvX6dIHz03A3inWddKxsM7B0D0EjpUt0-NcM9J7eSc9mHbYtO3cvt-zn5kHAV_-KtUz9nctA/s0/catatandroid-icon-logo.webp' style='height:30px;width:30px;margin:0 15px 0 0;vertical-align:middle' title='icon blog catatandroid'/>
</a>
</div>
<b:include name='mobileMenuContainer'/>
</b:includable>
</b:widget>
</b:section>

Simpan template dan silahkan lihat hasilnya

Ganti URL ICON BLOG KALIAN dengan icon image blog kalian contoh:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjWbrNe8sPHfsw16ZncHymtBvZrdtPkfy8LfCJymNg3vqvngIc2l6UtG2en1z69dLFvbbvX6dIHz03A3inWddKxsM7B0D0EjpUt0-NcM9J7eSc9mHbYtO3cvt-zn5kHAV_-KtUz9nctA/s0/catatandroid-icon-logo.webp

Jika ingin hanya nama lain bukan icon silahkan ubah tag <img diatas dengan nama blog sobat, atau tulisan bebas. Bisa juga diganti dengan baris icon svg. Contoh:

<a expr:href='data:blog.homepageUrl'><svg style="width:30px;height:30px" viewBox="0 0 24 24"><path fill="currentColor" d="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z" /></svg></a>

Penutup dan Kesimpulan

Perlu diketahui cara diatas adalah metode menambahkan logo baru pada sticky header navigasi secondary, bukan memindahkan header aslinya.

Demikianlah tutorial singkat cara memasang icon home blog di header template linkmagz mas sugeng, tutorial ini catatandroid bagikan dikarenakan sampai artikel ini ditulis belum ada yang membahas hal ini.

Cara diatas adalah murni hasil trial error catatandroid, Jika ada pertanyaan atau request artikel silahkan tulis di komentar ya! Silahkan copas dengan proper credit backlink. :)
Semoga bermanfaat, Terima kasih dan Selamat Mencoba! CatatanDroid