Photobucket
SponsoredTweets referral badge
Set Your Price. Choose your Advertisers. Sign up for SocialSpark!
DailyScoup.com
Photobucket

Tuesday, April 12, 2011

Tutorial - How to add your new post divider to "NEW" blogger template designer.

NOTE.
To enlarge image:
1. Right click.
2. Click "VIEW IMAGE".

1. Choose your new divider HERE and saving it to your computer.
Photobucket


2. Find out what size your main wrapper is. Design > Template Designer > Layout >Adjust Width. If you set the sidebar to 270 and the Entire Blog is 970. Then the main will be about 700px.
TUTORIAL---2


3. Resize your new divider:
A. Login to Photobucket and upload your new divider.
TUTORIAL---3A


B. Click on "EDIT".
TUTORIAL---3B


C. Resize.
TUTORIAL---3C


D. Change the "1 - WIDTH" to the number your main wrapper was. Click "2 - APPLY" and then "3 - REPLACE ORIGINAL."
TUTORIAL---3D


E. You need this later.
TUTORIAL---3E


4. Go back to your blog. Select "DESIGN" (Upper right hand corner).
TUTORIAL---4


5. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "
EDIT HTML".
TUTORIAL---5


6. And look for this.
TUTORIAL---6


7. Now replace with this:
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 2.5em;
padding-bottom:6.5em;
TUTORIAL---7


8. This area - background: url(http://DIVIDERADDRESS.jpg);
Replace the red area shown above with the "DIRECT LINK" from Photobucket (3-E).
TUTORIAL---8


9. Looks like this. Preview it to see what you think and save template.
TUTORIAL---9


10.Tadaaaa your new post divider.
TUTORIAL---10
 



GOOD LUCK :).


2 comments:

Anonymous said...

Thank you so much for this!! I tried 3 different ways before I found your blog!!

Kirsty x

www.inhighblether.blogspot.com

SJB aka SUELYN J-B. said...

No problem :).