Ads

Source Code Desain Layout Homepage Meownime #Anime-Post

Kali ini saya akan membagikan cara Membuat Layout Halaman Depan dengan Desain seperti Website download Anime Meownime. Langsung saja simak caranya dibawah.

Cara Membuat Layout Halaman Depan Seperti Web Meownime

Desain Layout Homepage Meownime #Anime-Post
Dagruel

Tambahkan HTML

<h1 class="DagMoe">Ongoing</h1>
<a href="Link" class="MoeMore" title="Lihat Lainnya">More</a>
<div class="MeowDag">
  <!--MeowFile-->
  <!--MeowFile-->
  <!--MeowFile-->
  <!--MeowFile-->
  <!--MeowFile-->
  <!--MeowFile-->
</div>
Perhatikan Tulisan <!--MeowFile--> kalian ganti dengan HTML dibawah. Sesuaikan jumlah nya pastikan minimal 3 Postingan.
<div class="MeowFile">
  <div class="MeowThumb">
    <a href="LinkPostingan"><img src="LinkGambar" alt="Title"></a>
    <div class="MeowEdan">
      Episode
    </div>
    <div class="OutMeow">
      <h1 class='MeowTitle'><a href="LinkPostingan">Title</a></h1>
    </div>
  </div>
</div>
Ganti Tulisan yang ditandai sesuai keterangan nya.

Tambahkan CSS

.MeowDag {display: grid;grid-gap: 14px;grid-template-columns: 1fr 1fr 1fr;}
h1.DagMoe {clear: both;margin-bottom: 20px;font-weight: 400;font-size: 16px;background: #36688a;margin-bottom: 15px;margin-top: 0;text-transform: uppercase;padding: 15px;color: #fff;line-height: 1.1;}
a.MoeMore {float: right;margin: -56px 20px;text-transform: uppercase;color: #fff!important;padding: 5px 40px;font-size: 13px;cursor: pointer;background: #da4453;font-weight: 400;transition: .4s all ease;-webkit-transition: .4s all ease;}
a.MoeMore:hover {background: #f98591;}
.MeowFile {position: relative;overflow: hidden;z-index: 1;}
.MeowThumb img {width: 100%;transition: 2s all ease !important;}
.MeowThumb .MeowEdan, .MeowThumb .OutMeow {position: absolute;z-index: 2;}
.MeowThumb .MeowEdan {left: -5px;top: 20px;color: #fff;padding: 5px;border-left: 5px solid #000;transition: .4s all ease;-webkit-transition: .4s all ease;}
.MeowFile:nth-child(3n+1) .MeowEdan {background: #da4453;}
.MeowFile:nth-child(3n+2) .MeowEdan {background: #305d7b;}
.MeowFile:nth-child(3n+3) .MeowEdan {background: #e4ab01;}
.MeowThumb .OutMeow {bottom: 0;width: 100%;transform: translateY(4px) scale(1.1);-webkit-transform: translateY(4px) scale(1.1);transition: .6s all ease-in;-webkit-transition: .6s all ease-in;transform-origin: center;}
.MeowThumb .OutMeow h1 {width: 100%;margin: 0;font-weight: 400;font-size: 19px;color: #444;}
.MeowThumb .OutMeow h1 a {color: rgba(0, 0, 0, .99);padding: 10px 30px;padding-top: 8px;font-size: 18px;font-weight: 400;background: #fff;display: inline-block;text-align: center;width: 100%;}
.MeowThumb:hover .MeowEdan {transform: translateX(5px);-webkit-transform: translateX(5px);-moz-transform: translateX(5px);-ms-transform: translateX(5px);-o-transform: translateX(5px)}
.MeowThumb:hover .OutMeow {transform: translateY(-20px) scale(1.1) rotate(-2deg);-webkit-transform: translateY(-20px) scale(1.1) rotate(-2deg);-moz-transform: translateY(-20px) scale(1.1) rotate(-2deg);-ms-transform: translateY(-20px) scale(1.1) rotate(-2deg);-o-transform: translateY(-20px) scale(1.1) rotate(-2deg);transition: .6s all ease-out;-webkit-transition: .6s all ease-out;-moz-transition: .6s all ease-out;-ms-transition: .6s all ease-out;-o-transition: .6s all ease-out;opacity: 1}
@media screen and (min-width:768px) {
  .MeowThumb .OutMeow {opacity: 0;}}
@media screen and (max-width:768px) {
  .OutMeow {padding: 10px 3px;}}
@media screen and (max-width:640px) {
  .MeowDag {grid-template-columns: 1fr 1fr;}}
@media screen and (max-width:480px) {
  .MeowDag {grid-template-columns: 1fr;}}

Selesai sudah, bagaimana berhasil kah. Dan untuk yang ingin memasang nya di Blogger ataupun Wordpress bisa cari di google ataupun lainnya :) karena saya hanya membagikan contoh desain nya.

Sekian dari saya terima kasih, jika ada yang ingin ditanyakan silahkan berkomentar dibawah ya.

https://meownime.com

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!