Optimasi Template LinkMagz Premium - Blogger
Halo Kawan yang tidak mau ribet dan cape maupun pusing, karena binggung mikirin untuk cara mempercantik tampilan template yang di beli dan juga cara optimasi nya.
di artikel ini saya akan memberikan update cara mempercantik dan menambah beberapa fitur kedalam template LinkMagz Blogger yang dibuat oleh sugeng.id.
Tentu saja template yang saya gunakan iniasli beli bukan menggunakanbajakan.
apabila belum mempunyai template ini, kamu bisa membelinya disini.
Pengenalan
LinkMagz merupakantemplate blogger yang dibuat oleh adminsugeng.id, template ini memiliki banyak sekali fitur yang mendukung bagi kamu yang males melakukan optimasi dan ingin mendapatkankesan keren, template ini sangatlah cocok.
Beberapa fitur yang tersedia:
- Pastinya SEO Friendly
- Responsive / Mobile Friendly
- Layout versi 3 (bisa show/hide widget melalui tata letak)
- Sudah menggunakan schema markup
- Tombol order via WhatsApp untuk postingan produk dan jasa
- Slider gambar postingan produk dan jasa
- Related Posts di bawah artikel
- Breadcrumbs
- Tombol Share media sosial
- Widget iklan otomatis di tengah artikel
- Menu Navigasi Sticky
- Navigasi halaman dengan mode load more
- Smooth Scroll
- Tombol Back to Top
- Sidebar sticky
- Related posts di tengah artikel
- dll.
Tanpa basa-basi yang panjang, langsung saja kita membuat tutorial dan optimasi untuk template LinkMagz Premium Blogger rasa WordPress.
Optimasi
Icon Media Sosial
Update: 05 September 2022
Cara ini hanya berlaku di template yang dibawah versi 3.0.0
ingin merubah icon selain sosial media? caranya? yuk di liat tutorialnya dibawah ini. contohnya admin ingin menambah icon mata uang, karena ingin di fungsi kan sebagai tempat donasi.
maka yang kita perlukan yaitu kode icon untuk mata uang.
Pertama -Buka situs materialdesignicons.com
Kedua -di pencarian ketikkan "currency" dan pilih icon uang$ maka akan muncul
Ketiga - klik lagi icon</>dan pilihView SVG, maka akan munculSVG Viewer
Keempat - dan salin dari tag <path fill="currentColor" d="M7,15H9C9..............."sampai"......... 7,16.79 7,15Z" /></svg>
dan ubah tanda petik dua menjadi petik satu, seperti dibawah ini.
Sebelum
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z" /> </svg>Sesudah
<path fill='currentColor' d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' /></svg>Kelima - ke blogger.com dan pilih blog kamu, kemudian keTema -Edit HTML , dan cari kode berikut ini di dalam template.
#social-button .behance-icon iKeenam - karena ingin menampilkan icon mata uang maka element style nya akan saya kasih nama "matauang" silahkan salin kode pada tahapkeempat yang bagianSesudah. dan letakkan pada kode dibawah ini.
Sebelum
#social-button .matauang-icon i {background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'> Letakkan kode icon svg pada tahap ke empat bagian sesudah disini "); }Sesudah
#social-button .matauang-icon i {background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path fill='white' d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z'/></svg>"); }letakkan kode css diatas tadi kedalam css template kamu dan simpan.
Ketujuh - padablogger.com, silahkan klikTata Letak, dan klikEdit pada bagian "Kode Icon Media Sosial"dan letakkan kode dibawah ini pada akhir konten.
<a aria-label="matauang-icon" href="https://trakteer.id/mantankode/tip"><span class="social-icon matauang-icon"><i></i></span></a>Jadi yang hanya perlu kamu ubah itu hanya kata "matauang" dan tentu saja svg html yang didapatkan di situs pada tahap satu.
fix image element comment
Karena untuk kata kunci saja agar mudah didapat, saya kasih "fix image element comment". tapi untuk versi panjangnya cara mengatasi ukuran lebar dan tinggi pada foto profil komentar blogger, walaupun sudah mencoba menambah format css di dalam template tidak ada hasil yang sesuai. ini terjadi pada template premium yang saya gunakan.
karena lagi ada waktu senggang, jadi saya mencoba mencari cara agar melewati masalah ini. jujur saja bagi pecinta hijau-hijau hal ini sangat lah mengganggu.
Terutama dapat menggurangi angka skor pada CLS (Cumulative Layout Shift).
Sebelum itu saya ucapkan terima kasih untuk KOMPIAJAIB, karena dengan menggunakan script dari artikelnya saya berhasil mengatasi masalah ini. dengan sedikit perubahan.
Tahap Pertama
Silahkan cari kode dibawah ini dapa template LinkMagz Premium<div class='comments-content'> <data:post.commentHtml/> </div>Tahap Kedua
Silahkan ganti kode pada tahap pertama dengan kode dibawah ini
<b:if cond='data:blog.pageType == "item"'> <style> .buka-komen,.tutup-komen{font-family:inherit;background-color:#11589d;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer}.buka-komen{display:block;margin-bottom:20px}#comments-box{display:none} </style> <div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'><svg style='width:24px;height:24px;vertical-align:-9px;' viewBox='0 0 24 24'> <path d='M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9Z' fill='currentColor'/></svg> <b:switch var='data:blog.locale'><b:case value='id'/>Buka Komentar<b:default/>Open Comments </b:switch></div> <div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'><svg style='width:24px;height:24px;vertical-align:-9px' viewBox='0 0 24 24'><path d='M20 2H4C2.89 2 2 2.89 2 4V16C2 17.11 2.9 18 4 18H8V21C8 21.55 8.45 22 9 22H9.5C9.75 22 10 21.9 10.2 21.71L13.9 18H20C21.1 18 22 17.1 22 16V4C22 2.89 21.1 2 20 2M9.08 15H7V12.91L13.17 6.72L15.24 8.8L9.08 15M16.84 7.2L15.83 8.21L13.76 6.18L14.77 5.16C14.97 4.95 15.31 4.94 15.55 5.16L16.84 6.41C17.05 6.62 17.06 6.96 16.84 7.2Z' fill='currentColor'/></svg> <b:switch var='data:blog.locale'><b:case value='id'/>Tutup Komentar<b:default/>Close Comment </b:switch></div> </b:if> <div id='comments-box'> <div class='comments-content'> <data:post.commentHtml/> </div> </div>Tahap selanjutnya simpan template dan silahkan uji coba lagi dengan tools kesayangan mu.
Penutup
Semoga Tutorial yang saya berikan ini bermanfaat, tutorial ini akan terus di update sesuai permintaan atau apabila admin mantankode ingin.
Referensi
https://www.kompiajaib.com/2018/04/cara-mudah-show-hide-komentar-blogger.html
