Cara Membuat Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
Updated:Daftar Isi [Tampilkan]
Serieswans.com | Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout - Pada umumnya semua template bawaan default blogger ini di menu halamannya masih menggunakan mode list post. tak hanya itu di template lain selain bawaan blogger juga kebanyakan masih menggunakan mode list, itu juga tergantung ke inginan dari si pembuat template tersebut. namun menurut saya lebih bagus menggunakan mode Grid layout, karena bentuk desain itu sangat menarik dan minimalist.
Membuat Halaman Layout Grid ini juga merupakan salah satu cara untuk membuat blog anda akan menjadi keren, terlihat berbeda dari template lain yang pada umumnya masih menggunakan mode list post. untuk dari segi tampilan saya rasa sudah sangat baik, sedangkan dari segi kecepatan loading juga menurut saya cukup cepat prosesnya.
Untuk Desain Mode Grid Layout yang saya akan share ini mirip dengan blog Igniel dan blog saya sendiri serieswans.com, untuk penerapannya ini cukup lumayan banyak dan rumit bagi anda yang masih awam mengenai dunia coding atau masih memulai membuat blog.
Tutorial ini saya buat karena banyak sekali permintaan melalui Contact Email blog, dan minta untuk di buatkan menu Grid layout. oleh karena itu saya coba untuk meluangkan waktu, untuk membuat tutorial cara membuat Halaman Grid Layout di blog. cara ini akan berhasil jika anda mengikutinya dengan benar. oke kita langsung saja ke tutorailnya. silahkan simak dan perhatikan langkah-langkah di bawah ini.
Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel
- Login terlebih dahulu ke blogger.com dan masuk menu Dashboard Blogger.
- Kemudian pilih menu Tema => Edit HTML
- Lalu cari kode ]]></b:template-skin> (Tekan tombol CTRL + F untuk mempermudah mencari kode tersebut).
- Setelah itu copy kode CSS Grid di bawah ini dan letakan tepat di bawah kode tersebut.
<b:if cond='data:view.isMultipleItems'>
<style>
/*<![CDATA[*/
/* GRID HOME PAGE by serieswans.com */
.post-container{padding:0;background:transparent}
.blog-posts{margin:0 -7px}
.blog-posts .post-outer{width:50%;padding:0 10px 30px 10px;box-sizing:border-box}
.blog-posts{display:flex;flex-wrap:wrap}
.blog-posts .post-outer .post{width:100%;height:100%;background:#fff;overflow:hidden;position:relative;border:2px solid rgba(0,0,0,0.2);border-radius:20px;box-shadow: 1px 0px 5px rgba(0,0,0,0.8)}
.img-thumbnail{position:relative;float:none;width:100%;height:0;border-radius:22px 22px 0 0;overflow:hidden;padding-bottom:66.666666%;}
.img-thumbnail img{width:100%;height:auto;border-radius:0;box-sizing:border-box;}
h2.post-title {
margin: 0;
padding: 14px 10px;
font-size: 16px;
display: inline-block;
width: 100%;
box-sizing: border-box;
margin-bottom: 30px;
}
.post-outer .post .post-bottom {
position: absolute;
bottom: 10px;
width: 100%;
overflow: hidden;
padding: 10px;
font-size: 11px;
box-sizing: border-box;
}
.post-outer .post span.post-comments{float:right}
span.post-label{float:left}
span.post-label a:nth-child(n+2){display:none}
.post-bottom a {
color: #fff;
background: #666;
padding: 5px 8px;
border-radius: 50px;
font-size: 10px;
}
.post-label a {
background: transparent;
color: #666;
padding:8px 0px;
}
/** ICON DEFAULT **/
.post-label a::before {
content: "f02c";
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
margin-right: 2px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
padding: 10px;
background: #666;
border-radius: 30px;
font-size: 12px;
}
.post-container{padding-right:0;width:100%;margin-top:10px}
@media (max-width:480px){.blog-posts .post-outer{padding:0 8px 4px;margin:0 0 10px 0}.img-thumbnail{margin:0}h2.post-title{margin-bottom:14px;font-size:10px;padding:1px 5px}.post-label a::before{padding:5px}.post-outer .post .post-bottom{padding:5px}}
@media (max-width:640px){.post-container{width:100%}.item-thumbnail{width:70px;float:left;padding-bottom:0;height:70px;margin-right:14px;margin-bottom:14px} .PopularPosts .item-title{padding:0;font-size:14px}.post-outer .post .post-bottom {bottom:5px;}}
/*]]>*/
</style>
</b:if>
- Selanjutnya cari kode </head> dan letakan kode Javascript Grid di bawah ini tepat di atas kode tersebut
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
thumburl = thumburl.replace("s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/");
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src="", a);
c = s.indexOf(""", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = no_thumb;
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
document.write('<ul class="rp_thumbs">');
document.write('<li>');
if (showpostthumbnails == true)
document.write('<a href="' + posturl + '"><div class="rp_thumb"><span class="rollover"></span><img width="' + thumb_width + '" height="' + thumb_height + '" alt="' + posttitle + '" src="' + thumburl + '"/></div></a>');
document.write('<span class="rp_title"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
var towrite = '';
document.write('<span class="rp_meta">');
if (showpostdate == true) {
towrite = towrite + '<span class="rp_meta_date">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
}
if (showcommentnum == true) {
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<span class="rp_meta_comment"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
towrite = towrite + commenttext;
}
if (displaymore == true) {
towrite = towrite + '<span class="rp_meta_more"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
}
document.write(towrite);
document.write('</span>');
document.write('<span class="rp_summary">');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
document.write('</span>');
document.write('</li>');
document.write('</ul>');
}
document.write('<ul class="rp_thumbs2">');
for (var i = 1; i < numposts2; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 1; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl2;
try {
thumburl2 = entry.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/");
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src="", a);
c = s.indexOf(""", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl2 = d;
} else thumburl2 = no_thumb2;
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
if (showpostthumbnails2 == true)
document.write('<a href="' + posturl + '"><div class="rp_thumb2"><img width="' + thumb_width2 + '" height="' + thumb_height2 + '" alt="' + posttitle + '" src="' + thumburl2 + '"/></div></a>');
document.write('<li>');
document.write('<span class="rp_title rp_title2"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></span>');
var towrite = '';
document.write('<span class="rp_meta rp_meta2">');
if (showpostdate2 == true) {
towrite = towrite + '<span class="rp_meta_date rp_meta_date2">' + cdday + '/' + cdmonth + '/' + cdyear + '</span>';
}
if (showcommentnum2 == true) {
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<span class="rp_meta_comment rp_meta_comment2"><a href="' + commenturl + '" target ="_top">' + commenttext + '</a></span>';
towrite = towrite + commenttext;
}
if (displaymore2 == true) {
towrite = towrite + '<span class="rp_meta_more rp_meta_more2"><a href="' + posturl + '" class="url" target ="_top">Read More...</a></span>';
}
document.write(towrite);
document.write('</span>');
document.write('</li>');
}
document.write("</ul>")
}
//]]>
</script>
</b:if>
</b:if>
<script type='text/javascript'>
var widgetBacaJuga = true;
var numposts = 1;
var numposts2 = 3;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 100;
var thumb_height2 = 70;
var no_thumb = 'https://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png'
var no_thumb2 = 'https://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png'
</script>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_width=200;
var image_height=150;
image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
if(post_title!="") return image_tag; else return "";
}
//]]>
</script>
<style>
}
@media only screen and (max-width:1024px){
.post-bottom a {
font-size: 22px;
}
}
@media only screen and (max-width:800px){
.post-bottom a {
font-size: 10px;
}
}
@media only screen and (max-width:640px){
.post-bottom a {
font-size: 8px;
}
}
@media only screen and (max-width:568px){
.post-bottom a{
font-size: 5px;
}
}
@media only screen and (max-width:480px) {
.post-bottom a{
font-size: 7px;
}
}
</style>
- Selanjutnya cari kode <div class='blog-posts'> atau yang mirip dengan kode tersebut. biasanya setiap template berbeda.
- Lalu hapus kode di bawahnya, contoh kodenya seperti pada gambar di bawah ini.
- Kemudian copy HTML di bawah ini dan letakan di tempat anda menghapus kode tersebut.
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</b:if>
<data:adEnd/>
</div>
- Setelah itu kita akan mengganti postingan halaman default dari template tersebut dari mulai snippet dan yang lainnya. cari kode seperti gambar di bawah ini. letak kode tersebut biasanya di atas kode </article>
- Jika sudah ketemu, silahkan ganti tersebut dengan kode di bawah ini.
<!-- Posting halaman default (index, arsip, dll.) -->
<b:if cond='data:post.labels'>
</b:if>
<b:include data='post' name='postthumbnail'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<!-- <div class='post-snippet'>
<data:post.snippet/>
</div> -->
<div class='post-bottom'>
<span class='post-comments'>
<b:include data='post' name='postcommentinfo'/>
</span>
<b:if cond='data:post.labels'>
<span class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</span>
<div style='clear: both;'/>
</b:if>
</div>
</b:switch>
<div style='clear: both;'/>
- Tahap pemasangan kode tersebut sudah selesai, sekarang tinggal membuat judul postingannya menjadi responsive di semua layar.
- Silahkan copy script CSS di bawah ini dan letakan di atas kode </body>
<style>
h2.post-title {
margin-left: 2px;
}
@media only screen and (max-width:1080px){
h2.post-title {
margin-left: 2px;
}
}
@media only screen and (max-width:800px){
h2.post-title {
margin-left: 1px;
}
}
@media only screen and (max-width:640px){
h2.post-title {
margin-left: 1px;
}
}
@media only screen and (max-width:480px) {
h2.post-title {
margin-left: 0px;
}
}
</style>
- Terakhir simpan Tema dan cek hasilnya.
Cara ini juga sudah saya test di template viomagz versi terbaru, jika anda mengggunakan template lain, silahkan sesuaikan saja mengenai penempatannya.
Nah sampai di sini caranya sudah selesai dah hasillnya akan seperti gambar di atas. jika setelah anda cek hasilnya berantakan, silahkan anda tanyakan di kolom komentar, saya akan bantu sebisanya.
Jika anda mengalami masalah seperti gambar di bawah ini :
Jika kita lihat pada gambar pertama di atas ini, pada bagian gambar masih belum responsive, Icon label masih belum muncul (hanya cuma kode dari font awesome).
Sedangkan pada gambar yang kedua, jarak antara halaman postingan dengan sidebar itu sangat dekat, silahkan cari kode wrapper dan ubah lebar widthnya. silahkan sesuaikan saja.
Untuk anda yang masih belum paham dan mengalami masalah seperti gambar di atas, silahkan tonton video cara membuat halaman mode grid layout lengkap di bawah ini.
Jika anda mengalami masalah seperti gambar di bawah ini :
Jika kita lihat pada gambar pertama di atas ini, pada bagian gambar masih belum responsive, Icon label masih belum muncul (hanya cuma kode dari font awesome).
Sedangkan pada gambar yang kedua, jarak antara halaman postingan dengan sidebar itu sangat dekat, silahkan cari kode wrapper dan ubah lebar widthnya. silahkan sesuaikan saja.
Untuk anda yang masih belum paham dan mengalami masalah seperti gambar di atas, silahkan tonton video cara membuat halaman mode grid layout lengkap di bawah ini.
tips — Update V.2 Mode Halaman Grid
Rincian Perubahan/Penambahan 04/05/2020 :
1. Penambahan Snippet
2. Perubahan column dari 2 baris menjadi 1 baris di mode tampilan mobile
1. Penambahan Snippet
2. Perubahan column dari 2 baris menjadi 1 baris di mode tampilan mobile
- Masuk ke Edit HTML
- Silahkan cari kode <div class='post-bottom'>
- Selanjutnya copy kode di bawah ini dan letakan di atas kode tersebut
<div class='serieswans-snippet'>
<div class='post-snippet-p'>
<b:eval expr='snippet(data:post.longSnippet, {length: 100})'/>
</div>
</div>
- Lalu copy kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
.serieswans-snippet {
padding: 5px;
margin-bottom: 20px;
}
.post-snippet-p{
font-size:13px;
border-left:2px solid #2962ff;
padding-left: 2px;
}
- Pemasangan Snippet sudah selesai, tinggal kita ubah tampilan pada mode mobilenya
- Cari kode .blog-posts .post-outer { perlu di ingat kode tersebut tidak hanya satu, silahkan anda cari kode tersebut yang di bungkus oleh kode @media (max-width: 480px). jika sudah ketemu , ubah width:50% ke 100%
- Terkahir simpan tema dan cek hasilnya
Demikian pembahasan tutorial kali ini mengenai Cara Membuat Tampilan Halaman Blog Menjadi Grid Layout Mirip Blog Igniel. jika anda masih belum mengerti mengenai tutorial diatas, silahkan ajukan pertanyaannya di kolom komentar ya. semoga bermanfaat.

Mantap postingannya mas, akhirnya dibikin juga tutorialnya, saya yang email mas kemarin.. saya coba dulu, kalau ada yg tidak dimengerti mohon dibantu ya mas
BalasHapussetelah selesai saat mau di save muncul tulisan ini : Kesalahan saat mengurai XML, baris 2769, kolom 8: The element type "style" must be terminated by the matching end-tag "/style" , itu kenapa ya mas?
HapusAda 2 kemungkinan mas yaitu tag "/style" ada yng kehpus sama mas, atau coba mas tambahiin tag "</style" nya. silahkan mas coba cek lagi. karena sensitif mas . kalo kode kurang satu aja,pasti akan eror
HapusNice tutorial gan
BalasHapusTerima kasih gan, selamat mencoba :)
HapusTerima kasih infonya mas.
BalasHapussama-sama gan, selamat mencoba :)
HapusThanks gan
BalasHapusSama-sama gan, terimakasih sudah mencoba
HapusMantap.. step nya sudah saya terapkan ke dalam website dan berhasil membuat tampilan halaman menjadi grid layout..
BalasHapusSalam dari InfoGaes.Com
Oke gan, sama-sama
Hapusom kalau template https://fiksioner.blogspot.com/ bisa nggak ya dibuat versi grid ?
BalasHapusInsha allah bisa gan, harus di coba dulu
HapusKarena strukturnya berbeda
HapusMin tolong buatkan menu seperti web admin Serieswans
BalasHapuskalo untuk menu, ada banyak kode yang harus di sesuaikan, agar responsive.
Hapusinsha allah nanti kalo ada waktu luang, saya akan coba membuat tutorialnya :)
work gan , mantap tutorial nya sangat berguna, nunggu tutorial lainya
BalasHapusterimakasih atas feedbacknya gan. pantengin terus blognya ya bro :)
Hapusmantap gan work di template viomagz saya
BalasHapusMantap gan ,
HapusF02c itu apa gan??
BalasHapusDan biar pas sejajar gmna gan pnya aku 7 grid di menu utama, mau aku hilangin satu biar rapih carany gmna biar 6 postingan ???
Itu kode font awesome, kalo mau di sejajarin , mas edit tita letak, edit post, lalu ubah jumlh postingan yg di tampilkan menjadi 6
HapusSama-sama gan
BalasHapusArtikel sangat bermanfaat bagi saya yang pemula belajar edit template
BalasHapusAlhamdulillah kalo begitu gan, semngt terus bljr edit templatenya :)
HapusBermanfaat min!
BalasHapusThanks gan, sudah berkunjung
Hapusmin biar gak melengkung bagaimana?? kurang suka melengkung begitu sudut nya, tolong kirim tutor nya ke khenzlcasher@gmail.com
BalasHapuscaranya tinggal ubah border-radius:20px menjadi 0px... silahkan di coba
HapusWihh mantap nih grid :D
BalasHapusTapi viomagz ditampilan mobile juga udah Grid, tapi satu baris eh ini dua baris keren joonn
Alhamdulillah senang bisa membantu anda mas :) hatur nuhun
HapusMakasih kak artikel tentang membuat halaman grid. Ini sangt membantu buat blog saya
BalasHapusSama-sama mas, senang bisa membantu :)
HapusError bang saat di upload
BalasHapusCoba cek lagi kodenya, apa ada yang kurang atau lebih.
BalasHapusBaru bisa untuk non AMP.. semoga para peneliti CSS bisa buatkan juga grid atau list untuk non AMP..
BalasHapusKode pengganti itu kira kira apa ya gan? Soalnya di template gw nggak ada kode gituan
BalasHapusBisa di jelaskan, kode yg mana ya ?
Hapustutorial cara setting untuk ampilan mobilenya dong
BalasHapusSetting tampilan mobile yg bagian mana gan ?
Hapuskok di hp turun ya gan gambarnya,cara fixnya gimana ?? Mohon pencerahanya terimakasih
BalasHapusfixnya sudah ada itu di atas, di videonya juga sudah ada tutorialnya
HapusCara tambahin snippet article /summary post di grid gimna??
BalasHapusoke gan, akan saya update artikelnya
HapusSudah saya ubah dan ada beberapa penambahan snippet dan mode tampilan mobilenya dari 2 column menjadi 1 column saja. selamat mencoba dan terimakasih sudah berkunjung
BalasHapusWah keren nih, saya harap next bikin tutorial icon svg untuk label seperti punya igniel atau serieswana
BalasHapusoke gan nanti saya buatkan tutorialnya
Hapusgan bisa redesainkan template saya gak ?
BalasHapuskalau di telatakan di atas skin tidak bisa ada kode beerikut:
BalasHapus/*]]>*/
</style>
</b:if>
coba sertakan kode lengkapnya gan, lewat pastebin saja kalo bisa
HapusAlangkah baikknya,, mnjadikan teks biasa gak bisa dicopas, biar permudah kami copas kode yg ente bagikan
BalasHapuskaya nya untuk template viomagz 2022 udah ga work gan
BalasHapusDi template terbaru udah ga work, karena strukturnya udah beda, silahkan coba di template versi 3.2 dan 3.3
HapusUntuk viomag v1.1.0 gak work kah mas help mee jawab please
BalasHapuscoba pakai viomagz v 3.2
Hapustolong kasih fullnya aja mas, saya mau build dari 0. masalahnya ketika nyari div class='blog-post' ga ketemu, karena widget postnya default by blogger
BalasHapusPake template apa?
Hapus