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

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://medium.com/@rifkidotid"><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://getpocket.com/@rifkidotid"><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>