Cara membuat ch grid di blog

CH Grid mirip seperti button, Tetapi ch grid ini kita bisa menggunakan backgroud Gambar.
Bagi kalian yang mau lihat Demo nya kalian bisa klik tombol di bawah ini :

DEMO

Langsung saja ke tutorial blognya.

Kalian sudah masuk ke blogger nya

Kalian pergi ke Edit HTML

Kalian Cari Kode </style> dan masukan kode CSS ini tepat sebelum kode </style>

.ch-grid {
 margin: 20px 0 30px 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
}

.ch-grid:after,
.ch-item:before {
 content: '';
 display: table;
}

.ch-grid:after {
 clear: both;
}

.ch-grid li {
 width: 205px;
 height: 205px;
 display: inline-block;
 margin: 20px 20px 0 20px;
}

.ch-item {
 width: 100%;
 height: 100%;
 border-radius: 5px;
 overflow: hidden;
 position: relative;
 cursor: default;
 box-shadow: 
 inset 0 0 0 16px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 background-repeat: no-repeat;
 background-size:360px;
 background-position: center;
}

.ch-img-html { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZh3qv8i26DGvXI4VxpqTH3TX9ksb_E4jzxA4ul_HWY6-wx5g6Dm9NebRCHAMAUQn-LIgQGeao1D5Q3Yhu511796Z5QTS2ArgFNA0LNmC-naYjn3Ur9AKUwR30sdERmT4YkbXeUzwvxbk/s1600/HTML+Converter.png);
}
.ch-img-picker { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIlHG4pi0MPmLWoy0KjcqZab49PhRL8AKNapUb7GPSe2lojA4tKxkYWivFWJfxdID-8dHs7AOsfbwdGNzkxFY-DgPurY0er38PevC_L17ZyOIrgD7g6O3hVLc2h38ximxTuQewjpO2JA/s1600/Color+Picker.png);
}

.ch-img-minifier { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNKzvkHqEG8l4H1Gg1mSXwIzDBTt0lnmKuTmRrI67jnNuG6NZOXw_GZrvLHzTQopgml3C8bon7JQQABnoz1qrfkwOiILGqHVmAc6MQly8CFN8xD-U6jv22n2vg4bkneel1uPUaoRZrso/s1600/CSS+Minifier.png);
}

.ch-img-triangle { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu93D3_1DXAO-gg-HYjdho7G6jX629qGXve_iw7FLXWv54BEe60nWnycCQ9-IFvoKktRvl_fCc605ht0_s3EoMk1PR9AL5Do8EjyIeEBmamRRRfGoc7CbSvpQHPQ38TmC-UnrHsk4CcqY/s1600/CSS+Triangle.png);
}

.ch-img-awesome { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wtgblMIZluOvPIUf4feMg6owCnw-617VpcSPW9YfbbMlwScs-beyMvHycFPkFpL8kICNdzg0jsaJttG84GGw__Uqz63xMdRF3Stut8VPRDk0HoKanH4CNhLQHpc1pli6fbfZtGEG_Ig/s1600/Font+Awesome.png);
}

.ch-img-warna { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CDxCe3-pXW3pAO70uT4y4IKZTQFELWnmqy5_DLNfJ08dJiSI_Pmw8eHJJoiKY625i1AtQjDGM4KYARXn0L9ceSRrYigyDvxESlZ7s2QtYdzDk5BPUiPmsSHVow5fMXHJ10CMoot3b8M/s1600/Code+Warna.png);
}

.ch-img-kamus { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7YFbyggxgFMfcBji7yu2kZjyHFmCwVH1FXpghz9wY3ufDy4__x1rs5mQocgS5Q5T0ACZImTZj36MX7yDRnczyZkN5WtuqzE6fgLggg_eMDii7BK-g7IMNTDQxa-B2VIc0desjkISjKE/s1600/Kamus+HTML.png);
}

.ch-img-counter { 
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLetDyYPXlyPzXmmOB0i52DUgI_VDvgPQPQLc2cEfvcoCx2ZQCsT6yO7r2y9G_E9Me-U_bp3914tF5W3EzDsVlP8EQYtIlYj8wpbM3da8VdQb91XHmr-hcI5A4E_sfeWyl6m-m8Qpi3RY/s1600/Word+Counter.png);
}

.ch-info {
 position: absolute;
 background: rgba(63,147,147, 0.8);
 width: inherit;
 height: inherit;
 border-radius: 5px;
 overflow: hidden;
 opacity: 0;
 transition: all 0.4s ease-in-out;
 transform: scale(0);
}

.ch-info h3 {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 22px;
 margin: 0 30px;
 padding: 60px 0 0 0;
 height: 90px;
 font-family: 'Open Sans', Arial, sans-serif;
 text-shadow: 
 0 0 1px #fff, 
 0 1px 2px rgba(0,0,0,0.3);
}

.ch-item:hover {
 box-shadow: 
 inset 0 0 0 1px rgba(255,255,255,0.1),
 0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
 transform: scale(1);
 opacity: 1;
}

.ch-item:hover .ch-info p {
 opacity: 1;
}

.ch-info p {
 color: #fff; 
 padding: 10px 5px;
 font-style: italic;
 margin: 40px 30px;
 font-size: 12px;
 border-top: 1px solid rgba(255,255,255,0.5);
 opacity: 0;
 transition: all 1s ease-in-out 0.4s;
 line-height: 10px; 
}
.ch-info p a {
 display: block;
 color: rgba(255,255,255,0.7);
 font-style: normal;
 font-weight: 700;
 text-transform: uppercase;
 text-decoration:none;
 font-size: 12px;
 letter-spacing: 1px;
 padding-top: 4px; 
 text-align: center;
 color: #fff !important;
}

.ch-info p a:hover {
 color: rgba(255,242,34, 0.8);
}
ol,.post-body ul{margin:0;padding:0;}

Bila sudah, Klik simpan template

Selanjutnya saat kalian mau menggunakan CH GRID ini, kalian bukan Di Compose melainkan Di HTML dan pastekan kode di bawah ini dan simpan di HTML.

<ul class="ch-grid"><li><br>
<div class="ch-item ch-img-html"><div class="ch-info"><h3>HTML CONVERTER</h3><p><a href="https://www.denylistianto.com/p/html-converter.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-minifier"><div class="ch-info"><h3>COLOR PICKER</h3><p><a href="https://www.denylistianto.com/p/css-minifier.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-warna"><div class="ch-info"><h3>CODE WARNA</h3><p><a href="https://www.denylistianto.com/p/code-warna.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-picker"><div class="ch-info"><h3>COLOR PICKER</h3><p><a href="https://www.denylistianto.com/p/color-picker.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-triangle"><div class="ch-info"><h3>CSS TRIANGLE</h3><p><a href="https://www.denylistianto.com/p/css-triangle.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-awesome"><div class="ch-info"><h3>FONT AWESOME</h3><p><a href="https://www.denylistianto.com/p/font-awesome.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-counter"><div class="ch-info"><h3>WORD COUNTER</h3><p><a href="https://www.denylistianto.com/p/word-counter.html" target="_blank">Buka</a></p></div></div></li>
<li><br>
<div class="ch-item ch-img-kamus"><div class="ch-info"><h3>KAMUS HTML</h3><p><a href="https://www.denylistianto.com/p/kamus-html.html" target="_blank">Buka</a></p></div></div></li>
</ul>

Bila sudah di pastekan di HTML kalian Publishkan dan lihat hasilnya.

Semoga bermanfaat di tutorial blog kali ini, jangan lupa kritik dan saran, bagi kalian yang bertanya silahkan berkomentar.