Beranda / tutorial

Cara Membuat Table Keren Di Blogger

Oleh Bahas Tutorial 2 komentar
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

2 komentar untuk "Cara Membuat Table Keren Di Blogger"