![]() |
Cara Membuat Linktree di Blogger - Artikel kali ini kita akan berbagi tutorial cara membuat linktree di platform Blogger menggunakan HTML & CSS dengan mudah.
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.Cara Membuat Linktree
Layanan linktree bisa digunakan secara gratis selain itu terdapat layanan premium dengan fitur-fitur yang lebih lengkap.Membuat Linktree di Blogger Dengan HTML & CSS
- Buka halaman
draft.blogger.com
- Buat Blog Baru, Jika sudah lanjut ke tahap berikutnya
- Lanjut Klik Tema > Edit HTML
- Hapus semua kode template tersebut dan
- Copy lalu Paste kode template Linktree di bawah ini
- 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 ]--> <head> <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> <!--<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 ❤️ 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