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..