Salam Blogger, Kali ini bloggingpasuruan mau berbagi widget lagi, kali ini Widget SOCIAL BOOKMARKING yang saya gabung dengan SUBSCRIBE FEEDBURNER yang saya bikin lebih sederhana alias simple. Contoh widget dibawah ini
Jika Sobat ingin memasangnya di Blog, silahkan ikuti langkah langkahnya berikut ini :
:1. Masuk ke Akun Blogger Sobat
2. Masuk Dashboard >> Template >>Edit HTML >> HTML java script
3. Masukkan kode di bawah ini di dalam kotak HTML java script
<style type="text/css">
.wg-roumash{
padding:10px;
margin:auto;
width: 100%;
height:60px;
}
.wg-roubbb{
background: #000;
}
.wg-roubbb{
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-roubbb:hover{
background:#ddd;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wg-roubbb img{
padding-top:5px;padding-left:5px;
}
#wg-mashmini {
width:100%;
margin:auto;
padding:0px;
}
.wg-mashmnbx {
background-color:#000;
border:1px solid #fff;
border-top:1px solid #fff;
overflow:hidden;
padding:12px 16px;
}
.wg-mashmnbx form {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
}
.wg-mashmnbx input.emailu {
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
color:#999;
width:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:13px;
padding:7px 10px 8px;
}
.wg-mashmnbx input.submitu {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
font-weight:700;
font-size:12px;
float:right;
cursor:pointer;
padding:7px 14px;
}
.wg-mashmnbx input.submitu:hover {
text-decoration:none;
}
.wg-bttnwht {
border:1px solid #fff;
text-shadow:1px 1px 0 #fff;
background-color:#fff;
}
.wg-bttnwht:hover {
background-color:#DCDCDC;
}
</style>
<div class='wg-roumash'>
<div class='wg-roubbb'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div>
<div id="wg-mashmini">
<div class="wg-mashmnbx">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
<input class="submitu wg-bttnwht" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="#"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
</div>
Kustomisasi :
Ganti “ # “dengan ID milik Sobat
4.Simpan dan lihat hasilnya
Selesai
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat WIDGET Gabungan SOSIAL BOOKMARKING dan SUBSCRIBE FEEDBURNER. Semoga bermanfaat dan terima kasih..