November 08, 2012

Widget Profil Social Dan Kotak Berlangganan Dengan Efek Shadow di Blogger

Hai Sobat Blogger !!!
kali ini kita akan membahas widget profil social dengan kotak berlangganan dengan efek shadow yang pastinya tidak kalah dengan widget sebelumnya. Widget ini sangat cocok bagi Anda dan saya tentunya, jadi tidak ada salahnya untuk mencoba dan melihat hasilnya dannnn tersenyumlah.

Sibscribe Box With Effect Shadow
Langkah :
  1. Buka Akun Blogger Anda
  2. Masuk ke Menu Layout > Add Gadget
  3. Pastekan kode dibawah ini :
<div class="widget-content">
<style>
#social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}
#social img {
margin-left: 3px;
margin-right: 3px;
opacity: 0.6;
}
#social img:hover {
opacity: 1;
}
</style>
<div id="social">
<a href="https://twitter.com/ID Twitter Anda"><img alt="Twitter" src="http://4.bp.blogspot.com/-L65ieRIkkjs/UGxmN0E-doI/AAAAAAAAGX0/b7QvU0fKf1Q/s1600/twitter.png" title="Follow Us On Twitter" /></a>
<a href="http://feeds.feedburner.com/ID Feedburner Anda"><img alt="Feed" src="http://3.bp.blogspot.com/-hOo8TvPYMb0/UGxmNNbgZoI/AAAAAAAAGXs/V3OXa5WY5zQ/s1600/rss.png" title="Grab Our RSS Feed" /></a>
<a href="https://www.facebook.com/ID Facebook Anda"><img alt="Facebook" src="http://4.bp.blogspot.com/-v6_87olK-DU/UGxmLmw7XPI/AAAAAAAAGXc/3krPwQCwqKQ/s1600/facebook.png" title="Follow Us On Facebook" /></a>
<a href="https://plus.google.com/ID Google+ Anda"><img alt="Google Plus" src="http://3.bp.blogspot.com/-6eDRTIgohOs/UGxmMcF-IuI/AAAAAAAAGXg/GBz546HBHfA/s1600/google.png" title="Add To Circle On Google Plus" /></a>
</div>
</div>
<div class="widget-content">
<div class="subscriptionboc">
<center><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feed Burner Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div class="paratraf">Get All Latest Updates From Us Direct In Your Inbox !!</div><p><center><p><a href="http://feeds.feedburner.com/MyBloggerClub"><img src="http://feeds.feedburner.com/~fc/MyBloggerClub?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></center>
</p><div class="forspace">
<center>
<input class="enteremail" type="text" style="width:140px" name="email" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" /></center></div>
<p></p>
<input type="hidden" value="MyBloggerClub" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<center>
<input class="button45" type="submit" value="Sign Up" /></center></form></center>
</div>
<style>
.subscriptionboc
{
border-style:solid;
border-width:2px;
border-color:#000;
padding:20px;
width:235px;
background:#fff;
transition: box-shadow .777s;
-webkit-transition: box-shadow .777s;
-moz-transition: box-shadow .777s;
-o-transition: box-shadow .777s;
-ms-transition: box-shadow .777s;
}
.subscriptionboc:hover
{
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.paratraf
{
font-size:20px;
font-family:'georgia';
text-align:center;
color:#000;
}
.feed-links{display:none;}
.enteremail
{
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
color: #8B8B8B;
padding: 10px 40px;
border-style:solid;
border-width:2px;
border-color:#CACACA;
}
.forspace
{
padding:15px;
}
.button45
{
background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
background:#249334;
border: 0 none;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
cursor: pointer;
font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
font-weight: bold;
padding: 10px 40px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
</style></div>
 Keterangan :

  • Ganti ID Social Media Anda dengan kode yang diwarnai merah pada kode diatas. Ingat ID bukan URL.

     4.  Save.

Related Posts

Widget Profil Social Dan Kotak Berlangganan Dengan Efek Shadow di Blogger
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

Show comments
Hide comments

Jika Ada Pertanyaan,Kritik,Saran,Dsb ...
Tolong Di Comment Di Kotak Komentar Yg tersedia,..
Bagi Anda Yg Ber-Komentar,..
Tolong Berkomentarlah Yg Baik,..
Karna Kalau Berbau SARA,Jorok,Mesum,Atau Porno
Akan Saya Jadikan SPAM Atau Saya HAPUS,.. !!!
(Gomen Buat Anonymous ID Saya Urus Belakangan)

NB : Klik Notify Me Dikanan Bawah Ini Biar Ntar Kalo Ane Sudah Balas Bisa Cepat Kalian Konfirmasi
Arigatou ^_^
Bery HackeR™