Sunday, April 14, 2013

Style Ordered and Unordered List with CSS in Blogger

Put the following code above the ]]></b:skin>

To change circle with rectangle

.post ul li
{
list-style-type:square;
}

To change circle with hollow circle

.post ul li
{
list-style-type:circle;
}

How To Modify Ordered List

Upper roman

.post ol
{

list-style-type:upper-roman;

}

upper-latin

.post ol
{

list-style-type:upper-latin;

}

lower-roman

.post ol
{

list-style-type:lower-roman;

}

lower-latin

.post ol
{

list-style-type:lower-latin;

}

lower-greek

.post ol
{

list-style-type:lower-greek;

}

lower-alpha


.post ol
{

list-style-type:lower-alpha;

}

______________

Simple Ordered list sample

  1. aa
  2. bb
  3. cc
  4. dd

______________

Remove Date Time Stamp from Blogger Blogspot

How to Remove, hide or delete Date Time Stamp Author from Blogger Blogspot.

There are two methods and solutions on how to hide date time stamp in Blogger Blogspot. It's recommended that you use the first method as it's the easiest and without any risk of breaking the template codes.

I. Removing Date Time Stamp through Page Element (Recommended)

After login -> Layout -> Blog Posts / Posting Blog -> Edit (See Picture 1)
At Post Page Options -> Uncheck everything you want to hide/remove including Post Time, Post Date, Post Author, Label, etc. (See Picture 2)
Click Save. Done

Picture 1. Blog Posts / Posting Blog in Blogger Page Elements

blog pots edit page elements

Picture 2: Post Page Options

remove date time stamp via post page options blogspot

II.Removing Date Time Stamp through HTML Editing (Not Recommended)

Tip: (a) Use CTRL+F or F3 to Search for a Code inside the Template; (b) Enter the code you're searching inside the "Find" box (b) Back up your template first by clicking Download Full Template

A. Removing Post Date

After login -> Layout -> Edit HTML -> check Expand Widget Template
Search for this code ->
Delete it. Save Template. Done.

B. Removing Post Time

Search for this code at #2

Delete the code. Save Template. Done.

C. Remove Post Author

Search for this code at #2

Delete it. Save Tempate. Done.

Sporty Blogger Blogspot Templates Themes

Ezwpthemes has created a number of great Sports Blogger Blogspot templates themes. For sports fans, this kind of templates could be regarded as a symbol of their fondness to the world of sport. For the Wordpress version of these themes, click here. Oh btw, anyone has Fifa World Cup 2010 template theme for Wordpress and Blogger Blogspot? Let me know if you do.

Name: Chelsea FC Template
Download
Live Demo
Screenshot

Chelsea FC Theme


Name: Real Madrid Metro
Download
Live Demo
Screenshot

Real Madrid Retro

Name: Hot for the Rim (Basketball)
Download
Live Demo
Screenshot

Hot for the Rim


Name: National Football League (NFL)
Download
Live Demo
Screenshot

National Football League


Name: Superbowl
Download
Live Demo
Screenshot

Super Bowl


Name: Jumping Ski
Download
Live Demo
Screenshot

Jumping Ski


Name: Swing Like Tiger (Golf)
Download
Live Demo
Screenshot

Swing Like Tiger

Breadcrumb for Wordpress Blogger Blogspot

breadcrumbs for blogger wordpressHow to create and install breadcrumbs navigation trail in Blogger Blogspot and self-hosted Wordpress blog. For SEO purposes, breadcrumb is one factor highly recommended by many SEO experts.

Breadcrumb is necessary to optimize a website or blog visibility to search engine result page (SERP). It's also important for a website/blog usability.

For Meaning, definition and picture of breadcrumbs scroll down below.

I. Breadcrumb for self-hosted Wordpress Blog

Install Breadcrumb NavXT (Use search and install method from within your Wordpress Admin as explained here) and activate it. Or you may download it to your pc before uploading the Zip format into the Plugins -> Add New -> Upload.
Go to Settings -> Breadcrumb NavXT -> Posts & Pages
In Post Taxonomy choose "Category" or "Tags" as your breadcrumb navigation.
Click Save Changes. Done.
Live Demo See here. I choose Tags for this blog.

Notice:

By default, the main page is Home, you may change it into Blog like mine or whatever you like. Just go to Settings -> Breadcrumb NavXT -> General -> Home Tile box -> enter whatever word you like
The wordpress breadcrumb will look like this: Main Page -> Category / Tags -> Post Title

II. Breadcrumb for Blogger Blogspot or Top domain (example.com) hosted at blogger.com

Tip: (a) Use CTRL+F or F3 to Search for a Code inside the Template; (b) Enter the code you're searching inside the "Find" box

Login to your blogger.com -> Layouts -> Edit HTML -> check the Expand Widget Template.
Search for code ]]>
Delete and Replace with this code at #4:
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]>
Search for this code:
Delete and replace with the code at #7


Search for this code:
Delete and replace with the code at #10

















Click Save Template. Done.
Live Demo see here

Notes: The blogger.com breadcrumb will look like this: Home -> Label -> Post Title

----
About breadcrumbs:
Breadcrumbs use a single line of text to show a page's location in the site hierarchy.

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their locations within programs or documents.

Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as »), as well as various graphical treatments.

Typical breadcrumbs look like this:

Home page > Section page > Subsection page

breadcrumb navigation

1 komentar so far


EmoticonEmoticon