Blogger Widgets
Showing posts with label Effect. Show all posts
Showing posts with label Effect. Show all posts

Variety of Mouse Pointers with More Attractive Interfaces


Hi bloggy readers,

Replacing the interface of mouse pointers has been discussed in my recent post - Customizing the Mouse Pointer Hand Interface in Certain Column? -. In that article, i only showed you how to modify the appearance of mouse pointers and replace it with a crosshair mode. In fact, there are tons of other customizations that we can add to the mouse pointers, such as wait mode, move mode, and other modes that i didn't mention (or i forgot to mention) in my previous post. That's why, this can be the best time to continue that article. Okay, if you want to know how to modify the interface of mouse pointers with variety styles of pointers hand, here i'll show you.

1. Log in to Blogger account
Go to Blogger.com and sign in to your account.

2. Go to Edit HTML
After landing to the Dashboard, now press Layout/Design > Edit HTML.

3. Customize the Mouse Pointer of the Post Title
Okay, in this article, i will only show you how to replace the interface of mouse cursor on the post title area. Now find the CSS styling that controls the post title (Ctrl + F).

.post h3 {
.....
.....
}

If you cannot find the CSS styling .post h3 in your blog template, you can also find the CSS below:

.post h2 {
.....
.....
}

4. Add a new property in CSS styling
After locating the CSS class .post h3 or .post h2 in your template, now add a new property "cursor" inside the CSS styling. Look at the example below:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
cursor:;
}

5. Customize the Mouse Cursor interface
Okay, as i mentioned earlier in this post, i want to give you all another options of mouse pointers that can be picked for your mouse pointers. Here they are.

Property Values
cursor nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
auto
crosshair
default
ne-resize
text
wait
pointer
move
e-resize
help

6. Paste the value to the property for mouse pointers
Now pick one of those values above, and then put your chosen value to the property "cursor". For example, if you want to use a value "wait", now put that value after the property "cursor".

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
cursor:wait;
}

7. Save the Template
Now save the changes by pressing the button Save template. As you can see in your blog, every time your mouse pointers move to the post title area, it will appear as a wait mode.

How to customize the interface of mouse pointers on other column?

Anyway, if you want to customize the interface of mouse pointers on other element/column, you can simply find the exact CSS style that controls that element/column, and then, add a new property "cursor" inside the CSS style. For example, if you want to customize the interface of mouse pointers on the sidebar title, you can simply find the CSS class .sidebar h3 or .sidebar h2, and then, add a new property "cursor" inside that CSS style. Isn't that simple?
 
Share

How to Create a Drawing Collection in Flash Slideshow Builder?


Hi bloggy readers,
For those of you bloggers who love anything about art, especially paintings, and currently are building blog related to art or something like that, you can now try this cool flash slideshow builder gadget called Daily Painters Slideshow. By the sound of it, you might think this flash slideshow builder can be utilized to draw a painting or simply to create a sketch, well, if you thought about that, you were definitely wrong.


drawing collection plugin on blogger

Daily Painters is a flash slideshow builder that can display a slide show of painting collections from the painters across the world right in your blog sidebar. By adding this flash slideshow builder, can also inform you regarding the information to buy that exact paintings. Interested with this widget? Just read on the rest to find out more.

1. Go to DailyPainters website
First things first, now off to DailyPainters website to get the flash slideshow builder of drawing collection.

2. Get the widget
After landing to DailyPainters website, now scroll down little bit, and look for the option "Blog/Website Widgets", and then, press the link "Click here to get the widget" to begin installing the flash slideshow builder.

3. Press Get Instruction
In the new page, you will be asked to choose regarding the interface of the flash slideshow builder, well actually, there are only 2 choices in this page, black and white themed widget. And then, choose your blog platform, Blogger, Wordpress, etc. Finished picking out the option, now press "Get Instruction".

4. Add the widget into your blog
After pressing the button "Get Instruction", you will be shown with the instruction to install the flash slideshow builder in 2 methods. First, you can directly add a new flash slideshow builder into your blog by pressing the button "Add to Blogger" (if you chose Blogger platform). By doing this, you will be directed to Blogger.com and landed to the Page Element section.


get the drawing collection widget for your blog

And for the second method, you can simply the code snippet of the flash slideshow builder, and then paste it to your blog (HTMLDashboard - Layout/Design - Edit HTML). I prefer the first option, which can save a lot of time.

5. Save the widget

To end this article, now save the widget, and as you can see in your blog, if the DailyPainters widget is correctly installed, you will see a flash slideshow builder showing you collection of paintings, one at a time.

Okay, that's it for now. Another cool gadget coming up, so stick around in this blog.

Share

Related Posts Plugin for WordPress, Blogger...
 
Amazing Cats Collection © 2011 | Template by Blogger Templates Gallery collaboration with Life2Work