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.
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.
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.
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">Langkah 4 : Simpan.
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>
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.
Tags:
subscription widget
→
widget
Membuat widget Berlangganan Artikel Dropdown Yang Keren
By Unknown →
