Ads

Source Code Profile MyAnimeList dengan Galery

Kali ini saya akan membagikan cara membuat "Halaman Profile atau Biodata seperti Web MyAnimeList dengan Galery Photo". Langsung saja cek cara nya di bawah.

Profile MyAnimeList dengan Galery
Dagruel

Cara Membuat Profile MyAnimeList Dengan Galery

Pertama salin CSS dibawah di template kalian masing-masing.

CSS Utama

.DagruelProfile {overflow: hidden;z-index: 99;}
  .DagruelProfile .DagLeft {float: left;padding: 10px;max-width: 250px;}
  .DagruelProfile .DagRight {overflow: hidden;padding: 10px;}
  .DagNav {border-color: #1d439b;border-style: solid;border-width: 0 0 1px;padding: 0 0 2px;margin: 5px 0 10px 0;}
  ul.tab {display: inline;margin-left: 0;margin-right: 0;margin-top: 0;padding-left: 0;padding-right: 0;}
  ul.tab li {cursor: pointer;transition: 0.3s;background-color: #fff;display: inline;margin: 0;font-size: 12px;font-weight: 400;padding: 2px 4px;text-decoration: none;}
  ul.tab li:hover {background-color: #009688;color: #fff;}
  ul.tab li.active {background-color: #009688;color: #fff;}
  .DagBio {overflow: hidden;font-size: 12px;}
  .DagBio h3 {display: none;}
  .DagBio span {width: 100%;margin-left: 5px;float: left;font-weight: 600;position: relative;color: #222d34;text-overflow: clip;white-space: nowrap;overflow: hidden;}
  .DagBio span b {font-weight: 500;overflow: hidden;min-width: 117px;margin-right: 10px;}
  .DagContent {display: none;}
  .DagContent h3, .DagBio h3 {border-color: #bebebe;border-style: solid;border-width: 0 0 1px;color: #000;font-size: 16px;font-weight: 700;margin-bottom: 5px;margin-top: 4px;padding: 3px 0;}
  .DagContent p {font-size: 14px;}
  .DagPic {display: grid;grid-gap: 20px;grid-template-columns: 1fr 1fr 1fr;}

  @media screen and (max-width: 720px) {
    .DagruelProfile .DagLeft {float: none;max-width: 100%;}
    .DagBio h3 {display: block;}
    .DagPic {grid-gap: 15px;grid-template-columns: 1fr 1fr;}}

  .DagContent {animation: fadeEffect 0.5s;}
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}}

CSS Gambar

bingkai {margin: 0;display: block;}
.waluhImage {display: inline-block;line-height: 0;overflow: hidden;}
.waluhImage img {max-width: 100%;height: auto;}
.waluhImage:hover {animation: ignielShake 0.82s cubic-bezier(.36, .07, .19, .97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}

@keyframes ignielShake {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%,60% {transform: translate3d(4px, 0, 0);}}

@-webkit-keyframes ignielShake {
  10%, 90% {transform: translate3d(-1px, 0, 0);}
  20%, 80% {transform: translate3d(2px, 0, 0);}
  30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
  40%, 60% {transform: translate3d(4px, 0, 0);}}
.waluhImage .copyright {text-align: right;position: relative;}
.waluhImage .copyright span {background-color: rgba(29, 33, 41, .5);font: italic 400 12px/0 menlo, consolas, monaco, monospace;padding: 11px 7px;color: #fff;position: absolute;right: 0;bottom: 0;border-radius: 10px 0 0 0;}

Kedua salin HTML dibawah kedalam halaman atau postingan baru.

<div class="DagruelProfile">
  <div class="DagLeft">
    <bingkai>
      <div class="waluhImage"><img alt="Judul" src="LinkGambar" title="Judul">
        <div class="copyright"><span>Dagruel</span></div>
      </div>
    </bingkai>
    <div class="DagBio">
      <h3>Personal Info</h3>
      <span>Given Name: <b>Text</b></span>
      <span>Family Name: <b>Text</b></span>
      <span>Birthday: <b>Text</b></span>
      <span>Website: <b>Text</b></span>
      <span>More:</span>
      <span>Blood Type: <b>Text</b></span>
      <span>Birth Place: <b>Text</b></span>
      <span>Profile: <b>Text</b></span>
    </div>
  </div>
  <div class="DagRight">
    <div class="DagNav">
      <ul class="tab">
        <li class="tablinks" onclick="openCity(event, 'Details')" id="defaultOpen">Details</li>
        <li class="tablinks" onclick="openCity(event, 'Pictures')">Pictures</li>
      </ul>
    </div>
    <!--Content-->
    <div id="Details" class="DagContent">
      <h3>Details</h3>
      <p>Isi dari Detail Profile</p>
    </div>
    <div id="Pictures" class="DagContent">
      <h3>Pictures</h3>
      <div class="DagPic">
        <!--Gambar-->
        <!--Gambar-->
        <!--Gambar-->
        <!--Gambar-->
        <!--Gambar-->
        <!--Gambar-->
      </div>
    </div>
  </div>
</div>
Pada Bagian <!--Gambar--> ganti dengal HTML Gambar dibawah. sisanya ganti sesuai dengan keinginan kalian (yang ditandai).

Gambar

<bingkai>
      <div class="waluhImage"><img alt="Judul" src="LinkGambar" title="Judul">
        <div class="copyright"><span>Dagruel</span></div>
      </div>
</bingkai>

Bagian Terakhir pemasangan Js nya, salin script dibawah dan tempelkan di template kalian diatas tag </body> lalu simpan.

<script>
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("DagContent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  document.getElementById("defaultOpen").click();
</script>

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://www.w3schools.com/howto/howto_js_tabs.asp
https://myanimelist.net/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!