Skip to main content

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.......
Labels:

Comments

Post a Comment

Popular posts from this blog

MEMBUAT BLOG DI TERIMA ADSENSE

Membuat blog langsung di terima Google adsense atau sekali daftar langsung diterima oleh Google Adsense adalah idaman para blogger pemula. Karena Masa depan dari para publisher adalah mendapatkan bayaran dari iklan yang di tempatkan di Blog. Saya pun dulu seperti itu . Ada semangat ngeblog ketika blog yg kita miliki terpampang iklan iklan dari GA.  Walaupun ada banyak situs pengganti google adsense yg juga bayar mahal namun GA tetap menjadi pilihan paling utama .  Google adsense masih menjadi Favorit di urusan mendapatkan penghasilan dari internet Baca Juga ; Alasan Blog Di Tolak Google Adsense Untuk bekerja sama dengan Google adsense ada ketentuan ketentuan dasar yg harus Blogger mania ketahui kemudian terapkan. Walaupun ada banyak cara untuk mendapatkan adsense, Baik itu youtube atau ad mob tetapi disini kita bicara tentang Google adsense di Blog. Ketentuan inilah yg nantinya akan menjadi kebijakan yg dinilai oleh google apakah Blogger mania mengikuti atura...
Post a Comment
Read more

Cara Memperkecil / Mengurangi Pemakaian Memori RAM Mozilla FireFox Dengan Firemin

Cara Memperkecil Pemakain Memori RAM Mozilla FireFox Dengan Firemin Mozilla Firefox dikenal sebagai salah satu browser terpopuler di dunia. Banyak sekali pengguna FireFox yang menggunakan browser buatan Mozilla tersebut sebagai default Browser. Kelebihan dari browser FireFox ini memiliki banyak adds-on, cepat, dan juga memiliki banyak pilihan derivatif seperti CyberFox, Palemoon, Dan sebagainya. Namun, dibalik semua kelebihan tersebut, Firefox memiliki beberapa kelemahan. Salah satu kelemahan dan FireFox adalah penggunaan memori RAM yang cukup besar. Untuk pemakaian standar saja FireFox bisa tembus memakan RAM hingga mencapai kurang lebih 200 MB. Mozilla sendiri sudah berusaha meng- improve  browser miliknya, namun tetap saja masih terasa besar.  Tetapi sekarang kalian tidak perlu khawatir, karena sekarang sudah ada sebuah aplikasi portable yang dapat mengurangi / reducing  pemakain memori dari Mozilla Firefox. Aplikasi mini tersebut bernama Firemin.  Berikut adala...
Post a Comment
Read more

Cara Mengganti Template Blog

Kembali lagi di ViperGoy Blog . Pada artikel ini, saya akan memberikan artikel tentang  Cara Mengganti Template Blog . Mungkin anda bingung dengan Mengganti Template Blog . Ya, pada tampilan baru blogger, memang sangat bingung untuk Mengganti Template Blog karena tempatnya sudah berubah - ubah. Namun, jangan cemas untuk para blogger yang ingin Mengganti Template Blogn ya. Caranya sangat mudah sekali, tetapi ikuti langkah-langkah yang ViperGoy berikan. Cekidot... Cara Mengganti Template Blog : Langkah Pertama : Silahkan Buka Link ini "  http://blogger.com/  " Langkah Kedua : Anda akan melihat tampilan seperti ini. ( Lihat Gambar ) Langkah Ketiga : Klik pada Menu Dropdown , dan pilih " Template ". ( Lihat Gambar ) Langkah Keempat : Setelah itu akan muncul tampilan seperti ini. ( Lihat Gambar ) Langkah kelima : Lalu, Lihat pada Kanan Atas kalian, ada tombol seperti ini. ( Lihat Gambar ) Langkah Keenam : Lalu akan muncul tampilan seperti ini. ( Lihat Gambar ) Ketera...
Post a Comment
Read more