Photobucket
SponsoredTweets referral badge
Set Your Price. Choose your Advertisers. Sign up for SocialSpark!
DailyScoup.com
Photobucket
Showing posts with label Tutorials.. Show all posts
Showing posts with label Tutorials.. Show all posts

Friday, August 19, 2011

Tutorial - How to add the link to your banner or picture.

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


1. Click on "1 - NEW POST" and "2 - INSERT IMAGE".
Add-link---1



2. "1 - CHOOSE FILES" and "2 - ADD SELECTED".
Add-link---2



3. Click on "EDIT HTML".
Add-link---3



4. "1 - HIGHLIGHT ALL OF THE CODE" and click "2 - LINK".
Add-link---4



5. "COPY LINK".
Add-link---5



6."PASTE".
Add-link---6



7. And "OK".
Add-link---7



8. "1 - HIGHLIGHT ALL OF THE CODE" and click "2 - COPY".
Add-link---8



9. Go back to your blog. Select "DESIGN" (Upper right hand corner).
Re-Size---7



10. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "ADD A GADGET".
Re-Size---8



11. Choose "HTML/JAVASCRIPT".
Re-Size---9



12. You are in "Configure HTML/JavaScript. Copy code from No. 8 and paste.
Note: Make sure to add this <center> to centering your image. Save.
Re-Size---10



13. Click "PREVIEW AND SAVE".
Re-Size---11



14. You are done..
Re-Size---12


Photobucket

Thursday, August 18, 2011

Tutorial - How to re - size your banner or picture.

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


1. Login to Photobucket and upload your banner or picture.
Re-Size---1



2."1 - FIND YOUR BANNER OR PICTURE" and  "2 - OPEN".
Re-Size---2



3. "CLICK on IMAGE".
Re-Size---3



4. And  "RE-SIZE".
Note: Click on any size you want.
Re-Size---4



5. Click "OK".
Re-Size---5



6. You need this code later.
Re-Size---6



7. Go back to your blog. Select "DESIGN" (Upper right hand corner).
Re-Size---7



8. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "ADD A GADGET".
Re-Size---8



9. Choose "HTML/JAVASCRIPT".
Re-Size---9



10. You are in "Configure HTML/JavaScript. Copy code from photobucket (No. 6) and paste.
Note: Make sure to add this <center> to centering your image. Save.
Re-Size---10



11. Click "PREVIEW AND SAVE".
Re-Size---11



13. Tadaaaa...
Re-Size---12



Photobucket

Wednesday, May 11, 2011

Tutorial - How to add your new sidebar post divider to "NEW" BLOGGER'S 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 wrapper is. Select "DESIGN" (Upper right hand corner).
1 



3. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "TEMPLATE DESIGNER" .
2 



4. And click on "ADJUST WIDTH".
3

It's your sidebar wrapper.
4



5. Resize your new divider:
A. Login to Photobucket and upload your new divider.
5A



B. Click on "EDIT".
5B 



C. Resize.
5C 



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



E. You need this later.
5E 



6. Go back to your blog. Select "DESIGN" (Upper right hand corner).
1 



7. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "EDIT HTML".
7 



8. And look for this.
 



9. Now, add with 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.



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



11. "1 - IT WILL LOOK LIKE THIS". Then "2 - PREVIEW" and "3 - SAVE TEMPLATE".



12. Last step, click on "VIEW BLOG".



13. Tadaa, your new sidebar divider.
Before..


After.


Photobucket

Tutorial - How to add a border around your header to "OLD" MINIMA TEMPLATE DESIGNER

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


1. Select "DESIGN" (Upper right hand corner).
1


 2. You are in "ADD AND ARRANGE PAGE ELEMENTS". Select "EDIT HTML".
2


3. And look for this code.
3



4. Now, change this code to...
4


 This:
border: 5px Solid #000000;


Note: 
You can change the "px" and "color" to any size or color you like. For more help with the border colors, click HERE. 


"1 - IT WILL LOOK LIKE THIS".  "2 - PREVIEW" and "3 - SAVE TEMPLATE".
5



5. Last step, click on "VIEW BLOG".
6 



6. The result..
Before.
1
After.
7 


 SIGN.