Creating View Demo Button

The use of this css is to create a button on a blog. With this css code will make it easier to modify the button, shapes, sizes and colors of the button. This button allows you to "view demo" or "download" and other purpose on your blog, You can customize your button with the right colors that adjusted with your theme background. With this button can change appearance of your blog.

How to make the this button ? Please copy and paste the code below in your post page, do some color changes that proper with your blog theme.

<style type="text/css">
.button1 {
 color:#a8a8a8;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 30px;
 text-decoration:none;
 text-shadow:0px 1px 0px #000000;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
 border-radius:15px;
 border:1px solid #8a8a8a;
 display:inline-block;
 -webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 -moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 box-shadow:inset 0px 1px 0px 0px #aba9ab;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
 background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
 background-color:#7a7a7a;
}
.button1:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
 background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
 background-color:#000000;
}
.button1:active {
 position:relative;
 top:1px;
}
</style><a class="button1" href="your URL">View Demo</a>
<style type="text/css"></style>

Note :

• Change the blue text with your color(text will be displayed),
•  The red text with your URL.

View Demo

Download

Read More

Reading and Writing Roman Numbers

There are various types of numbers, whole numbers ( whole Numbers are simply the numbers 0, 1, 2, 3, 4, 5, … (and so on)) , counting numbers (Counting Numbers are Whole Numbers, but without the zero.), integers (Integers are like whole numbers, but they also include negative numbers), or fractions. One more type of numbers we will study the Roman numbers. In general, the Roman numbers consist of 7 digits (denoted by the letter) as follows.

• I represents the number 1
• V represents the number 5
• X represents the number 10
• L represents the number 50
• C represents the number 100
• D represents the number 500
• M represents the number 1000

For other numbers, denoted by a combination (mixture) of the seventh symbol number.

1. The sum rule of Roman Numbers
To read the Roman numbers, can we describe in the form of summation as in the example below.


Example:
a. II  = I + I
        = 1 + 1
        = 2
    So, II be read 2
b. VIII = V + I + I + I
            = 5 + 1 + 1 + 1
            = 8
     So, VIII be read 8
c. LXXVI = L + X + X + V + I
                 = 50 + 10 + 10 + 5 + 1
                 = 76
     So, LXXVI be read 76
d. CXXXVII = C + X + X + X + V + I + I
                     = 100 + 10 + 10 + 10 + 5 + 1 + 1
                      = 137
     So, read 137 CXXXVII
Try to note the number of Roman symbol of the examples above. Getting to the right, the smaller value. There is no symbol that lined the base of more than three. From these examples we can write the first rules in reading Roman numbers following the symbol.

• If the symbol of the smaller numbers ideally situated right, then the Roman symbols are summed. 
• The addition at most three points.

2. Reduction in Numbers of Roman rule

What if the symbol of the smaller number is located on the left? To read the Roman numbers, can we describe in the form of a reduction as in the example below.

Example:
a. IV = V - I
         = 5-1
         = 4
    Thus, IV to read 4
b. IX = X - I
          = 10-1
          = 9
    Thus, IX reads 9
c. XL = L - X
          = 50-10
          = 40
    So, read XL 40
From these examples we can write the second rule in reading Roman numbers following the symbol.

• If the symbol of the smaller number is located on the left, then the Roman symbols are deductible.
• Reduction of at most one point.

3. Joint Rules
The two rules above (addition and subtraction) can be combined so that it can more clearly in Roman numbers to read symbols. Let us consider the following example.
Example:
a. XIV = X + (V - I)
            = 10 + (5-1)
            = 10 + 4
            = 14
    So, XIV to read 14
b. MCMXCIX = M + (M - C) + (C - X) + (X - I)
                        = 1000 + (1000-100) + (100 -10) + (10-1)
                        = 1,000 + 900 + 90 + 9
                         = 1999
    So, read MCMXCIX 1999


Write Roman Numbers

After reading the Roman numbers, of course you can also write down the number of Roman symbol of the natural numbers are specified. Write the rules of the Roman symbol of the same number you have learned before. Let us consider the following example.

Example:
1.. 24 = 20 + 4
          = (10 + 10) + (5-1)
          = XX + IV
          = XXIV
    Thus, the symbol of the Roman number 24 is the XXIV
2. 48 = 40 + 8
         = (50 - 10) + (5 + 3)
         = XL + VIII
         = XLVIII
    Thus, the symbol of the Roman number 48 is XLVIII
3. 139 = 100 + 30 + 9
           = 100 + (10 + 10 + 10) + (10 - 1)
           = C + + XXX IX
           = CXXXIX
    Thus, the symbol of the Roman number 139 is CXXXIX
3. 1,496 = 1000 + 400 + 90 + 6
              = 1000 + (500-100) + (100-10) + (5 + 1)
              = M + CD + + XC VI
              = MCDXCVI
    Thus, the symbol of the Roman number 1496 is MCDXCVI

Read More

How To Modify the Blockquote in Blogger Template

In HTML and XHTML, the blockquote element defines a block quotation within the text. The syntax is <blockquote><p blockquoted text goes here</p></blockquote>. The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,[1] which is also the basis for XHTML 1.0. The preferred approach is the use of CSS (Cascading Style Sheets).

How to Modify how Blockquote ?

• First step :

Go to your dashboard>>Template>>edit html>>proceed>>check expand template widget. Note : back up your template first. Use ctrl + f and find this code (or similar to this code) : blockquote or .post blockquote {........ . (In other templates might be a different code). Replace with the following code and make the necessary setting .

blockquote{background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYRlrip3H7yz_KRTnp_NS8XJl1AgNL-RyVu67Lro3aBExRKVzekH5ZtOELc7MMovELTEZxG8e8_JVVHgSDOiqaVE1y7ob766lHm5HCpDIuoEc3AGiuvV3xolQrh_bfu1KpCCOOjcYAFPT/s512/blockquote-orange.png); background-position:; background-repeat:repeat-y;  margin: 0 10px; padding: 0px 0px 0px 20px;font: italic 13px georgia;}

Look at the picture below

• Second step :

Save your templates

Read More

CSS Styling Links

In hypertext systems, such as the World Wide Web, a link is a reference to another document. Such links are sometimes called hot links because they take you to other document when you click on them.. Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

CSS code :

<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
<b><a href="http://godheg.blogspot.com/" target="_blank">Godheg</a></b>

Result :

Godheg

Read More