របៀបបង្កើតតារាង ដែលមាន List លេខ វិលជុំ 360 Degree

បាទអ្នករាល់គ្នា កុំឲ្យខាតពេលយូរ ទៅតាមដានទាំងអស់គ្នា ជាមួយខ្ញុំបាទ។

របៀបដាក់ icon font៖

ទី១ សូមចូលទៅកាន់គណនី របស់អ្នក Blogger.com
ទី២ សូមរើសយក Theme បន្ទាប់មក Edit HTML
ទី៣ សូមចម្លងកូដខាងក្រោម រួច សូមស្វែងរក ]]></b:skin> រួចដាក់ពីលើវា ដើម្បីងាយស្រួលស្វែងរកសូម ចុច Ctrl + F រូចវាយពាក្យ ]]></b:skin>

/*-----------------------------------*/
/* Styled Tables and Boxes */
/*-----------------------------------*/
.styled_table table,
.sb {
    border-collapse: collapse;
    margin:10px 0 20px;
    text-shadow:none;
    color:#404040}

.styled_table table {
    width:100%;
    border-collapse:separate;
    padding-bottom:1px}

.styled_table table,
.sb {
    border: 1px solid #e86741}

.styled_table.shadow table,
.sb_shadow  {
    box-shadow: 0 0 3px #000;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2)}
      
.styled_table table tr th,
.sb .box_title    {
    background:#e86741;
    color:#fff;
    font-size:16px;
    font-weight:normal}
      
.styled_table table tr th,
.styled_table table tr td    {
    border-top:1px solid #d0d0d0;
    padding:10px 15px;
    text-align:left}

.styled_table table tbody td {
    background:#e6e6e6;
    padding:8px 15px;
    font-size:13px;
    font-weight:500}

.styled_table table tbody tr.odd td {
    background:#f8f8f8}
      
.styled_table table tr:first-child th{
    border-top: 0}

.table_yellow table,
.sb_yellow {
    border:1px solid #ffd012}
.table_yellow table tr th,
.sb_yellow .box_title {
    background:#ffd012;
    color:#363636}

.table_blue table,
.sb_blue {
    border:1px solid #FDD761}
.table_blue table tr th,
.sb_blue .box_title {
    background:#FDD761;
    color:#4599BD}

.table_green table,
.sb_green {
    border:1px solid #4daf7c}
.table_green table tr th,
.sb_green .box_title {
    background:#4daf7c;
    color:#fff}
  
.table_dark table,
.sb_dark  {
    border:1px solid #363636}
.table_dark table tr td {
    border-top:1px solid #d3d3d3}
.table_dark table tr th,
.sb_dark .box_title {
    background:#363636;
    color:#4599BD}

.table_orange table,
.sb_orange {
    border:1px solid #FDD761}
.table_orange table tr th,
.sb_orange .box_title {
    background:#FDD761;
    color:#4599BD}

.table_pink table,
.sb_pink {
    border:1px solid #f389c2}
.table_pink table tr th,
.sb_pink .box_title {
    background:#f389c2;
    color:#842658}
  
.table_purple table,
.sb_purple {
    border:1px solid #755782}
.table_purple table tr th,
.sb_purple .box_title {
    background:#755782;
    color:#4599BD}

.table_red table,
.sb_red {
    border:1px solid #bd4343}
.table_red table tr th,
.sb_red .box_title {
    background:#bd4343;  
    color:#4599BD}

/* Styled Boxes */
.sb .box_title {
padding: 10px 15px;
color: #000;
font-size: 16px;
font-weight: 700;
font-family: Open Sans,Arial;
text-transform: uppercase;
letter-spacing: 0.8px;
}

.sb.notitle .box_title {
    display:none}

.sb .box_content {
text-align: justify;
    padding:15px;
    background:#fff;
    color:#595959;
    margin:1px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px}




          
                ol{
                counter-reset: li;
                list-style: none;
                *list-style: decimal;
                font: 15px 'trebuchet MS', 'lucida sans';
                padding: 0;
                margin-bottom: 4em;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
margin-left: -5px;
margin-top: 0px;
margin-bottom: 0px;
            }

            ol ol{
                margin: 0 0 0 2em;
            }

            /* -------------------------------------- */          

            .rounded-list a{
                position: relative;
                display: block;
                padding: .4em .4em .4em 2em;
                *padding: .4em;
                margin: .5em 0;
                background: #ddd;
                color: #444;
                text-decoration: none;
                -moz-border-radius: .3em;
                -webkit-border-radius: .3em;
                border-radius: .3em;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;  
            }

            .rounded-list a:hover{
                background: #eee;
            }

            .rounded-list a:hover:before{
                -moz-transform: rotate(360deg);
                  -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);  
            }

            .rounded-list a:before{
                content: counter(li);
                counter-increment: li;
                position: absolute;  
                left: -1.3em;
                top: 50%;
                margin-top: -1.3em;
                background: #FDD761;
                height: 2em;
                width: 2em;
                line-height: 2em;
                border: .3em solid #fff;
                text-align: center;
                font-weight: bold;
                -moz-border-radius: 2em;
                -webkit-border-radius: 2em;
                border-radius: 2em;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;
            }

            /* -------------------------------------- */

            .rectangle-list a{
                position: relative;
                display: block;
                padding: .4em .4em .4em .8em;
                *padding: .4em;
                margin: .5em 0 .5em 2.5em;
                background: #363636;
                color: #fff;
                text-decoration: none;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;  
            }
            .rounded-list a:hover:before{
                background: #1da7e7;
                color: #fff;
            }

            .rectangle-list a:hover{
                background: #000;
            }  

            .rectangle-list a:before{
                content: counter(li);
                counter-increment: li;
                position: absolute;  
                left: -2.5em;
                top: 50%;
                margin-top: -1em;
                background: #363636;
                height: 2em;
                width: 2em;
                line-height: 2em;
                text-align: center;
                font-weight: bold;
            }
          
            .rectangle-list a:after{
                position: absolute;  
                content: '';
                border: .5em solid transparent;
                left: -1em;
                top: 50%;
                margin-top: -.5em;
                -webkit-transition: all .3s ease-out;
                -moz-transition: all .3s ease-out;
                -ms-transition: all .3s ease-out;
                -o-transition: all .3s ease-out;
                transition: all .3s ease-out;              
            }

            .rectangle-list a:hover:after{
                left: -.5em;
                border-left-color: #363636;              
            }

            /* -------------------------------------- */

            .circle-list li{
                padding: 2.5em;
                border-bottom: 1px dashed #ccc;
            }

            .circle-list h2{
                position: relative;
                margin: 0;
            }

            .circle-list p{
                margin: 0;
            }

            .circle-list h2:before{
                content: counter(li);
                counter-increment: li;
                position: absolute;  
                z-index: -1;
                left: -1.3em;
                top: -.8em;
                background: #f5f5f5;
                height: 1.5em;
                width: 1.5em;
                border: .1em solid rgba(0,0,0,.05);
                text-align: center;
                font: italic bold 1em/1.5em Georgia, Serif;
                color: #ccc;
                -moz-border-radius: 1.5em;
                -webkit-border-radius: 1.5em;
                border-radius: 1.5em;
                -webkit-transition: all .2s ease-out;
                -moz-transition: all .2s ease-out;
                -ms-transition: all .2s ease-out;
                -o-transition: all .2s ease-out;
                transition: all .2s ease-out;  
            }

            .circle-list li:hover h2:before{
                background-color: #ffd797;
                border-color: rgba(0,0,0,.08);
                border-width: .2em;
                color: #444;
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -ms-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);
            }

វិធីប្រើ៖

ទី១ សូមចូលទៅកាន់គណនី របស់អ្នក Blogger.com
ទី២ សូមរើសយក Post > New Post > HTML ចម្លងកូដទៅដាក់ក្នុងនោះជា ការស្រេច

<div class="sb sb_blue">
<div class="box_title">
Features</div>
<div class="box_content">
<ol class="rounded-list">
<li>
<ol>
<li><a href="http://www.responsinator.com/?url=https%3A%2F%2Fsora-coin-soratemplates.blogspot.com" rel="nofollow" target="_blank">Responsive - <font size="4" color="red"><b>Check Here</b></font></a></li>
<li><a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fsora-coin-soratemplates.blogspot.com" rel="nofollow" target="_blank">Google Testing Tool Validator - <font size="4" color="red"><b>Check Here</b></font></a></li>
<li><a href="https://search.google.com/test/mobile-friendly?id=gcu49TXbjyBUmqwjsZjrig" rel="nofollow" target="_blank">Mobile Friendly - <font size="4" color="red"><b>Check Here</b></font></a></li>
<li><a href="https://sora-coin-soratemplates.blogspot.com/soratemplates" rel="nofollow" target="_blank">Custom 404 Page - <font size="4" color="red"><b>Check Here</b></font></a></li>
<li><a href="https://tools.pingdom.com/#!/cylvMs/https://sora-coin-soratemplates.blogspot.com" rel="nofollow" target="_blank">Fast Loading - <font size="4" color="red"><b>Check Here</b></font></a></li>
<li><a>Minimal</a></li>
<li><a>BlockChain</a></li>
<li><a>Digital Currency</a></li>
<li><a>Crypto Currency</a></li>
<li><a>Simple</a></li>
<li><a>Whatsapp Sharing</a></li>
<li><a>Seo Friendly</a></li>
<li><a>Ads Ready</a></li>
<li><a>Clean Layout</a></li>
<li><a>Clear Design</a></li>
<li><a>Drop Down Menu</a></li>
<li><a>Social Sharing</a></li>
<li><a>HTML5 &amp; CSS3</a></li>
<li><a>Browser Compatibility</a></li>
</ol>
</li>
</ol>
</div>
</div>

Demo

Features

1. Responsive - Check Here
   Google Testing Tool Validator - Check Here
   Mobile Friendly - Check Here
   Custom 404 Page - Check Here
   Fast Loading - Check Here
   Minimal
   BlockChain
   Digital Currency
   Crypto Currency
   Simple
   Whatsapp Sharing
   Seo Friendly
   Ads Ready
   Clean Layout
   Clear Design
   Drop Down Menu
   Social Sharing
   HTML5 & CSS3
   Browser Compatibility