الصفحة الرئيسية
Blogger

Easy Steps to Set Default Grid Mode in Fletro Pro Blogger Theme

Learn how to customize the Fletro Pro Blogger Theme easily. Watch the video tutorial and follow the simple steps. Back up your theme code for safety.
Stephano kambeta
Here's how to set the Default Grid Mode in the Fletro Pro Blogger Theme. Follow the steps shown in the video below.

Easy Steps to Set Default Grid Mode in Fletro Pro Blogger Theme

Note: Before you start, back up your theme code. If you make a mistake, you can easily restore the previous version.

The process can be tricky for beginners, so proceed with caution to avoid breaking your website.


Step 1: Place the following code below the Body Tag.

To clarify, you need to locate the "Body Tag" within your theme's HTML code and insert the provided code snippet immediately after it. 

<b:if cond='data:view.isMobile'> 
    <b:class cond='data:view.isMultipleItems' name='gridMode'/>
    </b:if>

Step 2: Edit the code within the `<body>` tag as instructed in the video. 

<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: Modify the additional JavaScript code as demonstrated in the video. 

 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: Optionally, adjust the CSS code according to the instructions in the video. 

.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}

Great! If you have any more questions or need further assistance, feel free to ask in the comment section.

إرسال تعليق