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