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="fill reddit">
<span class="icon"><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’ dark grey background colour
Search for this part of the code.
.fill {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
outline: 0;
cursor: pointer;
position: relative;
margin: 5px;
background-color: #4b4b4b; /* change the background colour here */
}To change the colour pick a different colour from Here. Copy its HEX code. and replace the default #4b4b4b with your new colour co