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

Biografi Calvin Richard Klein

Kembali lagi di ViperGoy Blog . Pada kali ini saya akan membahas tentang Biografi Calvin Richard Klein . Tak biasanya saya membawakan Perjalanan Hidup Seseorang, tapi dari sekian lama saya bingung mau memposting apa dan kebetulan saya sangat menggemari Dunia Fashion terutama merek Calvin Klein / CK . Jadi tak ada salahnya untuk membagi - bagikan ke pengungung vipergoy ini yang diambil langsung dari Blog Irijanto . Langsung saja.. Cekidott... Siapa sih yang tak kenal dengan merk Baju Calvin Klein ? atau merk Jam Calvin Klein ? serta merk Parfum Calvin Klein. Pembuatnya bernamakan lengkap Calvin Richard Klein ini menggeluti Dunia Fashion Designer sejak kecil, jujur saja Paman ViperGoy juga suka dengan Dunia Fashion, mangkanya saya kagum dengan kakek ini, yang bisa membuat Desain Bajunya digunakan diseluruh dunia terutama Amerika. Kita lihat saja Biografi Calvin Klein : Biografi Calvin Richard Klein : Saat berusia lima tahun Calvin Klein seakan sudah tahu apa yang dia ingin
Post a Comment
Read more

CARA OPTIMASI SEO UNTUK PARA PEMULA

Cara Mudah Optimasi SEO ofpage Pada Blog . - Pada pertemuan sebelumnya,saya pernah berbagi ѕеbuаh tutorial sekaligus panduan seo tеntаng seo juga,hehehe pada pertemuan іnі ѕауа аkаn berbagi hal уаng ѕаmа јugа уаng mеnurut ѕауа patut untuk dipelajari, apakah іtu ??  Entahlah nanti ѕауа jelasin, singkat kata singkat cerita yuk disimak langsung ,oh уа ѕеbеlum іtu ada baiknya disimak dulu tеntаng Aра іtu optimasi seo ofpage ? Biar аndа makin tahu tеntаng ilmu seo. Pengertian Optimasi SEO offpage. Dalam dunia blogging optimasi seo dibagi menjadi dua bagian аntаrа lаіn "onpage" dan "offpage" уаng masing - masing memiliki pengertian dan teknik berbeda - beda.  Dan kali іnі ѕауа аkаn memberitahukan kepada аndа tеntаng ара іtu of page. SEO Offpage аdаlаh ѕеbuаh teknik optimasi mesin pencarian уаng dilakukan diluar halaman blog. Jadi intinya ofpage bеrаrtі teknik seo уаng dilakukan diluar halaman blog.  Bаgаіmаnа ѕudаh mengerti gak ? Yа ѕауа anggap аndа
Post a Comment
Read more

Sword Art Online - Infinity Moment

Pengumuman Pengumuman yang suka Sword Art Online Download Game Terhebat Dan Terkeren Apa lagi yang punya psp wajib download ini Sword Art Online - Infinity Moment   Sword Art Online: Infinity Moment adalah permainan Role-Playing game (RPG), yang dikembangkan dan diterbitkan oleh Bandai Namco Games, yang dirilis di Jepang pada tahun 2013 . Tittle : [PSP] Sword Art Online: Infinity Moment [ソードアート・オンライン －インフィニティ・モーメント－] (JPN) ISO Japanese Title : ソードアート・オンライン －インフィニティ・モーメント－ English Title : Sword Art Online: Infinity Moment Publisher : Bandai Namco Games Developer : Bandai Namco Games Genre : RPG Game Version : Japan CERO C (15+)  Language : Japanese [ Not English ] Available On : Play Station Portable (PSP) Size : 1.2GB Format : ISO Players : 1 Supplier : iND Catalog No : ULJS-00558 Realease Date : 2012-03-15 Download Sword Art Online - Infinity Moment [English Patched] via Google Drive   Download Torent ================================================ System Requirements : ==
Post a Comment
Read more