Membuat Widget About Me Ala Materispot

Membuat Widget About Me Ala Materispot – Sebelumnya, saya ingin mengucapkan banyak terimakasih atas dukungannya untuk Materispot. Terutama teman-teman yang bersedia memberikan donasi diantara para pecinta gratisan yang dengan sengaja menghapus post share nya setelah berhasil mendownload (mohon bersabar ini ujian 😭) YOU’RE DA REAL MVP!

Kali ini saya akan membagikan script untuk membuat widget About Me ala Materispot. Widget ini tidak disertakan dalam paket download Materispot, jadi ada beberapa yang sempat meminta langsung. Untuk mempermudah, saya akan memberikan tutorialnya sekaligus beberapa kustomisasi yang bisa dilakukan.

Membuat Widget About Me Ala Materispot
Widget About Me Ala Materispot

Membuat Widget About Me Ala Materispot

Untuk membuat widget about me ala Materispot, yang harus teman-teman lakukan adalah masuk ke dashboar Blogspot dan pilih menu Layout. Klik Add a Gadget dan pilih tipe HTML/Javascript. Isi title dengan judul yang di inginkan, dan content dengan script dibawah:

<img alt="Rifki.id" title="Rifki.id" src="https://4.bp.blogspot.com/-OOsEjso4T1I/WAgzVe9kzuI/AAAAAAAAWeQ/77fv5_3reqkpUp3ZEeI4HCBZLu2_maomACLcB/s1600/rifkidotid.jpg" width="75" height="75" style="float:right;margin:0 0 10px 15px;border-radius:50%;overflow:hidden" />
<span style="font-size:0.9em">I'm a web designer / developer based in Ponorogo, Indonesia. I have a passion for web design and love to create a simple one.</span>

<div class="clear"></div>

<a title="themeforest" target="_blank" href="https://themeforest.net/user/rifkidotid"><img alt="envato" title="themeforest" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/envato.svg" /></a>
<a title="behance" target="_blank" href="https://www.behance.net/rifkidotid"><img alt="behance" title="behance" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/behance.svg" /></a>
<a title="dribbble" target="_blank" href="https://dribbble.com/rifkidotid"><img alt="dribbble" title="dribbble" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/dribbble.svg" /></a>
<a title="twitter" target="_blank" href="https://twitter.com/rifkidotid"><img alt="twitter" title="twitter" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/twitter.svg" /></a>
<a title="google" target="_blank" href="https://plus.google.com/+rifkidotid"><img alt="google" title="google" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/google.svg" /></a>
<a title="instagram" target="_blank" href="https://instagram.com/rifkidotid"><img alt="instagram" title="instagram" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/instagram.svg" /></a>

<div style="clear:both"></div>

Edit bagian berwarna kuning dengan identitas teman-teman sendiri. Ganti link berwarna biru dengan URL foto yang ingin ditampilkan. Jangan lupa juga mengganti link berwarna pink dengan URL sosial media yang sesuai.

Jika teman-teman ingin menambah atau mengganti link sosial media, beberapa ikon tambahan sudah saya siapkan.

Facebook
<a title="facebook" target="_blank" href="https://facebook.com/rifkidotid"><img alt="facebook" title="facebook" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/facebook.svg" /></a>
Foursquare
<a title="foursquare" target="_blank" href="https://foursquare.com/rifkidotid"><img alt="foursquare" title="foursquare" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/foursquare.svg" /></a>
Github
<a title="github" target="_blank" href="https://github.com/rifkidotid"><img alt="github" title="github" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/github.svg" /></a>
Medium
<a title="medium" target="_blank" href="https:[email protected]"><img alt="medium" title="medium" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/medium.svg" /></a>
Facebook Messenger
<a title="messenger" target="_blank" href="https://m.me/rifkidotid"><img alt="messenger" title="messenger" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/messenger.svg" /></a>
Pocket
<a title="pocket" target="_blank" href="https:[email protected]"><img alt="pocket" title="pocket" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/pocket.svg" /></a>
Reddit
<a title="reddit" target="_blank" href="https://www.reddit.com/user/rifkidotid/"><img alt="reddit" title="reddit" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/reddit.svg" /></a>
Soundcloud
<a title="soundcloud" target="_blank" href="https://soundcloud.com/rifkidotid/"><img alt="soundcloud" title="soundcloud" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/soundcloud.svg" /></a>
Tumblr
<a title="tumblr" target="_blank" href="https://rifkirizkiafuadi.tumblr.com"><img alt="tumblr" title="tumblr" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/tumblr.svg" /></a>
WordPress
<a title="wordpress" target="_blank" href="https://riffrizz.wordpress.com/"><img alt="wordpress" title="wordpress" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/wordpress.svg" /></a>
YouTube
<a title="youtube" target="_blank" href="https://youtube.com/rifkidotid/"><img alt="youtube" title="youtube" width="30" height="30" style="float:left;margin:15px 15px 0 0" src="https://rifki.id/files/youtube.svg" /></a>

Tulisan Terkait

Komentar untuk “Membuat Widget About Me Ala Materispot”

  1. Njajal ah…sapa tau cocok di blogku

  2. gan, yang tulisan biru itu berarti kita harus upload foto dulu ke blogspot ya?

    Kalau ngambil dari luar, gimana setingannya?

  3. Wah saya pelakunya kang yah..?? Menghpus link share pas saya promosikan di blog.. 🙁

  4. Keren, sudah saya coba kak.. 🙂

  5. Dicka T

    Makasih mas rifki share dan ilmunya , saya mau belajar ngeblog mas.. Semoga rejekinya makin ngalir ya mas.. Berkah dan semangat terus mas berbaginya.

    • Aammiinn… thanks doanya gan 🙂 seneng juga bisa berbagi ilmu dengan sesama (y)

  6. gan cara tambah tombol bagikan di template materispot gimna gan, mohon responnya

  7. nah ini widget yg bagus.. klo ubah bentuk fotonya jadi kotak bisa ngga?

  8. Wah sabar ya mas tetp berkarya saja, btw template blogspotnya rapi udh pro kayanya.

    Sekalian tanya bedanya

    Apa mas?

Tinggalkan Balasan