Sunday, 28 August 2011
Wordpress like Profile box under every post
Do you like this story?
Hello friends,
A very good morning to you..
In this post i'm going to make you learn how to show the profile box under every post..
It is a wordpress plugin in which one Can show about themselves Bellow the post..
For you i have specially made this plugin using which you can utilize it in a cool way :D....
The Above is The Preview of this plugin :)
So Come on Let's Implement it in your blog with 4 Easy Steps
Step1
Go To Blogger Dashboard, then Click on Edit Html, Then Tick on Expand Widget Templates.
Step2
Now Find The Following Piece Of Code :-
A very good morning to you..
In this post i'm going to make you learn how to show the profile box under every post..
It is a wordpress plugin in which one Can show about themselves Bellow the post..
For you i have specially made this plugin using which you can utilize it in a cool way :D....
So Come on Let's Implement it in your blog with 4 Easy Steps
Step1
Go To Blogger Dashboard, then Click on Edit Html, Then Tick on Expand Widget Templates.
Step2
Now Find The Following Piece Of Code :-
]]></b:skin>
Now Copy the Following Code just above it :
.profile-box {
background: #E1DCDC;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #CEC2C2;
overflow: auto;
}
.profile-box p {
margin: 0;
padding: 0;
}
.profile-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #DFC7C7;
}
background: #E1DCDC;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #CEC2C2;
overflow: auto;
}
.profile-box p {
margin: 0;
padding: 0;
}
.profile-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #DFC7C7;
}
Step3
Now Find The Following code and paste the Code in step4 above it
<div class='post-footer-line post-footer-line-1'/>
If the above code is not present then search these :<div class='post-footer-line post-footer-line-2'>
or
<div class='post-footer-line post-footer-line-2'/>
or
<div class='post-footer-line post-footer-line-2'/>
Step4
Now Copy The Bellow Code above as mentioned in step3
<b:if cond='data:blog.pageType == "item"'>
<div class='profile-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='YOUR AUTHOR PROFILE IMG URL HERE' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/sidhpro'>sidhpro</a><br/>
Be My Friend on Facebook [at] <a href='http://www.facebook.com/sidh.xsoul'>Sidharth</a><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ILibrary', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqKyhkCR0KX3gzylZNKpjzs9O3s_gMfnAylOGmKSsHE2PCDkZgZyp44MgztJVyOAy5QZ8OjAVaDhB4_xuMHNSaC694dOPrnZa1j8ncbgW5aeYWxk5Yn4-puM59Tj6A7fUHgamR8ef6lg/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' style='width:176px;height:18px; background: #ffffa0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMan5GtuyvP4LM56iiVpeyh57FfuxcSrcd2DN_8yMquzjfk5887fP5iCwTMXxW_LSLjIiu1pauYSmBbrBpNFbkdiYsVjxjy8q94Q90znsmDjclRaCSBPb3QkEfazt5z0Cf9cDozJhhITF/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='ILibrary'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/>
<center><i>*Please click on the confirmation link sent in to your inbox.. and if not present there check it in Spam Folder.*</i></center>
</form>
</div></p></div></b:if>
<div class='profile-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='YOUR AUTHOR PROFILE IMG URL HERE' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Write About Yourself Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/sidhpro'>sidhpro</a><br/>
Be My Friend on Facebook [at] <a href='http://www.facebook.com/sidh.xsoul'>Sidharth</a><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ILibrary', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:#F1F1F1;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqKyhkCR0KX3gzylZNKpjzs9O3s_gMfnAylOGmKSsHE2PCDkZgZyp44MgztJVyOAy5QZ8OjAVaDhB4_xuMHNSaC694dOPrnZa1j8ncbgW5aeYWxk5Yn4-puM59Tj6A7fUHgamR8ef6lg/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' style='width:176px;height:18px; background: #ffffa0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMan5GtuyvP4LM56iiVpeyh57FfuxcSrcd2DN_8yMquzjfk5887fP5iCwTMXxW_LSLjIiu1pauYSmBbrBpNFbkdiYsVjxjy8q94Q90znsmDjclRaCSBPb3QkEfazt5z0Cf9cDozJhhITF/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 1px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value='ILibrary'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/>
<center><i>*Please click on the confirmation link sent in to your inbox.. and if not present there check it in Spam Folder.*</i></center>
</form>
</div></p></div></b:if>
Now Change The Following :
- YOUR AUTHOR PROFILE IMG URL HERE with your image url
- Write About Yourself Here!!! with your Short Bio
- <a href='http://twitter.com/sidhpro'>sidhpro</a> with you twitter URL and Name
- <a href='http://www.facebook.com/sidh.xsoul'>Sidharth</a> with your facebook URL and Name
- ILibrary with you Feedburner ID
Now We have successfully completed the installation of this plugin in your blog...
Enjoy :) !!
Enjoy :) !!
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Subscribe to:
Post Comments (Atom)