ကိုကြီးဇော် ( မုန်တိုင်း )

1229..How to Build a Cool CSS3 Menu with no Javascript ( 29.9.10 )

CSS3 Menu Sample Css Vertical Submenu

Css Vertical Submenu Overview

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations.
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

How to Build a Cool CSS3 Menu with no Javascript

1) Open CSS3 Menu software and click "Add item"

and "Add submenu"

buttons situated on the CSS3 Menu Toolbar to create your menu. You can also use "Delete item"

to delete some buttons.
2) Use ready to use Templates. To do it just select theme you like in the "Templates" list. Double-click the theme you like to apply it.

3) Adjust appearance of the menu.
3.1. Select item by clicking it and change button appearance for normal and hover states and set buttons link properties and link target attributes on the "Main menu" tab.
3.2. Select submenu's item by clicking it and change submenu's appearance for normal and hover states and set submenu's item link properties and link target attributes on the "Submenu" tab.

4) Save your menu.
4.1. Save your project file. To save project just click "Save"

button on the Toolbar or select "Save" or "Save As�" in the Main menu.
4.2. Publish your menu in the HTML format. To do it click "Publish"

button on the Toolbar.
css3 modules Css Vertical Submenu

Download CSS3 Menu for Windows and MAC OS

Download
for Windows

Download
for MAC

Contacts

For feature requests, troubleshooting, general help contact Customer Support at

. Make sure to include details on your browser, operating system, CSS3 Menu version and a link to your page.

Labels: Blogger-II, CSS

Print ပဲထုပ်ပါ..pdf ထုပ်လျှင်.ဖောင့်လွဲနေလိမ့်မယ်

1228..HtmlBox – jQuery based WYSIWYG editor ( 29.9*.10 )

HtmlBox is a modern, cross browser, interactive, open source jQuery based WYSIWYG editor plugin that convert any text area input into an easy to use HTML editor. it has Ajax based intuitive user interface which make it easy to build small HtmlBoxes with just several buttons, or large full featured and nice looking HtmlBox.

it work perfectly on all major web browser such as Mozilla Firefox, Internet Explorer, Opera, Netscape and Safari and also easily integrated into your existing websites. HtmlBox is use HTML by default, but user can also use XHTML output, if required.

Features of HtmlBox

Easy integration
Multiple Browser Support.
lightweight jQuery WYSIWYG editor (only 11 KB)
XHTML Output Possible.
Ajax Support Out of the Box
Complete User Manual in PDF format for developers
Skinnable Interface
Custom Icon Sets
Suitable for content management systems, forums, guest books, contact forms, etc.

Labels: Blogger-II

1227..How to Center OR Left OR Right post title? ( 28.9.10 )

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

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

The just add this line text-align:center;

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

preview and if OK, save template.

If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Labels: Blogger-II

1219..Replacing Blog Title and Description on Blog Header with Logo ( 28.9.10 )

Hi bloggy readers,
In the default templates from Blogger, we are provided with the Blog Header which being formatted into text whether on the blog title or the blog description. So, in the homepage of your blog, your blog title along with the description will be shown as a text format. But if you check some of the famous blogs, their blog header is usually shown as a logo instead of the text, which has been set as the anchor link to the homepage. If you can't catch with I'm trying to explain to you in this post, you can check at the famous blogs such as BloggerBuster or CarAdvice blog.

As you can see on the header of those blogs, there is no blog title and description which is usually written in the form of text. Their blog headers have been replaced with the logo picture of their blog. Actually, if we check at their template, they didn't remove the blog header, they just hide the text element on header and then replaced it with the logo. If you are interested on replacing the text header to the logo header, the tutorial is as follow:

1. Go to Blogger
Now head to the http://www.blogger.com and Log in to your Blogger account.

2. Go to Layout/Design
After entering to the Dashboard account, pick your blog and press the Layout/Design button in that are of your chosen blog. By doing so, you will be brought to the first sub-tab, Page Element.

3. Go to Edit HTML
Now switch the sub-tab to the Edit HTML to start customizing the header element of your blog.

Anyway, before proceeding to the tutorial on removing the text element on header, i strongly insist you to Save the current template of your blog just in case you do something wrong with the template. Now click at the link Download Full Template.

After clicking the Download Full Template link, you will be prompted with the choice about where you are gonna put the xml file in your Computer, just put it in the Desktop to make it easier if later you want to switch back to the current template.

4. Find the Code
Now we need to find a specific code in blog template. By pressing Ctrl + F buttons at the same time, we will enter the Find mode. Now search the code below:

]]></b:skin>

5. Copy the code
After locating the code ]]></b:skin> in your blog template, now block the CSS style code below and then press Copy. After that, paste the CSS code right before the code ]]></b:skin>. By adding this new CSS style code in your blog template, you are about to install the code that will control the appearance of blog header title and description.

/* Disappeared Logo header and Description */

.blogname {
width:500px;

height:70px;

font-family:arial;
margin:0px;
float:left;
background:url()no-repeat;
overflow:hidden;
}
.blogname h1 {
width:500px;

height:70px;

padding:0px;
font-weight:normal;
color:#cacccd;
text-align:left;
margin:0px;
text-indent:-9000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_PlagmwtPUP4cLR7DNdT3DUc7aREyvpWmipFxTSw_9RX8QxPPFMxz7SuJMXeLUc0dZv2BBlxUk-zXkCK5gFotJaBuy3AaAFv5GosIFpkx0WXYgkipv3-FtIpotqRTwyY8_x_0VjsiShc/s1600/logo5.png)no-repeat;

}
.blogname h1 a:link, .blogname h1 a:visited{
color: #cacccd;
display:block;
width:500px;

height:70px;

}

.blogname h1 a:hover {
color: #eee;
}
.blogname h2 {
margin:2px 0px 0px 20px;
font-size:12px;
font-weight:normal;
color:#343434;
text-align:left;
text-transform:uppercase;
}

Now, pay attention to the code overflow:hidden; in that code above. Yeah, the code overflow:hidden; is the code that will hide the header title and description elements from your blog. And for the blue code above indicates the URL address of blog logo, so you must firstly change that red code by using the URL address of your logo picture. And last but not least, the red code width:500px height:70px must have the same numeral size if you want to re-size the logo of your blog.

6. Find the Code that controls the header
Now enter again to the Find mode by pressing Ctrl + F and find the code that control the occurrence of the header element. The header code i've presented below might be different with the header code in your blog template, especially with the header title (red code). So you just need to find the first line of the code below.

7. Paste the Code
Now block the 2 lines div class code below and then press Copy.

After Copying the lines code above, now wrap up the code on number 6 by using the 2 lines div class code above. Look at the example below!

Hosted by FreeImageHosting.net Free Image Hosting Service

Hosted by FreeImageHosting.net Free Image Hosting Service

As you can see in that picture above, the 2 lines div tag code has wrapped up the header element. By doing this, the new CSS style will be attached to the header element in order to hide the title and description text of header element.

8. Save the Template
By pressing the Save Template button, now you can save the current change you've just made. And as you can see in the result through your blog, the header title and description has been replaced with the logo.

Okay, that's it for now, hope it works to your blog.

Labels: Blogger-II

1214..How to Put Label Element Below The Post Title? ( 27.9.10 )

Hi bloggy readers,
Labeling the articles is one of most important factors on getting a targeted traffic from search engines. Yeah, that's true because by adding specific labels to our posted articles will attract keywords from the search engine without reading the whole post of our articles. The keywords we have set to articles can be described as the whole concept of our articles. So if you haven't started labeling your posted articles, I insist you to do it now before it's too late for you considering that the number of articles on your blog is expanding and it might trouble you on labeling all of those articles one by one in the future. So again, I strongly insist you to label your articles from now on.

In the default template provided by Blogger, usually the label element is set to be placed on the bottom position after the whole content of articles we wrote. Some of bloggers are usually re-moving that label element to the upper position and below the post title to make it easier for the readers on finding the similar articles with the one they are reading. So, if you want to place the label between the post title and the post content, just read this whole tutorial:

1. Log in to Blogger
To start this tutorial, now Log in to http://www.blogger.com and type the username and password in the required Log in form. After that, press the Log in button to enter to your Blogger Account.

2. Go to Layout/Design
After landing to the Dashboard page, now pick the blog you want to customize and then press the button Layout/Design. By pressing the Layout/Design button, you will be automatically brought to the first sub-tab, Page Element.

3. Switch the sub-tab to Edit HTML
In the Page Element, switch the sub-tab to the Edit HTML to start customizing your blog template code.

4. Find the code that controls the label element
Now press the button Ctrl + F at the same time to enter the Find mode. After the Find mode appears on the bottom position, now find the code below:

<b:if cond='data:post.labels'>
              <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
              </b:loop>
         </b:if>

5. Cut that code
Okay, after finding the code no number 4, i want you to block that code and then cut that code to the clipboard. Remember, you must cut that code, not copy it. This is very important because in this tutorial, i want to show how to move the label element to other position, not to make another label element.

6. Move the Code
After cutting the code on number 4 to the clipboard, now enter again the Find mode by pressing Ctrl + F at the same time. And then find the code below:

<div class='cover'>   
 <p><data:post.body/></p>

The code above indicates the top position of article in your blog, specifically, the location of Post Title.

7.Paste the Code
After locating the code that indicates the location of Post Title in your blog article, now Paste the code we've already cut before, right after the code <div class='cover'>. By doing so, you are about to move the Label element from the below articles to the top position of articles.

8. Save the Template
Now save the changes by pressing the Save Template button. As you can see in your blog article page, the Label element has been successfully moved to the top position of articles.

Labels: Blogger-II

1211..Blogger Archives Dropdown Menu at Classic Template ( 24.9.10 )

http://www.makeseomoney.com/wp-content/uploads/dropdown-menu.png

Login to blogger with your ID
At the dashborad, click Template.
Click Edit HTML tab.
Don't forget to backing up your template before you editing your template (important!).
Go to your sidebar code and find this code :

<BloggerArchives> <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a> </BloggerArchives>
Delete the above code and replace with this code :

<select name="archivemenu" style="width:100%" onchange="document.location.href=this.options[this.selectedIndex].value,'_blank')"; <option selected>- Archives -</option> <BloggerArchives> <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option> </BloggerArchives> </select>
Click SAVE CHANGES button.
Done. Now your archives will be placed at the drop down menu.

For customize the width of drop down menu, please changing the value (red mark) with the number would you want.

Have a nice blogging.

Labels: Blogger-II

1210..35+ Excellent CSS and jQuery-based Navigation Menu Tutorials and Techniques Collection ( 24.9.10 )

Navigation menu is the most vital element in web design. It guides users to navigate around your blog/website and able to find needed information easily.

Here, I've made an ultimate collection containing 38 jQuery and CSS navigation menu tutorials and techniques which you can implement into your blog/website. Some of them made up of pure CSS3 without involving any javascripts.