Insert a Small Picture in the Title Block

Introduction
Want to insert a small picture or an animated gif in the title block as shown above. This article will show one easy way.

Step by Step Procedures
1. Enter the Page Layout Editor and select “Page Element” Tab;
2. In the Header, click “Edit” and the following screen will appear;

3. Upload the image by using the Browser or Enter the address of the animated GIF from Photobucket (http://photobucket.com/) or any other site that host the animated GIF;
4. Select “Behind title and description” and click “Save Changes” to save.

Note: If one views the blog page now, one will see the image or GIF stays behind the title block as configured;

5. Go back to the "Page Layout Editor" and now select the “Edit HTML” tab instead of the “Page Element” tab. The following screen will appear;

6. Tick the box for “Expand Widget Templates” to expand the scripts of various widgets that control the blog page;
7. Search for the following line that will show the Title of your blog (somewhere in the middle of the HTML page)

8. Scroll the page down until you reach the second “b:else”, which contains the source code for placement of image/GIF behind the Title;

9. Change the position of the image/GIF from the default of left to centre or right and also place + "margin-right: 5em;" immediately after "background-repeat: no-repeat; " as shown above.
10. Save the template and view the blog page.

Note 1: “Margin-right:5em” is a CSS (Cascading Style Sheets) code that specifies the margin, in character space, to the right of the image. Change the number to get the correct spacing.
Note 2: Make sure the image or GIF is small enough to fit the height of the Title.

Other Related Site
1. Embed Auto-GIF in Website/Blog
2. Embed Youtube in Website/Blog
3. Back up Blog the Super Faster Way