Posting Author's name below the post

Some times , you may want to post the author's name below all posts.You also can type you name below all posts.but there is little trick to do this in more quicker and easier way. Instead of a name , you also can use a image as a signature. Here is the way to do it.


1. Edit your Template
2. Now find out line post-footer-line-3 ( press 'Ctrl' + F to open your browser's search box)


Now you will find out a line similar to

<p class='post-footer-line post-footer-line-3'/>


Now , paste this code line just below it.


Lessons by <data:post.author/>


Use any thing you want instead of Lessons by. some thing like , written by , post by .......

or if you want a image , instead of the name , paste this code line

<IMG SRC="Paste Image your URL of signature image">

ex:-

<IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjahFXgAOcRluABwccosPLt90Yhtnj0pxDb3UVvypMmjTDuWevm1mvDxG_szKigCoRpB51IRzPFeN65Sn8wfpTcMUSBmcsHxsAMVXhgzXwp0HM-iySCTOcnHpSXUdZibaFwOsGVFSuplcue/s185/DragonD.png">


Here is the image signature that i use in my another blog , instead of the Author's name.

Now follow the Safety Saving Steps.

And

Changing Sidebar header images

If you are using a some what developed blogger template , you can see a image in the back ground of the caption of your side bar gadgets. Changing these is a some what complicated task. Really , Changing is not complicated , but creating a suitable graphic is the complicated task. If you know graphic designing , this will be easy. For others , it's better to skip this lesson and read the next one.



Here is the side bar header image of my blog




So , here is the way to change it

First of all , create a suitable sidebar header image.Then upload it to a image hosting site.

Now,

1. Edit your Template
2. Now find out sidebar h2 ( press 'Ctrl' + F to open your browser's search box)



Now scroll down few lines and you will find out a code line similar to

background:#f5fbfe url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElc-nPDVg0bpFgm6DXxBpCyV4jnj0ZhITLLr4WAYTduR0qUMPBPMkfaVoPfwrYQj29Gmb587X3sMxKu4ZBv6Os8mRqnRIw1yGCz0L8mgA33HmQ6SsbNzBPVMTN2G-JFPpw7Fs7WJXBNE/s1600/sidebar-top.gif) no-repeat top center;

or

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElc-nPDVg0bpFgm6DXxBpCyV4jnj0ZhITLLr4WAYTduR0qUMPBPMkfaVoPfwrYQj29Gmb587X3sMxKu4ZBv6Os8mRqnRIw1yGCz0L8mgA33HmQ6SsbNzBPVMTN2G-JFPpw7Fs7WJXBNE/s1600/sidebar-top.gif) ;

or

sidebar h2 { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlQybe9ni2F9B6dhUicxS8q4sn3fMKdh6tJ9ADs7TDGsfNKDtPMMzH3mQmiRkHjFq4cAxXB0oKT3cRF-R0TyT9fdUEn_fkQeVE6GD-baZW2TjQp509ZJuHyaQ878J-73TLi22jcx8UdE/s1600/widget-title.gif) right no-repeat;


or another code line which is very similar to above code lines

just change background URL to the URL of the image , that you created.



Now follow the Safety Saving Steps.

And

Adding a Background Image

Adding a background images may make your blog attractive and also slow. If still want to add a background image to your blog , use a image of small size. ( i mean , less in Kilo bytes. If your background image is greater than 1 MB , that will be a hell ) best way is to use a pattern image in gif format. Use google to find out a one.

To add a background image for you blog,


1. Edit your Template
2. Now find out body { ( press 'Ctrl' + F to open your browser's search box)


Now paste this code line just below it , after adding the URL of your back ground image

background:url( Paste your URL of Background Image );



Background Patterns for you

background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbTFfoZhBbZf2zvfoB-1irxfgitd27DUYurB-9Z9RpJm59Zn_ki73cAvgJJbtd7_nastkvfgy0AoQIUiHfONaxZKGWJ02G8KYmum5xM1c0GTFjNV3s6zI9yB_nuo8xTU_Xu1-wMmoLkU/s400/elephant_pattern.gif );


background:url( http://z.about.com/d/graphicssoft/1/0/9/2/5/Textile_Pattern_Set-2.png );


background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8FrRQfNl29C5Cp-2CJb9wp-XG9qMFqPCAIGYPpY41oXDv7TaRH9qtsKPTfIc9FxbOvjWCqOJRplb00ExXvQLwgAo9Fwfa_dlfxomeq_Xv3tHThwwx30YLQY1v0BU6WHodF0YFwuWpj9YZ/s400/the+pattern+tester.jpg );


Now follow the Safety Saving Steps.

And

Change Email Icon

In many blogs , you may have seen a tiny email button. ( I don't like it . so i removed it ) . If you like to keep a email link button , you may also like to change it to some other image as your wish , so here is how to do it.

First create a image or use a existing image.
Upload it to a image hosting service. ( www.imageshack.us )

now place your image's URL with with code


<img alt='Email Post' src='Paste you image's URL here' style='border-width:0px;'/>

Now,

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and find email-post-icon

now you may find out line as

<span class='email-post-icon'>& #160; </span>


Now replace our special designed code with the above one.


Now follow the Safety Saving Steps.

And



I tried this trick with some of my other blogs and found out some thing. In a one of my blog there isn't a code like above.So I searched under some image formats like .gif , .png and suddenly i saw a image as ' icon18_email.gif '. That was the email image. So as i explained , you may not find above code line. Then , use your brain.

Image instead of Authors Name

Now lets see how to insert a Image instead of Authors name. In many blogs , you will be able to find the Authors name on the top of the post.

Now here , it says Reporter , instead of the claasic "Posted by". How ever now lets see how to add a image to the position of Name.

Create a image , it is better if it is smaller. Use Power point or MS paint or any other graphic software for this.

Now Upload it to a Image uploading web site. I recommend www.imageshack.us , it is easy to use and no sign ups.


now get your image's URL and paste in the relevant position of this code.


<img src="Paste Your Image's URL here" />


1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and Find ' post-author '


Now you will find out some code lines similar to

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
</b:if>
</span>

Now paste your edited code as below


<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<img src="Paste Your Image's URL here" />
</b:if>
</span>


Now follow the Safety Saving Steps.

And

Add a Image before Title

Here is a way to make your blog more beautiful. You can add a Image before your post's Title like I have done .But you have to remember , always try to add a small image , other wise your blog will become a mess. 60*60 will be the biggest resolution to use.

Create a Image using your Image editing software or Power Point ( Or use a image you like ) and upload it to a Image hosting site. ( For free Image hosting , use www.imageshack.us )

After creating and hosting your image,


1. Edit your template
2. Press 'Ctrl' key and 'F' and find b:if cond='data:post.url'


Now you will find some code lines similar to


<b:if cond='data:post.url'>.

<a expr:href='data:post.url'>.<data:post.title/>.</a>.


Now paste your image's URL with an another code line as follows


<b:if cond='data:post.url'>.

<img src="Paste Your image's URL here"/>.

<a expr:href='data:post.url'><data:post.title/>.</a>.


Now follow the Safety Saving Steps.

And