Modifikasi Widget Subscrib dan Sosial Media

Beberapa waktu lalu beberapa sahabat blogger bertanya bagaimana caranya membuat widget subscribe, rider, dan sosial media menjadi satu tampilan dalam satu wadah (menjadi satu widget). Sebenarnya ini sudah banyak membuatnya, namun tidak ada salahnya saya menampikan modifikasi widget dari ketiga widget di atas tersebut. Tampilannya akan sederhana, namun fungsinya sangat besar. Disamping itu cara pemasangannya dijamin mudah alias tidak bikin pusing. Baiklah, mari kita bahas cara pasang modifikasi widget subscribe dan sosial media untuk blogspot. Ikuti langkah berikut.
Log in ke blogger
Klik Rancangan
Klik Tambah Gadgetg
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style>
.subscribeTblogging{border:0px solid #000; padding:8px; width:310px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.subscribeTblogging:hover{-moz-box-shadow:inset 1px 1px 10px 1px rgba(249,215,126,1); -webkit-box-shadow:inset 1px 1px 10px 1px rgba(249,215,126,1); box-shadow:inset 1px 1px 10px 1px rgba(249,215,126,1)}
.tbimailbox{border:1px solid #D3D3D3; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:1px 1px 1px 1px rgba(255,172,84,0.4) inset; -webkit-box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4) inset; color:#666; font:14px "trebuchet ms",sans-serif; padding:7px 15px; width:160px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.tbimailbox:hover{-webkit-box-shadow:none; box-shadow:none; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
.Tbloggingsubmit{font:bold 12px Tahoma,Geneva,sans-serif; font-style:normal; color:#fff; background:#ff5714; border:0px solid #fff; text-shadow:0px -1px 1px #222; box-shadow:2px 2px 5px #000; -moz-box-shadow:2px 2px 5px #000; -webkit-box-shadow:2px 2px 5px #000; border-radius:10px 10px 10px 10px; -moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; padding:8px 15px; cursor:pointer; margin:0 auto}
.Tbloggingsubmit:active{cursor:pointer; position:relative; top:2px}
.Tbloggingsubmit::-moz-focus-inner{border:0; padding:0; margin:0}
</style>
<br />
<div class="subscribeTblogging">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME_FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="UDERNAME_FEEDBURNER" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" 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;}" type="text" value="Enter your email..." />
<input alt="" class="Tbloggingsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/USERNAME" target="_blank" title="Join us on Facebook"><img alt="facebook" src="http://1.bp.blogspot.com/-dWQ4WAgFEd4/UaOIdmxIstI/AAAAAAAAHow/1ER9XAAtr9s/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/USERNAME" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="http://3.bp.blogspot.com/-iRgGtzjfUOo/UaOIe0vICII/AAAAAAAAHpM/yq0OufsX_Q0/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/ID_GOOGLE PLUS" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="http://4.bp.blogspot.com/-rhZjMQqQSwc/UaOId555AQI/AAAAAAAAHo0/v9qrnoB9LRU/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/USERNAME" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="http://3.bp.blogspot.com/-MiOHuehf8Uo/UaOId1J8tjI/AAAAAAAAHo4/kCciO2il8R0/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/USERNAME" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="http://1.bp.blogspot.com/--Oc6zcT_s9Y/UaOIen7YBwI/AAAAAAAAHpI/S8ut7PyNJHc/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/USERNEME"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/blogonol?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div></div>

Selanjutnya Edit menurut tulisan warna merah dengan cetak tebal. Kalau sudah, klik Simpan dan lihat hasilnya. Demikian tutorial cara pasang Modifikasi Widget Subscrib dan Sosial Media untuk blogspot, semoga bermanfaat bagi semua. Amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"