WordPress Visual Post Editor – On my previous article about Understanding WordPress Post Editor, I have told you that the wordpress post editor is divided into two modes, Visual and HTML mode. In this article I will discuss more about the WordPress post editor Visual mode.

Visual Editor is often called by Rich Editor or also called WYSIWYG (What You See Is What You Get), it means what you see similar results with the published views. Visual Editor is suitable for those who do not understand the HTML language, and it is very easy to use.

WordPress Visual Editor Post

Something that is easy to sometimes be hard for some people, this is due to the lack of knowledge. Well, to use the Visual editor feels easier, let’s recognize both what can be done at this Visual mode.

To open the post editor page, please divert your attention to the upper left of your monitor, then highlight the Posts menu and thene select Add New.

add new posts

Once the post editor is open, make sure you choose the Visual mode. Generally, the toolbar that opens only one line, so click the Show / Hide Kitchen Sink tool

wordpress visual post editor

Here are a picture and description of existing tools.

Upload / Insert

upload files

The facility is to upload or insert files from our computer to blog. The files that can be uploaded include image files, video, music and other files.

Toolbar line1

(1) Bold. To print the letters shown in bold.

(2) Italic. To print the letters shown in italics.

(3) Strikethrough. To print the letters shown in Strikethrough.

(4) Unordered list. To make unordered list:

Item 1

Item 2

(5) Ordered list. To make ordered list:

Item 1

Item 2

(6) Blockquote. To make quotes:

How to start a blog using blogger or blogspot and wordpress.

Free blogger templates and softwares

(7) Align left. To create a paragraph style writing to the left.

How to start a blog using blogger or blogspot and wordpress. Free blogger templates and softwares

(8) Align center. To create a paragraph style writing to the center.

How to start a blog using blogger or blogspot and wordpress. Free blogger templates and softwares

(9) Align right. To create a paragraph style writing to the right.

How to start a blog using blogger or blogspot and wordpress. Free blogger templates and softwares

(10) Inser / edit link. To edit / create a link.

(11) Unlink. To create a link into regular text (as opposed to link)

(12) Insert more tag. To enable read more function (create post summary).

(13) Toggle Spellchecker – To check your spelling is correct or incorrect

(14) Toggle fullscreen mode. To active / inactive full screen mode. If you are not comfortable with the small editor, you can activate the full screen mode.

(15) Show / Hide the kitchen sink. To show / hide the toolbar on line 2.

Toolbar Line 2

(1) Style. In the dropdown menu there are options to change the style / style on the selected text.

(2) Underline. To print the letters shown in under line.

(3) Justify. To create a paragraph style writing to justify.

(4) Select text color. To change the text color on the selected text, such as red, green, orange and other colors.

(5) Paste as plain text. To copy text from another programs to a plain text, sometimes a post will be affected by the effects of a program whether it be HTML, office and other. By using this tool, then all posts will be made in pure text (such as text on the notepad / WordPad)

(6) Paste from Word. If you prefer to write articles with word processor such as microsoft words, then to insert text into the wordpress editor should use this tool, because arrangements such as bold, italic, underline, and others that have been done on the word processor will not lost.

(7) Remove formatting. To remove the existing arrangements (Bold, italic, etc.) on the selected text.

(8) Insert custom character. To enter special characters in the article. Suppose Ω → ® and others.

(9) outdent. To move the text to the left. Usually this is in use on the ordered list, if it had been written sub-list, to return to the main list using this tool.

(10) Indent. To move the text to the right. Usually this is in use on the ordered list, if you want to create a sublist of the ordered list, use this tool.

(11) Undo. To cancel an order that has been done.

(12) Redo. To do back orders that have been canceled by the Redo command.

(13) Help. To appear the help option.

Additional information about the WordPress Visual Editor

If you have previously been accustomed to using word processing software such as microsoft words, then of course it would be very easy to use visual editor because existing tools are not much different.

Learn the correct way is to practice with, then do direct practice guidelines do not just read what I wrote.

Hopefully the guide on WordPress Visual Post Editor helpful to you all.

The post WordPress Visual Post Editor appeared first on Templates and Tutorials.

How to Post an Article in WordPress – Publish the articles or posts is the most important thing in blogging. Considering that the publish post is an important, B Tutorial trying to write about how to post articles in WordPress.

How to Post an Article in WordPress

Here are the steps to post an article on WordPress:

* Divert attention to the top left, then highlight the Posts menu and then select Add New.

add new post

* Enter the Post Title

enter post title

* After a few moments, will appear permalink. Permalink is the address that will be created after the article was published, you can change/edit the permalink as you wish. Click the edit button, then enter the address you want, simply with the keyword because it’s will be automatically changed. Or it could be through a slug widget at the bottom of the post editor. But this is optional, if you do not want to change it then leave it as is.

edit post permalink

* Write an article in the to post editor area. Please edit as you wish, please read the article about the visual post editor if you do not quite understand the tools that can be used.

* Select one or more categories for the post, or you can create new category.

WordPress post categories

* If the post want to have tags, fill out a new tag or select from existing tags, but this is optional

WordPress post tags

* Also check the widgets of Excerp, Send Trackbacks, Custom fileds, Discussion and Author, you might want to fill it or change it.

* Try to Preview the post before you are absolutely sure to publish the article. If you’re really sure to publish , click the Publish.

publish post

* Done.

Hopefully this article on How to Post an Article in WordPress is beneficial to you.

Screenshots:

The post How To Post An Article In WordPress appeared first on Templates and Tutorials.

Here are the steps to create a link in wordpress post:

Assume that you are creating an article.

Prepare the URL address (link). Example: http://template-tutorial.com

Highlight the words that you want to create a link. Then click the tool to create a link, it will automatically appear a form to insert a link.

create link

URL » fill in with link address that you want. Example: http://template-tutorial.com. Title » fill in with the desired title, eg: wordpress tutorial (this title will appear when mouse over the link).

insert link

If you think it was ready, then please publish.

Once published, the text was going to be a link

Finish.

Hopefully this article on How to Create a Link in WordPress can be beneficial to you.

The post How To Create A Link In WordPress appeared first on Templates and Tutorials.

One of the factors that makes the visitors do not stay longer in our blog, or even they cancel their visit to our blog, is the loading time when they open our blog. This case becomes the problem to us to increase the traffic. Some cases make our blog too long to access are:

Slow connection of internet we use

Too many blog’s accessories such as any banner, shoutbox, Google friend connect widget, recent post widget, recent comment widget, and more.

Too many big sized images

The size of Cascading Style Sheet (CSS) is too big, and more.

For point 1, the blog owner can do nothing, but for point 2 to 4, the blog owner can interfere to manage it by choosing the most important widgets or accessories to be installed. For the images, we can choose the right file format (jpg.png.gif) with flexible color optimization.

In this article, I would like to try sharing with you about how to make the CSS of our blog template is not too big in size.

Need to know that one of the things that make the CSS of our blog template too big is the number of lines. So, the more we make new lines, the bigger size the CSS will be. If we see to the tidiness and easiness to edit, the CSS with new lines, will be better, but the for the size, it can be a problem because it can make our blog slow to be accessed.

The example of CSS code in tidy but big in size:

body

{

width:auto;

margin:0;

padding:0;

font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif;

background: #B0BFC2;

color: #000000;

}

The example of CSS code in less tidy but smaller in size:

body

{

width:auto; margin:0; padding:0; font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif;

background: #B0BFC2; color: #000000;

}

The example of CSS code in not tidy and a bit hard to edit, but the smallest in size:

body{width:auto; margin:0; padding:0; font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif; background: #B0BFC2; color: #000000;}

From the three examples of CSS code writing form, please choose as you like and need. But if you want your blog is not heavy to load, or easy to access, I suggest you to choose the third writing format.

To do compression to the size of CSS code, you can do it manually, but you also can do it by compression tool. One of the websites providing the CSS compressing tool is cssdrive.com/index.php/main/csscompressor/. If you have not yet known, this CSS code is located between and where you can find it in Edit HTML on your blog.

With this compressor, the compression of CSS code becomes easier. You only need to enter your CSS code in the field available. But before you process the compression, you should backup your CSS code to anticipate an error. Look the image below:

After you enter your CSS code, click on button Compress-it and copy the result to replace the old CSS code. Then Save. It is very easy, isn’t it?

You can see the example of the result of the CSS compression of my blog.

Happy trying

The post Add the loading time of your blog! appeared first on Templates and Tutorials.

For those of you who like creating and modifying website template, you should know that one section that you have to create is Navbar (Navigation Bar) that functions to place the menus of a blog or website. Well, at this post, I will give the tutorial about how to create the horizontal sub navigation with CSS.

But before I give the tutorial, you can view the example of horizontal sub navigation that I have created. Please click the image below to view the live demo.

What do you think? Are you interested in creating the horizontal sub-navbar? If yes, please follow the steps below:

Please copy and place the CSS code below between the codeor if you are confused, you can place exactly above the code]]>

ul#topnav {margin: 0; padding: 0;float: left;width: 960px;list-style: none;position: relative;font-size: 12px;background: url(http://i28.tinypic.com/6nxug1.gif) repeat-x;}

ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #555;}

ul#topnav li a {padding: 7px 15px;display: block;color: #f0f0f0;text-decoration: none;}

ul#topnav li:hover { background: #27990A url(http://i28.tinypic.com/2crrmyu.png) repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:34px;display: none;width: 960px;background: #27990A;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}

ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}

Then copy the JavaScript below and paste under the code ]]> above the code

The post Creating horizontal Sub-Navigation with CSS appeared first on Templates and Tutorials.

If you have ever used the operating system Windows Vista, or Macintosh, I think you will know about dock menu or the menu in the form of icons that have beautiful moving animations.

To view the demo, please visit seethedemo.blogspot.com/2009/06/02.html

The following are the ways to create dock menu:

Step-1

Upload the images or icons that you want to place in the dock menu to your image hosting. As the examples, I have uploaded the icons to http://tinypic.com.

Record the URLs of the icons that you get from tinypic. Below are the examples:

http://i41.tinypic.com/15n253b.png (image 1)

http://i41.tinypic.com/2vwckzp.png (image 2)

http://i44.tinypic.com/j8nsj4.png (image 3)

http://i42.tinypic.com/aeb4hh.png (image 4)

http://i42.tinypic.com/4khd2p.png (image 5)

Determine the URLs that you want to place as the menu. E.g. :

Image 1, I define for the URL http://template-tutorial.com

Image 2, I define for the URL: http://template-tutorial.com/search/label/Blogger%20Templates

Image 3, I define for the URL: http://template-tutorial.com/search/label/Wordpress%20Themes

Image 4, I define for the URL: http://template-tutorial.com/search/label/Tutorial

Image 5, I define for the URL: http://blog-tutor-net.blogspot.com

Step-2

Login to blogger with your ID

Click Layout

Click Edit Html

Click Download Full Template to backup the template first.

Add the JavaScript code below between the code, If you are confused, just place above the code

The post How to Create Fisheye Menu appeared first on Templates and Tutorials.

When I visit my blogger-friends, I often find on their blogs the Recent Comments Gadget and Recent Posts gadget. Even not only on their blogs, I also install the gadgets on my blog. See on the left in the bottom. You will see the Recent Comments Gadget.

When I wanted to install the Recent Comments Gadget or Recent Posts Gadget, thus I chose the Gadget Feed on the Add the gadget window because at that time, I should use the Feed URL when I had to install the Recent Comments or Recent Posts on the blog.

However, at this time, those of you who want to install the gadgets do not need to enter the feed URL because Blogger has provided the gadgets. The Recent Comments and Recent Post Gadgets have been created by Amanda, the admin of bloggerbuster.com.

To install the gadgets of Recent Comments or Recent Posts, you can do in two ways, manually and automatically. The way of installing the two gadgets is the same, so today I just want to show you the way to install the Recent Comments Gadget. For the steps, you can follow the points as follow:

• Login to blogger.com with your ID, on the Dashboard,
• click Layout on the blog you want to install the Recent Comments Gadget.
• After clicking Layout, make sure that you are on Page Element, and now
• please add the new gadget by give a click on Add a Gadget.
• On the window of Add a Gadget, click Featured or More Gadgets on the left.

Click the Recent Comments Gadget, then the Configure Gadget window will appear. The automatic title will be Recent Comment, but you can change it as you desire. The height of gadget, Number of Comments to Display, and Summary Length (the number of comment character) are also changeable.

Then click Save after all is done

Finished

Then enter your Google ID, and after you are in your account, choose the blog you want to install the Gadgets, and then click Configure Gadget. Arrange your Recent Comments gadget as I mention at Point 4. When you have arranged it, click Save. Now your Recent Comments gadget has been installed on your blog. Please arrange the position of the gadget.

The post Recent Comments and Recent Posts Gadgets for Blogger appeared first on Templates and Tutorials.