Yes Why do we need to minify CSS codes? In blogger SEO page speed is most important factor currently considered by search engines. Heavier web pages are ignored during crawling search results. There are so many other factor's that effects page speed but CSS minification is one of the main way to increase your page speed.
Let your visitors minify their CSS codes on your blogger blog & add CSS Minifier and Expander tool to blogger. This is inspirational tool for css code minification.
Well today I am going to share amazing blogger design tool. Adding CSS minifier and expander tool in blogger blog will be handled is some steps.
Steps for adding CSS Minifier and Expander tool to your blog:
Step 1: Log in to the Blogger blog you are wanting to add pages to and click on the “Pages” link.
Step 2: Click the “New Page” button.
Step 3: Type the page title (this will appear as a link on the navigation bar), add the the below code in HTML and then click “Publish.”
<style>
img,
object,
embed,
video {
max-width: 100%;
}
#pbw-wrapper {
width: 100%;
margin: 0 auto;
}
#pbw-header {
width: 61.6%;
/*1000*/
height: 71px;
margin: 5% auto 0 auto;
background: #16A085;
font-family: 'Lobster', cursive;
}
h1 {
padding: 2% 0 0 2%;
color: #fff;
font-size: 2em;
font-weight: 300;
}
#pbw-main {
width: 61.6%;
/*616/1000*/
height: 361px;
margin: 0 auto;
}
#left-box {
width: 49.8%;
height: 361px;
float: left;
background: #34495E;
text-align: center;
}
#left-box > input {
text-align: left;
margin: 0 auto;
}
#right-box {
width: 49%;
height: 361px;
float: right;
background: #34495E;
text-align: center;
}
#right-box > input {
text-align: left;
margin: 0 auto;
}
#input {
width: 99%;
height: 357px;
border: none;
}
#output {
width: 99%;
height: 357px;
border: none;
}
#help {
width: 61.6%;
/*1000*/
height: 71px;
background: #232323;
margin: 0 auto;
font-family: 'Lato', sans-serif;
color: #fff;
}
#help p {
margin: 0 20% 0 10%;
}
#help p:nth-child(2) {
text-align: right;
margin: 0 20% 0 0;
}
#help p:nth-child(3) {
margin: 0 0 0 6%;
}
#console {
width: 61.6%;
/*1000*/
height: 71px;
background: #2C3E50;
margin: 0 auto;
}
#minimize {
text-align: center;
float: left;
width: 15%;
margin: 2%;
}
#expand {
text-align: center;
float: left;
width: 15%;
margin: 2%;
}
#helpbtn {
color: #fff;
text-align: center;
float: left;
width: 3%;
margin: 2% 0;
font-family: 'Lato', sans-serif;
text-decoration: none;
vertical-align: middle;
padding: 1%;
background: #2ECC71;
}
#helpbtn:hover {
border-top-color: #27AE60;
background: #27AE60;
color: #ccc;
}
#helpbtn:active {
border-top-color: #16A085;
background: #16A085;
}
#info {
width: 47%;
height: 45px;
float: right;
color: #fff;
padding: 2% 0 0 0;
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 1.5em;
}
.button {
background: #8E44AD;
color: white;
font-family: 'Lato', sans-serif;
text-decoration: none;
vertical-align: middle;
padding: 1%;
}
.button:hover {
border-top-color: #9B59B6;
background: #9B59B6;
color: #ccc;
}
.button:active {
border-top-color: #27AE60;
background: #27AE60;
}
</style>
<script>
$(document).ready(function() {
$("#minimize").click(function() {
var e = $("#input").val();
$("#info").css("display", "block");
if (e != "") {
e = e.replace(/[\n]/g, " ");
$("#output").val(e);
$("#info").text("Succesfully minified");
setTimeout(t, 4e3);
function t() {
$("#info").fadeOut().empty()
}
}
})
});
$(document).ready(function() {
$("#expand").click(function() {
var e = $("#input").val();
$("#info").css("display", "block");
if (e != "") {
e = e.replace(/\#/g, "\n#");
e = e.replace(/\./g, "\n.");
e = e.replace(/\{/g, "{\n");
e = e.replace(/\}/g, "}\n");
e = e.replace(/\;/g, ";\n");
$("#output").val(e);
$("#info").text("Succesfully expanded");
$("#output").select();
setTimeout(t, 4e3);
function t() {
$("#info").fadeOut().empty()
}
}
})
});
$(document).ready(function() {
$("#help").css("display", "none");
$("#helpbtn").click(function() {
$("#help").slideToggle("slow")
})
})
</script>
<br />
<div id="pbw-wrapper">
<div id="pbw-header">
<h1>
CSS Minifier and Expander tool</h1>
</div>
<div id="pbw-main">
<div id="left-box">
<textarea id="input"></textarea>
</div>
<div id="right-box">
<textarea id="output" onclick="this.focus();this.select()" readonly="readonly"></textarea>
</div>
</div>
<!--/main-->
<br />
<div id="help">
Input the CSS codes in left box,<br />
Minified code will be shown in right box<br />
↓ Push button for either minifying or expanding your code</div>
<div id="console">
<div class="button" id="minimize">
MINIFY</div>
<div class="button" id="expand">
EXPAND</div>
<div id="helpbtn">
?</div>
<div id="info">
</div>
</div>
</div>
