0 Cara Membuat Blogroll Dengan CSS

Hai sobat blogger,Pada thread kali ini saya akan memberitahukan Cara Membuat Blogroll Dengan CSS,kita langsung saja ke tutorialnya...
1.Login Ke akun blogger anda

2.Buka Rancangan,lalu pilih edit html

3.Cari Kode ]]></b:skin>,letakkan kode di bawah ini DIATAS kode ]]></b:skin>

<style type='text/css'>
.list-7shadow {
    background:#ccc;font-family: "Consolas","Courier New",Courier,mono,serif;color:#ccc;font-size:14px;
    width: 96%;
    margin: 2px auto;
    padding: 5px;
    -webkit-box-shadow: 0 0 2px 1px #FFF;
    -moz-box-shadow: 0 0 2px 1px #FFF;
    box-shadow: 0 0 2px 1px #FFF;
border-radius:8px;
    }
.list-7shadow li {
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomright: 18px;
-moz-border-radius-bottomleft: 18px;
-webkit-border-radius: 18px 18px 18px 18px;
border-radius: 18px 18px 18px 18px;
    list-style: none;
    background: #808080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHdprTv2qZIfjCQJuELVoutek_La73XVGa9HIztIOWFd3sEfUcrMLvdinLJrWQM5An_8sDteXvCqf-M8hCzWjp8VsXBfo8rg3RQpmXkr9oXKPrby4JyzoGAgqKQldSgVvuSKx_YO3FKw/s1600/28-star.png) no-repeat left center;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s
    }
.list-7shadow li a:after {
    content: "\2192";
    position: absolute;
    margin-left: 5px;
    font-size: 20px;
    margin-top: -4px
    }
.list-7shadow li:hover {
    background: #808080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHdprTv2qZIfjCQJuELVoutek_La73XVGa9HIztIOWFd3sEfUcrMLvdinLJrWQM5An_8sDteXvCqf-M8hCzWjp8VsXBfo8rg3RQpmXkr9oXKPrby4JyzoGAgqKQldSgVvuSKx_YO3FKw/s1600/28-star.png) no-repeat right center
    }
.list-7shadow li a, .list-7shadow li a:visited {
    margin-left: 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    display: block;
    margin: 5px 5px 5px 25px
    }
.list-7shadow li a:hover {
    margin-left: 35px
    }
</style>

4.Simpan
5.Buka Kembali rancangan Add Gadget,pilih HTML/JAVASCRIPT,kemudian pastekan kode di bawah ini

<div class='list-7shadow'>
<li><a href='http://blogazinist.com/' target='_blank'>Blogazinist</a></li>
<li><a href='http://html5doctor.com/' target='_blank'>HTML5 Doctor</a></li>
<li><a href='http://belajarwebdesign.com/' target='_blank'>Belajarwebdesign</a></li>
<li><a href='http://masonry.desandro.com/' target='_blank'>jQuery Masonry</a></li>
</div>

6.Ganti kode yang berwarna merah dngan link yg anda inginkan,dan ganti kode yg berwarna biru dengan tiitle yg anda inginkan.
7.Simpan


Sumber: Nuel-brani