Membuat widget Berlangganan Artikel Dropdown Yang Keren

Tentunya kamu ingin kan blog kamu semakin keren? Untuk itu pada kesempatan kali ini aku ingin berbagi cara untuk membuat widget berlangganan artikel atau yang sering disebut dengan subscription widget yang keren dan unik untuk blog kamu.

Kenapa bisa unik? widget ini dicuztomize dengan CSS maka dari itu widget ini akan terlihat cantik untuk blog kamu. Selain itu widget ini memiliki fitur dropdown sehingga akan mengurangi space pada sidebar blog kamu. Bukannya itu keren dan sangat berguna?

Lihat preview gambar di bawah ini untuk melihat hasil yang akan kamu dapatkan.

Bergabunglah Dengan Kami !

Jika kamu ingin tahu cara membuatnya, saya akan membagikan cara tersebut dengan gratis kepadamu. Dan kamu bisa saja membuatnya dengan mudah di blog kamu kok. So, ikuti langkah-langkah di bawah ini :

Langkah 1 : Masuk ke blogger >> Dashboard >> Tata Letak

Langkah 2 : Pilih tambah gadget di tempat kamu ingin meletakannya. Kemudian pilih HTML/Javascript

Langkah 3 : Masukkan kode di bawah ini ke kotak yang muncul.

<style type="text/css">
p {
margin: 0px auto;
line-height: 24px;
}
.as-dsf {
position: relative;
display: inline-block;
}
.as-dsf a {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
text-decoration: none;
text-align: center;
padding: 5px 0;
text-shadow: 0 0 1px #56A0F1;
}
.as-dsf > a {
display: inline-block;
width: 300px;
z-index: 1;
font-weight: bold;
color: #666;
border: 1px solid #aaa;
border-radius: 3px;
background: #E47610;
}
.as-dsf > a:hover {
background: #f1f1f1;
}
.as-dsf div {
position: absolute;
width: 296px;
height: 8px;
overflow: hidden;
left: 2px;
top: 28px;
-webkit-transition: all 350ms linear;
-moz-transition: all 350ms linear;
-o-transition: all 350ms linear;
-ms-transition: all 350ms linear;
transition: all 350ms linear;
}
.as-dsf:hover div {
height: 118px;
}
.as-dsf ul {
position: absolute;
bottom: 5px;
left: 0;
width: 296px;
background: #56A0F1;
margin: 0;
padding: 2px 0 9px;
border-radius: 0 0 3px 3px;
border: 1px solid rgba(0,0,0,0.25);
border-width: 0 1px 1px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset;
z-index: 9999;
}
.as-dsf ul::before {
content: '.';
text-indent: -9999px;
display: block;
background: #56A0F9;
width: 15px;
height: 15px;
position: absolute;
bottom: -4px;
left: 38px;
border-radius: 15px;
box-shadow:
0 -1px 0 rgba(255,255,255,0.5) inset,
0 1px 0 #666;
z-index: 0;
}
.as-dsf ul::after {
content: '.';
text-indent: -9999px;
display: block;
background: #fff;
width: 5px;
height: 5px;
position: absolute;
bottom: -2px;
left: 42px;
border-radius: 15px;
border: 1px solid #666;
box-shadow: 0 -1px 0 rgba(255,255,255,0.5);
z-index: 0;
}
.as-dsf:hover ul {
bottom: none;
}
.as-dsf ul li {
list-style: none;
margin: 0;
padding: 0;
}
.as-dsf ul li a {
display: block;
color: #ddd;
text-shadow: 0 0 8px #111;
}
.as-dsf ul li a:hover {
color:#fff
}
</style>
<div class="as-dsf">
<a href="#">Bergabunglah Dengan Kami !</a>
<div>
<ul>
<li><a href="Url Google + kamu">Temukan kami di google+</a></li>
<li><a href="Url Halaman facebook kamu">Halaman facebook kami</a></li>
<li><a href="Url twitter kamu">Follow kami di twitter</a></li>
<li><a href="Masukan Alamat feedburner kamu">Dapatkan update via email</a></li>
</ul>
</div>
</div>

Langkah 4 : Simpan.

Nah, kalau sudah kamu simpan, coba lihat blog kamu sekarang juga! Bagaimanakah jadinya?

Semoga tulisan ini bisa membantu untum membuat blog kamu semakin keren. Dan semoga bisa bermanfaat untuk kita semua.

Post Tags:

subscription widget widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/

2 comments to ''Membuat widget Berlangganan Artikel Dropdown Yang Keren"

tanpa namaApril 16, 2013 at 7:46 AM
Aku Coba Kok gak Seperti Contoh ya hasilnya. cuma menu ke bawah aja. tanpa Drop down
tanpa namaApril 16, 2013 at 7:46 AM
Aku Coba Kok gak Seperti Contoh ya hasilnya. cuma menu ke bawah aja. tanpa Drop down