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

Tuesday, May 10, 2011

Tutorial - How to add your new sidebar post divider to "OLD MINIMA 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 sidebar is. Select "DESIGN" (Upper right hand corner).
SIDEBAR---OLD-TEMPLATE---2



3. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "EDIT HTML".
SIDEBAR---OLD-TEMPLATE---3



4. You are in "EDIT TEMPLATE" and look for this. It's your sidebar wrapper.
SIDEBAR---OLD-TEMPLATE---4




5. Resize your new divider:
A. Login to Photobucket and upload your new divider.
SIDEBAR---OLD-TEMPLATE---5A



B. Click on "EDIT".
SIDEBAR---OLD-TEMPLATE---5B



C. Resize.
SIDEBAR---OLD-TEMPLATE---5C



D. Change the "1 - WIDTH" to the number your sidebar wrapper was. Click "2 - APPLY" and then "3 - REPLACE ORIGINAL."
SIDEBAR---OLD-TEMPLATE---5D


  
E. You will need this later.
SIDEBAR---OLD-TEMPLATE---5E


  
6. Go back to your blog. Select "DESIGN" (Upper right hand corner).
SIDEBAR---OLD-TEMPLATE---2



7. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "EDIT HTML". 
SIDEBAR---OLD-TEMPLATE---3



8. And look for this code. Now you need to make some changes here.
SIDEBAR---OLD-TEMPLATE---8



9. So, it will look like this. 
SIDEBAR---OLD-TEMPLATE---9



10. Now replace this ".sidebar .widget,"..
SIDEBAR---OLD-TEMPLATE---10



11. To this..

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://DIVIDERADDRESS.jpg);
background-position: bottom;
background-repeat: no-repeat; 

It will look like this.
SIDEBAR---OLD-TEMPLATE---11



12. Now, replace the highlight area with your new "DIRECT LINK" code from Photobucket (5-E).
SIDEBAR---OLD-TEMPLATE---12



13. It will look like this. "PREVIEW" and "SAVE TEMPLATE".
SIDEBAR---OLD-TEMPLATE---13



14. Last step, click on "VIEW BLOG".
SIDEBAR---OLD-TEMPLATE---14



15. Tadaa, your new sidebar divider.
Before..
SIDEBAR---OLD-TEMPLATE---16


After..
SIDEBAR---OLD-TEMPLATE---15


Photobucket

No comments: