Tutorial Membuat List Admin Grid Style [Dengan CSS]

Tutorial Membuat List Admin Grid Style - Kali ini saya Membuat Tutorial Grid Style Sederhana Menggunakan CSS tanpa Bootstrap sama sekali lohh ya :3 wkwk. Khusuhnya Buat Admin janganbingung.com , ini loh Grid Style gw :v wkwk.

Tutorial Membuat List Admin Grid Style [Dengan CSS]

---

Bagi Sobat yang Menggunakan CMS Blogger :
1.Masukkan Kode CSS di bawah ini Tepat di atas Kode </style>  atau  ]]</b:skin>  .

Bagi Sobat yang Menggunakan CMS Wordpress :
1.Masukkan Kode CSS di bawah ini kedalam  File yang berEkstensi .css atau [style.css]

 ./* Tutorial Membuat List Admin Grid Style - AkhtarvisArt */
.akhtar-4dmin{overflow: hidden;float: left;width: 346px;height: 139px;margin-right: 15px;margin-bottom: 15px}
.akhtar-4dmin img{width: 105px;padding: 2px;border: 1px solid #DDD;height: 133px;margin-right: 5px;float: left}
.akhtar-4dmin{overflow: hidden;position: relative}
.akhtar-4dmin h2{text-transform: none;font-size: 13px;margin: 0;font-family: helvetica;border-bottom: 0;padding: 0}
.akhtar-4dmin h2 a{color: #1A3E74}
.admin{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 11px;color: #696969;line-height: 15px}
.admin a{color: #696969}
.admin .Profile{overflow: visible;white-space: normal} 

Bagi Sobat yang Menggunakan CMS Blogger :
1. Buat Lah Sebuah halaman/page baru dan masukkan Kode HTML di bawah ini di dalam Mode HTML bukan di Compose.

Bagi Sobat yang Menggunakan CMS Wordpress :
1.Buat Lah sebuah File baru dengan Ekstensi .php [4dmin.php]

 <div id="akhtar-4dmin">
 <div class="akhtar-4dmin">
  <a href=" Link Tujuan ">
   <img src=" http://img12.deviantart.net/de04/i/2015/101/7/4/fate_zero__saber_by_ssjraging-d8pdyky.png "/>
  </a>
  <div class="admin">
   <div class="admin">
   
    <h2><a> Nama Admin </a></h2><hr/>
   <!-- Other Name / Japanese Name -->
    Nama Panggilan Admin / Nama Jepang Admin
    <br/>
   <!-- Pekerjaan -->
    <a > Pekerjaan Admin  : </a> 
    <br/>
   <!-- Address -->
    Address : 
    <br/>
   <!-- Address -->
    ID LINE : 
    <br/>
   <!-- synopsis -->
    <div class="Profile">
   <!-- Link Profile Facebook/twitter/ig/Dll -->
     <a href=" Link Tujuan ">more details...</a>
    </div>
   </div>
  </div>
 </div>
 
</div> 

Jika Langkah-Langkah di atas telah di selesaikan Maka Jika Sobat ingin Menambah Admin lagi Copy dan terapkan Kode HTML di bawah tepat sebelum </div> terakhir.

   <div id="akhtar-4dmin">
 <div class="akhtar-4dmin">
  <a href=" Link Tujuan ">
   <img src=" LINK GAMBAR"/>
  </a>
  <div class="admin">
   <div class="admin">
   
    <h2><a> Nama Admin </a></h2><hr/>
   <!-- Other Name / Japanese Name -->
    Nama Panggilan Admin / Nama Jepang Admin
    <br/>
   <!-- Pekerjaan -->
    <a > Pekerjaan Admin  : </a> 
    <br/>
   <!-- Address -->
    Address : 
    <br/>
   <!-- Address -->
    ID LINE : 
    <br/>
   <!-- synopsis -->
    <div class="Profile">
   <!-- Link Profile Facebook/twitter/ig/Dll -->
     <a href=" Link Tujuan ">more details...</a>
    </div>
   </div>
  </div>
 </div> 

Sekian Tutorial Singkat ini Semoga Bermanfaat . Jika Ada yang di bingungkan Silahkan Bertanya di Kolom komentar.

Baca Artikel Menarik lainnya

Loading...