background preloader

Editing Date

Facebook Twitter

Step By Step Swirls For Your Cover Designs. 30 Excellent CSS Based Navigation and Buttons Tutorial - StumbleUpon. CSS is the most important part in modern standard based web design. Using CSS you can turn any web related nested stuff into a working design. There has been a lot of talk about CSS Work lately. Mostly designer creates the design templates, Photoshop Images or whatever and then developers have their turn to show their creativity. Sometimes, it happens that they mess up something or many things.

Among many coding/design issues caused by developers, one in particular really drives me nuts – incorrect usage of CSS and it’s properties. To understand how to design with CSS we choose to start from basics of CSS Navigation and button designs with some fine tutorials which can help you in your projects and daily practices. Here you will find a collection of 30 Excellent CSS Based Navigation and Buttons Tutorial resources and information about creating CSS based designs and also some useful tips for your webdesign habits. CSS Navigation and Menus Tutorial 01. Tutorial Link 02. Tutorial Link 03. 04. Display Post Title Before Blog Title in Blogger for SEO | Dharshin's Blog.

By default Blogger displays the blog title before post title. For an example Log into Blogger and go the "Design" tabThen click on "Edit HTML" link.Make sure you take a back of your existing template by clicking on "Download Full Template" link and saving the XML file to a safe storage location.Search for the following text in the template. Then replace the above line with the following lines <b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if> Finally save the change by clicking on "SAVE TEMPLATE" button and refresh your blog to see the results Further Customizations The first line tells the blogger to test if the current page is a post.

If you want to do the same for static pages you can nest b:if statement statement as follows. Blogger supports five page types. Label Pages Posts Static Page Archives. Add icon or picture in Blogger Post Title. November 8, 2008 If you would like to have a custom picture (image or icon) beside your Post Title, follow these instructions.And if you'd like to place some background behind it, read this article.Sometimes Post Titles can seem boring and dull. Just by adding some little change, we can make them nicer...

For example, I want this picture to appear beside my Blogger Post Title: I've uploaded my picture (icon) on a free web host Tinypic (...or Photobucket...), now I've got to create a small code: Ok. I've added style="border-width: 0px to remove borders from my picture...you can put some if you want, just change the width to 2px (for example).And instead of my picture URL, you should place yours (you'll get a URL from your free web host, in my case Tinypic...)Next, I have to decide where's my picture going to appear.....above title, left side, right side, or under? It's just a matter of where are you going to place your code....If you're ready, let's go.

Here's the example. Smile! Quotes in Blogger - Customization. December 28, 2008 We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, borders, background.....changing size of it, font, style... WHAT ARE QUOTES? Quotes are used for quoting. Heh. Quoting defines: ► repeating or copying the words of another, usually with acknowledgment of the source► citing or referring for illustration or proof► repeating a brief passage or excerpt DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEMDefault quotes ain't much of a fun. . ► highlight the part of the text that will be a quote► and click on the quote button in the Blogger toolbar This will change highlighted part into a quote, with a default design, and that is: It just added some margins to it....not fun at all.

SO, WHAT CAN WE DO? ...that's the one! I'll show you a few examples, and in each one, you will have to DELETE the code from above, and REPLACE it with the one from example. ◄ Borders, font styles and colors ► Example 1. Example 2. Smile! Image beside Blog Post Title. We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title.

This guide will explain how this can be done. The image we are talking about has to be small, perhaps about 20px in width. First, we have to create that image. Example 1 In this first example, we use an image of 20px by 20px. If you are using a different template, you can still locate .post h3 and although the styles defined may vary slightly, the way to insert the image is the same. The result we see is this image on the left of the Post Title:- The IMAGE URL is the location where the image is uploaded, beginning with To test whether the link works, enter that into a browser and press Enter. We adjusted the padding to shift the Post Title.

This indicates that the padding is 10px on all the four sides of the Post Title. Example 2. Replace Date Headings with a Funky Calendar In Blogger. Calendar icons replacing date headings are a stylish trend of modern blog design. When I saw this style of date-heading on the Twitter status blog, I decided to find out how this could be adapted for use in Blogger blogs.

So in this tutorial, I’ll explain how you can replace your boring date headings in Blogger with a stylish Twitter style calendar format like this: This is a simple customization to make to your Blogger powered blog and requires only a few modifications to your template and settings. Here is how to add this calendar style date-format to your blog: How this works The script used in this customization parses any date which is contained between <h2>and </h2> tags, replacing it with this format of date instead. You can change the style and color of this calendar format by editing the style code to suit your preferences. Troubleshooting If you experience problems using this customization, here are a few things you can try: Download code for the Blogger date calendar. How to create a calendar widget for your blog. In this template, I use a calendar style widget to display the posting date of my posts.

This style has recently cropped up in many Web 2.0 style Wordpress blogs, and is easily reproduced in Blogger layouts blogs too. Here I will show you how to create your own calendar widgets to feature at the top of each post. This Blogger hack uses a combination of javascript, CSS and some slight modification to your template to display the date a post was published over a calendar-style background. There are only three main steps to change your date header to a calendar widget, so don't worry if my explanation seems rather complicated!

Here is what you should do: First, go to Settings>Formatting, and change the date header format to YYYY-MM-DD like this: This enables the script we will be using to correctly parse the date header format.Next, go to Template>Edit HTML and ensure you have checked the "expand widget templates" box. Customizing the calendar widget. Replace Date with a cool new calendar type layout in blogger. Home » blogger » Replace Date with a cool new calendar type layout in blogger Lauren asked me to show how to add a calendar to dates in blogger and i liked the idea and so i am posting about it. I also want to say that my readers can also contact me via the contact form or twitter (@virtuosoblogger) or even discuss on the facebook page. The default text for date in blogger might look a little too simple to some, so for those blogger users who want to spice their layout by adding a calendar to their post dates, this post will help you achieve that.

Preview of the date in calendar style 8. 10. Facing problems? About Author admin Gautam Hans is a freelance blogger and the owner of the Blog Godown where he shares Blog Tips and Social Media Marketing Tips. +Gautam Hans.