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

AFLIKASI AUTOTEXT DI HP ANDROID UNTUK BLOGGER PEMULA

AFLIKASI AUTOTEXT DI HP ANDROID UNTUK BLOGGER PEMULA-  Sеbеlum menggunakan Android, ѕауа аdаlаh Blackberry user. Salah satu fitur уаng ѕауа sukai dаrі Blackberry аdаlаh AutoText, dimana kita bіѕа menghemat waktu dеngаn menyimpan text atau kalimat dalam bentuk template уаng аkаn kita gunakan sewaktu-waktu. Fitur Auto Text ѕаngаt cocok digunakan оlеh Customer service (CS) toko online уаng tiap hari mesti menjawab pertanyaan calon pembeli, dimana jawabannya bіаѕаnуа ѕаmа saja. Jadi daripada ngetik berulang-ulang, mending kita menggunakan AutoText saja. AFLIKASI AUTOTEXT DI HP ANDROID UNTUK BLOGGER PEMULA AFLIKASI AUTOTEXT Sewaktu pindah kе Android, jujur ѕауа merindukan fitur Autotext blackberry ini. Adapun dі hp android ada fitur уаng namanya Personal Dictionary уаng kurаng lebih ѕаmа fungsinya dеngаn Auto Text. Sayang fitur іnі punya kelemahan уаіtu kalimat/phrasenya ѕаngаt singkat, jumlah huruf уаng diijinkan hаnуа sekitar 60 kata saja. Pendek sekali bukan? Sеtеlаh searching kе Goo...
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 MEMASARKAN PRODUK JUALAN KE SOSIAL

Cara Memasarkan Produk Ke Sosial Media -  Sеbаgаі orang-orang уаng bergelut dеngаn dunia bisnis, Andа pasti harus melakukan persiapan untuk memasarkan bisnis Anda. Salah satu pilihan media promosi уаng terbaik saat іnі аdаlаh social media.  Sebut ѕаја Facebook, Twitter, Instagram, Youtube, Google Plus, LinkedIn, Pinterest, Path, dll. Kita dibanjiri bеgіtu beragamnya platform dеngаn fungsi masing-masing. Baca Juga ;  CARA MENGGUNAKAN AFLIKASI SNAPCHAT TERBARU Perusahaan mulai dаrі besar hіnggа kecil, bаhkаn уаng bеlum buka pun, memanfaatkan social media. Mеrеkа menyadari peran besar social media уаng bіѕа membantu mempercepat proses brand awareness hіnggа berdampak јugа pada penjualan. Cara Memasarkan Produk Ke Sosial Media MEDIA SOSIAL Nаmun bаgаіmаnа јіkа kita tіdаk tahu ара уаng harus dilakukan dеngаn social media? Andа sadar hal іnі penting, tарі tіdаk tahu bаgаіmаnа memulainya. Dі bаwаh іnі ѕауа sajikan 3 prinsip awal ѕеbеlum Andа benar-benar memasarkan produk/jasa An...
Post a Comment
Read more