Widget Share Classic

DEMO IMAGE

Saya kembali akan memposting tentang widget. Widget ini adalah widget yang berfungsi untuk berbagi. Widget ini sudah sering kita temui dimana-mana, dan tentu saja dengan bermacam-macam bentuk dan tampilan. Sekarang kita akan melihat Widget Share Classic dengan tampilan yang klasik tentunya. Untuk anda yang tertarik dengan widget ini dan ingin memasangnya di blog anda, berikut adalah tutorialnya :

Cara pemasangannya :

1. Masuk ke Blogger 
2. Pilih Template
3. Kemudian pilih Edit Template
4. Cari kode  ]]></b:skin>
5. Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>
6. Jika sudah dicopy-paste, SAVE TEMPLATE

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
 font-family: 'Oswald', sans-serif;
 margin: 15px 0;
 overflow: hidden;
}
.w2bOldSocial ul li {
 float: left;
 width: 90px;
 padding: 0 0 0 55px !important;
 margin: 0 0 0 5px !important;
 line-height: 48px !important;
}
.w2bOldSocial ul li a {
 font-size: 20px !important;
 text-decoration:none;
 padding:0 !important;
 margin:0 !important;
 text-decoration:none;
}
.w2bOldSocial ul li a:hover {
 text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbf-eO5FC54fA3MEnin8-QfTaKpOjqCPNsTp8KYrXCGLb3CbGF2ci15AsGI9hIc9YUcriPJ1zAkNsH0VIQye7hLVzP65NkLF0B-nwX6A4e8TKN98IHtMPnGOH2aMmFS6numgkW_8DpnCGv/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaKr5ailDmc3jiFiKqrBgtBSwVcduWfp28szeIsvxTQg6NBvAQR6eQ-us93nFwm5ltYDrOFwT6ut0XgwHWR1Qr2clOdNI4I7Hp9ngBMFcs0SYlxhUDhmJDElikRTgPnfFTy_kXwaHww8d/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFb-qTN8SJWWsLmJsTH68xt0_37YbpmU7T7e3vAeqp3kO954mFdzLmHtx-fp5fr8zdIK8MYCC2kTIHOfmnn8X41C39zgvC0Eh-6-6xd3_kV1neegpHhDZBU46wYWKXJDvvwV9ZDLgD3bOz/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4kVKhhf9g7hX8IXI7I7ePkVkHCmAwuMQGaUtUZd9rbmHmhNiwWbRBrYZC5AHMQWYwWEr6OiGbrRMvoIN3cg1GyC0nur5IZABwqxYky0L6HgrK2LMVFB0GcF8jYRekpZPgPHBZbP0EvQd/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
 display: block;
 clear: both;
 margin: 10px 0;
}
form.w2bEmailform {
 margin: 20px 0 0;
 display: block;
 clear: both;
}
.emailText {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxS7KtbZGHNPgQ7Bj4jXh1ZM0CB2HzEhxlP5Q1dzQ7waC4CsoXe9akJAVJ7xtR31WFrlqzCofVkVtZxFX4Hf_ywZ1b0at1zaBuN2ec3tDxRFUj-D6U5TQmVbVgeKW7_NH76LL7FwOLVWDm/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
 padding: 7px 15px 7px 35px;
 color: #444;
 font-weight: bold;
 text-decoration: none;
 border: 1px solid #D3D3D3;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #D3D3D3;
 cursor: pointer;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Jangan lupa, jika langkah diatas sudah selesai, langkah itu bukanlah akhir dari pemasangan widget ini, berikut adalah cara menempatkan widget ini ke dalam blog :

Menambah Widget :

1. Masuk ke Tata Letak
2. Pilih Add Widget
3. Lalu pilih HTML/Javascript
4. Copy-paste kode berikut ini kedalamnya

<div class="w2bOldSocial">
 <ul>
  <li class="w2brss"><a href="http://feeds.feedburner.com/way2blogging">RSS</a></li>
  <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=way2blogging" >Email</a></li>
  <li class="w2btwitter"><a href="http://twitter.com/way2blogging">Twitter</a></li>
  <li class="w2bfacebook"><a href="http://facebook.com/way2blogging">Facebook</a></li>
 </ul>
</div>
<div id="w2bEmailsub">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
  <input type="hidden" value="Way2blogging" name="uri" />
  <input type="hidden" name="loc" value="en_US" />
  <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
  <input type="submit" class="emailButton" value="SignUp" title='' />
 </form>
</div>

Cutomization :

• http://feeds.feedburner.com/way2blogging → URL feedburner anda
• http://feedburner.google.com/fb/a/mailverify?uri=way2blogging → ID feed burner anda

• http://twitter.com/way2blogging →  URL  twitter anda

• http://facebook.com/way2blogging → URL twitter anda

• <input type="hidden" value="Way2blogging" name="uri" /> → ID feed burner anda

Gimana menurut anda widget ini? bagus kah, unik kah, biasa saja kah, berikanlah komentar anda pada artikel ini sebagai support anda pada saya. Selamat mencoba !

Happy Blogging