Blogger Sayfanıza CSS Minifier ve Expander Aracı Ekleme

Blogger SEO sayfa hızı şu anda arama motorları tarafından kabul edilen en önemli faktördür. Arama sonuçları tarama sırasında daha ağır web sayfaları dikkate alınmaz.

Sayfa hızını etkileyen pek çok faktör var, ancak CSS minikasyonu sayfa hızınızı artırmanın ana yollarından biri.

Ziyaretçilerinizin blogger blog'unuzdaki CSS kodlarını küçültmelerini ve blogger'a CSS Minifier ve Expander aracını eklemelerini sağlayın. Bu, css kodu küçültme için ilham verici bir araçtı.

Peki bugün şaşırtıcı blogcu tasarım aracını paylaşacağım. CSS minifier ve genişletici aracı eklemeBlogger’da blog ele alınacak bazı adımlar var.

CSS Minifier ve Expander aracı ekleme adımları :

• Sayfa eklemek istediğiniz Blogger bloguna giriş yapın ve “Sayfalar” bağlantısını tıklayın.
• “Yeni Sayfa” düğmesine tıklayın .
• Sayfa başlığını yazın (bu, gezinti çubuğunda bir bağlantı olarak görünecektir), aşağıdaki kodu HTML’ye ekleyin ve ardından “Yayınla” yı tıklayın.

HTML<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>

Bütün işlemler bu kadar herkese kolay gelsin.