Sliding Profile Widget for blogger
How to add this to blogger
- Go to layout>Add a gadget>HTML/javascript
- Paste the following Code
<style type="text/css"> .screen:hover .background { opacity:0.5;}.slider:hover { left:-320px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}body { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;}.Pheader { height:60px; width:100%; background:#56B8DE; text-align:center; float:left; color:#fff;}.profilepic { width:80px; border-radius:50%; margin-top:20px; border:2px solid #fff; box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);}h3 { margin-top:0; text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);}.screen { margin:0 auto; margin-top:24px; width:320px; height:210px; box-shadow: 0px 2px 6px #999; position:relative; overflow:hidden; background:#333;}.slider { width:640px; float:left; left:0; position:relative; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.background { position:absolute; width:320px; height:auto; z-index:0; top:60px; left:0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.header1, .header2 { text-align:center; width:320px; float:left; height:140px; color:#fff; position:relative;}.header2 { padding-top:14px;}p { font-size:12px; text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);}
</style><div class="screen"> <div class="Pheader"> <h4>My Profile</h4>
</div> <!-- positioned absolutely in the background --> <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web" /> <!-- This slider moves on hover --> <div class="slider"> <!-- Section 1 --> <div class="header1"> <img class="profilepic" src="http://www.protorials.com/wp-content/uploads/2014/03/me3.jpg" /> <h3>Abhinav Singh Chauhan</h3>
</div> <!-- Section 2 --> <div class="header2"> <p>Web Developer<br/> Graphic Designer<br /> Web Design Blogger<br /> Life - long Drummer<br /> General all 'round Good Guy</p> </div> </div></div>
All done
EmoticonEmoticon