Beranda
Blogger
Media Sosial

Cara Membuat Linktree di Blogger Menggunakan HTML & CSS

Cara Membuat Linktree di Website sendiri menggunakan HTML & CSS di platform Blogger.
Linktree Blogger

Cara Membuat Linktree di Blogger - Artikel kali ini kita akan berbagi tutorial cara membuat linktree di platform Blogger menggunakan HTML & CSS dengan mudah.

Linktree sendiri merupakan halaman landing page yang berisi beragam link di dalam nya. Fungsinya untuk keperluan promosi atau berbagi beragam link akun media sosial.

Lalu seperti apa cara membuatnya? Kamu bisa simak langkah-langkah di bawah ini untuk membuat linktree di blogger dengan HTML & CSS.

Table of Contents

Apa itu Linktree?

Linktree merupakan layanan atau tools yang bisa digunakan untuk membuat landing page untuk menyematkan link penting dengan lebih sederhana.

Fungsinya untuk keperluan promosi atau berbagi beragam tautan akun media sosial agar lebih mudah hanya dalam satu tautan saja.

Cara Membuat Linktree

Layanan linktree bisa digunakan secara gratis selain itu terdapat layanan premium dengan fitur-fitur yang lebih lengkap.

Namun bagaimana jika kita membuat sendiri linktree di blog pribadi? Tentu bisa. Selain mudah mengoptimasi kita bisa melakukan desain sesuai keinginan.

Membuat Linktree di Blogger Dengan HTML & CSS

  1. Buka halaman draft.blogger.com
  2. Buat Blog Baru, Jika sudah lanjut ke tahap berikutnya
  3. Lanjut Klik Tema > Edit HTML
  4. Hapus semua kode template tersebut dan
  5. Copy lalu Paste kode template Linktree di bawah ini
  6. Jika sudah Klik Simpan
<?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>Inputekno.Com | linktree</title>
    <meta content='Inputekno.Com | linktree' name='title'/>
    <meta content='InpuTekno website yang mengulas dunia teknologi dan informasi gadget, tips dan trik, tutorial, Media Sosial dan Blogger.' name='description'/>
    <meta content='Inputekno.Com, Inputekno, 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-inputekno/main/favicon.ico' rel='icon'/>
    <link href='https://cdn.statically.io/gh/rulnoveid/icon-inputekno/main/apple-icon.png' rel='apple-touch-icon'/>
    <!--bootstrap-->
    <link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/[email protected]/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:[email protected]&display=swap');@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&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>InpuTekno.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.inputekno.com/'>
            <div class='bottom-text'>Made with &#10084;&#65039; By <b>InpuTekno</b> | Build on <b>Blogger</b></div>
        </a>
    </footer>    
</body>
<b:section id='fixelements' showaddelement='no'/>
</html>

Lakukan perubahan data sesuai dengan keterangan di bawah

  • Ganti url_is_here dengan URL media sosial kamu
  • Sesuaikan teks yang di tandai
  • Ganti LINK-FOTO-PROFILE dengan URL Profile kamu

Seting Template Linktree

Tambahkan kode berikut di dalam tag <div id='linksbutton'> untuk menambahkan daftar link 
<a class='links , hover' href='url_is_here' target='_blank'><i class='fab fa-twitter , links-in'/><b>Twitter</b></a>
  • Ganti <i class='fab fa-twitter , links-in'/>< dengan kode fontawesome
  • Ganti url_is_here dengan URL media sosial kamu
  • Sesuaikan teks yang di tandai

Demo Tampilan

View Demo

Penutup

Nah itu tadi cara membuat linktree di platform Blogger menggunakan HTML & CSS. Jika artikel ini bermanfaat bisa kamu share dan rekomendasikan ke teman-teman yang membutuhkan.
#Keep Reading and Keep Working
Gabung dalam percakapan