Table of Contents
Here, I will show you how you can set the Default Grid Mode in Fletro Pro Blogger Theme. Just follow the steps as shown in the below video.
Note: You should Take a Backup of your Theme code before following the steps. So, in case if you do any mistake you can easily restore the previous versions quite easily.
The Process is a little bit complicated for the beginners so do it carefully, otherwise you may break your website.
Here, I will Divide the steps in the 4 Steps.
Step-1: Place the code below the Body Tag.
<b:if cond='data:view.isMobile'> <b:class cond='data:view.isMultipleItems' name='gridMode'/> </b:if>
Step-2: Make changes in the Body Code.
<b:if cond='data:view.isMultipleItems'>
<div class='postMode' onclick='gridMode()'>
<svg class='line svg-1' viewBox='0 0 24 24'><rect height='7' width='7' x='3' y='3'/><rect height='7' width='7' x='14' y='3'/><rect height='7' width='7' x='14' y='14'/><rect height='7' width='7' x='3' y='14'/></svg>
<svg class='line svg-2' viewBox='0 0 24 24'><rect height='7' rx='2' ry='2' width='18' x='3' y='3'/><rect height='7' rx='2' ry='2' width='18' x='3' y='14'/></svg>
</div>
<script>/*<![CDATA[*/ (localStorage.getItem('list')) === 'listmode' ? document.querySelector('#mainContent').classList.remove('gridMode') : document.querySelector('#mainContent').classList.add('gridMode') /*]]>*/</script>
</b:if>
Step-3: Make changes in the additional javascript.
function gridMode(){localStorage.setItem("list","listmode"===localStorage.getItem("list")?"grid":"listmode"),
"listmode"===localStorage.getItem("list")?document.querySelector("#mainContent").classList.remove("gridMode"):document.querySelector("#mainContent").classList.add("gridMode")};
Step-4: Changes in the CSS Code (Optional)
.gridMode .blogPosts{width:calc(100% + 15px);left:-7.5px}
.gridMode .blogPosts .hentry{padding-bottom:30px;width:calc(100% - 15px);margin-left:7.5px;margin-right:7.5px}
.gridMode .blogPosts .hentry .postHeader, .gridMode .blogPosts .hentry .postInfo{font-size:14px}
.gridMode .blogPosts .hentry .postTitle{font-size:17px}
Note that the 4th step is optional here. I hope you have succefully set the default Grid Mode in Fletro Pro theme.
@@@
