Display Blogger Posts In Grid View With Thumbnails - Hallo sahabat Ramuan Kesehatan, Pada Artikel yang anda baca kali ini dengan judul Display Blogger Posts In Grid View With Thumbnails, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Display Blogger Posts In Grid View With Thumbnails
link : Display Blogger Posts In Grid View With Thumbnails

Display Blogger Posts In Grid View With Thumbnails

Wanna display Blogger Post In grid view with Thumbnails.

If yes then you are at perfect place. Today we will discuss on it.

In most blogs there a homepage full of blog posts with list style. Visitors have to scroll to go to down. So, if you want to give your visitors a good experience on your blog you should use blogs posts with Grid view.

Grid View is a script for blogger blog which will display Blogger blog post in Grid style with Thumbnails in homepage and archive pages. This is best for blogs with videos and wallpapers. Before proceeding to the steps for adding grid view, take a look at the demo.

                        Live Demo

I hope you have satisfied with the demo. And if you want to display Blogger posts in grid view with Thumbnails in your blog then follow the next steps.

Display Blogger Posts With Grid View With Thumbnails

Step 1: Login to your Blogger Dashboard.

Step 2: Go to Template >> Edit HTML.

Step 3: Click anywhere inside the code area and press Ctrl + F to open the search box.

Step 4: After that search for the </head> tag.

Step 5: When you find the code just above </head> code paste the code given below:

<script src='http://code.jquery.com/jquery-1.9.1.js'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
function hideLightbox(){for(var a=document.getElementsByTagName("img"),b=0;b<a.length;++b)a[b].onmouseover=function(){var a=this.parentNode.innerHTML;this.parentNode.innerHTML=a,this.onmouseover=null}}$(document).ready(function(){var a=200,b=170,c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfv1Pq_VA9IEWCpSIHQq-8pq0_YbdH2puEUCQfI-kmhHutmfd2HscddB9ZNyrsHLzwNbWL-1pyZfzGNN-0EMjdZrbmmlsTE3r6igJJpuzhuE6CLNIRLVBpD6eRPSypO_ht5CB1XdKnl-Q/w500-c-h330/no-thumb.png",d=1;$(".post-body").each(function(e,f){var f=$(f),g=$(f).find("img").first(),h=f.parent().find("h3 a"),i=h.attr("href"),j=h.text();if($(h).remove(),f.empty(),g.attr("src")){var k=g.attr("height"),l=g.attr("width"),m=$(g).parent();if(f.append(m),d)g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"w500-h330-c")}),g.removeAttr("width").removeAttr("height");else{g.attr({src:g.attr("src").replace(/s\B\d{3,4}/,"s"+a)}),g.removeAttr("width");var n=(k/l*a).toFixed(0);g.attr("height",n)}}else var g=$("<img>").attr("src",c),m=$("<a>").append(g).appendTo(f);m.attr("href",i).css("clear","none").css("margin-left","0").css("margin-right","0").addClass("postThumbnail");var o=$("<div>").prepend(j).css("opacity","0.9").css("filter","alpha(opacity=0.9)").appendTo(m);o.height();o.css("margin-top","-28px"),f.css("height",b).css("overflow","hidden")}),$("#blog-pager").css("clear","both")}),window.addEventListener?window.addEventListener("load",hideLightbox,void 0):window.attachEvent("onload",hideLightbox);
//]]>
</script>
<style type='text/css'>
.post {
width:31.3%;
float:left;
display:inline-block;
border-bottom: medium none;
margin: 0 1% 2%;
padding-bottom: 0;
}
h2.date-header,.post-footer {
display: none;
}
h3.post-title, .comments h4,.post-header{margin:0;}
.postThumbnail:hover {text-decoration:none;}
a.postThumbnail div {
text-decoration: none;
color: #fff;
padding:0 5px;
height:24px;
font:bold 12px/25px &quot;Trebuchet MS&quot;,Trebuchet,Verdana,sans-serif;
text-transform: capitalize;
background: rgb(125,126,125);
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#7d7e7d&#39;,endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
.postThumbnail{width:100%;}
.postThumbnail:hover div {
display: block;
}
.postThumbnail img {
width:100%;
background-color: transparent;
border: medium none;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.postThumbnail img:hover {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if></b:if>

Customization:-

• To change the width of the image replace 200 with your own size.

• To change the height of image replace 170 with your own size.

• To change default image, when there is no image then replace the link highlighted in red.

Last Words

Now your posts will start displaying in grid view with Thumbnails. I hope you liked this post. Comment down your problems and share this post with your friend. For more stay tuned with us...

Demikianlah Artikel Display Blogger Posts In Grid View With Thumbnails

Sekianlah artikel Display Blogger Posts In Grid View With Thumbnails kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Display Blogger Posts In Grid View With Thumbnails dengan alamat link https://ramuankesehatan-2020.blogspot.com/2018/01/display-blogger-posts-in-grid-view-with.html

Tweet