Membuat Sajian Grid Di Postingan Blog
Membuat Menu Grid di Postingan Blog atau Membuat Menu Grid di Halaman statis blog, bekerjsama saya galau untuk memberi judul pada postingan ini, inilah beberapa judul yang saya pikirkan :
- Cara Membuat CH Grid di Blog
- Cara Membuat Menu Grid di Postingan Blog
- Cara Membuat Menu Grid di Halaman Statis Blog
- Cara Membuat Menu Pada Halaman Web Tools Blog
- Cara Membuat Halaman Web Tools Seperti Blog
Cukup banyak judul bukan? alasannya yaitu wangsit ini saya dapatkan dari situs Malas Ngoding (https://www.malasngoding.com) dan saya kembangkan sendiri menjadi halaman Web Tools saya dikala ini, oleh alasannya yaitu itu saya tidak tahu apa namanya.
Hal ini memiliki beberapa fungsi yang sanggup memperkeren blog sobat, menyerupai : Menu Grid pada Halaman Postingan atau Statis blog, Halaman Web tools, dan masih banyak lagi.
Baiklah bagi yang ingin tau menyerupai apa tampilannya, sanggup eksklusif klik tombol dibawah untuk melihat demonya.
Jika teman tertarik dan ingin memasangnya silahkan ikuti tutorial dibawah ini.
Cara Membuat Halaman Web Tools Seperti Blog
Ada dua cara yang saya bagikan, silahkan pilih salah satu cara yang berdasarkan teman lebih simpel.
Cara Yang Pertama
Pertama, buka blogger.com dan login akun sobat, selanjutnya pindah ke hidangan Tema kemudian buka Edit HTML.
Cari isyarat ]]></b:skin> atau </style>, kemudian tambahkan isyarat dibawah sebelum isyarat yang telah teman cari sebelumnya.
.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/AVvXsEi5E70lqmTxdNCkUYbmEzbz-y_3lqLUMkwIVVwpctuzDTQ7qrPOT6ru4spiIoCTcrImz8E8SdAb03cvA7u2ZRJLIwYE-S__7Dure97vfQmUmbD6wvK8rWEi1oAuFz8dCH1ZazT3KuLvtWg/s1600/HTML+Converter.png); } .ch-img-picker{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50gULstKO1hdivC4Jz0zlq2sca0h2J4lpd5ZQCYvNxlAgKjfn8mMHq6oVJSzxxXmnbLuhHC2UK6_-jLLcitDyxDFFnOe677mzQ3ZG21EVh0AdD_pJi-ORJyHYrDWSbd6_2-gcDMaAhG0/s1600/Color+Picker.png); } .ch-img-minifier{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKWr8SNeRCOO-U6c22LzURPvvbnLfuSWkp31Bs8lfh8KmsD7aZfe9EPGnJmsVLJhqYE8fIy3DoeQjefYbqW0ad3aX8Ir9b4H43YvG0e_GI1v28KZJIiMa2rruo0Ld_Lpmer2V241yuH4/s1600/CSS+Minifier.png); } .ch-img-triangle{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfPJROJaTOcFIhRDBP4bELDFPpupYeXi2sfXXD2-S4Yxlb9O_Kz4vEn9t_sy4_ji8itQI0bsGWXz3i7y7E7pyC3r8LX71HmS4SZ0ruW7VW-A1FV3SQ-wi_aDvHUVO2i2x1w2bDvcWMWw/s1600/CSS+Triangle.png); } .ch-img-awesome{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhKTS-oLnyGCxcJzEybX0JEo9ZAYtlgaDDSexN5Wi4NH1kp9sedkmsS7U0eLc6EQO1GVpsO1heXeqr8R-m7r_lfbRCa9keOZN4o8ksljehltxG54j8W4s8v36v_-79RUDnKYbhi23Iuk/s1600/Font+Awesome.png); } .ch-img-warna{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSHLANdfa8bjAawVo864Gcz1-pCuvKbH75fUCMZYd8ue9m7heF71zKCK0iMDRN0-CagXZ8o0DXxZ-e7EEBFVypFD05vmvrbgrU2L8tM12j-p_XC5Zv6IqD9U_r73c9A91ucRJzBkZEGM/s1600/Code+Warna.png); } .ch-img-kamus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjANm73WsDkjolwg2X9l4WnAzNsUWSoj77XpsBq_KY70A-iQ-pbfx8_8PAiagT3RodGtGICujwZuuuqXzFf9Zay19WeIeFv4DHFwun7Tn01XOvsHJY8_E3JZKeEUEk3MNH_-wTGgwah2U8/s1600/Kamus+HTML.png); } .ch-img-counter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh392BpuoBTNE6QkCII4lcgUKLXXXseOhF8ukCTt5tU10CNqR35cAaKey8YG-2vLI4_yLW-3XqCKqYIRFue1XKa-5XrwQGHbw_dOuR7UjumCfE6Vwng0tDPGBJ_TCKC44-Ls6sTX2je59c/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;}Silahkan ganti URL yang saya tandai dengan URL gambar yang sudah teman persiapkan.
Simpan Tema, Selanjutnya Buat Postingan gres atau Halaman Statis gres di blog teman kemudian pindah dari hidangan Compose menjadi HTML.
Letakkan isyarat dibawah ini pada postingan tersebut.
<ul class="ch-grid"> <li> <div class="ch-item ch-img-html"> <div class="ch-info"> <h3> HTML CONVERTER</h3> <p> <a href="https://turuninsay.blogspot.comp/html-converter.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-minifier"> <div class="ch-info"> <h3> COLOR PICKER</h3> <p> <a href="https://turuninsay.blogspot.comp/css-minifier.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-warna"> <div class="ch-info"> <h3> CODE WARNA</h3> <p> <a href="https://turuninsay.blogspot.comp/code-warna.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-picker"> <div class="ch-info"> <h3> COLOR PICKER</h3> <p> <a href="https://turuninsay.blogspot.comp/color-picker.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-triangle"> <div class="ch-info"> <h3> CSS TRIANGLE</h3> <p> <a href="https://turuninsay.blogspot.comp/css-triangle.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-awesome"> <div class="ch-info"> <h3> FONT AWESOME</h3> <p> <a href="https://turuninsay.blogspot.comp/font-awesome.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-counter"> <div class="ch-info"> <h3> WORD COUNTER</h3> <p> <a href="https://turuninsay.blogspot.comp/word-counter.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-kamus"> <div class="ch-info"> <h3> KAMUS HTML</h3> <p> <a href="https://turuninsay.blogspot.comp/kamus-html.html" target="_blank">Buka</a></p> </div> </div> </li> </ul>Ganti URL, Judul, dll. dengan URL dan Judul yang sudah teman persiapkan.
Publikasikan, dan lihat hasilnya.
Cara Yang Kedua
Pertama, buka blogger.com dan login akun sobat, kemudian buat Postingan atau Halaman Statis baru.
Selanjutnya, silahkan diisi dengan isyarat dibawah ini.
<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/AVvXsEi5E70lqmTxdNCkUYbmEzbz-y_3lqLUMkwIVVwpctuzDTQ7qrPOT6ru4spiIoCTcrImz8E8SdAb03cvA7u2ZRJLIwYE-S__7Dure97vfQmUmbD6wvK8rWEi1oAuFz8dCH1ZazT3KuLvtWg/s1600/HTML+Converter.png); } .ch-img-picker{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50gULstKO1hdivC4Jz0zlq2sca0h2J4lpd5ZQCYvNxlAgKjfn8mMHq6oVJSzxxXmnbLuhHC2UK6_-jLLcitDyxDFFnOe677mzQ3ZG21EVh0AdD_pJi-ORJyHYrDWSbd6_2-gcDMaAhG0/s1600/Color+Picker.png); } .ch-img-minifier{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKWr8SNeRCOO-U6c22LzURPvvbnLfuSWkp31Bs8lfh8KmsD7aZfe9EPGnJmsVLJhqYE8fIy3DoeQjefYbqW0ad3aX8Ir9b4H43YvG0e_GI1v28KZJIiMa2rruo0Ld_Lpmer2V241yuH4/s1600/CSS+Minifier.png); } .ch-img-triangle{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfPJROJaTOcFIhRDBP4bELDFPpupYeXi2sfXXD2-S4Yxlb9O_Kz4vEn9t_sy4_ji8itQI0bsGWXz3i7y7E7pyC3r8LX71HmS4SZ0ruW7VW-A1FV3SQ-wi_aDvHUVO2i2x1w2bDvcWMWw/s1600/CSS+Triangle.png); } .ch-img-awesome{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhKTS-oLnyGCxcJzEybX0JEo9ZAYtlgaDDSexN5Wi4NH1kp9sedkmsS7U0eLc6EQO1GVpsO1heXeqr8R-m7r_lfbRCa9keOZN4o8ksljehltxG54j8W4s8v36v_-79RUDnKYbhi23Iuk/s1600/Font+Awesome.png); } .ch-img-warna{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSHLANdfa8bjAawVo864Gcz1-pCuvKbH75fUCMZYd8ue9m7heF71zKCK0iMDRN0-CagXZ8o0DXxZ-e7EEBFVypFD05vmvrbgrU2L8tM12j-p_XC5Zv6IqD9U_r73c9A91ucRJzBkZEGM/s1600/Code+Warna.png); } .ch-img-kamus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjANm73WsDkjolwg2X9l4WnAzNsUWSoj77XpsBq_KY70A-iQ-pbfx8_8PAiagT3RodGtGICujwZuuuqXzFf9Zay19WeIeFv4DHFwun7Tn01XOvsHJY8_E3JZKeEUEk3MNH_-wTGgwah2U8/s1600/Kamus+HTML.png); } .ch-img-counter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh392BpuoBTNE6QkCII4lcgUKLXXXseOhF8ukCTt5tU10CNqR35cAaKey8YG-2vLI4_yLW-3XqCKqYIRFue1XKa-5XrwQGHbw_dOuR7UjumCfE6Vwng0tDPGBJ_TCKC44-Ls6sTX2je59c/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;} </style> <ul class="ch-grid"> <li> <div class="ch-item ch-img-html"> <div class="ch-info"> <h3> HTML CONVERTER</h3> <p> <a href="https://turuninsay.blogspot.comp/html-converter.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-minifier"> <div class="ch-info"> <h3> COLOR PICKER</h3> <p> <a href="https://turuninsay.blogspot.comp/css-minifier.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-warna"> <div class="ch-info"> <h3> CODE WARNA</h3> <p> <a href="https://turuninsay.blogspot.comp/code-warna.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-picker"> <div class="ch-info"> <h3> COLOR PICKER</h3> <p> <a href="https://turuninsay.blogspot.comp/color-picker.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-triangle"> <div class="ch-info"> <h3> CSS TRIANGLE</h3> <p> <a href="https://turuninsay.blogspot.comp/css-triangle.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-awesome"> <div class="ch-info"> <h3> FONT AWESOME</h3> <p> <a href="https://turuninsay.blogspot.comp/font-awesome.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-counter"> <div class="ch-info"> <h3> WORD COUNTER</h3> <p> <a href="https://turuninsay.blogspot.comp/word-counter.html" target="_blank">Buka</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-kamus"> <div class="ch-info"> <h3> KAMUS HTML</h3> <p> <a href="https://turuninsay.blogspot.comp/kamus-html.html" target="_blank">Buka</a></p> </div> </div> </li> </ul>Publikasikan, dan lihat hasilnya.
Sekian tutorial kali ini kalau ada yang belum paham sanggup hubungi saya lewat kolom komentar atau halaman kontak yang telah disediakan. Terimakasih... Sumber https://www.denylistianto.com/