Home » Blogging » Tutorial » [SHARE] Widget The Lounge ala Kaskus

[SHARE] Widget The Lounge ala Kaskus

Imamz Selasa, 11 November 2014 0 Comments

[SHARE] Cara Membuat Widget The Lounge ala Kaskus - Widget The Lounge, salah satu widget yang berisi daftar link berupa judul menarik dari sebuah artikel. Pembuatan Widget The Lounge ini ter-inspirasi dari salah satu forum di Indonesia yaitu Kaskus. Jika disana daftar link berupa judul yang menuju ke sebuah thread diskusi, maka di Widget The Lounge ini link menuju ke sebuah artikel menarik yang mengajak pengunjung untuk membacanya.

Design Widget ini flat, simple dan perubahan warna pada saat hover link. Untuk pembuatan link bisa menggunakan Javascript Direct, agar link bisa di custom, seperti contoh: http://trikis-zone.blogspot.com/go/lounge-id-1602 dan jika di klik maka akan otomatis direct url yang dituju. Sebagai contoh, silahkan klik salah satu artikel yang ada pada Widget The Lounge di samping kanan.

Berikut Cara Membuat Widget The Lounge ala Kaskus:

1. Pastikan kalian sudah menginstall Font Lato dan Font Awesome. Jika belum, pasang Font tersebut dibawah kode <head>:

HTML

2. Login ke Blogger > Layout > Add a Gadget
3. Pilih HTML/JavaScript, kemudian copy kode dibawah ini:

SCRIPT

<div id="thelounge">
<div class="title"><b>[Terbaru] The Lounge</b></div>
<ul>
<li class="li1"><a href="#"><i class="fa fa-star-o"></i>Judul 1</a></li>
<li class="li2"><a href="#"><i class="fa fa-star-o"></i>Judul 2</a></li>
<li class="li3"><a href="#"><i class="fa fa-star-o"></i>Judul 3</a></li>
<li class="li4"><a href="#"><i class="fa fa-star-o"></i>Judul 4</a></li>
<li class="li5"><a href="#"><i class="fa fa-star-o"></i>Judul 5</a></li>
</ul>
<div class="auth"><a href="http://trikis-zone.blogspot.com/2014/11/share-widget-lounge-ala-kaskus.html" title="Widget by TRIKIS-ZONE">Widget by TZ</a></div>
</div>

<style type="text/css">
#thelounge {width:300px;height:290px;margin-top:11px;background:#F1F5F9;box-shadow:0px 3px 0px 0px #5498c8;border-bottom-left-radius:3px;border-bottom-right-radius:3px;font-family:"Lato", "Myriad Pro", "Arial", sans-serif;font-size:14px
}
#thelounge .title {height: 30px;background:#5498c8;font-size: 16px;padding: 10px 5px 5px 20px;color:#fff;border-top-left-radius:3px;border-top-right-radius:3px
}
#thelounge .auth {text-align:right;padding:10px
}
#thelounge .auth a {font-style:italic;font-size:10px;font-weight:bold;color:#444;text-decoration:none
}
#thelounge ul {margin:0px;padding:0px
}
#thelounge ul li {list-style:none;height:40px;padding:0px 0px 0px 10px!important;border-bottom:1px dashed #ddd;transition: all 0.17s ease-in-out
}
.li1:hover {background:#E06254}
.li2:hover {background:#0DD24B}
.li3:hover {background:#fdd203}
.li4:hover {background:#ce52bb}
.li5:hover {background:#4190a8}
#thelounge ul li a {text-decoration:none;display:block;height:100%;padding-top:10px;color:#444
}
#thelounge ul li a:hover {color:#fff!important
}
#thelounge ul li a i {font-weight:bold;padding-right:5px
}

4. Simpan dan lihat hasilnya.

BIRU: Link Artikel.

MERAH: Nama dan Judul.
UNGU: Elemen-elemen CSS yang bisa di sesuaikan sesuai keinginan, seperti Warna dan Ukuran.

[SHARE] Widget The Lounge ala Kaskus. Jika ada pertanyaan silahkan tinggalkan di kolom komentar. Terima Kasih.