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.

Penutup

Semoga Tutorial yang saya berikan ini bermanfaat, tutorial ini akan terus di update sesuai permintaan atau apabila admin mantankode ingin.

Posting Komentar untuk "Optimasi Template LinkMagz Premium - Blogger"