Add this widget to Notion
- Follow this tutorial to create a GitHub repository.
- Copy the code here into a new GitHub file.
- Start editing the file to make it yours!
- Remove the icons you don’t want. by deleting the code between the “start” and “End” sections. For example, if you don’t want the Reddit icon, then delete this part from your code.
<!-- Start reddit Icon -->
<div id="reddit" onclick="navigate(this.id)" class="social">
<span class="icon reddit"><i class="fab fa-reddit"></i></span>
</div>
<!-- End reddit Icon -->2. Add Your own links in this part of the code. (Ignore the icons you’ve removed earlier)
if (id === "blog")
window.open("https://blog.shorouk.dev", '_blank').focus(); //Add the url to your blog
else if (id === "email") {
window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
}
else if (id === "facebook") {
window.open("https://facebook.com/", '_blank').focus(); //Add the url to your facebook page or account
}
else if (id === "instagram") {
window.open("instagram.com", '_blank').focus(); //Add the url to your instagram account
}
else if (id === "linkedin") {
window.open("https://www.linkedin.com/", '_blank').focus(); //Add the url to your pinterest account
}
else if (id === "twitter") {
window.open("https://twitter.com/", '_blank').focus(); //Add the url to your pinterest account
}
else if (id === "reddit") {
window.open("https://www.reddit.com/", '_blank').focus(); //Add the url to your reddit account
}
else if (id === "tiktok") {
window.open("https://www.tiktok.com/", '_blank').focus(); //Add the url to your tiktok account
}
else if (id === "youtube") {
window.open("https://www.youtube.com/", '_blank').focus(); //Add the url to your youtube account
}
else if (id === "pinterest") {
window.open("https://www.pinterest.com/", '_blank').focus(); //Add the url to your pinterest account
}
else if (id === "telegram") {
window.open("https://web.telegram.org/", '_blank').focus(); //Add the url to your telegram account
}More Customization
Want the links to open on the same page instead of a new tab?
In your file, find and replace all “_blank” with “_parent”
for example
else if (id === "email") {
window.open("mailto:someone@yoursite.com", '_blank').focus(); //Add your email after "mailto:""
}becomes…
else if (id === "email") {
window.open("mailto:someone@yoursite.com", '_parent').focus(); //Add your email after "mailto:""
}Change the Icons’ colour & Size
Search for this part of the code.
.icon {
/* Change the icon size here */
font-size: 2em;
/* Change the icons colours here*/
color: #7a7a7a
}- To change the colour pick a different colour from Here. Copy its HEX code. and replace the default #7a7a7a with your new colour code.
- To change the size of the icons increase or decrease the default 2em