Creating stylish About Me widgets for blogger

This time I will share the script to create the About Me widget like my website.  This widget is not included in the  download package, so...

This time I will share the script to create the About Me widget like my website. This widget is not included in the  download package, so there are some who could ask directly.To make it easier, I will give the tutorial as well as some customizations that can be done.

WIDGET ABOUT ME 

Creating  About Me widgets 

To create a widget about me , all friends have to do is go to dashboard Blogspot and choose Layout menu. Click Add a Gadget and select the HTML / Java script type. Fill the title with the desired title, and content with the script below:

<img alt = "sahil balgotra" title = "sahil balgotra" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLECaVIPv5p5n2jK7ZCxMyd8IHHN1g1Vs_or1xk_jJro819QvHN86kLQRN6FUwpFiX9boSgZNyhJcbeY9JwGmN9mJv5Z_zfU0AmzjvEn2oppbA_Rw33sU3YH6gzx9Tk9Lv_V_ADnBQCwvW/s1600/IMG_20170314_125930.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 / seo expert based in jammu, India. I have a passion for web design and love to create a simple one. 

<div class = "clear">

<a title="facebook" target="_blank" href=" https://m.facebook.com/gopi.sharma.9400?ref=bookmarks "> <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>
 <a target="_blank" href="https://plus.google.com/105681417030365765066">  <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 target="_blank" href="https://www.instagram.com/sahilbalgotra123/?hl=en"> <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></div></span>

Edit the yellow section with the identity of your own friends. Replace the blue link with the URL of the photo you want to show. Do not forget to replace the pink link with the appropriate social media URL.

If friends want to add or change social media links, some additional icons I have prepared.

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

title="reddit" <a 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>

• Click to share via Google+ (Opens in a new window)
• 25Click to share on Facebook (Opening in a new window)25
• Click to share on Twitter (Opens in a new window)
• Click to share in WhatsApp (Opens in a new window)
• Click to share in Telegram (Opens in a new window)