Cara Membuat Tabel Partner Seperti Kurazone

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, gimana kabar kalian? Masih setia sama kekasihnya kan? Haha... Pada kesempatan kali ini saya berbagi mengenai Cara Membuat Tabel Partner Seperti Kurazone.

Bagaimana Cara Membuat Tabel Partner Seperti Kurazone?

  1. Masuk ke Akun Blogger >> Pilih Menu Laman >> Buat Laman Baru
  2. Beri judul : "Partner" pada kolom judul
  3. Ubah ke mode HTML
  4. Ubah mode penulisannya seperti dibawah ini :
  5. Copy kode CSS dibawah ini, dan letakkan (paste) didalam artikel
    <style type="text/css">
tr {background:none;border:0px}
.tg {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;border-color:#aabcfe;color:white;background-color:#123456;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-top-width:1px;border-bottom-width:1px;border-color:#aabcfe;color:#039;background-color:red;}
.tg .tg-nomor{border-color:#003399;text-align:center}
.tg .tg-menuatas{background:linear-gradient(90deg,#123456,#007bfd);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;border-color:#003399;color:#ffffff;border:#ffffff 1px solid;text-align:center}
.tg .tg-logo-visitnow{background:linear-gradient(90deg,#000,#123456);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;border-color:#003399;text-align:center}
.tg .tg-namablog-deskripsi{border-color:#003399;text-align:center}
.tg .tg-niche-tahun{background-color:#123;border-color:#003399;text-align:center}
@media only screen and (max-width:425px){
.omvm {display:none}}
</style>
  6. Copy kode HTML dibawah ini, dan letakkan (paste) didalam artikel
    <div style="overflow-x: auto;">
<table class="tg">
  <tbody>
<tr>
    <th class="tg-menuatas">No</th>
    <th class="tg-menuatas" style="width: 110px;">Logo</th>
    <th class="tg-menuatas">Nama</th>
    <th class="tg-menuatas">Niche</th>
    <th class="tg-menuatas omvm">Deskripsi</th>
    <th class="tg-menuatas omvm">Sejak</th>
    <th class="tg-menuatas omvm">Pemilik</th>
    <th class="tg-menuatas">URL</th>
</tr>
<tr>
    <td class="tg-nomor">0</td>
    <td class="tg-logo-visitnow"><img src="https://sites.google.com/site/sotazone/kurazone.png" /></td>
    <td class="tg-namablog-deskripsi">Kurazone</td>
    <td class="tg-niche-tahun">Blogger</td>
    <td class="tg-namablog-deskripsi omvm">Kurazone merupakan blog personal bertema Blogger yang menyajikan informasi mengenai dunia per-blogging-an. Tempat asyik untuk membahas dunia HTML dan CSS, mulai dari tingkatan paling dasar hingga tingkatan yang sulit</td>
    <td class="tg-niche-tahun omvm">2018</td>
    <td class="tg-namablog-deskripsi omvm">Bagus Surochman</td>
    <td class="tg-logo-visitnow"><a href="https://www.kurazone.net/" title="Kurazone">Visit Now!</a></td>
</tr>
<tr>
    <td class="tg-nomor">1</td>
    <td class="tg-logo-visitnow"><img src="/" /></td>
    <td class="tg-namablog-deskripsi">Nama Blog</td>
    <td class="tg-niche-tahun">Niche Blog</td>
    <td class="tg-namablog-deskripsi omvm">Deskripsi Blog</td>
    <td class="tg-niche-tahun omvm">Tahun Blog</td>
    <td class="tg-namablog-deskripsi omvm">Pemilik Blog</td>
    <td class="tg-logo-visitnow"><a href="/" title="/">Visit Now!</a></td>
</tr>
<tr>
    <td class="tg-nomor">?</td>
    <td class="tg-logo-visitnow"><img src="https://i.pinimg.com/originals/7d/cb/ae/7dcbae032faf9ea510b647fe2c7fbef8.png" /></td>
    <td class="tg-namablog-deskripsi">Punyamu berikutnya..</td>
    <td class="tg-niche-tahun">?</td>
    <td class="tg-namablog-deskripsi omvm">?</td>
    <td class="tg-niche-tahun omvm">?</td>
    <td class="tg-namablog-deskripsi omvm">?</td>
    <td class="tg-logo-visitnow"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></td>
</tr>
</tbody></table>
</div>
  7. Kode - kode pada artikelnya akan terlihat seperti ini :
  8. Publikasi Laman
  9. Selesai

MODIFIKASI

Selanjutnya adalah melakukan modifikasi pada tabel partner.
  1. Perhatikan kode yang memiliki <th class="tg-menuatas">. Kode tersebut merupakan menu tabel yang paling atas, yaitu : No, Logo, Nama Blog, Niche, Deskripsi, Tahun, Pemilik dan URL. Silahkan ganti teks nya sesuai yang kalian inginkan. Apabila ingin mengubah warna background dan warna teks, carilah kode .tg-menuatas lalu ubah property nya.
  2. Perhatikan kode - kode dibawah ini :
    • <td class="tg-nomor">
      Digunakan untuk penempatan Nomor Urut
    • <td class="tg-logo-visitnow">
      Digunakan untuk penempatan Logo
    • <td class="tg-namablog-deskripsi">
      Digunakan untuk penempatan Nama Blog
    • <td class="tg-niche-tahun">
      Digunakan untuk Niche / Topik Blog
    • <td class="tg-namablog-deskripsi omvm">
      Digunakan untuk Deskripsi Blog
    • <td class="tg-niche-tahun omvm">
      Digunakan untuk Tahun Blog dibuat
    • <td class="tg-namablog-deskripsi omvm">
      Digunakan untuk Nama Pemilik Blog
    • <td class="tg-logo-visitnow">
      Digunakan untuk memberikan Link
  3. Jika ingin mengubah warna background dan warna teks, bisa mencari kode .tg .tg-blabla
  4. Perhatikan kode yang memiliki omvm didalam class nya, seperti :
    <td class="tg-namablog-deskripsi omvm">
    teks yang berada pada lingkup omvm ini akan disembunyikan saat Laman Partner diakses via Mobile. OMVM = Ora Metu Via Mobile (Tidak Keluar saat diakses Via Mobile)
    Contoh tampilan tabel partner saat diakses via mobile

  5. Jumlah kolom pada tabel ini tidak terbatas, jadi kalian bisa menambahkan kolom sebanyak yang kalian mau. Cukup mengCopy 1 PAKET kode TR yang diawal dengan kode <tr> sampai kode </tr>, lalu meletakkannya tepat dibawah </tr> yang lama (lihat penempatan kodenya seperti pada langkah nomor 6 diatas tadi). Berikut adalah 1 Paket kode TR nya
    <tr>
    <td class="tg-nomor">1</td>
    <td class="tg-logo-visitnow"><img src="/" /></td>
    <td class="tg-namablog-deskripsi">Nama Blog</td>
    <td class="tg-niche-tahun">Niche Blog</td>
    <td class="tg-namablog-deskripsi omvm">Deskripsi Blog</td>
    <td class="tg-niche-tahun omvm">Tahun Blog</td>
    <td class="tg-namablog-deskripsi omvm">Pemilik Blog</td>
    <td class="tg-logo-visitnow"><a href="/" title="/">Visit Now!</a></td>
</tr>

  6. Sisanya bisa kalian eksplor sendiri

PENGATURAN WRAPPER BODY DAN SIDEBAR BLOG

Pengaturan Wrapper dan Sidebar ini KHUSUS dilakukan apabila template blog kalian belum mendukung Full Width pada saat mode Laman Statis.

Contoh tampilan Template yang tidak mendukung Full Width Laman Statis :


Akibat adanya bagian Sidebar tersebut, justru malah membuat tampilan tabel terkesan sempit. Maka dari itu kita perlu menyembunyikan bagian Sidebar dan memberikan lebar 100% kepada bagian Wrapper. Hasil jadinya akan nampak lebar seperti dibawah ini :


Untuk melakukan hal tersebut, kita cukup menggunakan kode dibawah ini :
Copy kode dibawah ini, dan letakkan (paste) ke dalam artikel Partner yang kalian buat tadi. Penempatan kode bisa diletakkan tepat diatas kode </style>
.sidebar-wrapper {display: none;}
#main-wrapper {width:100%}
Agar kode diatas berhasil diterapkan, maka kode .sidebar-wrapper dan #main-wrapper bisa kalian ganti sesuai nama class dan ID yang terdapat pada template kalian. Karena pada bagian ini Sang Pembuat template memiliki keunikan tersendiri dalam menamai struktur template mereka, contohnya seperti : #wrapper doank, #wrapper-container, #wrapper-post, .sidebar-right, .sidebar-left dan sebagainya. Silahkan di eksplor sendiri ya...
Dengan adanya halaman partner seperti ini, maka kalian bisa menggunakannya untuk mengelompokkan beberapa partner yang bekerja sama atau tukar link dengan blog kalian.
Itulah Informasi mengenai "Cara Membuat Tabel Partner Seperti Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck !!

Tags





Lebih baru Lebih lama