1. Highlighting Important Text Inside HTML Boxes

Lets start with an example. Instead of using mundane exceprt (i.e. "Lorem ipsum dolor sit amet...") in this example, I will use my first language for the exceprt in this example ;)

-- Example Begins --

Saya sungguh tertarik dengan long-term goal saudara smartusaha dalam menyahut cabaran Melayu Boleh: Wangcyber SEO challenge. Bermula

dengan blog yang baru sahaja disetup dengan blogspot, ini sesungguhnya merupakan cabaran SEO sebenar bagi seorang webmaster kerana anda perlu memikirkan cara untuk memastikan blog baru tersebut diindexkan secepat mungkin ke dalam google dan yahoo.

Saya berpendapat, blog baru tersebut akan dibacklinkkan ke blog utama beliau yang mempunyai PR5. Dengan cara ini, mana2 blog baru akan diindexkan dengan kadar yang lebih cepat dan ini adalah juga salah satu strategi SEO yang sering dipakai oleh webmaster2 telah mempunyai PR website yang tinggi.

Saingan dalam "melayu boleh" semakin rancak dengan kemasukan banyak webmaster2 yang berpengalaman. Sekian sahaja untuk contoh HTML dan CSS tricks
-- Example Ends --

Place the following code between the paragraph or wherever you want it to be and it will appear like in the above example.

<div style="width:200px; 
height:100px;
float: right;
border-top: 1px solid #000; 
border-bottom: 2px solid #000; 
padding: 5px;">Sample Text Goes Here.</div>

2. Never use Ampersands or Quotes in Titles

There's nothing wrong with using Ampersand signs (&) or double-quotes(") in your blog titles, but in some cases they may break your social bookmarking URLs. As far as this blog is concerned the "&" will create an error in my feedburner. Luckily the "&" sign resides at lower end of this post, so it won't create the problem. You should use HTML special characters like

& for & [ampersand]
" for " [double quote]
' for ' [single quote]

3. Bullets and Lists are boring, try something different

If you create a list of something you can switch to other fancy bullet style rather than the convetional one. Here's some example that's taken directly from the original post.

» with » | º with º | · with ·

4. Image wrapped around text

Blending image into a lengthy post will enhance readers' comprehension. This can be done by adding the following style="margin: 0 0 2px 5px; float: right;" into img tag. For example,

For right alignment - <img style="margin: 0 0 2px 5px; float: right;" src="file_name_here" />
For left alignment - <img style="margin: 0 5px 2px 0; float: left;" src="file_name_here" />

I hope this will give your post a better look.

[source: Digital Inspiration]

Technorati Tags: HTML, CSS, tricks, style your post

1. Add the following CSS code into your CSS file.

Code:

#mini-nav { width: 20px; position:fixed; top: 180px; left:5px;} 
* html div#mini-nav { width: 20px; top: 180px; left:30px; position:absolute; } 
#mini-nav img{ margin: 0px; } 

2. Put the following HTML code whenever you want it to be appeared. If you it to be in every pages of your blog, you might need to put the code into few files in your current theme directory (e.g. index.php, category.php, page.php etc)

Code:

<div id="mini-nav"> 
<a href="http://feeds.feedburner.com/YourBlog" target="_blank">
<img src="http://www.yourdomain.com/images/feed.png" 
alt="Subscribe Me!" title="Subscribe Me!" /></a>    
</div> 

Note: Change your feed URL and your image path accordingly and you are done!

Credit to: Cypherhackz

Technorati Tags: wordpress tips, feed

Here are steps taken to have a post in advance:

1. Write your post as usual.
2. Go to Post Timestamp (at the bottom right sidebar).
3. Edit the time and tick the Edit timestamp box.
4. Publish your post.
5. You are done!

Technorati Tags: tips, tricks, wordpress

1. First you need to create an XML file. Copy the following code into a notepad and save it as myopensearch.xml

<?xml version="1.0"?>
<OpenSearchDescription 
xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>YOUR_BLOG_NAME</ShortName>
  <Description>YOUR_BLOG_DESCRIPTION</Description>
  <Url type="text/html" 
  template="http://YOUR_BLOG_PATH/index.php?s={searchTerms}"/>
  <LongName>YOUR_BLOG_LONG_NAME</LongName>
</OpenSearchDescription>

2. Before you "save as" the myopensearch.xml file, you need to modify few parameters accordingly.
- YOUR_BLOG_NAME - change to your blog name (i.e. Eches Blog)
- YOUR_BLOG_DESCRIPTION - brief description of your blog
- YOUR_BLOG_PATH - Your blog path (i.e http://blog.eches.net or http://eches.net/blog/)
- YOUR_BLOG_LONG_NAME - your blog name

3. Once the modifications are done, upload the file to the root directory of your blog.

4. Go to the theme editor under the presentation (via admin screen) and open header.php. Find the following code.

<link rel="pingback" 
href="<?php bloginfo('pingback_url'); ?>" /> 
 

5. Insert the following code right below the above code. Change the YOUR_BLOG_NAME and YOUR_BLOG_PATH to your blog name and your blog path accordingly.

<link rel="search" title="YOUR_BLOG_NAME" 
href="http://YOUR_BLOG_PATH/myopensearch.xml" 
type="application/opensearchdescription+xml" />

Save the header.php and get ready to see it in action.

Note: I owe credit to LiewCF: How to Create an Autodiscovery Blog Search for Web Browser

Technorati Tags: wordpress, tips, blog, web development

If you open blockquote, you also need to close it. If you open blockquote, you also need to close it. If you open blockquote, you also need to close it. If you open blockquote, you also need to close it.

This is accomplished through a little CSS trickery. You apply the open quote on your blockquote tag and then put a div in your blockquote that applies the closing quote.

Here’s the HTML code:

<blockquote>
<div>This is my blockquote</div>
</blockquote>

Here’s the CSS code:

blockquote {background: transparent url(images/openquote.gif)

left top no-repeat;

}

blockquote div {

background: transparent url(images/closequote.gif)

right bottom no-repeat;

}

Note: I owe credit to Simon Willison’s Weblog.

Technorati Tags: css, html, wordpress tips, styling blockquote