Selasa, 10 Desember 2013

Cara Membuat Widget Daftar Link Teman Keren Di Blog


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>
</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>
</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.......
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)