I was doing my crazy Research then i got a simple idea to create posts which are listed as numbers. So i did it and now im making tutorial. It is really cool when ideas work.
Now back to tutorial.
I'm using blogger but i am explaining more about WordPress that's some what weird, even i host WordPress blogs but i love blog spot too so i cant ignore this blogger.
Starting with steps.
Firstly i will explain you about the code which i created for pages and number.
<div class="services">
<h3><span>OUR SERVICES</span></h3>
<ol><?php query_posts('category_name=services&showposts=10'); ?>
<?php $i=1;?>
<?php while (have_posts()) : the_post(); ?>
<li><div class="numberservices"><?php echo $i; ?></div><div class="servicesolnum"><h2> <?php echo get_the_title(); ?> </h2><?php the_excerpt(); ?></div></li>
<?php $i++?>
<?php endwhile; ?>
</ol>
</div>
In the above code i have given numbering to each post by echoing it. Now i added background image for each number.
It is the time to do some styling.
.services ol{
float:left;
margin:0px;
padding:0px;
list-style-position:inside;
}
.services ol li {
background: url("images/green.png") no-repeat scroll left 10px;
color: #FFFFFF;
float: left;
font-size: 30px;
font-weight: bold;
list-style: none outside none;
margin: 0;
padding: 12px 0 0 15px;
width: 425px;
}
Now styling has been completed.
i did not explain actual process right?
Add the php code in the page.php and css in style.css.