Navigation

How To Solve Blogger Layout Problem

How To Solve Blogger Layout Problem
A simple guide to Solve Blogger Layout Problem, Recently Blogger updated their code which caused many problems in layout section, Like you not able to edit the widget in our Blush Blogger TemplateElegance Blogger Template, and Amazine Blogger Template.
So, if you’re using our these blog templates and if you’re experiencing the same problem only then use the following code otherwise don’t.
How To Solve Blogger Layout Problem

Solve Blogger Layout Problem

  1. Go to Blogger Template
  2. Edit HTML
  3. Just scroll Down a little and when you see code like this :
    How To Solve Blogger Layout Problem
  4. Just Add the following code above it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#layout #outer-wrapper {
    max-width: 100%;
    width: 800px;
    float: left;
    /* margin: 0px auto; */
    position: relative;
}

#layout .body-wrapper:before{

content: " ";
    display: table;
}
#layout .body-wrapper:after{

    content: " ";
    display: table;
clear: both;
}

#layout #content-wrapper {

width: 100%;
}
body#layout #post-wrapper {
    width: 92%!important;
    float: left;
    overflow: visible;
}

body#layout #mywrapper {
    width: 66%;
}

body#layout #sidebar-wrapper {
    width: 34%;
}

body#layout #mywrapper {
    width: 66%!important;
}

#layout .admin{
display:block!important;
}

Solve Share Icons overlapping problem

How To Solve Blogger Layout Problem
To resolve this you need to add the following code in Template -> Customize -> Advanced -> Add CSS
How To Solve Blogger Layout Problem

1
2
3
4
5
6
.post-share-box {
    box-shadow: none;
    position: relative;
    min-width: auto;
    top: -7px;
}
Recently Some of our user experiencing the problem of Menu and social widget start Disappearing. If you’re using our Blush Blogger Template, Amazine Blog theme then it’s quite possible that you may have to experience the same. Adding the below code can help you to solve the problem.

Solve Menu and Social Widget In Top Bar

  1. Go to Blogger Template
  2. Edit HTML
  3. And Search For
  4. using ctrl + f
  5. It will be something like this :
    How To Solve Blogger Layout Problem
  6. Just replace the that line you’ve just searched with the code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  <b:section class='menu' id='menu' maxwidgets='1' showaddelement='yes'>
    <b:widget id='LinkList1' locked='false' title='' type='LinkList' visible='true'>
      <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
    </b:widget>
  </b:section>

 <script type='text/javascript'> 
            //<![CDATA[
            $("#LinkList1").each(function() {
       var e = "<ul class='sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-icons'><li><ul id='sub-menu'>";
       $("#LinkList1 li").each(function() {
           var t = $(this).text(),
               n = t.substr(0, 1),
               r = t.substr(1);
           "_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='sub-menu'>")
       });
       e += "</ul></li></ul>";
       $(this).html(e);
       $("#LinkList1 ul").each(function() {
           var e = $(this);
           if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
       });
       $("#LinkList1 li").each(function() {
           var e = $(this);
           if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
       })
   });

            //]]>
            </script>

And For The Top Social Widget Search For
1
<b:section class='top-icon-area top-mn-right' id='top-social' maxwidgets='1'/>

and replaced with the code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<b:section class='top-icon-area top-mn-right' id='top-social' maxwidgets='1'>
  <b:widget id='LinkList2' locked='true' mobile='yes' title='Social Link' type='LinkList' version='1' visible='true'>
    <b:includable id='main'>        
        <div class='widget-content'>
          <div id='top-social'>
            <b:loop values='data:links' var='link'>
              <a expr:class='&quot;fa fa-&quot; + data:link.name' expr:href='data:link.target' expr:title='data:link.name' rel='nofollow' target='_blank'/>
            </b:loop>
          </div>   
        </div>
      </b:includable>
  </b:widget>
</b:section>

Social Widget For Blush Theme Only
And For The Social Widget in bottom Search For

1
<b:section class='post-share' id='top-social-foot' maxwidgets='1'/>
and replaced with the code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
   <b:section class='post-share' id='top-social-foot' maxwidgets='1'>
<b:widget id='LinkList853' locked='true' mobile='yes' title='Social Link' type='LinkList' version='1' visible='true'>
  <b:includable id='main'>        
        <div class='widget-content'>
          <ul id='as-share'>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target' expr:title='data:link.name' rel='nofollow' target='_blank'><i expr:class='&quot;fa fa-&quot; + data:link.name'/><data:link.name/></a></li>
            </b:loop>
          </ul>   
        </div>
      </b:includable>
</b:widget>
</b:section>

Social Widget For Amazine & Alice Theme Only
And For The Social Widget in bottom Search For

1
<b:section class='lol' id='top-social-foot' maxwidgets='1'>
and replaced with the code below.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<b:section class='lol' id='top-social-foot' maxwidgets='1'>
<b:widget id='LinkList853' locked='true' mobile='yes' title='Social Link' type='LinkList' version='1' visible='true'>
  <b:includable id='main'>        
        <div class='widget-content'>
          <ul id='as-share'>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target' expr:title='data:link.name' rel='nofollow' target='_blank'><i expr:class='&quot;fa fa-&quot; + data:link.name'/><span><data:link.name/></span></a></li>
            </b:loop>
          </ul>   
        </div>
      </b:includable>
</b:widget>
</b:section>
I hope it works for you if it doesn’t please leave a comment below.
Share

Post A Comment:

0 comments: