Friday, October 18, 2013

CARA MEMBUAT LINK LIST ATAU MENU BAR

Cara dengan java script/HTML
1. klik "layout"
2. klik "add gadget" / "add widget"
3. klik java script/HTML
4. copy paste code css di bawah ini:

<div class='widgetSystem'>
<div class='nama'>
Link List</div>
<div class='kulit'>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
<li><a href='URL anda'>Nama Blog</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 96%;
    padding: 5px;
    background: #DDD url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-prn1/36301_329454510485991_208496541_n.jpg) no-repeat;
    margin: 5px auto;
    border: 1px solid #00f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #00f;
    -moz-box-shadow: 0 0 1px 1px #00f;
    box-shadow: 0 0 1px 1px #00f
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #fd64b1;
    background: rgba(255, 0, 128, 0.6);
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem .kulit {
    background: #f379b2;
    background: rgba(255, 0, 128, 0.5);
    height: 250px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 5px;
    background: #C71585;
    background: rgba(199, 21, 133, 0.7);
    padding: 5px;
    display: block;
    color: #BBB;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -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
    }
.widgetSystem a:hover {
    background: #1E90FF;
    color: #0000CD
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>

5. copy paste link LABEL mu ke warna MERAH, lalu ganti code berwarna BIRU menjadi nama LABELmu
6. ganti judul LINK LIST mu dengan mengubah code berwarna UNGU
7. ganti BACKGROUNDMU dengan copy paste IMAGE URL ke warna ORANGE
8. warna HIJAU untuk mengganti warna background pilihanmu
9. klik "save"
10. cek blog mu


selamat berkreasi :))

No comments:

Post a Comment