Right after your signature (If you have one), posted by, comments and labels, there is an image which really holds NO significance, except that it looks very pretty! So here is the tutorial on how to make one!
CAUTION: If on your blog you have the borders around the images, this tutorial will not work! There is something about the borders and HTML. You can try it if you want to though!
First, you need to have an image! Once you have your image, and it is cropped appropriately (You might have to play with your cropping to get it to fit on your blog!
Go to your blogs layout. Click on Add A Gadget - Picture Gadget. UNclick the 'Shrink to Fit' button. It CANNOT be checked! Upload your image. Save.
View Blog. Right click on your image - a little box will show up - click on 'Properties'. A new box will pop up. Leave that box up. DO NOT CLOSE IT!
Got to Layout - Edit HTML. Click on 'Expand Widget Templates' at the top. On your keyboard, type CTRL+f (Or f3 found at the top of your keyboard). At the bottom of the screen, a little box should come up. In that box, type:
Here is where that little box comes in! Remember when you right clicked on your image? OK, in that box, somewhere it should say 'Address URL' or something similar :) Copy all of THAT code, not any other code. Just right click on the URL and then Select All. It will copy the only code you need!
Then, go back to your HTML code. Where it says 'YOUR TEXT HERE', paste the URL of your image.
Preview (Or if you're feeling brave, click Save :) your blog. If everything looks fine, save your blog!
Go back to your Layout/Add Arrange Gadgets page. Remove the picture you saved. You don't need it anymore!
You don't need to do anything after that! Your new post dividers will show up automatically.
And as always, if you are still in the dark about it, contact me and I'll see if I can help fix it! Hope I helped!
Go to your blogs layout. Click on Add A Gadget - Picture Gadget. UNclick the 'Shrink to Fit' button. It CANNOT be checked! Upload your image. Save.
View Blog. Right click on your image - a little box will show up - click on 'Properties'. A new box will pop up. Leave that box up. DO NOT CLOSE IT!
Got to Layout - Edit HTML. Click on 'Expand Widget Templates' at the top. On your keyboard, type CTRL+f (Or f3 found at the top of your keyboard). At the bottom of the screen, a little box should come up. In that box, type:
div class='post-footer-line post-footer-line-3'The code should then be highlighted in green (Or blue). RIGHT above that, paste this code:
Here is where that little box comes in! Remember when you right clicked on your image? OK, in that box, somewhere it should say 'Address URL' or something similar :) Copy all of THAT code, not any other code. Just right click on the URL and then Select All. It will copy the only code you need!
Then, go back to your HTML code. Where it says 'YOUR TEXT HERE', paste the URL of your image.
Preview (Or if you're feeling brave, click Save :) your blog. If everything looks fine, save your blog!
Go back to your Layout/Add Arrange Gadgets page. Remove the picture you saved. You don't need it anymore!
You don't need to do anything after that! Your new post dividers will show up automatically.
And as always, if you are still in the dark about it, contact me and I'll see if I can help fix it! Hope I helped!
Thank you so much! you rokk!
ReplyDeleteI have a question about how to take off the picture. I put it on this summer and I'm not sure how to get it off. I tried doing your directions backwards, but it's still on there. Yikes! Can you try to help me? :)
ReplyDelete