Cara Membuat Menu Compress Css Pada Halaman Blog

Cara Membuat Menu Compress Css Pada Halaman Blog - Pada malam ini saya akan shree pada anda tentang cara Cara Membuat Menu Compress Css Pada Halaman Blog ,jika anda masih menggunakan layan oline hanya untuk Compress Css ,itu munkin kita menghabiskan kota internet kita saja.

Saya akan kasih anda kode CSS yang bisa Compress Css file apa menjadi lebih ringan dan lebih kecil dari pada sebelum Compress Css ini ,banyak orang yang tidak punya menu Compress Css ini karan saya juga baru bikin dan ingin memecahkan kata kunci yang ada di google ,karana di blog yang lain belum mempuyai kode javascript ,makangkaya jika anda orang yang membaca artikel ini anda beruntug bisa mendapatkan kode CSS ini ,sekrang kita mulay saja pada tutorialnya di bawah ini.

DEMO

Kita langsung mulay saja pada tutorialnya di bawah ,saya tidak mau panjng lebar lagi karan saya udah ngantuk mau tidur kita mulay tutorialnya di bawah ini Cara Membuat Menu Compress Css Pada Halaman Blog

1. Kamu login saja ke blogger anda dan kamu bikin saja halamn baru kasih jdjul apa saja udah itu kamu pilih HMTL simpan kode di bawah dan dan pilih Compose seperti pada gambar tersbut.

Sekarang kamu ambil saja kode di bawah ini kemudian kamu simpan dan buka new tab baru di jamin Work 100%

<div class="post hentry uncustomized-post-template" itemprop="blogPost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
<a href="https://www.blogger.com/null" name="7748727941695136280"></a>

 
<h1 class="post-title entry-title" itemprop="name">
Compress or Beautify CSS Code
</h1>
<div class="post-header">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-7748727941695136280" itemprop="articleBody">
<style>
*{margin:0;padding:0}*:focus{outline:none}html,body{height:100%}body{text-align:center;background-color:#222;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr17EWdadyKB31kHDJd4UcHXY1lfuxzpBC-yKPC_euhcRDf5GyuCpILTYd-Yf3yQjEXgfYRxcIjOwrvq_koItc1H1hNu_XrBcpiMl41QVOtaFHr9wHlLa-KkUINvc7GNJPAFj7tFwSQl8I/s1600/the_witcher_9-wallpaper-1920x1080.jpg);background-position: center;
background-size:100%; background-repeat: no-repeat; background-attachment: fixed;font:normal normal 12px 'Comic Sans MS',Cursive,Verdana,Sans-Serif;text-shadow:0 0 1px rgba(0,0,0,.2);color:#ddd}#page-wrap{width:82%;min-height:100%; background-color:rgba(3, 0, 0, 0.8);margin:84px auto;padding:35px 15px;border:4px solid #666;text-align:left;overflow:hidden;clear:both}h2{font:23px Arial;width:90%;margin:0 auto 30px;display:none;}h2 label{font-weight:normal;font-size:12px;}textarea{display:block;text-shadow:none;width:98%;height:406px;margin:10px auto 30px;padding:10px;background-color:#ddd;text-align:left;border:1px solid #111;font:normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:black}code{color:darkblue}.button-group{text-align:center;border:1px dashed #bbb;padding:15px 20px 30px;margin:0 0 10px}.box{text-align:left;margin:10px auto 30px}.box p{margin:0 0 2px}button{font:normal bold 12px Arial,Sans-Serif;cursor:pointer;padding:2px 5px}.button-group button{padding:7px 18px}.col{width:48%;margin:0 auto 30px}.left{float:left;margin-left:1%}.right{float:right;margin-right:1%}.footer{display:block;height:40px;margin:0 4% 0 4%;text-align:right}label{cursor:pointer;text-decoration:none}label:hover{text-decoration:underline}label+span,input:disabled+label,input:disabled+label:hover,input:disabled+label *{color:#aaa!important;text-decoration:none;text-shadow:none;cursor:default}input:checked+label+span{color:black}.clear{display:block;clear:both}pre{overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;text-shadow:none;background-color:#111;border:4px solid #666;margin:0 2% 30px;cursor:text}pre code{display:block;font:normal normal 12px/16px "Courier New",Courier,Monospace;color:darkblue;padding:10px 15px}pre .st{color:purple}pre .pr{color:brown}pre .vl{color:darkgreen}pre .pn{color:black}pre .im{color:red}pre .cm,pre .cm span{color:#666!important;font-style:italic;font-weight:normal}.hidden{display:none}@media(max-width:767px){.col.left,.col.right{float:none;display:block;width:95%;margin:0 auto 20px}.footer{margin:10px 4% 15px}}
</style>

 
<div id="page-wrap">
<h2>
<a href="http://www.seocips.com/">Compress or Beautify CSS Code </a></h2>
<div class="clear">
</div>
<div class="col left">
<input checked="" id="highlightCode" type="checkbox" /> <label for="highlightCode">Show highlighted code?</label> <button onclick="clearField("cssField");">Clear Field</button> <button onclick="selectAll("cssField");">Select All</button><textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea></div>
<div class="col right">
<div class="button-group">
<div class="box">
<input id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Strip all comments</label> 
<input id="superCompact" type="checkbox" /> <label for="superCompact">Super compact</label> 
<input id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Keep indentation inside <code>@query {}</code></label> 
<input checked="" id="keepLastComma" type="checkbox" /> <label for="keepLastComma">Remove the last semicolon</label></div>
<button onclick="compressCSS("cssField");">Compress CSS</button></div>
<div class="button-group">
<div class="box">
<input id="inlineLayout" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="inlineLayout">Inline layout mode</label> 
<input id="toTab" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="toTab">Replace double space indentation with:</label> 
 <input id="op-1" name="op" onchange="beautifyCSS("cssField");" type="radio" /> <label for="op-1">A tab character</label> <input id="op-2" name="op" onchange="beautifyCSS("cssField");" type="radio" /> <label for="op-2">4 space</label> 
<input checked="" id="breakSelector" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="breakSelector">Break multiple selector (e.g: <code>html,\nbody,\ntable {}</code>)</label> 
<input id="spaceBetween" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="spaceBetween">Space after <code>:</code> and <code>,</code></label> 
<input id="inlineSingleProp" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="inlineSingleProp">Inline bracket for single property</label> 
<input id="removeLastSemicolon" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="removeLastSemicolon">Remove the last semicolon in single property</label> 
<input id="singleBreak" onchange="beautifyCSS("cssField");" type="checkbox" /> <label for="singleBreak">Compact line break</label></div>
<button onclick="beautifyCSS("cssField");">Beautify CSS</button></div>
</div>
<div class="clear">
</div>
<h2 class="hidden">
Highlighted Code:</h2>
<pre id="highlightedResult"><code>/* ================= Supported layout/pattern: ================= */

/* -------- [1]. CSS Compressor -------- */

/* a. Normal */
#foo{margin:0;padding:0} /* comment */
#foo:focus{outline:none}

/* b. Strip all comments */
#foo{margin:0;padding:0}
#foo:focus{outline:none}

/* c. Super compact */
#foo{margin:0;padding:0}#foo:focus{outline:none}

/* d. Keep indentation inside `@query {}` */
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
@media screen and (max-width:400px){
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
}

/* -------- [2]. CSS Beautifier -------- */

/* a. Normal */
#foo {
margin:0;
 padding:0;
}

#foo:focus {
outline:none;
}

/* b. Replace double space indentation with a tab character or 4 spaces */
#tab-character {
margin:0;
 padding:0;
}

#four-space {
outline:none;
}

/* c. Break multiple selector */
#foo,
#bar,
.walaaa {
margin:0;
 padding:0;
}

/* d. Space after `:` and `,` */
#foo {
margin: 0 auto;
 background-image: linear-gradient(top, #333, #555);
 color: rgba(0, 0, 0, .4);
}

/* e. Inline bracket for single property */
#foo .bg {
position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:white url('img/bg-image.png') no-repeat 0 0;
}

#foo .bg-1 {background-position:0 0;}
#foo .bg-2 {background-position:100% 0;}
#foo .bg-3 {background-position:100% 100%;}
#foo .bg-4 {background-position:0 100%;}

/* f. Remove the last semicolon in single property */
#foo .bg {
position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:white url('img/bg-image.png') no-repeat 0 0;
}

#foo .bg-1 {background-position:0 0}
#foo .bg-2 {background-position:100% 0}
#foo .bg-3 {background-position:100% 100%}
#foo .bg-4 {background-position:0 100%}

/* g. Inline layout mode */
#foo .bg { position:absolute; top:0; right:0; bottom:0; left:0; background:white url('img/bg-image.png') no-repeat 0 0; }</code></pre>
</div>
<div class="footer">
My Own CSS-Beautifier <a href="http://tutorialcid.blogspot.co.id/" rel="nofollow" target="_blank">TUTORIALCID</a></div>
<script src="https://rawgit.com/tutorialcid/js/master/compressor-css.js" type="text/javascript"></script>

 
<div class="selengkapnya">
<a href="http://tutorialcid.blogspot.co.id/" title="Widget Menu Menu Accordion (Light)"> More Info</a></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-3">


</div>
</div>
</div>

2. Demikian lah pada tutorila kali ini tentang Cara Membuat Menu Compress Css Pada Halaman Blog semoga bermanpaat bagi anda jika anda suka pada postingan yang saya buat ini.anda bisa like dan shree pada teman-teman anda di facebook twiter Dll cukup sekian terimakasih anda telah membaca artikel adaniblog semoga bermanpaat bagi anda wasalam.

Lokasi:

tes

Cara Membuat Menu Compress Css Pada Halaman Blog

Sekarang kamu ambil saja kode di bawah ini kemudian kamu simpan dan buka new tab baru di jamin Work 100%

Menu Halaman Statis