Cara Membuat Link Web HTML Ucapan Ulang Tahun

Buat kalian yang gak pengen ribet membuat ucapan ulang tahun lewat link secara manual ataupun membutuhkan script website html untuk keperluan apapun, bisa langsung download source codenya di indotaxpert aja biar mudah dan tinggal sesuaikan komponenya.

Daftar Isi

Di indotaxpert selain terdapat demo dari 39+ contoh coding html website, kalian juga bisa mendownload script HTML tersebut secara gratis.

Namun pada tutorial kali ini, aku akan ngajakin kalian bikin script HTML ulang tahun buat bestie secara manual dengan memanfaatkan platform Blogger. Selain dapat digunakan secara gratis, di Blogger pun bisa di custom domain sekaligus webnya dapat muncul di Google, hmm keren kan?

Dan tanpa berlama-lama lagi berikut ini merupakan script HTML bucin ulang tahun beserta langkah demi langkah membuatnya.

Cara Membuat Link Web HTML Ucapan Ulang Tahun

Penjelasan cara membuat ucapan ulang tahun lewat link ini gampang banget dipahami bahkan oleh seorang pemula sekalipun karena menggugah gambar pendukung supaya kalian gak bingung. Jadi silakan simak baik-baik ya!

Masuk ke blogger.com untuk membuat buat blog.

Langkah pertama kalian bisa masuk ke blogger.com untuk mulai membuat web/blog yang akan kita jadikan alamat dari ucapanya.

Masukin judul blog/web.

Cara Membuat HTML Ucapan Ulang Tahun di HP

Dibagian ini kalian bisa mengisinya sesuka hati. Judul ini nantinya hanya akan muncul dibagian bawah kartu ucapan aja (pada template ini) dan kalau ditampilkan di Google maka akan jadi judul blognya juga (termasuk ketika di share ke medsos). Jadi sebaiknya kasih nama yang ingin kamu tunjukkan aja seperti nama panggilanmu atau nama asli juga boleh.

Pilih url untuk blog yang mau dibikin.

Cara Membuat Link Web HTML Ucapan Ulang Tahun

Pada langkah ini, kalian bisa membuat alamat ataupun link dari blog kalian yang nantinya url inilah yang akan kalian bagiin untuk bisa dikunjungi oleh orang lain. Sebaiknya bikin yang bagus biar lebih ngena dihati mereka, sebagai contoh; happybirthdaymbul dan nanti linknya jadi seperti ini happybirthdaymbul.blogspot.com karena ini merupakan subdomain gratis dari blogspot namun nantinya bisa diubah menggunakan domain tld seperti com, net, org dan lainnya.

Memberikan nama tampilan.

Cara membuat Ucapan ulang tahun Lewat Link

Sebenarnya bagian ini untuk template pada umumnya sih akan tampil seperti nama author gitu, namun di template yang aku bagiin sekarang ini nama ini tidak ditampilkan.

Masuk ke menu.

Sekarang blognya udah berhasil dibuat nih, tinggal kita ganti aja templatenya. Jadi kalian bisa klik menu seperti gambar di atas untuk memulainya.

Cari dan temukan tema.

Cara membuat Ucapan ulang tahun lewat link Google Form

Dibagian menu yang kalian klik tadi terdapat banyak menu, namun disini kalian cari aja tema dan klik menu tersebut.

Klik ikon segitiga 🔽 dan edit HTML.

Untuk mengganti tema blogger agar hasilnya maksimal kalian bisa langsung klik menu edit HTML.

Hapus semua kode yang ada.

Cara membuat Ucapan ulang tahun Lewat Link WhatsApp

Untuk pengguna smartphone: kalian bisa menggunakan mode dekstop, yaitu kalian klik aja tombol titik 3 dibagian kanan atas browser Chrome cari dan centang mode dekstop. Kemudian kalian bisa klik lama pada halaman kosong kemudian pilih semua dan tinggal hapus kode dengan mengklik tombol delete di keyboard.
Untuk pengguna dekstop: kalian bisa menggunakan perintah ctrl+a kemudian ctrl+x.

Silahkan copy script ulang tahun berikut ini:

Kalian tidak perlu download script HTML ucapan ulang tahunnya dan tinggal klik tombol copy kode yang aku sediakan di bawah ini untuk menyalin seluruh kodenya atau bisa juga copy semua kodenya secara manual.

Baca Juga: Cara Menghasilkan Uang Dari Internet Di Masa COVID-19

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale.language' 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'>
  <b:attr name='xmlns' value=''/>
  <b:attr name='xmlns:b' value=''/>
  <b:attr name='xmlns:expr' value=''/>
  <b:attr name='xmlns:data' value=''/>
  
<!--

    Name      : HBD-standar
    Version   : 1
    Date      : 26 Agustus 2020
    Demo      : https://happybirthdaymbul.blogspot.com
    Type      : Free
    Designer  : Eko Trimulyono
    Website   : www.ekotrimulyono.com
============================================================================
    NOTE :
    Jangan diperjual belikan.
   ============================================================================
-->

<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<!--[if IE]><meta content='IE=edge; IE=9; IE=8; IE=7; chrome=1' http-equiv='X-UA-Compatible'/><![endif]-->
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found | <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/></title>
    </b:if>
</b:if>
    <!-- Chrome, Firefox OS and Opera -->
<meta content='#000000' name='theme-color'/>
<!-- Windows Phone -->
  <meta content='#000000' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link href='https://cdn.statically.io/favicons/aboutmetheme.blogspot.com?cache=31556952' rel='icon' type='image/x-icon'/>
<link href='https://1.bp.blogspot.com/-ny4bWJOwvgg/Xuo8odRWERI/AAAAAAAAE7s/4-UVNozzzN0gWVCWLZV9C_ZxSrPxGiTzwCK4BGAsYHg/s32/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://1.bp.blogspot.com/-9YUqo36VpQU/Xuo8pwCRszI/AAAAAAAAE8E/_EKSDISLjoMRRgFLHFDWIdw7VlUPgEstwCK4BGAsYHg/s192/apple-icon.png' rel='icon' sizes='192x192'/>
<link href='https://1.bp.blogspot.com/-pK-rPiA7DY0/Xuo8qCXXHyI/AAAAAAAAE8I/Yk3fFUU2eu43DTwLs6RPPqXz9h28UUXAACK4BGAsYHg/s180/apple-icon-180x180.png' rel='apple-touch-icon-precomposed'/>
<meta content='https://1.bp.blogspot.com/-DnLFcsBKFY4/Xuo8q9R6jjI/AAAAAAAAE8U/i1tAtmAuW9oNxD73sVCgn-IoT0_wDLSLwCK4BGAsYHg/s114/apple-icon-114x114.png' name='msapplication-TileImage'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
  <link expr:href='data:blog.canonicalHomepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.canonicalHomepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;//www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:blog.meTag/>
</b:if>
  <link href='//www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.canonicalHomepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.canonicalUrl' hreflang='x-default' rel='alternate'/>
<b:if cond='data:view.isArchive'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title.escaped' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk melihat selengkapnya.&quot;' name='description'/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk melihat selengkapnya.&quot;' property='og:description'/>
<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk melihat selengkapnya.&quot;' name='twitter:description'/>
</b:if>
</b:if>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl,1200,&quot;1200:630&quot;)' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.firstImageUrl'>
<meta expr:content='resizeImage(data:blog.firstImageUrl,1200,&quot;1200:630&quot;)' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='resizeImage(data:blog.postImageThumbnailUrl,1200,&quot;1200:630&quot;)' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-u-vARV3fbhs/Xuo_7eVjNFI/AAAAAAAAE_Q/lemNTq7LzDsPzFYegyK4qiOOvX6-FXtZwCK4BGAsYHg/s1280/20200617_230540.png' property='og:image'/>
<meta expr:content='data:blog.title.escaped' property='og:image:alt'/>
<meta content='158' property='og:image:width'/>
<meta content='158' property='og:image:height'/>
</b:if>
</b:if>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
  
<meta content='xxxxxxxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxx' name='yandex-verification'/>
    <b:if cond='data:view.isLayoutMode'>
&lt;!-- /*<b:skin><![CDATA[
#header-wrapper{width:100%;}
#main-wrapper{width:65%;float:left;}
#sidebar-wrapper{width:35%;float:right;}
ul,li{list-style: none;}
]]></b:skin>
</b:if>
<style>
/*<![CDATA[*/
body {
  background: #fff;
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  font-size:17px;
  font-family:-apple-system,BlinkMacSystemFont,&quot;Roboto&quot;,&quot;Segoe UI&quot;,&quot;Oxygen-Sans&quot;,&quot;Ubuntu&quot;,&quot;Cantarell&quot;,&quot;Helvetica Neue&quot;,sans-serif;
  color:#555;
  }

a {
  text-decoration:none;
  transition:all 400ms ease-in-out;
  color:#555;
}

.card {
  background: #fdfdfd;
  border-radius: 4px;
  height: 85vh;
  width: 80vw;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  margin-top:10px;
  overflow: hidden;
}
  
  .credit-page {
  text-align:center;
  font-size:13px;
  }

@media only screen and (min-width: 1000px) {
  .card {
    flex-direction: row-reverse;
  }
  .card img.birthday {
    width: 100%;
    max-width: 50vw;
    max-height: unset;
  }
}

img.birthday {
  max-height: 40vh;
}

#Text1{
font-size:30px;
font-weight: 700;
} 

#Text1 .widget-content {
  padding: 1em;
font-size:15px;
font-weight: 300;
line-height:1.3;
}

.muted {
  opacity: 0.8;
}

.space {
  height: 100px;
}
  
  #error-page {
  background:#efefef;
  position:fixed ;
  position:absolute;
  text-align:center;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
  width:100%
  }
  
#error-page .error-404 {
  text-align: center; 
  transition: all 0.8s ease 0s;
  color: #b0130d; 
  font-size:800%; 
  font-weight: 700;
  margin-bottom:0px;
  margin-top:0;
  line-height:1em
  }
  
#error-page .large-heading1 {
  color: #000;
  font-size:400%;
  margin-top:1%;
  margin-bottom:0px;
  position:relative;
  font-weight:700
  }
  
#error-page .large-heading2 {
  color: #000;
  font-size:250%;
  } 

#error-page .light-heading1 {
color: #000;
font-size:150%;
}

#error-page .light-heading2 {
color: #000;
font-size:100%;
line-height:1.8em;
}

#error-page #search{
text-align:center
}

#error-page #search ul{
list-style:none
}

#error-page #search input{
padding:6px 10px;
margin:15px 0 0 -1px
}

#error-page .light-heading2 span{
background:#ddd;
border:1px solid #aaa;
border-radius:3px;
padding:2px 5px
}
/*]]>*/
  </style>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@graph&quot;: 
  [
  {
  &quot;@type&quot;: &quot;Webpage&quot;,
  &quot;url&quot;: &quot;<data:blog.canonicalHomepageUrl/>&quot;,
  &quot;name&quot;: &quot;<data:blog.title/>&quot;,
  &quot;headline&quot;:&quot;<data:blog.title/>&quot;,
  <b:if cond='data:blog.metaDescription'>&quot;description&quot;: &quot;<data:blog.metaDescription.escaped/>&quot;,<b:else/>&quot;description&quot;: &quot;Silahkan kunjungi <data:blog.title/> untuk melihat selengkapnya.&quot;,</b:if>
  &quot;mainEntityOfPage&quot;: {
    &quot;@type&quot;: &quot;WebPage&quot;,
    &quot;@id&quot;: &quot;<data:blog.canonicalHomepageUrl/>&quot;
  },
  &quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;<data:blog.title/>&quot;,
    &quot;url&quot;: &quot;<data:blog.canonicalHomepageUrl/>&quot;,
    &quot;logo&quot;: {
        &quot;url&quot;: &quot;https://1.bp.blogspot.com/-pdE5WC5F_xk/XooR5D8GIzI/AAAAAAAADpQ/3d7Xgl-6Kq8LwRNRXOr_3gpfatpV997MQCLcBGAsYHQ/s600/20200406_001230.png&quot;,
        &quot;width&quot;: 600,
        &quot;height&quot;: 60,
        &quot;@type&quot;: &quot;ImageObject&quot;
    }
  },
  &quot;image&quot;: {
    &quot;@type&quot;: &quot;ImageObject&quot;,
    &quot;url&quot;: &quot;https://1.bp.blogspot.com/-Z4MROObLbT8/XooP6ZxnKjI/AAAAAAAADpE/tHgVW4lahDEcmvCSw22VZ_ji7h_WHqnSwCLcBGAsYHQ/s1280/20200406_000312.png&quot;,
    &quot;width&quot;: 1280,
    &quot;height&quot;: 720
  }
  }
  ]
}
</script>
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;https://schema.org&quot;,
  &quot;@type&quot;: &quot;Person&quot;,
  &quot;name&quot;: &quot;YOUR_NAME&quot;,
  &quot;url&quot;: &quot;<data:blog.canonicalHomepageUrl/>&quot;,
  &quot;sameAs&quot;: [
    &quot;https://www.facebook.com/xxxxxxxxxx&quot;,
    &quot;https://instagram.com/xxxxxxxxxx;,
    &quot;https://twitter.com/xxxxxxxxxx&quot;,
    &quot;https://www.pinterest.com/xxxxxxxxxx&quot;,
    &quot;https://m.youtube.com/channel/xxxxxxxxxx&quot;
  ]
}
</script>
</b:if>
  </head>
  <body>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'> 
<div class='large-heading1'>OOPS!</div>
<div class='error-404'>404</div> 
<div class='large-heading2'>LAMAN TIDAK DITEMUKAN</div><br/> 
<div class='light-heading1'>Mungkin halaman telah dihapus. Kami mohon maaf atas ketidaknyamanan ini.</div><br/>
  <div class='light-heading2'>Silahkan Klik <a expr:href='data:blog.homepageUrl' title='Homepage'><span><b>DI SINI</b></span></a> untuk kembali ke homepage <b><data:blog.title/></b>.
</div>
</div>
</b:if>
 <div class='card'>
  <img alt='birthday' class='birthday' src='https://raw.githubusercontent.com/DenverCoder1/Responsive-Birthday-Card/main/birthday.svg'/>
  <div class='text'>
    <b:section class='header' id='CARD' preferred='yes'>
      <b:widget id='Text1' locked='false' title='Happy Birthday' type='Text' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='content'>&#8220;Usia hanyalah angka, yang terpenting adalah kedewasaan dan juga kebijaksanaan di pertambahan usia. Selamat ulang tahun! Hadiah terbaik yang dapat kuberikan adalah doaku yang menyertaimu dalam perjalanan hidupmu.&#8221;</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
      </b:widget>
    </b:section>
    <p class='muted'>- <data:blog.title/></p>
  </div>
  <div class='space'/>
</div>
<!--Footer 
Jangan hapus credit! 
-->
<footer>
  <div class='credit-page'>
  <div class='author'>&#169; <script type='text/javascript'>
  document.write(new Date().getFullYear());
</script> <a href='https://about.ekotrimulyono.com'>Eko Trimulyono Project</a> 
    </div>
    </div>
    </footer>
  </body> 
</html>

Paste script HTML ulang tahun aestheticnya di Tema Blogger tadi.

Setelah kalian copy kode script HTML ucapan ulang tahun buat pacar yang aku berikan diatas, kalian bisa langsung paste aja kodenya di tema Blogger yang sudah kosong tadi.

Simpan perubahan tema.

Agar perubahan tema yang kalian lakukan berhasil, kalian bisa klik tombol simpan tema dengan mengklik tombol yang sama seperti gambar diatas.

Baca Juga: Memanfaatkan Domain Untuk Kesuksesan Bisnis Di Era Digital

Ucapan selamat ulang tahun ala programmer kelas teri telah berhasil dibuat. 🤣

Ubah Teks Ucapan Ulang Tahun

Sekarang kalian tinggal setting text ucapan menggunakan HTML yang mau ditampilkan aja. Caranya cukup mudah, kalian bisa mengikuti panduan berikut ini.

Silahkan keluar dari pengaturan tema dengan cara klik tombol kembali ataupun tanda panah kekiri yang ada di pojok kanan atas.
Klik menu strip tiga yang ada di pojok kanan atas untuk masuk ke menu lainya.
Cari dan pilih menu Tata Letak untuk bisa mengubah ucapan ulang tahunnya.
Klik ikon pensil di samping kanan widget Happy Birthday.
Silahkan ubah judul dan konten sesuai dengan keinginan kalian, setelah itu jangan lupa di simpan.
Template ucapan ulang tahun telah selesai dan siap ditunjukkan.
Untuk mendapatkan link webnya kalian bisa klik menu lagi dan pilih aja menu paling bawah ataupun Lihat Blog dan salin aja url nya di kolom atas browser kalian.

Baca Juga: Setelah Beli Domain, Apa yang Bisa Dilakukan?

Template ini adalah hasil buatan dadakan ketika ingin membuat artikel ini, jika kalian menginginkan yang banyak fitur bisa request aja dikolom komentar.

Demo

Dan seperti itulah cara membuat link Web HTML ucapan ulang tahun sederhana dengan memanfaatkan platform Blogger.