How To Add Professional Profile Gadget on Blogger Or Website
- January 22, 2019
- By Pawan Blogs
- 0 Comments
The first thing was, why we need it!
They give more professional looks on your Blogger or Website and they can help you to rank on google search engine,
How?
If any user search on google about your website so they can be seen including your profile image or your tag line, so that's mean its make more chances to get search clicks on your website, on the tag line you can include relevant keywords or about yourself. When I view my website as a viewer so it looks quite impressive,
Ok I can try makes it more useful so I am adding a follow button below your profile image, It helps you to get more regular visitor or reader on your blogger or website.
There We need little edit, so first put your profile URL on { img src ="Put Image URL"} make sure it was on square formate like 300*300 px, 400*400 px. next edit on follow button {onclick="window.location='Follow Button URL"} if you don't know how to get follow button URL so View My other article ( Get Follow Button URL ). Add about yourself between {<H4>About YourSelf</H4>} tag, now we done HTML adding.
If you want makes follow button more attractive we need to add CSS on blogger.
Add The CSS code on the template that gives unique looks on profile follow button.
Now you have done all process if you have any problem to add profile gadget to another website building platform so comment it down below
They give more professional looks on your Blogger or Website and they can help you to rank on google search engine,
If any user search on google about your website so they can be seen including your profile image or your tag line, so that's mean its make more chances to get search clicks on your website, on the tag line you can include relevant keywords or about yourself. When I view my website as a viewer so it looks quite impressive,
Ok I can try makes it more useful so I am adding a follow button below your profile image, It helps you to get more regular visitor or reader on your blogger or website.
Pawan Blogs - Add Professional Profile Gadget on Blogger.
Apply the same Process on another Website Builder Platform
- Adding HTML.
Select the blog >> Clicks on layout >> Add HTML gadget on Sidebar,
<center><div class="aboutme-content"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDc_mADf_FJIRUWuhrztfIv4IXEG8naH2dHuvoTNMBEFb0O8w0qwzNuMVPLc-NMaCHKgYDx0sE6qMhRSRANABGFDrLVKBNAYY_-sXUJVvtxocB_YCR8pZabvwZrNTB0sx-AEexRrvQjLzl/s1600/clip2.png" / /><br /><br /><input onclick="window.location='https://www.blogger.com/follow.g?view=FOLLOW&blogID=9096816731477040820'" target="_blank" type="submit" value="Follow" /><br /><h4>hey! guys, I am Pawan Negi owner of Pawanblogs, And I loved coding and programming, so I am sharing my experiences or knowledge throw those articles, follow me if you interested.</h4></div></center>
There We need little edit, so first put your profile URL on { img src ="Put Image URL"} make sure it was on square formate like 300*300 px, 400*400 px. next edit on follow button {onclick="window.location='Follow Button URL"} if you don't know how to get follow button URL so View My other article ( Get Follow Button URL ). Add about yourself between {<H4>About YourSelf</H4>} tag, now we done HTML adding.
If you want makes follow button more attractive we need to add CSS on blogger.
- Adding CSS.
Your Blogger >> Theme >>Customizee >> Advanced >> Add CSS "Put The CSS Code"
No customization Needed.
input[type = "submit"]
{font-family: bold serif;
font-size: 20px;
text-align: center;
padding: 7px 15px;
background:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: solid 4px #B7A85C;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
input[type = "submit"]:hover {color: #fff;
background: #151515;
border: solid 1px #F90909;
text-decoration: none;}
{font-family: bold serif;
font-size: 20px;
text-align: center;
padding: 7px 15px;
background:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: solid 4px #B7A85C;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
input[type = "submit"]:hover {color: #fff;
background: #151515;
border: solid 1px #F90909;
text-decoration: none;}
Add The CSS code on the template that gives unique looks on profile follow button.
Now you have done all process if you have any problem to add profile gadget to another website building platform so comment it down below
Article Written By Pawan Negi.
0 comments