Mamank Dzgn : Cara Menciptakan 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 sempurna 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 dapat .. kalo aku 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://mamankdzgn.blogspot.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://mamankdzgn.blogspot.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://mamankdzgn.blogspot.com/'>  <button>BELI</button></a>       </li> </ul> </div> </div>

Sekian Tutorial Kali Ini Semoga Bermanfaat

Demo