Mencoba SVG code pada Blogger














A B C
I love SVG
I love SVG I love SVG
Several lines: First line Second line
I love SVG





SVG

selanjutnya http://www.w3big.com/id/svg/svg-reference.html
READ MORE - Mencoba SVG code pada Blogger

Blockquote style raised

See the Pen Damn simple blockquote by Lukas Dietrich (@lukasdietrich) on CodePen.

READ MORE - Blockquote style raised

Blockquotes Simple styles

See the Pen Alternating Blockquotes by Tommy Hodgins (@tomhodgins) on CodePen.

READ MORE - Blockquotes Simple styles

Jeasyui Table with Filter and sort - really easy

Remote Filtering on DataGrid - jQuery EasyUI Demo








Item ID Product List Price Unit Cost Attribute Status

READ MORE - Jeasyui Table with Filter and sort - really easy

Using Pure CSS framework to make table


# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
the code :
<link href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="stylesheet"></link>

<br />
<table class="pure-table">
    <thead>
<tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
</thead>

    <tbody>
<tr>
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
<tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
<tr>
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
</tbody>
</table>

READ MORE - Using Pure CSS framework to make table

CSS framework Examples Post using to Blogger

Yeah!! Milligram is amazing.
Default Button
  • Unordered list item 1
  • Unordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1

Name Age Height Location
Stephen Curry 27 1,91 Akron, OH
Klay Thompson 25 2,01 Los Angeles, CA

.column
.column
.column
.column
.column
.column column-50 column-offset-25

10%
20%
25%
33%
40%
50%
60%
67%
75%
80%
90%
100%
the code
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180"><link rel="icon" href="images/favicon-32x32.png" sizes="32x32"><link rel="icon" href="images/favicon-16x16.png" sizes="16x16"><link rel="manifest" href="manifest.json"><link rel="image_src" href="images/thumbnail.png"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
<blockquote>
  <p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>

<a class="button" href="#">Default Button</a>


<button class="button button-outline">Outlined Button</button>


<input class="button button-clear" type="submit" value="Clear Button">

<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>


<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>


<dl>
  <dt>Description list item 1</dt>
  <dd>Description list item 1.1</dd>
</dl>

<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="CJ Patoilo" id="nameField">
    <label for="ageRangeField">Age Range</label>
    <select id="ageRangeField">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select>
    <label for="commentField">Comment</label>
    <textarea placeholder="Hi CJ …" id="commentField"></textarea>
    <div class="float-right">
      <input type="checkbox" id="confirmField">
      <label class="label-inline" for="confirmField">Send a copy to yourself</label>
    </div>
    <input class="button-primary" type="submit" value="Send">
<br>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stephen Curry</td>
      <td>27</td>
      <td>1,91</td>
      <td>Akron, OH</td>
    </tr>
    <tr>
      <td>Klay Thompson</td>
      <td>25</td>
      <td>2,01</td>
      <td>Los Angeles, CA</td>
    </tr>
  </tbody>
</table>
  </fieldset>
</form>
<br>

<div class="container">

  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>

  <div class="row">
    <div class="column">.column</div>
    <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
  </div>

</div>

<br></br>
<div class="container">

  <div class="row">
    <div class="column column-10">10%</div>
  </div>

  <div class="row">
    <div class="column column-20">20%</div>
  </div>

  <div class="row">
    <div class="column column-25">25%</div>
  </div>

  <div class="row">
    
    <div class="column column-33">33%</div>
  </div>

  <div class="row">
    <div class="column column-40">40%</div>
  </div>

  <div class="row">
    <div class="column column-50">50%</div>
  </div>

  <div class="row">
    <div class="column column-60">60%</div>
  </div>

  <div class="row">
    
    <div class="column column-67">67%</div>
  </div>

  <div class="row">
    <div class="column column-75">75%</div>
  </div>

  <div class="row">
    <div class="column column-80">80%</div>
  </div>

  <div class="row">
    <div class="column column-90">90%</div>
  </div>

  <div class="row">
    <div class="column">100%</div>
  </div>
</div>



READ MORE - CSS framework Examples Post using to Blogger