Cara Membuat Border Warna Warni di Blog dengan CSS

Pada posting kali ini saya kembali akan membahas tentang dasain atau tampilan front-end, pada posting sebelumnya saya juga pernah membahas tentang Apa itu Bootstrap . Nah, pada tutorial kali ini saya akan mengajarkan bagaimana Cara membuat Border Warna Warni di Blog dengan CSS.

Border warna warni atau yang dikenal dengan istilah "Multiple colors border" adalah border yang memiliki banyak warna yang biasanya digunakan untuk mempercantik tampilan website atau blog, salah satu contonya dapat teman teman lihat pada blog saya ini.

Untuk pembuatannya silahkan teman teman simak tutorialnya dibawah ini :

Pertamatama silahkan copypaste script css dibawah ini

1. <style type='text/css'>
2. .borderwarna {
3.   width:970px;
4.   margin:0px;
5.  }
7. .bcolor ul {
8.   list-style:none;
9.   width:100%;
10.   font-size:0;
11. }
13. .bcolor li {
14.   display:inline-block;
15.   width:20%;
16.   height:7px;
17. }
19. .bcolor li:nth-child(1) {
20.   background:#2ecc71;
21. }
23. .bcolor li:nth-child(2) {
24.   background:#3498db;
25. }
27. .bcolor li:nth-child(3) {
28.   background:#f1c40f;
29. }
31. .bcolor li:nth-child(4) {
32.   background:#e74c3c;
33. }
35. .bcolorli:nth-child(5) {
36.   background:#9b59b6;
37. }
38. </style>

Untuk widthnya silahkan disesuaikan dengan keinginan masing masing. kemudian, letakan kode tersebut tepat diatas kode </head>

Selanjutnya kita akan menampilkan border tersebut, silahkan copypaste kode dibawah ini

1. <div class=borderwarna>
2.  <div class=bcolor>
3. <ul>
4.     <li></li>
5.     <li></li>
6.     <li></li>
7.     <li></li>
8.     <li></li>
9.   </ul>
10.  </div>
11. </div>

terakhir silahkan letakan kode tesebut ditempat yang teman teman inginkan. dalam kasus ini saya akan meletakannya diatas <div id="content-wrapper"> sehingga tampilannya seperti yang terdapat pada blog ini.

Ok, Sekian posting kali ini semoga bermanfaat :)