Cara-Caranya :
1.Login > Tatak Letak > Tambah gadget > HTML JavaScript lalu masukan HTML berikut :
<div class='widgetSystem'>
<div class='nama'>Link Sobat</div>
<div class='kulit'>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
width: 75%;
padding: 5px;
background: #DDD url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcSH6cyOxirqzb6Eq9QAEMLuNj-8fPaBMf-igtuCtId_OyHKiDjAaQ) no-repeat;
margin: 5px auto;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 1px 1px #fff;
-moz-box-shadow: 0 0 1px 1px #fff;
box-shadow: 0 0 1px 1px #fff
}
.widgetSystem .nama {
text-align: center;
font-size: 1.5em;
background: #FF0000;
background: rgba(153, 153, 153, 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: #FFFFFF;
background: rgba(153, 153, 153, 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(153, 153, 153, 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;
$20 margin: 5px
}
</style>
<div class='nama'>Link Sobat</div>
<div class='kulit'>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
<li><a href="URL anda">Judul</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
width: 75%;
padding: 5px;
background: #DDD url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcSH6cyOxirqzb6Eq9QAEMLuNj-8fPaBMf-igtuCtId_OyHKiDjAaQ) no-repeat;
margin: 5px auto;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 1px 1px #fff;
-moz-box-shadow: 0 0 1px 1px #fff;
box-shadow: 0 0 1px 1px #fff
}
.widgetSystem .nama {
text-align: center;
font-size: 1.5em;
background: #FF0000;
background: rgba(153, 153, 153, 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: #FFFFFF;
background: rgba(153, 153, 153, 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(153, 153, 153, 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;
$20 margin: 5px
}
</style>
*Ganti Text berwarna Hijau dengan Judul Anda sendiri
*Ganti Text berwarna Merah dengan URL anda atau teman anda
*Ganti Text berwarna Kunik dengan Title atau Judul Anda sendiri
*Ganti Text berwarna Biru dengan URL Gambar Anda sendiri
Semoga Bermanfaat!!
Tiada ulasan:
Catat Ulasan