Cara Membuat Table Keren Di Blogger

Cara Membuat Table Keren Di Blogger
Cara Membuat Table Keren Di Blogger
Kesempatan Kali Ini Saya Akan Membagikan Tutorial Cara Membuat Table Keren Di Blogger .. Table Ini Sudah Dengan Css yang menarik .. Bukan Hanya Itu Table Yang Satu Ini Sudah Di Gunakan Untuk Berbagai Macam Tulisan Atau Spesifikasi .. Langsung Saja Ke Tutorialnya
  • Masuk Ke Blogger
  • Template > Edit Html
  • Masukan css di bawah ini tepat diatas ]]></b:skin> atau di atas </style>
  • *{box-sizing:border-box;font-family:neo;margin:0;padding:0}
    .flex-container{display:flex;padding:.5em}
    .flex-item{flex:1;margin-right:1em;width:0}
    .flex-item:last-child{margin-right:0}
    .abdou_tap{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
    .abdou_tap:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
    .abdou_tap .abdou_tap-judul{background-color:#333;color:#fff;font-size:1.5em}
    .abdou_tap .highlight{background-color:#29b6f6}
    .abdou_tap li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
    .abdou_tap .abdou_aaa{background-color:#eee;font-size:1.25em}
    button{background-color:#29b6f6;border:none;border-radius:.15em;color:#fff;cursor:pointer;padding:.75em 1.5em;font-size:1em}
    @media only screen and (max-width:700px){button{padding:.75em}}
    @media only screen and (max-width:600px){.flex-container{flex-wrap:wrap}.flex-item{flex:0 0 100%;margin-bottom:1em;width:100%}.abdou_tap:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}
    
  • Selanjutnya Simpan Kode Di bawah ini bebas mau dimanapun bisa .. kalo saya di bawah <body>
  • <div class='flex-container'>
      <div class='flex-item'>
        <ul class='abdou_tap'>
    <li class='abdou_tap-judul'>TEMPLATE WORDPRESS</li>
    <li class='abdou_aaa'>150.000</li>
    <li>&#10004; Responsive</li>
    <li>&#10004; Fast Load</li>
    <li>&#10004; SEO</li>
    <li>&#10004; Fitur Premium</li>
    <li class='abdou_aaa'>
      <a href='https://www.mafsyah.com/'>  <button>BELI</button></a>
          </li>
    </ul>
    </div>
    <div class='flex-item'>
        <ul class='abdou_tap'>
    <li class='abdou_tap-judul highlight'>TEMPLATE BLOGGER</li>
    <li class='abdou_aaa'>250.000</li>
    <li>&#10004; Responsive</li>
    <li>&#10004; Fast Load</li>
    <li>&#10004; SEO</li>
    <li>&#10004; Fitur Premium</li>
    <li class='abdou_aaa'>
           <a href='https://www.mafsyah.com/'>  <button>BELI</button></a>
          </li>
    </ul>
    </div>
    <div class='flex-item'>
       <ul class='abdou_tap'>
    <li class='abdou_tap-judul'>TEMPLATE PHP</li>
    <li class='abdou_aaa'>350.000</li>
    <li>&#10004; Responsive</li>
    <li>&#10004; Fast Load</li>
    <li>&#10004; SEO</li>
    <li>&#10004; Fitur Premium</li>
    <li class='abdou_aaa'>
           <a href='https://www.mafsyah.com/'>  <button>BELI</button></a>
          </li>
    </ul>
    </div>
    </div>
    

    Nah selanjutnya ganti kode yang berwarna kuning dengan link  kalian ..
Sekian Tutorial Kali Ini Semoga Bermanfaat

Demo
Cara Membuat Table Keren Di Blogger Admin Mafsyah 5 of 5
Cara Membuat Table Keren Di Blogger Kesempatan Kali Ini Saya Akan Membagikan Tutorial  Cara Membuat Table Keren Di Blogger  .. Table Ini...
Cara Membuat Table Keren Di Blogger
4/ 5 stars - "Cara Membuat Table Keren Di Blogger" Cara Membuat Table Keren Di Blogger Kesempatan Kali Ini Saya Akan Membagikan Tutorial  Cara Membuat Table Keren Di Blogger  .. Table Ini...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
2 Komentar Blogger

2 Comments