Documentation basic blogging - Blogger for Beginners

Documentation basic blogging - Blogger for Beginners

The book is Amanda Begginer Blogger for free offers. Blogger Buster editor Amanda is a very famous Blogger; who wrote the book The Blogger Template Book (each is introduced in Blog Design).In the guide book blogging Amanda basic focus on the topic of blogging as basic editing interface, publishing articles. The book also mentions the necessary knowledge about the structure of Blogger. In a nutshell it offers a panorama to be able to capture new job blogging and blogging platform Blogger.

This book is divided into ten chapters:

1. Start
2. First Post
3. Rights and privacy policy
4. Customize your blob
5. Gadgets (widgets) and utility layout in Blogger
6. Comments and connectivity (Backlinks)
7. Publish and article archives
8. Share blog content
9. How to ...
10. Learn more about Blogger

Although Blogger has provided a vast library of knowledge in the Blogger Help Blogger but knowledge is never enough for everyone. Moreover, this book provides a perspective of an experienced blogger "nostalgically the beginning was" not the perspective of a service provider.Therefore it would be more useful details and lot.

A valuable book for those new soldiers, it is the manner detailed hands-on, step by step. But it is also very useful for your Blogger specializes in supporting and guiding her. It saves time and effort because both will meet each other, rather than hang around with those silly questions of basic categories.

By the way I also recommend you read the new and find out before asking. Want to have not experienced any other way just rolling up your sleeves and be a little dirty mud.

In conclusion Blogger whether professional or just a novice, the book should have basic blogging guidelines - for Begginers Blgoger this in your library. The only hard thing left is a book written entirely in English. You can read online here

Read more »

Use the HTML5 card rather short code to add music to your website

Use the HTML5

 

Previously, to add music to your blog will have to use a 3rd party plugin with flash support HTML5 yet born when help for webmasters and content managers who bear much lighter. I remember 2 years ago when Rilwis published articles shortcode perfect to add music to your Blogger website andmade ​​a lot of good bloggers like you catch the gold. But right now the job has become a lot simpler than you may insert music directly into your website with just one card 

Currently card  HTML5 support latest browsers listed here

However, as a webmaster you should anticipate some cases may occur as your browser does not support HTML5 (referring to his case extremely annoyed with IE guys - stupid beyond description - sr you) . So this article will guide his plans not negate the status of some HTML5 support older browsers.

1. Simplest syntax

Its syntax is very simple, you just need to insert the card  with few parameters is done.You only need the most basic insert:

Properties controls that can display a slider control on the browser. It should be noted that this slider will be different on different browsers. Specifically, the following

2. Enhance Properties

However, to fully control card , we must learn some important attributes.

scr

It specifies the sound file is played. This property is very familiar sure you also see the most is when inserting images into posts such also have attributes.

controls

As in the above example, this attribute can display a slider control.

autoplay

This attribute will be automatically tracks slightly right when the page loads. Note okay brother, his very hydrophobic case. There are many sites do not bother to read disturb others just because of the background music tracks. If used, they must be sure how the reader can quickly turn off the sound.

loop

Loop. When all the music they play browser will automatically play back the track from the beginning again and again. It is a loop infinity - infinity loop.

preload {auto | metadata | none}

Preload attribute specifies whether or not to download music files. It only FF, Chrome and Safari support.

• auto = files will be downloaded automatically.
• just download the file metadata = metadata page load (not really get it!).
• none = sound file is downloaded only when readers disagree.

See examples for a better understanding of these properties.

3. * Support for older browsers

HTML5 is still too new and only some versions of the new browser supports it, for the browser version older people still have to rely on 3rd party plugins operate as jw flash based player. So how to use HTML5 has recently been using flash? HTML5 has anticipated this and its solution is unexpectedly simple.

First, we can notice a line of text for the reader to know that their browser does not support HTML5 should not hear the music.

  
     Your browser does not support native audio.  To listen, please  download </ a> the mp3 file to your computer. </ P>
 </ Audio> 

The browser will automatically skip the audio card and read the entire text between the tags .This text can be arbitrarily long term it must be between card and card card must be between

Read more »

The basic operations in javascript

 The basic operations in javascript

This post is to explain about fundamental operations in JavaScript. With this basic arithmetic operations can be combined or changed data in the Javascript code. There are many operations (also known as operator) is used in JavaScript.

1. The arithmetic

Very common and common, except for arithmetic of multiplying and dividing that any student who knows. The variable and its value is the number.

• = (Equal sign) - ie, (x = 8)
• + (Plus sign) - ie, (x = 7 +8)
• - (Minus) - ie, (x = 7-8)
• * (Multiplication) - ie, (x = 7 * 8)
• / (Breaks) - ie, (x = 7/8)

Besides the simple math on it also uses the following arithmetic for programming.

• Modulo (%) - Do not be mistaken with a percent sign, here is balance calculations take the division. Consider the following example shows the remainder of the division is 8 3 2 
  For example: 
  8% 3 result 2 
  10% 2 result 0
• Increment (+ +) - This operation adds an extra base value units. Often used as an abbreviation allowed in programming. For example, if we have the variable 'i' can be increased by an additional unit of the variable i by writing i + + instead of to i = i +1. 
  For example: 
  x = 7; 
  x + +; 
  result is x = 8
• Decrement (-) - Subtract the original value of 1 unit. If we have variable 'i' can be used to write i - instead of i = i-1. 
  For example: 
  x = 7; 
  x -; 
  result is x = 6

2. Assignments

Assignments are one of the basic operations of JavaScript. Assignments used to assign a value to a variable. In the assignment expression, the right operand is assigned the value of the operand to the left of the equal sign (=)

Operator Operator	Example Example	Same as Same as
= =	x = y x = y	x = y x = y
+= + =	x += y x + = y	x = x+y x = x + y
-= - =	x -= y x - y =	x = xy x = xy
*= * =	x *= y x * = y	x = x*y x = x * y
/= / =	x /= y x / = y	x = x/y x = x / y
%= % =	x %= y x% = y	x = x%y x = x% y

3. Comparison Operands

A mathematical comparison returns a boolean value is TRUE (true) or FALSE (false). By comparing the two operands mark comparison (==) Javascript will give us the answer depends on the value of the operand. View the table below to understand math better

Operator Operator	Meaning Meaning	Example Example
== ==	Identical Identical	3 == 8 result FALSE 3 8 result == FALSE
!= ! =	Different Different	3 != 8 result TRUE 3! = 8 result TRUE
> >	Bigger Bigger	3 > 8 result FALSE 3> 8 result FALSE
< <	Smaller Smaller	3 < 8 result TRUE 3 <8 result TRUE
>= > =	Bigger or identical Bigger or identical	3 >= 8 result FALSE 3> = 8 result FALSE
<= <=	Smaller or identical Smaller or identical	3 <= 8 result TRUE 3 <= 8 result TRUE

4. Logical operations (booleans)

A mathematical logic compares two expressions and returns a value of TRUE (true) or FALSE (false).

• && - AND - AND operator compares two expressions and returns TRUE if both values ​​are true and vice versa will return FALSE.
  • x = 5 
    y = 8 
    x <7 amp="" y=""> 3 
    (Returns TRUE)
• | | - OR - OR operation compares two expressions and returns TRUE if either the right and vice versa returns FALSE.
  • x = 5 
    y = 8 
    x> 7 | | y <3 b=""> 
    (Returns FALSE)
• ! - NOT - NOT A mathematical, math negative returns TRUE if the expression is false, and vice versa if true, the expression returns FALSE.
  • x = 5 
    y = 8 
    ! (X == y) 
    (Returns TRUE because the value of 'x' else 'y')

5. Operands used for string

Addition operation is used to combine two variables with text values ​​together

• t1 = "Have a good" 
  t2 = "life." 
  t3 = t1 + t2 
  (The return value of the variable t3 is "Have a good life.")

Read more »

Instructions on how to make a simple slideshow with jQuery

Instructions on how to make a simple slideshow with jQuery

This post is to guide you how to make a simple slideshow with jQuery. In fact there are many ways to do sileshow images from simple to complex ... however HHV still writing mainly because this is the easiest way to do that HHV sildeshow learned and apply it in Metro Magazine Blogger Templates .Part of it is easy to read code that a person did not know anything about JS can also understand it;are consistent with the criteria "amateur web design for beginners" :)

Live Demo

1. The HTML Code

For simplicity, the photograph with card insert 3 and surround it with a

card

. For ease of formatting and decoration attaching a id=”slideshow” . Finally we have the HTML code

<div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div>

A special point to note is that if you want any photos to appear first, then assigned to the class=”active”

2. CSS Code

 

#slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; }

The point to note in this code is the height Slideshow customized depending on the location of code and images ... When deep consideration we see the code on other provisions of the photo coordinates in space 3 Attribute dimension ... z-index order placement provisions photos. There are 3 class, the highest class - active (10), the next layer active (9) and all remaining photos (8).

3. Code JS

Now we begin to write a script to start your slide motion.

function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); });

The above code has the following meanings: First, declare a variable, class photo that has activethen assign the variable $active and head, it is the turn photos next $next . Start running SlideSwitch function. Files $next class mounted active to bring it up on end and shots are$active shall be removed down to the active class. Finally the interval 5000ms (5 seconds) between each switch. Very simple!
In order for us to create more beautiful blur effect fade.

function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); });

There appears to add a class last-active , this class has been declared in the css code with only one attribute is z-index: 9 .

The code above is interpreted as follows: class files have active (being at the top) will be assigned to class last-active (1 level down). Files in just below it, the class is assigned active (a step) and add effects animate the opacity increases from 0 to 1. Finally remove class last-activepicture taken on the same initially to the bottom.

This process is repeated with cycles 5s.

Conclusion

As mentioned there are many ways to do the most with jQuery Image Slideshow more complex and much more beautiful. But the problem is that the slideshow will be heavy and difficult to edit a lot more customizable. HHV's view remains is how to use the simplest way to achieve the highest efficiency. To achieve this is the only way to understand what you're doing.

Hopefully with this tutorial you can learn and customize according to your slideshow. VD as resizing slideshow, display time of each image, the blur, add link for each image, and even combine it with Recent Posts Widget.

Read more »

Metro UI & web design guidelines for Metro UI interface

Metro UI & web design guidelines for Metro UI interface

This post will guide you how to design an interface with Metro style UI.

1. The Metro UI is what?

Metro UI is an interface type based on the arrangement of fonts and square arrays developed by Microsoft. It began to be used to design for Windows Phone 7 and now Windows 8.

Indeed Metro UI design is inspired from the tables of the subway station (hence the name Metro).The tables have contrasting colors, big clear font and visual symbols. Actually we have ever seen it before in Windows Media Center, you can use any player, the Zune is also known Metro UI interface of Zune.

Metro UI Microsoft very seriously, it is not a style but a new design philosophy: simple, modern, pure technology. It's completely antithetical to Apple's style: refined, polished, classy.

Do you want to learn more about the history of Metro Ui can read the article Why Metro style interface becomes important to Microsoft?

2. Principle of Metro UI design

Metro UI interface design without disturbing eye images that only the actual information flow optimization is presented. The information provided on large tables with small buttons and effects move smoother. Microsoft has described the design philosophy Metro style UI with a simple table like this.

1. Simple and modern: the first principle of the Metro UI is simple and modern, eliminating all superfluous elements not convey information. These things are removed, including the beautiful graphics, borders, shadows or 3D effects ...

2. Moves and Smooth: The motion should not so fast that there should be smoother and depth to help users feel it vividly. Moving the same pace with the movement of life.

3. Typography Inspired design based on the placement of an artistic font. Use a calligraphy font size and different densities like those icons. Characteristics of this type of design to ensure it has recently secured the art convey information effectively.

4. Focusing on content: It is the result of first principles and tenets 3rd. Removing the intermediate steps and what not to bring practical value. Help for users to communicate directly with content.

5. Purely technical: An interface is generated from the simple charts pixels. Without complicated patterns picky, no shadows and no attempt to simulate life. It gives a very good definition technology.

3. Designed web pages inspired Metro UI interface.

You should consult the site before embarking on the design of their own website.

(This page on the Blogger)

4. Attention points when designing your blog Metro style UI

1. Notice to font. Though not mandatory, but you should use the Segoe UI font (the font of this blog). This font is very nice, modern and slim ... that's the beauty of digital is that Microsoft tries to emphasize.

2. Attention to colors. To get playful tone colors and beautiful as the brother of the windows8 should copy its color code. If you are knowledgeable about dithering and dithering principle, there is nothing to say, if you do not use the palette screen capture of window8 and refines the tone that I like.

3. Attention to important factors and not important. The key component highlights need to put in the big hub striking colors, large fonts and vice versa.

4.: Less is more., Simple design and minimalist, making a few key statistics and should set the widget's really important for the reader needs to have. Removing the animated gif file, the colorful images heterogeneity.

5. Attention to the space: The space between the plates and blocks important pieces than we think it makes a lot of aspects of the site. You put it note pads aligned arrays, or otherwise be subjected to a control order can be. Do not place objects monotonous regularity or too close together, making the reader breathless.

7. Icons. If they look closely you will see the image icon in the Metro interface is different, the symbol of social network services, the left and right arrow buttons up and down. (See the Resources section to download Metro-style icon set for use Ui)

8. Attention to these effects. Effects Using a smart way to create smoother in motion. Do not use the shadow technique, 3d, Border or other complex effects for decoration. To finally create pure beauty of modern digital technology

5. Resources

1. Ministry Metro UI style icon

This is a very beautiful icon set includes 3 sets each have more than 400 Metro UI style icon. It includes icons for office applications, social network services, equipment, web browser ... This is the indispensable icon if you want cahs web design Metro style UI. (Click on image for download link)

2. Flash icon and font

Icon collection and dozens of font (or free of charge) in accordance with the interface Metro UI style.You should download to use it very useful for the design process.

3. Slide and fade effect smoother.

3 jquery tips are very basic and simple, you should not have too much knowledge of application code to it if you know how to coordinate this procedure will create lightness feeling smooth and professional blog.

Read more »