How to add a responsive twitter follow me widget for blogger

Today I am going to teach you how to add a twitter follow me widget for blogger. It is very responsive It is made with pure CSS no jquery

Features

-Responsive design
-No Jquery
-No lags

How to add this blogger

-Go to>layout>add a gadget>html/javascript
-Paste the following code

<style type="text/css"> @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html { background: #d7d9d9;}
*, html, body { font-family: Open Sans;}
ul, li { margin: 0; padding: 0; list-style-type: none;}
.container { margin: 40px auto 0; width: 143px;}
.profile-container { position: relative; width: 143px; float: left;}
.profile { background: #f6f6f6; float: left; padding: 4px; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.avatar img { display: block; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.follow { margin: 4px 0 0 0;}
.follow button { display: block; width: 100%; border: 0; background: #268cde; color: white; padding: 7px 0; margin: 0; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer;}
.follow button i { font-size: 10px; color: #b9daf4;}
.follow button:hover { background: #3096e8;}
.follow button:active { background: #2085d6;}
.profile-list { overflow: hidden; width: 100%; box-sizing: border-box; color: #767b7e; font-size: 13px;}
.profile-list li { cursor: pointer; background: #ffffff; border-top: 1px solid #e5e6e6; padding: 15px 10px;}
.profile-list li:last-child { border-radius: 0 0 3px 3px;; -o-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px;}
.profile-list li [class^="icon-"] { margin: 0 3px 0 0;}

.profile-list .profile { border-radius: 3px 3px 0 0; position: relative;}
.profile-list li { -webkit-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: perspective(250px) rotateX(-90deg); -o-transform: perspective(250px) rotateX(-90deg); transform: perspective(250px) rotateX(-90deg); -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);}
.profile-list .first { -webkit-transition: 0.2s linear 0.8s; -o-transition: 0.2s linear 0.8s; transition: 0.2s linear 0.8s;}
.profile-list .second { -webkit-transition: 0.2s linear 0.6s; -o-transition: 0.2s linear 0.6s; transition: 0.2s linear 0.6s;}
.profile-list .third { -webkit-transition: 0.2s linear 0.4s; -o-transition: 0.2s linear 0.4s; transition: 0.2s linear 0.4s;}
.profile-list .fourth { -webkit-transition: 0.2s linear 0.2s; -o-transition: 0.2s linear 0.2s; transition: 0.2s linear 0.2s;}
.profile-container:hover .profile { border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0;}
.profile-container:hover .profile-list li { -webkit-transform: perspective(350px) rotateX(0deg); -o-transform: perspective(350px) rotateX(0deg); transform: perspective(350px) rotateX(0deg); -webkit-transition: 0.2s linear 0s; -o-transition: 0.2s linear 0s; transition: 0.2s linear 0s;}
.profile-container:hover .profile-list .second { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;}
.profile-container:hover .profile-list .third { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;}
.profile-container:hover .profile-list .fourth { transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;} </style>
<div class="container">
<div class="profile-container unfold"><div class="profile"><div class="avatar"><img src="http://i.imgur.com/L1rfQG5.jpg" /></div><div class="follow"><button><i class="icon-plus"></i> Follow</button></div></div><ul class="profile-list"><li class="first"><i class="icon-user"></i> Profile</li><li class="second"><i class="icon-list-alt"></i> Activity</li><li class="third"><i class="icon-time"></i> Timeline</li><li class="fourth"><i class="icon-heart"></i> Favorites</li></ul></div>
</div>

-Save it

You are all done

You May Also Like