We all know about Twitter card and today we have created a simple profile twitter card with HTML and CSS code you can add this profile card wherever you want it to appear in you blog. This card may mostly be used for music and entertainment blogger's as they can show their tweets, followers and following on their blog.
This Twitter profile card is built using CSS and HTML code. You just need to change the profile pic, total number of tweets, followers and following in the HTML code, This is simple version 1 twitter card.
Adding Simple Twitter Profile Card for Blog.
Step 1. Go to your Blogger dashboard then go to your blog
Step 2. Then go to Template > Edit HTML
Step 3. Now add the CSS code in the ]]></b:skin> of your blogger template
ADD FONT FACE TAG HERE
.tnb-card{
height: 175px;
width: 500px;
position: absolute;
bottom: 15%;
left: calc(50 - 250px);
border-radius: 5px;
overflow: hidden;
}
.profile-pic{
height: 100%;
width: 35%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6tMqcuGIFMKsaj7V4LEgYd3EGvArNPv1qzGodbWHgEWmrdv9YNbjCeOicS-qvShGFmxPpJKnbAxB5tBOpvqoxnPWiR_jj3Wft-sUr3ISFJj_Zm3wUhObkTnhVECGujdFghshtkxijWgD/s1600/Frinton1.jpg');
background-size: cover;
float: left;
position: relative;
}
.text{
height: 100%;
width: 55%;
top: -15%;
float: left;
position: relative;
padding: 10px;
}
.title-name{
font-size: 22pt;
color: #f7941e;
}
.tagline-desp{
font-size: 14pt;
color: #666;
}
.tnb-stuff{
position: relative;
top: 70%;
left: -20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.twitter-tff{
position: absolute;
width: 100%;
bottom: 15%;
}
.twitter-tff li{
margin-left: 3%;
float: left;
width: 30%;
text-align: left;
}
li{
color: #0099cc;
font-size: 10pt;
}
li tnb{
color: #666;
font-size: 8pt;
text-transform: uppercase;
}
After adding the code you need to save your template.
Step 5. Now you need to add the HTML tag in your template or gadget. If you want to add HTML tag in your template you need to copy and paste the code below the <body> tag in your blog or else go back to Layouts add HTML/Gadget and paste it where you want the gadget to appear.
<div class="tnb-card">
<div class="profile-pic">
</div>
<div class="text">
<div class="tnb-stuff"></div>
<h1 class="title-name">Frinton Madtha</h1>
<h2 class="tagline-desp">Blogging at TheNextBlogs</h2>
Add Twitter Profile Button Code Here if Needed
<div class="twitter-tff">
<ul>
<li>1,355 <tnb>Tweets</tnb></li>
<li>1130 <tnb>Following</tnb></li>
<li>113 <tnb>Followers</tnb></li>
</ul>
</div>
</div>
</div>
Now save it and you are done view your blog to see the Twitter profile card
Nice Work love your tutorial and are helpful too
ReplyDeleteAdd some more CSS work into to it to look cool
ReplyDelete