Membuat Menu Grid di Postingan Blog

Deny Listianto 15 Agustus 2018

Membuat Menu Grid di Postingan Blog atau Membuat Menu Grid di Halaman statis blog, sebenarnya saya bingung 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 Deny Listianto

Cukup banyak judul bukan? karena ide ini saya dapatkan dari situs Malas Ngoding (https://www.malasngoding.com) dan saya kembangkan sendiri menjadi halaman Web Tools saya saat ini, oleh karena itu saya tidak tahu apa namanya.

Hal ini mempunyai beberapa fungsi yang dapat memperkeren blog sobat, seperti : Menu Grid pada Halaman Postingan atau Statis blog, Halaman Web tools, dan masih banyak lagi.

Baiklah bagi yang penasaran seperti apa tampilannya, bisa langsung klik tombol dibawah untuk melihat demonya.

Demo

Jika sobat tertarik dan ingin memasangnya silahkan ikuti tutorial dibawah ini.

Cara Membuat Halaman Web Tools Seperti Blog Deny Listianto

Ada dua cara yang saya bagikan, silahkan pilih salah satu cara yang menurut sobat lebih simpel.

Cara Yang Pertama

Pertama, buka blogger.com dan login akun sobat, selanjutnya pindah ke menu Tema lalu buka Edit HTML.

Cari kode ]]></b:skin> atau </style>, lalu tambahkan kode dibawah sebelum kode yang telah sobat 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://2.bp.blogspot.com/-Zrh_YHM4RjY/WxwVe0UlZ5I/AAAAAAAAAG8/knAbfPwi8P4ipy1TwXvYro0xn0CG2J8qwCLcBGAs/s1600/HTML%2BConverter.png);
}
.ch-img-picker{
background-image:url(https://2.bp.blogspot.com/-soxW1kd8jBM/WxwYbtUAdtI/AAAAAAAAAHU/ncoUbCnpKK8NyrgHr-_uU4up9_D75-r-ACLcBGAs/s1600/Color%2BPicker.png);
}
.ch-img-minifier{
background-image:url(https://1.bp.blogspot.com/-wvSQLh8swRI/WxwYatTWXII/AAAAAAAAAHI/N0wrYkZPBlc-87G5dk-qTLs2DKd71OzDwCLcBGAs/s1600/CSS%2BMinifier.png);
}
.ch-img-triangle{
background-image:url(https://2.bp.blogspot.com/-zinn3bjQcgQ/WxwYa4th5zI/AAAAAAAAAHQ/X9TdJF59a6c741VQWKv0yJHcy8uCvKivgCLcBGAs/s1600/CSS%2BTriangle.png);
}
.ch-img-awesome{
background-image:url(https://1.bp.blogspot.com/-8zVK8w0Gv0M/WxwcM3aIR4I/AAAAAAAAAH8/UZYL4AVsrJg3ZFGLUD4L1TdRR0_v7ei3ACLcBGAs/s1600/Font%2BAwesome.png);
}
.ch-img-warna{
background-image:url(https://1.bp.blogspot.com/-_xz_YcjraJg/WxwYalB6CMI/AAAAAAAAAHM/Ev4qlQd9O70XPaqQNFE1yre1OcKbOdjbgCLcBGAs/s1600/Code%2BWarna.png);
}
.ch-img-kamus{
background-image:url(https://4.bp.blogspot.com/-_2d_dweDCd0/Wxwba--hDAI/AAAAAAAAAH0/ebyEptepj28Ud3jh_a1bJCkrGmyt-m-NgCLcBGAs/s1600/Kamus%2BHTML.png);
}
.ch-img-counter{
background-image:url(https://1.bp.blogspot.com/-ZX4I5F3V1Bs/WxwZv5MGlJI/AAAAAAAAAHo/CCOJIC1gKN4wtnQjhIm4v4W_uEwQiYm-gCLcBGAs/s1600/Word%2BCounter.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 sobat persiapkan.

Simpan Tema, Selanjutnya Buat Postingan baru atau Halaman Statis baru di blog sobat lalu pindah dari menu Compose menjadi HTML.

Letakkan kode 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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/kamus-html.html" target="_blank">Buka</a></p>
</div>
</div>
</li>
</ul>

Ganti URL, Judul, dll. dengan URL dan Judul yang sudah sobat persiapkan.

Publikasikan, dan lihat hasilnya.

Cara Yang Kedua

Pertama, buka blogger.com dan login akun sobat, lalu buat Postingan atau Halaman Statis baru.

Selanjutnya, silahkan diisi dengan kode 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://2.bp.blogspot.com/-Zrh_YHM4RjY/WxwVe0UlZ5I/AAAAAAAAAG8/knAbfPwi8P4ipy1TwXvYro0xn0CG2J8qwCLcBGAs/s1600/HTML%2BConverter.png);
}
.ch-img-picker{
background-image:url(https://2.bp.blogspot.com/-soxW1kd8jBM/WxwYbtUAdtI/AAAAAAAAAHU/ncoUbCnpKK8NyrgHr-_uU4up9_D75-r-ACLcBGAs/s1600/Color%2BPicker.png);
}
.ch-img-minifier{
background-image:url(https://1.bp.blogspot.com/-wvSQLh8swRI/WxwYatTWXII/AAAAAAAAAHI/N0wrYkZPBlc-87G5dk-qTLs2DKd71OzDwCLcBGAs/s1600/CSS%2BMinifier.png);
}
.ch-img-triangle{
background-image:url(https://2.bp.blogspot.com/-zinn3bjQcgQ/WxwYa4th5zI/AAAAAAAAAHQ/X9TdJF59a6c741VQWKv0yJHcy8uCvKivgCLcBGAs/s1600/CSS%2BTriangle.png);
}
.ch-img-awesome{
background-image:url(https://1.bp.blogspot.com/-8zVK8w0Gv0M/WxwcM3aIR4I/AAAAAAAAAH8/UZYL4AVsrJg3ZFGLUD4L1TdRR0_v7ei3ACLcBGAs/s1600/Font%2BAwesome.png);
}
.ch-img-warna{
background-image:url(https://1.bp.blogspot.com/-_xz_YcjraJg/WxwYalB6CMI/AAAAAAAAAHM/Ev4qlQd9O70XPaqQNFE1yre1OcKbOdjbgCLcBGAs/s1600/Code%2BWarna.png);
}
.ch-img-kamus{
background-image:url(https://4.bp.blogspot.com/-_2d_dweDCd0/Wxwba--hDAI/AAAAAAAAAH0/ebyEptepj28Ud3jh_a1bJCkrGmyt-m-NgCLcBGAs/s1600/Kamus%2BHTML.png);
}
.ch-img-counter{
background-image:url(https://1.bp.blogspot.com/-ZX4I5F3V1Bs/WxwZv5MGlJI/AAAAAAAAAHo/CCOJIC1gKN4wtnQjhIm4v4W_uEwQiYm-gCLcBGAs/s1600/Word%2BCounter.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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/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://www.denylistianto.com/p/kamus-html.html" target="_blank">Buka</a></p>
</div>
</div>
</li>
</ul>

Publikasikan, dan lihat hasilnya.

Sekian tutorial kali ini jika ada yang belum paham bisa hubungi saya lewat kolom komentar atau halaman kontak yang telah disediakan. Terimakasih...

Deny Listianto

15 Agustus 2018

Membuat Menu Grid di Postingan Blog

Cara Membuat Halaman Web Tools Seperti Blog Deny Listianto

Notifications