08 January 2012

{Freshly Pressed Designs} v2.0 and A Quick tip on centering your widgets




I just wrapped up stuff with Sarah's design early this week.She wanted something vintage, patterned and in earthy tones and together we created this look :

  




Quick tip: To center your widgets add <center> before and </center> after the code you're pasting in your html gadget tab.

Example, to add your Sponsors' code you'll have a bunch of image codes and with the <center></center> your code should look like the following codes.As a result,they would turn up all nicely centered and arranged on your sidebar.





<center>
<a href="SPONSOR'S BLOG LINK"><img src="YOUR SPONSOR'S IMAGE BUTTON URL"/></a>
<a href="SPONSOR'S BLOG LINK"><img src="YOUR SPONSOR'S IMAGE BUTTON URL"/></a>
<a href="SPONSOR'S BLOG LINK"><img src="YOUR SPONSOR'S IMAGE BUTTON URL"/></a>
<a href="SPONSOR'S BLOG LINK"><img src="YOUR SPONSOR'S IMAGE BUTTON URL"/></a>
<a href="SPONSOR'S BLOG LINK"><img src="YOUR SPONSOR'S IMAGE BUTTON URL"/></a>
</center>
 But,what happens when you need to center all the widgets in your sidebar- including the ones whose codes you didnot add manually (eg: Google Adsense,your blog Archive,etc)? We get our hands dirty.
Firstly,Back-up your Template. Design>Edit HTML>Download Full Template.Now we delve into our code.
find the code which looks like

<b:section-contents id='sidebar-left-1'>
 or something similar
(should be towards the bottom) For finding it quickly hit Ctrl+F and paste the side-bar name and hit enter.

.Below that you have the body codes of your sidebar widgets like so:

<b:widget id='HTML13' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='Friends + Sponsors' type='HTML'/>
</b:section-contents><b:section-contents id='sidebar-right-1'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>

Add the <center> before <b:widget id= of your first widget and </center> after the ending of your last widget.

<center><b:widget id='HTML13' locked='false' title='' type='HTML'/>




<b:widget id='HTML6' locked='false' title='Friends + Sponsors' type='HTML'/>
</b:section-contents><b:section-contents id='sidebar-right-1'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/></center>
And voila!All your widgets are centered!





2 comments:

  1. This is awesome!!!!!

    But I'd still ask for your help because it's easier and I know you love me but I love you more and HTML/CSS codes make my nose bleed just thinking about hem. :p

    ReplyDelete

ShareThis

 

Reading

Reading

Conversations

Spread Word