SHM-HACK

How To Add Your Own CSS Styles To Blogger.Com

2016-04-29T03:28:00.003-07:00

Drafting and publishing posts on your blogger.com blog takes time. Make it easier. Define your own CSS styles and use them over and over in articles.

As a matter of fact, adding your own customized CSS styles to the template and using them in posts is possible and does not require advanced knowledge of blogger.com.

Here is a very simple example of what can be done using customized styles in blogger.com:

This Is My Favourite Style

Let's see how it can be done.

How To Add Your Own CSS Styles To Blogger.Com

Step #1:

Prepare the CSS style, you want to use in your posts. To do that, if you do not know much about CSS, use one of the many CSS editors that can be found on the web. For the exemple I used RapidCSS. Here is how I prepared the CSS style 'myfavouritestyle' I used in the exemple:

Step #2:

Enter blogger.com and open the template of your blog. Edit the HTML and locate the <b:skin> tag:

Clic on it to expend

Step #3:

Go to the end of the section and paste the style you have created with the editor (before ]]</b:skin>).

You can add a comment (in the exemple "My Personal Styles")so you can retrieve your customized styles easily in the future. Just remember that CSS comments must start with '/*' and ends with '*/'.

Step #4:

The last step is about the use of customized styles in posts. Once the text is entered (using 'compose'), select the text you want to highlight with your customized style, select the format (heading, subheading, minor heading) and switch to HTML view. Your text appears between two tags:
<h2> et </h2> for headings,
<h3> et </h3> for subheadings,
<h4> et </h4> for minor headings.

In the exemple, I selected minor heading; therefore the text 'This is my favourite style' appears surrounded by a <h4> opening tag and a </h4> closing tag in the html view.

To apply the customized style, you just have to add the class property to the opening tag as in the exemple:

That's it.

Happy blogging!

How To Add CSS Bubbles

2016-04-29T03:25:00.004-07:00

A simple way to animate your posts and render them more attractive is to add bubbles. You can use these bubbles to present short tips, give a definition or to add information.

These bubbles are invisible. They appear only when the reader passes his mouse over a word or a text for which you want to present additional information.

How To Add CSS Bubbles In A Post ?

Let's see how we can create bubbles using CSS in very simple way:

Step 1: Add Customized Styles For Bubbles In Blogger Template

In Blogger go to 'Template' and select 'edit html'. Then search the following line:

]]></b:skin>

and paste the CSS styles just before. You will need 3 styles:

A style (1) for the bubble itself. In the case of the small example above I used the following:

.help-bubble100 { width: 100px; height: 18px; top: -100px; left: -120px; padding: 3px 3px 3px 3px; color: #fff ; background-color: #228B22 ; font-size: 10px; font-family: verdana ; border: 1px solid #228B22 ; overflow: hidden; display: block; position: absolute; /* important */ visibility: hidden; opacity: 0; transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; }

A style (2) for the text that supports the bubble (the bubble will appear when the mouse is over it). In the example I just underlined the text:

.help-needed { position: relative; text-decoration:underline ; }

A style (3) for the bubble when the mouse is over the text (style that triggers the appearance of the bubble):

.help-needed:hover .help-bubble100 { visibility: visible; opacity: 1; top: 0px; z-index: 50; transition: 0.8s ease-out; -webkit-transition: 0.8s ease-out; }

These styles may be customized to your needs. For instance, to change the size and the color of the bubble, you just have to edit the following property in the style of the bubble itself: width; height; background-color;.

Step 2: Insert The Bubble Into Your Post:

Once your post is ready, switch to the HTML view. Search for the text that should trigger the appearance of the bubble when the mouse is over it and add the the corresponding style (2). In the example above I used the html span tag:

Here is an <span class="help-needed">example of bubble</span>.

Just before the span closing tag, add the bubble itself with its content and its style. I used another span tag in the example above:

Here is an <span class="help-needed">example of bubble<span class="help-bubble100">I am the bubble!</span></span>.

CSS bubbles can be versatile and creative. Here is another example:

Enjoy Blogging!

Good blogging

3 Logo Generators To Give An Identity To Your Blog

2016-04-29T03:22:00.000-07:00

A logo is a paramount component of the identity of your blog. To attract interest, it should be created from an original combination of graphics, colors and typefaces. At the same time, it should remain simple to facilitate the mental association with your blog.

Designing a logo is not an easy task. Fortunately, logo generators exist. This post introduces three of them that I personaly use.

3 Logo Generators To Give An Identity To Your Blog

1 - Logo Garden

Logo Garden is an easy to use logo generator. Visitors can create low resolution logos for free. A high resolution logo costs usd 12.50 (as of august 2014). Logo Garden offers a large selection of shapes and graphics to include in logos. Here is a low resolution logo generated using Logo Garden:

2 - Flamingtext

Flamingtext is an on line logo generator with a large selection of original fonts that will help you to turn the name of your blog into a memorable logo. Use of Flamingtext for a blog is free. Commercial use costs usd 19.95 /year (as of august 2014). Flamingtext does not propose shapes or graphics for inclusion in logos. Here is what I did with Flamingtext:

3 - Createyourownlogo

CreateYourOwnLogo is a tools that allows you to create a high resolution logo for free (use the link to access the site since name of the site is different from address). However the choice of shapes or image that can be included in the logo is limited. Here is an example of what can be done using CreateYourOwnLogo:

Happy blogging!