Showing posts with label Create. Show all posts
Showing posts with label Create. Show all posts

Create Menu With Scroll

type='html'>For a beginner blogger like me, create a menu with the scroll may look difficult. But to create a menu with the scroll is in fact very easy, you just need a little HTML code. In addition to saving space, the scroll menu is also seen quite interesting. If you have a long list of menu, you can overcome this by using the scroll menu, as you see at the top of my blog.<

To create a menu with the scroll, you only need the HTML code as below:



contents menu your blog




Description:
  1. Width -> width of the menu

  2. Height -> height of the menu

  3. Padding -> distance between any posts with the edge

  4. Border -> line thickness fringe
You can set it according to your wishes, if you want the menu with a height of 400px, you change the height:400px. Similarly, the breadth, if you want the menu with width 300px, then you change the width:300px.

Example I have a scroll menu, such as the code below:



The result is as below :



If you want to change the numbers, you can change the code ul, replace with ol. Or can write the number manually.

Happy Testing ..!

 

 

Technorati Tags: ,
Read More >>

How to Create Text Area

type='html'>

abstract082 What is a Text Area? text area is the area where to save the new text or word, or can be a component of HTML used to display text or script code in the form and format text.

 

Usually the text area used to store the HTML code that can not be in writing directly to the blog posting. So the function of the text area is more or less easy for visitors to copy the entire text.

Then how do I create a text area?


To create a text area, please copy code below:



The result :



Description:

for "rows" = 3 is high from the text area, so if you want the text area comrade higher comrade please change the numbers much higher.

for cols = "20" is the width of the text area, so if you want a buddy text area wider sobat please change the numbers much higher.

Quite understand? let's continue.



Text Area with Highlight
Other variations of the text area that is using the Highlight button, meant to be easier to copy the entire text area only by pressing the button Highlight. Only by pressing the button then highlight the entire contents of the text area will be highlighted and live in the only copy. Highlight the key function is very useful to prevent the left one or more of the contents of the text area.

Please copy the HTML code below:

The result :

That's a little explanation of the Text Area. For more details, please try ! smile_wink

 

 

Technorati Tags: ,
Read More >>

How to Create Tab View Menu

type='html'>

Tab It's been a long time I did not write about the tutorial blog, a few weeks I always write about the news and wonders of nature. OK, it's time we tried to return to the tutorial blog, and which we will discuss today is how to create a  tab view menu on the blog.

 

Tab view menu, very efficient, because it contains many titles in one place. In addition to saving space, tab view menu also looked very good. Creating tab view menu requires a lot of HTML code, so my advice, you should backup the template before you make the tab view menu.

 

To make it, please follow the steps below:


  1. Login to blogger with your ID.
  2. Click Layout.
  3. Click Edit HTML.
  4. Then look for the code ]]>
  5. Put the following code before the code ]]>

    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Width Main Menu Top */

    text-align: center;
    height: 30px; /* High Main Menu Top */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Top Menu border color */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Main Menu Top Fonts */
    font-weight: bold;
    color: #000; /* Main Menu Top Font Colors */
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px}
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #E6E6E6; /* Background colors on Main Menu */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Main Box border color */
    overflow: hidden;
    background-color: #E6E6E6; /* Main Box background color  */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }


  6. Then place the following JavaScript code above the code


  7. Save Template.
  8. To make the tab view menu, please return to the Layout.
  9. Select a Page Elements .
  10. Click Add Gadget .
  11. Select the HTML / Javascript, then enter the following code :



    300px;">

     

    Tab 1
    Tab 2
    Tab 3



    300px; height: 250px;">


     

    Tab 1.1

    Tab 1.2

    Tab 1.3

     




    Tab 2.1

    Tab 2.2

    Tab 2.3




     

    Tab 3.1

    Tab 3.2

    Tab 3.3

     





  12. Then Save.

Description: 

  • For red code is the width and height of the menu, please adjust the content. 
  • Code green please fill in the title of the menu
  • And the color purple, the contents of the menu. You can add links, images, banners, etc..
Read More >>

How to Create Search Engine

type='html'>

How do I install a blog on Search Engine? Search engine is very much needed in a blog or website. Function of search engines is to make it easier for visitors to find the article or post in question. search engine you can use to earn money through google adsense is now providing new facilities.

 

If you are already listed in google adsense, search engines can be used to earn money. If there is a search engine to use in your blog, then you will get money from google. The more visitors to use the Blog Search Engine, it will be more and more revenue in that get.

But what if you have not joined the Google adsense, and want to install the Search Engine in the blog so that your visitors are easier to find what they want in your blog.
Not to worry, because you only need the HTML code to create a Search Engine in your Blog, like this:

http://YourBlog.blogspot.com /search" name="searchform" method="get">


You can change the words that I mark with the color red with the address on your own blog, for example, like this:

http://mindauthor.blogspot.com/search

For the code ( value = "Search" ). Search this writing is words that will appear on the key search engines, if you want to change it, you can change it to:
Value = "Fine" so that the text appears in the Search Engine is "Fine" .
You can change it as you see fit.

Following the example of search engine script from above:



Or like this:

  1. Login to blogger.

  2. Click Layout.

  3. Click Page Elements.

  4. Add a Gadget.

  5. Select Edit HTML / JavaScript.

  6. Enter HTML code above to search engine in the box is empty.

  7. Then click Save.

Trying to please! nice work.
Read More >>

How to Create a Page Navigation

type='html'>Often we see and use the page navigation on the google search engine, which is located on the bottom of the google page. What you think to make the navigation buttons on the blog page. In fact, to make the page navigation buttons require a lot of HTML code, but you do not need to change the code is there in the blog template, because you will only install the code in the sidebar.

To make it very easy, please sign in to blogger!
  1. Click Layout.

  2. Click Page Elements.

  3. Then click Add a Gadget.

  4. Choose HTML / Javascript.

  5. Then enter the code below into the box provided:







  6. Drag and drop under the post.

  7. Then Save.
To pageCount var = 5; -> the number of posting in one page, you adjust the number of posting in one page. If you displaying 5 per page posting, then use var pagecount = 5.

So hopefully useful !
Read More >>

How to Create a Read More (New Template)

type='html'>What is Read More?

Read More .. is the word that is used to shorten the article on the Blog or Website.
For example, the text you are reading this now, I use the word Read More under this article to bring readers to the contents of any posts in full.
This time I will study on how to make read more on the new template (XML).

As the note do not use Internet Explorer if you want to learn this discussion, because IE often experience failure at the time after edit HTML on the Blog. You can use Mozilla Firefox or Opera.

## First Step
  1. Login to your Blogger Using ID

  2. Click Settings

  3. Then click Format

  4. Blank screen on the bottom on the page format, in addition to any posts Template post content with the following code:








  5. Then Save Settings, this step is actually to facilitate us in writing the article.

## Second Step

  1. Click Layout.

  2. Then Click on Edit HTML, save your template before pressing the Download Full Template. Backup your template so that if an error occurred in the process of editing HTML, you can restore back the template that you have backups before.

  3. Check the Expand Template.

  4. Find the code below on your template :



  5. or the following code, the same



  6. Remove and replace the above code with the code below :







    Read More..





  7. Click Save Template.
Posting you want to show the location of the first over
, While the next posting after and do not forget to close the

Happy Testing!
Read More >>