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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDJ03WTUxqYTLewlvP2_XwwGv8HynVGllVu7zOWiPPOn2bwSM29wki7ke15pr9UjXMkaRJFYAnT8N53DiSX-AHvy39P-SW4YGIjTjik1tamxXRO25ziF-8EbzRXgCcgDf-wdWUHbU164/s1600/twitter.png" title="Follow Us On Twitter" /></a>
<a href="http://feeds.feedburner.com/ID Feedburner Anda"><img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJX6iy8wevbWlakvI4njPk9EcI2GjEh_r2m4UtBMDAvQuaEC1w1Ksvgs85soS6xKt0QE6v_m2cZCXBi3IPWHHzBP0_JjYo7LhO23CPk_XjaKrHadCHY6PiVBxJAobKm_OmU5GOjtM2S2o/s1600/rss.png" title="Grab Our RSS Feed" /></a>
<a href="https://www.facebook.com/ID Facebook Anda"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUBIyiMyzzQLI3UFBKf09SAxkVRnlg0MYCEl4hU2YMuVPDPPnVZc-vpKEe6iOC01NCwnYt3OieQ2CdsO4iWIpKg7DuiFjZqng69oYi0uTq63A50w62g2TCW1Buq4y4XTh6H2R8QY3GSY/s1600/facebook.png" title="Follow Us On Facebook" /></a>
<a href="https://plus.google.com/ID Google+ Anda"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2vuLJk5_cx3cBrBg1YBnbML6R9HdM-QSXs64lGxcDHLSTRfAsQAzslRuixZ7OYvMv98eciM6JvoQyYThERMTMyeg49B0eLQRYmmdvJeHsqMj6nbGVBSDTMMzlAhiwaQN6oq43LY1Xbo/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.

Tweet

Related Posts

Widget Profil Social Dan Kotak Berlangganan Dengan Efek Shadow di Blogger

4/ 5

Oleh Arima Bery

Arima Bery Pada Thursday, November 08, 2012 Komentar