

Enter your email address:
Delivered by FeedBurner



![]() ![]() |
| Wpress |
Message #1
|
| Newbie
Reputation: 0 ![]() Group: Member Posts: 8 Registration: 8.05.2010 ICQ:-- |
Here is Some Useful Codes for text widgets On Wordpress Blogs : Text links The plain code for a link to any webpage is this: <a href="URL_HERE">TEXT_HERE</a> In most cases it’s better to use this: <a href="URL_HERE" target="_blank">TEXT_HERE</a> This way the link opens in a new browser window or tab, so that visitors don’t really leave your blog when clicking on a link. E-mail link: <a href="mailto:YOUR_EMAIL_ADDRESS_HERE">TEXT_HERE</a> To avoid spam, it’s usually wiser not to disclose your e-mail address. You can use the WP contact form instead (but in a page, not a text widget) – see here. Or you can display your e-mail, but in a way that will elude spam robots – see here plus here. Lists The content of several widgets (e.g. Categories, Links or Recent Posts) is unordered lists. The design of each theme presents unordered lists in its own way. If you want a list of items in a text widget to show up the same way, you use the code for unordered lists: <ul> <li>ITEM_ONE_HERE</li> <li>ITEM_TWO_HERE</li> [etc.] </ul> The code for nested lists (with indented sub-items) is like that: <ul> <li> ITEM_ONE_HERE <ul><li> SUB1_HERE </li><li> SUB2_HERE </li><li> SUB3_HERE </li></ul> </li> <li> ITEM_TWO_HERE <ul><li> SUB4_HERE </li><li> SUB5_HERE </li><li> SUB6_HERE </li></ul> </li> </ul> This is an example with only two main items and three sub-items to each, but it’s enough for demonstrating the structure of the code. Items and sub-items can be plain words or phrases, or any kind of allowed html code (e.g. links and/or style formatting). Text widgets with unordered lists can also be used instead of some of the other widgets (such as the links widget or the categories widget). This can be useful if you don’t like the default appearance of those widgets and want to change it using formatting for style, or if you want your links or your categories in a non-alphabetical order; or if you want to include images. The drawback, of course, is that each time you add a new link or category you’ll have to update the text widget manually. Scrollbox If you want to limit the length a text widget occupies in the sidebar, you can have its content in a (vertical) scroll box: <div style="height:150px;white-space:pre-wrap;overflow:auto;padding :8px;"> CONTENT_HERE </div> The height number is just a suggestion – you can change it (but there’s a downward limit: below 45px there’s no room for the scrollbar). “Padding” is the space between borders and text – you can change that too. If you write an unordered list in a scrollbox, omit the padding altogether: the design of the theme will take care of that. Or you may need a horizontal scrollbox: <div style="white-space:pre;overflow:auto;padding:8px;"> CONTENT_HERE </div> In some themes it will look better if you create a visible border around the box; in that case add this right after the opening quotation mark: border:solid 1px #999; Images The code for a plain image is this: <img src="URL_OF_IMAGE_HERE"></a> For an image that links to a webpage: <a href="URL_OF_WEBPAGE_HERE" target="_blank"><img src="URL_OF_IMAGE_HERE"></a> Of course the image has to be narrow enough to fit in the sidebar (in most themes, sidebars are around 150 to 200 pixels wide). If you’ve got a wider image, you can downsize it to fit – example: <a href="URL_OF_WEBPAGE_HERE" target="_blank"><img src="URL_OF_IMAGE_HERE" width="150" /></a> But it’s better to use properly sized images. Also note that it’s better to use images uploaded in your own blog. If you use the URL of an image hosted in another site, you get the delay of that site loading as well (plus you run the risk of losing the image if it gets relocated or removed). In some browsers you get a (blue) border around images. If you don’t want that, add this after “img” (with a space inbetween): border="0" If you want a simple thin border around the image, you can add this after “img” (with a space before and a spacer after): style="border:1px solid #HEX_NUMBER_HERE;" Hope this Can Be Helpful. |
| |
![]() ![]() |
|
| Now: 29 July 2010 13:57 |