Membuat Menu Grid di Postingan Blog - Deny Listianto

August 15, 2018

Membuat Menu Grid di Postingan Blog

Membuat Menu Grid di Postingan Blog

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.


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.

Membuat Menu Grid di Postingan Blog

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.

Membuat Menu Grid di Postingan Blog

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.

Membuat Menu Grid di Postingan Blog

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...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo