Salam Blogger, Kali ini SATORES 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 Mudah Membuat WIDGET SOSIAL BOOKMARKING dan SUBSCRIBE FEEDBURNER. Semoga bermanfaat dan terima kasih..
Ditulis Oleh : Teguh ~ Satores
Sobat sedang membaca artikel tentang Cara Mudah Membuat WIDGET SOSIAL BOOKMARKING . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima Kasih...
0 Response to "Cara Mudah Membuat WIDGET SOSIAL BOOKMARKING"
Post a Comment
- Silahkan berkomentar sesuai tema
- Gunakanlah kata-kata yang baik dalam berkomentar (no iklan, no porn, no spam)
- Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukkan ke folder SPAM
- Kritik dan saran sangat dianjurkan agar blog ini menjadi lebih baik
Terima Kasih.