Tutorial Membuat Project List dengan HTML dan CSS

Tutorial Membuat Project List

Tutorial Membuat Project List - Bagi sobat yang dulu sering berkunjung ke Blog Justirva Kode pasti sudah pernah melihat/mencicipi tutorial ini, yaps tutorial ini saya buat untuk membantu sobat dalam hal mempercantik list project sobat. Dimana jika Sobat mempunyai sebuah website/blog pastilah mempunyai project2 kecil untuk di kerjakan, jadi tutorial ini sangat bagus sekali untuk di ikuti.

Untuk demonstrasinya sobat bisa melihatnya dengan mengklik tombol demonstrasi berikut

Tutorial ini pyur saya buat sendiri, jika Ada tutorial ini yang berada di luar komunitas kami yaitu, justirva kode dan code pelajar, maka blog/website tersebut adalah COPAS. Kecuali mereka menyertakan link sumber.

Tutorial Membuat Project List

  1. Masukkanlah Script Jquery dan Font-awesome ini di web/blog Sobat, masukkan tepat di atas </head>
  2. <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script type='text/javascript'>
    //<![CDATA[
    //CSS Ready
    function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
    loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
    //]]>
    </script>
  3. Jika sudah, letakkan CSS berikut tepat di atas tag </style< atau tag <b:skin<
  4.  
    /*CSS List Project by Codepelajar.com*/
    .ProjectWrap{margin-bottom: 10px}
    .ProjectWrap h2:before{content: "\f085";font-family: "FontAwesome";padding-right: 10px;color:#333}
    .ProjectWrap .fix:before{content: "\f14a";font-family: "FontAwesome";padding-right: 10px;color:#333}
    .ProjectWrap h2{border: 1px solid #ebebeb;border-bottom: 0px;font-size: 17px;padding: 5px 0 5px 10px;font-weight: normal;margin: 0px;}
    .Pelajar-ItemProject{border: 1px solid #ebebeb;border-bottom: 0px;padding: 5px 0 5px 10px}
    .Pelajar-ItemProject:last-child{border-bottom: 1px solid #ebebeb}
    .Pelajar-ItemProject.x:before{content: "\f056";font-family: "FontAwesome";padding-right: 10px;color: #d9534f}
    .Pelajar-ItemProject.v:before{content: "\f058";font-family: "FontAwesome";padding-right: 10px;color:#5cb85c}
    .Pelajar-ItemProject.x:hover, .Pelajar-ItemProject.x:hover:before{background:#d9534f;color:#fff !important}
    .Pelajar-ItemProject.v:hover, .Pelajar-ItemProject.v:hover:before{background:#5cb85c;color:#fff !important}
    
  5. lalu simpan template/Save theme, bukalah halaman/page dan masukkan skrip HTML berikut kedalam mode HTML di text editor Blogger
  6. <div class="Pelajar">
     <div class="ProjectWrap">
      <h2>Ongoing Project</h2>
      <div class="Pelajar-ItemProject x">isi Project 1</div>
      <div class="Pelajar-ItemProject x">isi Project 2</div>
      <div class="Pelajar-ItemProject x">isi Project 3</div>
      <div class="Pelajar-ItemProject x">isi Project 4</div>
     </div>
     <div class="ProjectWrap">
      <h2 class='fix'>Completed Project</h2>
      <div class="Pelajar-ItemProject v">isi Project 1</div>
      <div class="Pelajar-ItemProject v">isi Project 2</div> 
      <div class="Pelajar-ItemProject v">isi Project 3</div>
     </div></div>
  7. Publish lah halaman tersbut, dan lihat hasilNya.


Itulah tutorial singkat tentang cara membuat project list di blogger. Jika ingin mencoba di Wordpress silahkan di sesuaikan sendiri ya, jika bingung silahkan bertanya pada kolom komentar yang telah kami siapkan. silahkan baca halaman F.A.Q

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel