Home
blogger widgets
Tips and tricks

How to Create a Linktree on Blogger Using HTML & CSS

How to Create a Linktree on Blogger - In this article, we will share a tutorial on how to easily create a linktree on the Blogger platform using HTML
How to Create a Linktree on Blogger Using HTML & CSS
How to Create a Linktree on Blogger Using HTML & CSS


How to Create a Linktree on Blogger - In this article, we will share a tutorial on how to easily create a linktree on the Blogger platform using HTML & CSS.

Linktree itself is a landing page page that contains various links in it. Its function is for promotional purposes or sharing various social media account links.

So how do you make it? You can see the steps below to create a linktree on blogger with HTML & CSS.

What is Linktree?

Linktree is a service or tool that can be used to create landing pages to embed important links more simply.

Its function is for promotional purposes or sharing various social media account links to make it easier with just one link.

How to Create a Linktree

The linktree service can be used free of charge besides that there are premium services with more complete features.

But what if we make our own linktree on a personal blog? Certainly can. Besides being easy to optimize, we can do the design as you wish.

Creating a Linktree on Blogger With HTML & CSS

  1. Go to pagedraft.blogger.com
  2. Create a New Blog, If you have proceeded to the next stage
  3. Next Click Themes > Edit HTML
  4. Remove all the template code and
  5. Copy then Paste the Linktree template code below
  6. If you have Click Save
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<!--[ <head> Open ]-->
&lt;head&gt;
    <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <!--Meta Data-->
    <title>MARWAT-TECH.Com | linktree</title>
    <meta content='MARWAT-TECH.Com | linktree' name='title'/>
    <meta content=' MARWAT-TECH is a website that reviews the world of technology and information gadgets, tips and tricks, tutorials, social media and bloggers. ' name='description'/>
    <meta content='MARWAT-TECH.Com, MARWAT-TECH, Tutorial Game, Save Data, Gadget, Programmer, Trick Hacking, Tips Hacking, Social Media, Google Adsense, Tips Game, Blogger' name='keywords'/>
    <meta content='index, follow' name='robots'/>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
    <meta content='English' name='language'/>
    <!-- google search console -->
    <meta name='google-site-verification' content='#'/>
    <!-- Favicons -->
    <link href='https://cdn.statically.io/gh/rulnoveid/icon-MARWAT-TECH/main/favicon.ico' rel='icon'/>
    <link href='https://cdn.statically.io/gh/rulnoveid/icon-MARWAT-TECH/main/apple-icon.png' rel='apple-touch-icon'/>
    <!--bootstrap-->
    <link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css' integrity='sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2' rel='stylesheet'/>
    <!--fontawesome-->
    <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' integrity='sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp' rel='stylesheet'/>

<style id='page-skin-1' type='text/css'><!--
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Dosis:wght@100&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@10&display=swap');body{background:linear-gradient(30deg,#e91e63,#00bcd4,#ffeb3b,#8a3ab9);background-size:450% 450%;animation:gradient 10s ease infinite;padding-top:30px}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.bg{background:#19191B;border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(12.1px);-webkit-backdrop-filter:blur(12.1px)}
.profile-picture{display:block;margin-left:auto;margin-right:auto;height:auto;max-width:100px;border-radius:50%}
.profile-name{text-align:center;padding:10px;font-family:sans-serif;font-weight:700;color:#FEFFFE;font-size:20px}
.profile-about{text-align:center;padding:2px;font-family:Dosis,sans-serif;color:#FEFFFE;font-size:15px;letter-spacing:2px}
.links{text-align:center;margin-top:20px;margin-left:auto;margin-right:auto;padding:15px;border:.5px solid #fff;border-width:1px;display:block;border-radius:15px;font-family:sans-serif;position:relative;font-size:17px;width:680px;max-width:95%;transition:all .3s ease-in-out;background-color:rgba(255,255,255,0.0 );color:#fff}
.links-in{padding:5px;border:.5px solid #ffffff00;border-width:1px;width:30px;display:block;border-radius:40px;left:20px;position:absolute;font-size:20px}
.hover{text-decoration:none;color:#FEFFFE;transition:all .3s;background:#27262B;background-color:rgba(255,255,255,0.0 )}
.hover:hover{text-decoration:none;background-color:#fff;color:#000;border:solid #fff 0.5px;transition:all .2s;transform:scale(1.03)}
.bottom-text{text-decoration:none;text-align:center;margin-top:30px;margin-bottom:10px;font-size:12px;color:#FEFFFE;font-family:'Prodcut Sans','Product Sans',sans-serif}
.link-hide{text-decoration:none}
.link-hide:hover{text-decoration:none}
@media (max-width:548px){.profile-about{text-align:center;padding:2px;font-family:Dosis,sans-serif;color:#FEFFFE;font-size:15px;letter-spacing:1px}}
.links-footer{padding:4px;border:.5px solid #FEFFFE;border-width:1px;width:40px;display:inline-block;border-radius:30px;font-size:20px;text-align:center;margin:10px;margin-top:50px;color:#000;transition:color 1s;transition:all .3s;background:#FEFFFE}
.links-footer:hover{color:#000;background:#FEFFFE;transition:all .3s}
.space,.space2{padding-top:0}
.drag{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;-user-drag:none}
#linksbutton{max-width:580px;width:auto;display:block;margin:27px auto}
#title{color:#fff;font-size:14px;font-weight:600;line-height:1.25;display:block;font-family:'Prodcut Sans','Product Sans',sans-serif;width:100%;margin-top:50px;text-align:center;text-decoration:none}
.gears{width:auto;text-align:center;margin:10px auto;width:680px;max-width:95%}
.gear{display:inline-block;background-color:rgba(255,255,255,0.0 );color:#fff;font-family:'Prodcut Sans','Product Sans',sans-serif;text-align:center;margin-bottom:10px;padding:12px;text-decoration:none;font-size:13px;font-weight:bold;transition:all .25s cubic-bezier(.08,.59,.29,.99);border:solid #fff 0.5px;border-radius:15px}
.gear:hover{text-decoration:none;background-color:#fff;color:#000;border:solid #fff 0.5px;transition:all .2s;transform:scale(1.03)}
--></style>
  <b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
      
&lt;!--<head/>
<body class='bg'>
    <div class='space'/>
    <!-- Profile picture-->
    <img alt='profile picture' class='profile-picture' src='LINK-FOTO-PROFILE'/>

    <!-- Profile name-->
    <div class='profile-name'><b>MARWAT-TECH.Com <img alt='verified' class='drag' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOmugI2_u7-Ry6YmjtXrouH3GXmXNoC5u97DBsJ8zONT2Ba2HaBcxoX4Rt2t6IPJp2z8qpxus3ejIuB_P00CaPres6EF4vKMvDCbA2KI7NZycCAOq7Xr2clMCCLKxC3AsYNqHUlZg3zw_RwP2owQEB7VSbcO_gjpoFdkxS2_gaAHpk6lIJ_BbDrTe8/s16/verified-badge-16.png' width='16'/></b></div> 

    <!-- Profile about-->
    <div class='profile-about'><b>Keep Reading and Keep Working!</b></div>
  
    <div id='linksbutton'>
    <!-- Links-->
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fas fa-link , links-in'/><b>Website</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-linkedin , links-in'/><b>LinkedIn</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-github , links-in'/><b>GitHub</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-twitter , links-in'/><b>Twitter</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-imdb , links-in'/><b>IMDb</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-google-play , links-in'/><b>Play Store</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-youtube , links-in'/><b>Youtube</b></a>
    <a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-facebook , links-in'/><b>Facebook</b></a>
    </div>
    
    <div class='space2'/> 
    <footer>
        <!--bottom text-->
        <a class='link-hide' href='https://www.MARWAT-TECH.com/'>
            <div class='bottom-text'>Made with &#10084;&#65039; By <b>MARWAT-TECH</b> | Build on <b>Blogger</b></div>
        </a>
    </footer>    
</body>
<b:section id='fixelements' showaddelement='no'/>
</html>

Make changes to the data according to the description below

  • Replace url_is_herewith your social media URL
  • Adjust the marked text
  • Replace LINK-FOTO-PROFILEwith your Profile URL

Seting Template Linktree

Add the following code inside the tag <div id='linksbutton'>to add a list of links 
<a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-twitter , links-in'/><b>Twitter</b></a>
  • Replace <i class='fab fa-twitter , links-in'/><with fontawesome code
  • Replace url_is_herewith your social media URL
  • Adjust the marked text

Display Demos

View Demo

Closing

So, that was how to create a linktree on the Blogger platform using HTML & CSS . If this article is useful, you can share and recommend it to friends who need it.


Post a Comment