How to remove Bundle css from Blogger Blog

Team TeachWiki

If you check the loading speed of your Blogger blog using Google's PageSpeed Insights service , then in the “Optimization” column, standard Blogger files are found that block the display, namely Bundle files:

  • for the mobile version they look like:
    • widgets/117…-widget_css_mobile_2_bundle.css
  • for PC -
    • widgets/272…-css_bundle_v2.css

Today we will delete these files. Unfortunately, there is no standard solution, but there are certain steps that will help you get rid of the Bundle v2 and mobile Bundle files.

Info alert! Some Blogger blogs also have dyn-css/authorization.css files that block loading. By deleting bundle_v2.css files , you will delete dyn-css/authorization.css at the same time.

By deleting unnecessary files, you can significantly increase your blog's loading speed.

So, let's start deleting Bundle files:

First you need to find the Bundle files in your blog template. When viewing a page of your site in a browser, press CTRL + U and look for a link similar to this:

https://www.blogger.com/static/v1/widgets/2727757643-css_bundle_v2.css

You will have your own link, so you do not need to copy my version. Follow the found link and you will see the css code. Copy it to notepad and save. We will need this code later. This is Bundle_v2 for the desktop version of your blog.

Now view the mobile version of your blog in your browser. To do this, add the ending ?m=1 to your address, i.e. follow the link https://yourblog/?m=1 View the html code of the page again using the hot keys CTRL + U, find the Bundle css file for the mobile version (mobile_2_bundle.css). I have this link:

https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css

You will have your own link. Follow the link and copy all the code into an empty notepad. Save as mobile_2_bundle.

Now let's move on to editing the blog template.

  1. Be sure to back up your blog template before making any changes !
  2. Find the </head> tag and paste the following code above it:
    3. 
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
Bundle_v2 code
</style>
<b:else/>
<style type='text/css'>
mobile_2_bundle code
</ style>
</b:if>

    >> You can include css files via <link href='link where css file is uploaded' rel='stylesheet' type='text/css' />

  3. Find the <head> tag in your blog template and replace it with </head>
  4. Find the </head> tag in the template , replace it with </head><!--<head/>—>
  5. Save your changes. Check the blog for bundle files. If this does not help, then continue changing the template.
  6. Find the <b:skin><![CDATA[ tag and replace it with
    7. 
<style type="text/css">
<!-- /*<b:skin><![CDATA[*/]]></b:skin> <
style type='text/css'>
  7. Find the ]]></b:skin> tag and replace it with </style>
  8. Save your changes. Check your template for Bundle files. If they are still present, find the </body> tag and replace it with <!--</body>--></body>
  9. Check the pattern again. Change <html to <HTML and </html> to </HTML>
  10. If during the transformations the template “floated” (check the mobile version too!), then make adjustments to the css files.
  11. The <b:include name='super.title'/> code appears twice in the blog template. Replace it in the theme with the above code twice.
  12. Now let's start optimizing the titles of the blog articles .
    • If you have an Emporio theme , then find the <h3 class='post-title entry-title'> code snippet, it is enclosed in a code snippet:
     <a expr:name='data:post.id'/>
             <h3 class='post-title entry-title'>
               <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
                 <a expr:href='data:post.link ?: data:post.url'>
                   <div class='snippet-container r-snippet-container'>
                     <div class='r-snippetized'>
                       <data:post.title/>
                     </div>
                     <b:if cond='data:post.title != &quot;&quot;'>
                       <div class='snippet-fade r-snippet-fade hidden'/>
                     </b:if>
                   </div>
                 </a>
               <b:else/>
                 <data:post.title/>
               </b:if>
             </h3>
Comments