Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Daftar Link Teman Keren Di Blog | Daftar Link yang Dicky's share ini keren sob, widget ini terutama sangat dimanfaatkan untuk Daftar Link Teman hasil Tukar Link, biasanya Daftar Link Teman sudah biasa kita temui diblog-blog bentuknya memakai teks area, box scroll, spolier(Open-Close) dan halaman dengan tampilan yang biasa. Dengan widget ini pasti daftar link sudah tidak biasa lagi nih sob dan terlihat menarik. Widget ini ada dua pilihan letaknya HALAMAN/POSTINGAN dan SIDEBAR. Oke, langsung saja ikuti Tips-nya.
Berikut Cara Membuat Widget Daftar Link Keren Di Blog :
1. Pada Halaman/Postingan
- Login ke Blogger, atau klik disini
- Pada halaman : Pilih Laman --> Laman Baru --> Pilih Laman Kosong
- Pada Postingan : Klik Entri Baru
- Disitu terdapat dua mode, Compose dan HTML. Sobat pilih HTML
- Copy kode dibawah ini dan letakkan ke kolom mode HTML
<div class="widgetSystem">
<div class="nama">
Link Anda</div>
<div class="kulit">
<a href="http://dickyz-blog.blogspot.com/" target="blank">Dicky's Blog</a>
<a href="http://dickyz-blog.blogspot.com/" target="blank">Dicky's Blog</a>
</div>
<style type="text/css">
.widgetSystem {
width: 100%;
padding: 5px;
background: #DDD;
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-radits: 5px
}
.widgetSystem .kulit {
background: #FFFFFF;
background: rgba(153, 153, 153, 0.5);
height: 320px;
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;
margin: 5px
}
</style></div>
Keterangan :
- Kode yang berwarna MERAH yaitu Link Blog Teman, ganti dengan link blog teman sobat.
- Kode yang berwarna KUNING yaitu Judul Blog Teman, ganti dengan judul blog teman sobat.
- Kode yang berwarna BIRU yaitu ukuran panjang widget, ganti dengan angka terserah sobat, misal : 75%
- Kode yang berwarna HIJAU yaitu ukuran tinggi widget, ganti angka terserah sobat, misal : 400px
- Yang lainnya modifikasi sendiri
2. Pada Sidebar
- Login ke Blogger, atau klik disini
- Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript
- Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript
<div class="widgetSystem">
<div class="nama">
Link Anda</div>
<div class="kulit">
<a href="http://dickyz-blog.blogspot.com/" target="blank">Dicky's Blog</a>
<a href="http://dickyz-blog.blogspot.com/" target="blank">Dicky's Blog</a>
</div>
<style type="text/css">
.widgetSystem {
width: 100%;
padding: 5px;
background: #DDD;
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-radits: 5px
}
.widgetSystem .kulit {
background: #FFFFFF;
background: rgba(153, 153, 153, 0.5);
height: 320px;
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;
margin: 5px
}
</style></div>
Keterangan :
- Kode yang berwarna MERAH yaitu Link Blog Teman, ganti dengan link blog teman sobat.
- Kode yang berwarna KUNING yaitu Judul Blog Teman, ganti dengan judul blog teman sobat.
- Kode yang berwarna BIRU yaitu ukuran panjang widget, ganti dengan angka terserah sobat, misal : 75%
- Kode yang berwarna HIJAU yaitu ukuran tinggi widget, ganti angka terserah sobat, misal : 400px
- Yang lainnya modifikasi sendiri
Hasilnya seperti ini :
Semoga Tips Blog yang berjudul Cara Membuat Widget Daftar Link Teman Keren Di Blog bisa bermanfaat.....
dan selamat mencoba.......
Salam kenal Kang Rio keren artikelnya ijin simak dan
ReplyDeleteTerapkan di blog saya terima kasih. jika tidak keberatan
Kita saling follow Blog agar kerja sama antar blogging
lebih nyaman. Terima kasih sebelumnya atas kerja samanya