Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

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.

cara optimasi template LinkMagz
Tentu saja template yang saya gunakan ini asli beli bukan menggunakan bajakan.

apabila belum mempunyai template ini, kamu bisa membelinya disini.

Pengenalan

LinkMagz merupakan template blogger yang dibuat oleh admin sugeng.id, template ini memiliki banyak sekali fitur yang mendukung bagi kamu yang males melakukan optimasi dan ingin mendapatkan kesan 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

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 pilih View SVG, maka akan muncul SVG 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 ke Tema - Edit HTML , dan cari kode berikut ini di dalam template.

#social-button .behance-icon i

Keenam - karena ingin menampilkan icon mata uang maka element style nya akan saya kasih nama "matauang" silahkan salin kode pada tahap keempat yang bagian Sesudah. 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 - pada blogger.com, silahkan klik Tata Letak, dan klik Edit 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 == &quot;item&quot;'>
<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(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' 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(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' 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>

untuk versi video silahkan ditonton pada link youtube berikut ini. https://youtu.be/nuPTTMXChCM

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

Posting Komentar untuk "Optimasi Template LinkMagz Premium - Blogger"