Add/Convert Blogger Post in Grid View

 

New blogger templates are coming in a new body layout like grid masonry,
top notification and search bar. It looks cool when your blog body
change into grid view, it has many benefits than list view because in
list view responsive media query not work well and they tightly shrink
with your responsive screen and creates lots of stress in coding while
grid view make this work easy as drinking water just you have to add
float code in the CSS
style sheet for responsiveness. Nowadays every one look responsive
style after update of Google new algorithm Mobilegeddon and template
designer also starting to create a responsive template with grid view
styling because it is easy and cool.

So you can also make your new template from grid masonry and if you are
using a custom list view template so don’t worry in this tutorial I will
define you that how you can change your body list view style into grid
view by adding some little code inside a blog HTML viewer.

Read the below steps for safe and secure code implement.

First study your template if you are using a custom theme because every
template has different style so it is important to know every little
thing about the template.

Then Back up your template for safety and comfort.

Go to Template>> Edit HTML>> Press CTRL+F.

Search the below code.

 Add the below code above .



var thumbnail_mode = "yes" ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;

//<![CDATA[
/*
Grid Style Hack For Blogger By http://www.protechnify.blogspot.com
*/
function removeHtmlTag(strx,chop){if(strx.indexOf(“<")!=-1){var
s=strx.split("<");for(var
i=0;i“)!=-1){s[i]=s[i].substring(s[i].indexOf(“>”)+1,s[i].length)}}strx=s.join(“”)}chop=(chop=1){imgtag=’‘;summ=summary_img}var
summary=imgtag+’

‘+removeHtmlTag(div.innerHTML,summ)+’

‘;div.innerHTML=summary}
//]]>

.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px;
margin-bottom:-15px;padding:5px;font-family: Helvetica,
Arial;line-height:1em;font-weight: bold; 
font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:20px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}



 Afterwards, search the below code.

Now replace with the below code and remember,
don’t replace first replace second or third if available.




createSummaryAndThumb(“summary”);
Read More

 Click to save template and jump on the next step.

Customization

If you want to remove thumbnail effects so change ‘Yes’ to ‘No’.
If you have removed thumbnail on the homepage so change “420” with your own numbers for displaying post summary on the home page.
If you have enabled thumbnail and want to set character numbers on the home page so change “185” with your desire number.
If you wish to change the height and width of the thumbnail image so change “140” for height and “230” for width by your selected number.
Want to change the Read More text so you can change by replacing Read More with your own favorite text.
Important Article: 

Last Words

This was the new hack which makes your work easy and comfortable as well
as for web designer also, as I told you can make your post gird style
into responsive by a little knowledge of code. If you need some help
with more editing so freely ask am here to solve your all queries. Stay
tune and be happy.

via Blogger http://www.droidadda.org/2017/01/addconvert-blogger-post-in-grid-view.html https://mtkdr0id.files.wordpress.com/2017/01/83976-display-blogger-posts-in-grid-view.png?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s