How to delete CSS, Javascript, and Blogger Bundle Widgets

How to delete CSS, Javascript, and Blogger Bundle Widgets
The following tips are requests from bloggers via the contact form asking how to delete CSS, Javascript, and Blogger Bundle Widgets on the template? Actually this method has a lot of sharing, but there is nothing wrong if this time Arlina Design shares these tips.

Why do you have to delete CSS, Javascript, and Blogger Bundle Widgets?

Removing CSS, Javascript, and Blogger Bundle Widgets is one of the optimizations to speed up blog loading by hiding CSS, Javascript, and blogger default Bundle Widgets that will automatically load when the blog is opened. For example if we check the blog on Google PageSpeed ​​Insight , a warning will appear.
Of course, having a blog with fast loading will make visitors more comfortable and even easier for search engines to crawl your blog. Well, to overcome this problem we have to edit some HTML tags in the blog template so that the default CSS, Javascript, and Bundle Widget code is no longer automatically loaded on the blog.
Warning: By doing tips that I will share this, most of the default blogger widgets won't work properly, so backup the template before doing this optimization.
If it's ready, please follow the steps below.

How to delete CSS, Javascript, and Blogger Bundle Widgets


Open Blogger > Click the Theme menu > Click the Edit HTML button then find the opening code for the head below

<head>

Change with the code below

&lt;head&gt;

Next look for this code to hide CSS Reset

<b:skin><![CDATA[

Change with the code below

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>

Search for this code

]]></b:skin>

Change with the code below

</style>

Next to the head cover code, look for this code

</head>

Change with the code below

&lt;/head&gt;&lt;!--<head/>--&gt;

The next step is to cover the body code, find this code

</body>

Change with the code below

&lt;!--</body>--&gt;&lt;/body&gt;

Is it still advanced? Okay, there are still two more. Now in the HTML opening and closing code, look for this 

code HTML opening code

<html>

Change with the code below

<HTML expr:dir='data:blog.languageDirection'>

HTML closing code

</html>

Change with the code below

</HTML>

Well, it's done! Then click the Save theme button (click refresh if a warning popup appears from the Blogger page). How, easy enough isn't it? Please check your blog on Google PageSpeed ​​Insight . If it has increased then the steps above are successfully applied to your blog. 

I myself have done the optimization above on this blog, for the results you can check this link


Speed ​​data is updated every week, and optimization results are stored in cache for 30 seconds. To see an updated optimization analysis, please wait for 30 seconds before restarting the test.

We can know that the blog speed data will be updated every week, so wait at least one week then check the blog address again to find out the changes in the Speed ​​PageSpeed ​​Insight column.

Some improvements After Removing CSS, Javascript, and Blogger Bundle Widgets


As for the effects given after doing the optimization above, here are some improvements that I made on this blog 

Blog pager

Please add or edit the CSS blog pager on the template

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}

Contact form

The send button from the contact form widget will usually not work as before, please add this code after the HTML form of the contact code (Special contact form widget added on the static page)

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '
7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '
7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>

</script>

Replace all codes marked with your URL and blog ID . Read more here: The Latest Ways to Add Contact Forms on the Blog

That's the answer to the bloggers' questions about How to Delete CSS, Javascript, and Blogger Bundle Widgets . Hopefully useful and cautious.

Post a Comment

Previous Post Next Post