Cara Gampang Menciptakan Featured Post Grid Responsive Di Blog
| Pada kesempatan kali ini aku akan menyebarkan tutorial cara untuk menciptakan featured post grid atau postingan yang diunggulkan dengan design yang lebih menarik dan pastinnya responsive.
Sambil fokus menciptakan konten yang menarik tidak ada salahnya kalau teman juga memperhatikan desain blog sobat, biar lebih keren, menarik biar pengunjung blog teman betah untuk menjelajahi seluruh blog sobat.
Nah, bicara soal desain web pada kali ini aku akan menyebarkan tutorial cara untuk menciptakan featured post atau postingan yang diunggulkan dihalaman depan blog dengan style yang lebih keren dan lebih menarik perhatian.
Featured post grid ini pastinya responsive artinya kalau dibuka disetiap resolusi layar tampilannya akan menyesuaikan.
Featured post grid pada blog berfungsi untuk meng-highlight atau sebagai postingan yang disorot sehingga akan selalu tampil dihalaman depan blog sobat.
Cara kerja featured post pada blog menyorot postingan gres yang gres teman publikasikan, jadi pengunjung blog teman sanggup mengetahui postingan terbaru dari blog sobat.
Nah, bagi teman yang ingin tau ingin mencoba featured post grid responsive untuk dipasang di blog teman masing-masing, silahkan simak tutorialnya dibawah ini:
Featured Post Grid Responsive Keren dan Kekinian
1. Pertama:Langkah pertama ialah back up terlebih dahulu template teman masing-masing, biar kalau ada kesalahan teman sanggup pasang ulang template yang lama.
2. Masuk Edit TML.
Silahkan masuk ke edit template teman masing-masing.
Blogger - Theme - Edit HTML.
3. Simpan CSS dibawah ini diatas ]]></b:skin> / </style>
/* Featured Post Homepage by: katamastah.com*/ .bungkus-wrapper{ padding:15px 0px 20px 0px; width:100% } #featured-posts-section{ min-height:380px; overflow:hidden } .featured-post a{ color:#fff } .featured-post a:hover{ color:#fff } .main-post.featured-post a{ margin:0; font-size:17px } .featured-post .col-post{ float:left; position:relative; overflow:hidden; margin:0 0px 0 0 } .featured-post .main-post{ background:#D84E1A; width:41.4%; padding:0 } .featured-post .secondary-post{ background:#227B96; width:29%; margin:0 0 2px 2px } .featured-post .secondary-post:nth-child(4){ background:#7D2DA7 } .featured-post .secondary-post:nth-child(5){ background:#28943A } .featured-post .secondary-post:nth-child(7){ background:#CA9215 } .featured-post span{ background:#1565c0; color:#fff; font-weight:bold; position:absolute; transition:all .4s; font-size:12px; line-height:1.0; padding:3px 6px; top:10px; right:10px; z-index:1; border-radius:1px } .featured-post img{ margin-bottom:-10px; height:100%; opacity:0.4 } .featured-post .main-post img{ height:380px; width:100%; object-fit:cover; transition:all 0.4s } .featured-post .secondary-post img{ height:191.5px; object-fit:cover; width:100%; transition:all 0.4s } .featured-post .main-post:hover img, .featured-post .secondary-post:hover img{ background-color:transparent; backface-visibility:hidden; opacity:1 } .featured-post header{ position:absolute; background:transparent; bottom:0px; left:0; right:0; padding:10px; z-index:2; margin-bottom:0px } .featured-post header:hover{ background:transparent; opacity:1 } .featured-post .secondary-post header{ padding:0px 10px; margin-bottom:0px } .featured-post header h3{ font-size:12px; line-height:1.0; font:700 16px Noto Sans, sans-serif } .featured-post h4{ font-size:12px; line-height:1.0; font:700 16px Noto Sans, sans-serif } .featured-post .main-post:hover img{ background:transparent; opacity:1; transition:all 0.4s; transform:scale(1.2) } .featured-post .secondary-post:hover img{ background:transparent; opacity:1; transition:all 0.4s; transform:scale(1.2) } @media only screen and (max-width:700px){ .featured-post .main-post{ width:39% } .featured-post .secondary-post{ width:30% } .featured-post .main-post img{ height:320px; width:100%; object-fit:cover } .featured-post .secondary-post img{ height:161px; object-fit:cover; width:100% } .featured-post header h3{ font:700 12px Noto Sans, sans-serif } .featured-post h4{ font:700 12px Noto Sans, sans-serif } } @media only screen and (max-width:640px){ .featured-post .secondary-post{ margin:0; width:50% } .featured-post .main-post{ width:100% } .featured-post .main-post img{ height:200px; width:100%; object-fit:cover } .featured-post .secondary-post img{ height:150px; object-fit:cover; width:100% } .featured-post header h3{ font:700 14px Noto Sans, sans-serif; text-align:center } .featured-post h4{ font:700 12px Noto Sans, sans-serif } .featured-post span{ display:none } } 4. Cari Kode berikut:
<div id='wrapper'> / <div id="wrapper">
Temukan arahan diatas pada blog sobat, kalau sudah ketemu, lanjut langkah selanjutnya.
5. Simpan arahan dibawah ini, dibawah arahan yang teman temukan di langkah ke 4.
<div class='bungkus-wrapper' id='featured-posts-section'> <div class='featured-post padding clearfix'> <script type='text/javaScript'> document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>"); </script> </div> </div> <!-- Featured Post End --> </b:if> kira-kira balasannya menjadi ibarat pada gambar dibawah:
Jika sudah, silahkan lanjut langkah selanjutnya.
6. Simpan Javascript dibawah ini diatas kode </head>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- Featured Post Start --> <script type='text/javascript'> //<![CDATA[ function labelthumbs(t) { document.write('<ul class="' + outerclass + '">'); for (var e = 0; e < numposts; e++) { var r, i = t.feed.entry[e], n = i.title.$t, l = i.category[0].term; if (e == t.feed.entry.length) break; for (var o = 0; o < i.link.length; o++) if ("alternate" == i.link[o].rel) { r = i.link[o].href; break } var u; try { u = i.media$thumbnail.url } catch (m) { s = i.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), u = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXLjQYalLtvfNEmGkLp3ODadQTTtK4RkDDDewvsnw6rKqdpgtUCvKspclq182WuyUADdttbNMFGpcYDSbn7XBaP291-RgnOm6iq7fchtvv4nn3yZWF0DcE3LV476Q0fLacnOO-dhlfJqj/s66-c/no-image.png" } var p = i.published.$t, v = p.substring(0, 4), h = p.substring(5, 7), f = p.substring(8, 10), g = new Array; g[1] = "January", g[2] = "February", g[3] = "March", g[4] = "April", g[5] = "May", g[6] = "June", g[7] = "July", g[8] = "August", g[9] = "September", g[10] = "October", g[11] = "November", g[12] = "December"; var A = g[parseInt(h, 10)] + " " + f + ", " + v; document.write(starttag + "<" + intag + ' class="post">'), document.write('<div class="post-media"><div class="image-wrap"><img src="' + u.replace("/s72-c/", "/s400-p/") + '" alt="Cara Praktis Membuat Featured Post Grid Responsive di Blog Cara Praktis Membuat Featured Post Grid Responsive di Blog"/></div></div><div class="post-body">'), "featured-slider" == outerclass && document.write('<span class="cat"><a href="/search/label/' + l + '">' + l + '</a></span><div class="post-title"><h4><a href="' + r + '">' + n + '</a></h4></div><div class="post-meta"><span class="post-date">' + A + "</span></div></div>"), "sub-menu" == outerclass && document.write('<div class="post-title"><h2><a href="' + r + '">' + n + '</a></h2></div><span class="post-date">' + A + "</span></div>"), document.write("</" + intag + ">" + endtag) } document.write("</ul>") }; function removeHtmlTag(e, t) { for (var s = e.split("<"), r = 0; r < s.length; r++) - 1 != s[r].indexOf(">") && (s[r] = s[r].substring(s[r].indexOf(">") + 1, s[r].length)); return s = s.join(""), s = s.substring(0, t - 1) } function sliderposts(e) { j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0, img = new Array, numposts1 <= e.feed.entry.length ? maxpost = numposts1 : maxpost = e.feed.entry.length; for (var t = 0; t < maxpost; t++) { var r, i, n = e.feed.entry[t], l = n.category[0].term, o = n.title.$t; if (t == e.feed.entry.length) break; for (var m = 0; m < n.link.length; m++) if ("alternate" == n.link[m].rel) { i = n.link[m].href; break } for (var m = 0; m < n.link.length; m++) if ("replies" == n.link[m].rel && "text/html" == n.link[m].type) { r = n.link[m].title.split(" ")[0]; break } if ("content" in n) var g = n.content.$t; else if ("summary" in n) var g = n.summary.$t; else var g = ""; postdate = n.published.$t, j > imgr.length - 1 && (j = 0), img[t] = imgr[j], s = g, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), -1 != a && -1 != b && -1 != c && "" != d && (img[t] = d); for (var h = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], p = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], f = (postdate.split("-")[2].substring(0, 2), postdate.split("-")[1]), u = (postdate.split("-")[0], 0); u < h.length; u++) if (parseInt(f) == h[u]) { f = p[u]; break } if (0 == t) { var v = '<div class="main-post col-post"><a href="' + i + '"><span class="blue">' + l + '</span><img src="' + img[t] + '" height="350" width="640" alt="Cara Praktis Membuat Featured Post Grid Responsive di Blog Cara Praktis Membuat Featured Post Grid Responsive di Blog"></img></a><header><h3 class="entry-title"><a href="' + i + '" title="Cara Praktis Membuat Featured Post Grid Responsive di Blog">' + o + "</a></h3></header></div>"; document.write(v) } else { var v = '<div class="secondary-post col-post" style="margin-right:0"><span class="blue">' + l + '</span><a class="hover_play_small" href="' + i + '"><img src="' + img[t] + '" height="200" width="320"></img></a><header><h4><a href="' + i + '">' + o + "</a></h4></header></div>"; document.write(v) } j++ } } imgr = new Array, imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXLjQYalLtvfNEmGkLp3ODadQTTtK4RkDDDewvsnw6rKqdpgtUCvKspclq182WuyUADdttbNMFGpcYDSbn7XBaP291-RgnOm6iq7fchtvv4nn3yZWF0DcE3LV476Q0fLacnOO-dhlfJqj/s66-c/no-image.png", showRandomImg = !0, aBold = !0, summaryPost = 150, summaryTitle = 50, numposts1 = 10, featured_numposts = "5"; //]]> </script> 7. jangan lupa simpan dan lihat hasilnya.
Bila featured post grid tidak muncul dihalaman depan blog sobat, silahkan ikuti setingan dibawah ini:
1. Masuk Dashbord blog teman - Setting - Other
Ikuti Setingannya pada feed ibarat paga gambar dibawah:
Jangan lupa simpan dan lihat hasilnya.
Nah, demikian sob Cara Praktis Membuat Featured Post Grid Responsive di Blog, semoga bermanfaat.
Jangan lupa untuk share dan komen yang sob,
jangan sungkan untuk meminta tutorial lainnya yang serupa biar nanti aku buatkan untuk teman semuanya.
Jika menuurt teman artikel ini bermanfaat dan sanggup membantu jangan lupa untuk share ke temen-temennya biar mereka juga tahu cara untuk Cara Praktis Membuat Featured Post Grid Responsive di Blog dengan proteksi artikel ini.
Terakhir, aku ucapkan terimakasih yang sudah berkunjung di blog kata mastah.
Salam Luar Biasa! Sumber https://www.katamastah.com/
