A list post is any article that takes a specific topic and then offers a finite number of examples.
This post “Top 10 Signs You Ain’t a Kid Anymore” is a good example.
TheUrbanTwist.com’s Top 10 Least-Romantic Songs is another example.
The 6 Most Likely Artists to Hold Beyonce’s Crown While She’s Pregnant is another example, although it is different than the first two examples because it is a slideshow rather than just a long list.
All three examples have the same premise, but different styles.
List posts are always popular. Most likely because they promise everything that blogging should be about. A list post means a structured post, with short chunks of easily digestible information. A list is also guaranteed to contain an element of opinion, since the writer has to choose whether to include or exclude certain items from their list and possibly where to rank those things within the list. All of which serves as an open invitation for comments and debate.
To properly format your list post is easy because the main thing you have to worry about is the heading area for each list item. We’ve made things easy for you by giving you the code to start out with.
[codesyntax lang=”text”]
<!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End--> <!--Begin--> <div class="list-meta"> <div class="list-number"># GOES HERE</div> <div class="list-title"> <h4>TITLE GOES HERE</h4> </div> </div> Content goes here. <!--End-->
[/codesyntax]
You will have to enter the above code from within the source code of the post editor. To do this, you’ll click on the tab labeled “Text”.
You will then simply copy/paste the above code. The above code creates a list of 10. You can add or subtract the number of fields to make it work for you.
You can then switch back to the “Visual” editor to then make all of your necessary edits.
To make your list a slideshow, you will simply place your cursor right at the end of the content part, right before you want it to break into a new page and you will “Insert Page Break” by clicking on the button below.
You will do this for each time you want to create a new slide.
If you’re planning on doing a slideshow, you need to add more bit of code to place the button within the first slide.
You will add this code to the source code as explained above, right before the first page break or right underneath your last little bit of text for the first slide.
[codesyntax lang=”html4strict”]
<a class="jumplink" id="list_continue_link" href="2">Click Here to Start the Story »</a>
[/codesyntax]
Back to TheUrbanTwist.com Writer’s Guide.
