A web page either blog or website when you access that appears in the browser page that you use (such as: mozilla firefox, google chrome, internet explorer, etc.) are generally composed of a combination of several scripts client web , the script can be understood and translated by the browser to display web pages, scripts are scripts HTML, script CSS (Cascade style sheets) and JavaScript, these scripts actually collaborate with one another that deliberately programmed such that display the page sites as desired by the owner of the website or the blog.
Actually, when you create or develop a blog or a professional website such as blogs, in general, there are two categories of script involved, the script client and server script, the script client is HTML, CSS and javascript while the script server instance-specific language blog widgets (like a special code that we often use in blogspot,), the PHP script as they are used in the wordpress template, script ASP, JSP etc.
the second difference is the script lies in the location pemrosesnya, the script client is only processed and rendered by the browser, while the server script is processed and translated by machine server is a computer machine where the script page of a website or blog is placed, if the server is reading the script server, then the server will translate that into the HTML script, if the server reads the script client (HTML CSS Javascript), the server will read it but will not process, scripthasil processing of the script server results will be sent to the client computer through the browser in bentyk script client and the script translated by browsers that access resulting in the display of web pages.
Related article: programming language that must be mastered to create applications web
a. Special widget code blogspot , for example? blogspot (a framework that can only be understood by the machine translator blogspot, this code will be processed by the machine diserver blogspot and translated into html script before it is sent to the client)
b. PHP , the example used in WordPress (wordpress using a framework specifically with PHP script, with the framework wordpress you do not need to develop a web page from scratch, because the library has been provided by the framework wordpress itself)
c. etc. , depending on the blog template, may use different programming languages.
a. Script CSS
This script function is to regulate matters relating to the layout and modify the design of the web page view (coloring, drawing, etc.), the way it works is actually modify the html tags, either through name tags, id or clsss certain html tags that you want to set the layout and want to modify.
b. Javascript
This script function is to make blog pages look more interactive (when you give the action then react), for example when it is clicked the page scroll itself, when you mouse over a button, the button's color changed, etc., the way it works is similar to CSS namely to modify the html tag, either through name tags, id or classs specific html tag.
c. HTML script
This script serves as a foundation or cover that incorporates the entire script used, consisting of the codes in the form of tags or special commands that can be read by a web browser, html script will wrap script css, javascript and script server if there is, everything is wrapped by the HTML script this is mandatory, meaning that at least the web page that takes into account the structure of a good code should contain HTML scripts therein.
Related article: How to make the program structure of HTML for beginners
What are tags?
when you modify your blog template will definitely find special codes are placed between square brackets (< dan >), it is a tag.
?
Tag is a special code? generally wrapped diatara character "<" dan "/>", which usually consists of opening and closing tags, tag formats are as follows:
there is a lot of code html tags.
Examples of tag eg body tag tag and tag and other tags.
tags can have more than one attribute with a function different, there to color, determine the width etc, tag one to the other tags have different attributes from each laim, but no attributes specials which can be shared by all tags that ID and CLASS attributes, attribute that is? typically used by script CSS and Javascript to modify the tag to arrange the layout of the tag or decorate the tag.
so how does the script css?
how the script CSS as well apply to javascript very simple, secript will access the users of data contained within HTML tags then modify tags HTML through the data contained on the tag:
a. Either through the tag name.
b. Class Attributes can be owned through the tag or
c. can through the Attribute ID owned by the tag.
So when you want to modify HTML tags in a web page, then at least you have to know the first name of the tag, the class attribute or attributes Id owned by the tag you want to modify the. if you already know the name of the tag or attribute or attributes Class ID possessed by the tag you want to modify, then you can easily decorate and arrange the layout of the tag through one of three ways above? (Either through his tag name, id attribute, or attribute class).
for example:
Let's say I have a html structure to modify are as follows:
????
???????? example
????
????
?????????
??????????????
?????????
???
Structural html above when read by the browser the right displays a large inscription thick with the size of the H1:
? The basic technique to modify the look of your blog?
Let's say, I want to give the blue color of the text and his want to turn into a big all, remember the affairs of designing is keja CSS script, then one way is to use the CSS code as follows:
a. if using the attribute class (see Attribute class for h1 above is titleku [class='titleku']), we can see that the class attribute which is owned by the h1 tag above his name is titleku, then to modify posts H1 that we can use the class name of the tag as follows:
css code to modify the site pages can be stored between the code on the structure of your blog template
Actually CSS is the easiest script when compared with scripts or other programming languages, so you can easily decorate the pages of the site or your blog page, then you have to master CSS.
There are a lot of CSS techniques for modifying the site's pages, the example above is a simple example, which is obvious if you already know the techniques of CSS code that is easy to learn and more fun when practiced.
As recomendasi to learn CSS you can learn in a very complete tutorial W3School.com/css site for you as a beginner.
Also you can learn HTML tutorial also there w3school.com/html
have you learned on these sites until you understand.
The trick almost as a key point you must first understand the instructions CSS.
you might be a little confused how to modify the look of your blog, while when viewed template blog that has strukturkode so much, why can pusinng dong!.
might be a headache if you do not know how.
this tutorial I present for beginner bloggers who happen not understand how how to modify the look of the blog. I would love to know how.
steps to modify your blog page is as follows:
Please open blog that you want to modify, for example for my blog personally:
example of the look of the blog above, I would modify the background color of the menu that originally ?? orange I would be modified into black .
The steps are as follows:
a , The first step, we have to pick out what tags are used by the look of the menu, we can see also the attributes of the class or attribute id used by the menu if there is one.
To find a tag used by the menu will definitely difficult if done manually, please say you are trying to access the template code to your blog you will definitely dizzy looking at the circuit code templates are so many.
the easiest way is to use the help of the browser, the browser now provides facilities that could used by developers. one of which is the facility inspect element,
b. Right-click on the page to see that you want to modify, then select the menu inspect elemet
as an example here I use mozilla firefox browser. zoom are like the image below:
By selecting the menu element inspection, facility inspection elements will help you to make it easier? obtain information on the name TAG used eleh a display (eg menu, logo color text, etc.) you want to modify and CSS script that is being used by the tag.
will appear inspection facilities elements as shown below:
there will be three parts of the facility inspection elements that might be used to modify the look of your blog design:
1. Tool Inspektor (to facilitate finding html tags you want to modify)
2. structure of the HTML window, displaying the web page html code.
3. CSS window, which shows the structure of the css script that compose the selected tag.
for modify the display, there are two ways, selecting a tag in the hTML structure of the window, then modify cssnya to see tapilan be temporary. or with the help of tool inspectors.
So you can easily select the appropriate tag in accordance with the display portion to be modified we'll use the Tool Inspector,
Please press tool inspectors, and then point at the display part blog those of you who want to modify.
for the above example, because I will change the display menu background then I'll take tool inspectors into a menu on the display of my blog then I click on it to see the html tags and CSS that make up tags. will look like the image below:
because I want to change the background color of the menu of my blog, then I point the tool inspector to the Home menu my blog, the menu will be selected , and there is information the size of the menu, please click if the selection is correct.
you will see information on the bagah fasilits inspek element of the TAG HTML for the menu and CSS is being used by the menu.
you will be shown? HTML tags are used on the menu, and also CSS script that is being used by HTML tags such,
In the HTML window
was known that the menu using the tag a , which is located inside the li tag with the attribute class = " dropdown ", and li tag located inside tag Nav with id = " navbarsecond "
In CSS WIndow
We can see a tag script css to the CSS section Window. The tag was known to be modified with CSS command:
Because we're going to modify the background of the menu, then we just change at the background-color becomes: black or # 000
? please edit (double click on the css window) in line background-color: # ea5e00;
Then please change it to black or # 000. just as the illustration below:
Then press enter, then you will see the changes on the menu that originally orange to black, it looks like the image below:
Important:
Views above only works on memory alias is not permanent, if your blog is reloaded then zoom going back to the beginning as before.
the steps you should take before you apply the changes to the template of your blog, if your change according to what you want then you can directly apply it on your blog template.
the steps are as follows:
a. Make sure you're signed in to your blogspot account
b. Activate by selecting the blog you want to modify
c. On the left side of the menu bar select menu templates> edit HTML untukmengaktifkan template editor.
d. Press CTRL + F to display the search mode
for css we modified earlier using the key #navbarsecond .dropdown ?? a, please find the text using
Once the text is found please change in the same section when you make modifications using the inspection element. namely to section
background-color: # .....
becomes
background-color: # 000
e. Keep your blog template.
If successful, the changes to the design of your blog template will be permanent.
Whatever flatform blog template that you use to modify the appearance and layout used theta is the CSS code, but it may be the way to put it might be a little berbeda.?
Such articles of basic technique to see how to modify the design of the blog , may be useful. and good luck.
Actually, when you create or develop a blog or a professional website such as blogs, in general, there are two categories of script involved, the script client and server script, the script client is HTML, CSS and javascript while the script server instance-specific language blog widgets (like a special code that we often use in blogspot,), the PHP script as they are used in the wordpress template, script ASP, JSP etc.
? web design
the second difference is the script lies in the location pemrosesnya, the script client is only processed and rendered by the browser, while the server script is processed and translated by machine server is a computer machine where the script page of a website or blog is placed, if the server is reading the script server, then the server will translate that into the HTML script, if the server reads the script client (HTML CSS Javascript), the server will read it but will not process, scripthasil processing of the script server results will be sent to the client computer through the browser in bentyk script client and the script translated by browsers that access resulting in the display of web pages.
Related article: programming language that must be mastered to create applications web
Knowing that Script compose blog pages
In this article I will explain how the basic techniques how to modify the design to see the blog, but before I describe at length you have to know first function of script- script that compose a blog page, diantarnaya:A. script server
script server will generally translated by machine into a script client server, an example of a server script some of which are as follows:a. Special widget code blogspot , for example? blogspot (a framework that can only be understood by the machine translator blogspot, this code will be processed by the machine diserver blogspot and translated into html script before it is sent to the client)
b. PHP , the example used in WordPress (wordpress using a framework specifically with PHP script, with the framework wordpress you do not need to develop a web page from scratch, because the library has been provided by the framework wordpress itself)
c. etc. , depending on the blog template, may use different programming languages.
B. Client Script.
a. Script CSS
This script function is to regulate matters relating to the layout and modify the design of the web page view (coloring, drawing, etc.), the way it works is actually modify the html tags, either through name tags, id or clsss certain html tags that you want to set the layout and want to modify.
b. Javascript
This script function is to make blog pages look more interactive (when you give the action then react), for example when it is clicked the page scroll itself, when you mouse over a button, the button's color changed, etc., the way it works is similar to CSS namely to modify the html tag, either through name tags, id or classs specific html tag.
c. HTML script
This script serves as a foundation or cover that incorporates the entire script used, consisting of the codes in the form of tags or special commands that can be read by a web browser, html script will wrap script css, javascript and script server if there is, everything is wrapped by the HTML script this is mandatory, meaning that at least the web page that takes into account the structure of a good code should contain HTML scripts therein.
Related article: How to make the program structure of HTML for beginners
What are tags?
when you modify your blog template will definitely find special codes are placed between square brackets (< dan >), it is a tag.
?
Tag is a special code? generally wrapped diatara character "<" dan "/>", which usually consists of opening and closing tags, tag formats are as follows:
< nama_tag atribut_1 = 'content attribute 1' atribut_2 = ' contents atribut2 'atribut_N =' content attribute N '> content nama_tag >
there is a lot of code html tags.
Examples of tag eg body tag tag and tag and other tags.
tags can have more than one attribute with a function different, there to color, determine the width etc, tag one to the other tags have different attributes from each laim, but no attributes specials which can be shared by all tags that ID and CLASS attributes, attribute that is? typically used by script CSS and Javascript to modify the tag to arrange the layout of the tag or decorate the tag.
How to Design a blog using CSS
Here I will explain how to modify and design the look blog, when dealing with the design of the blog to see the script involved a script HTML and CSS alone. You can also involve Javascript to make the web page more interactive, but here I am only going to focus more HTML and CSS alone, oh yes here I would not be too lengthy to explain what it is about the script of HTML and CSS, but here I will explain procedure, if you know you can develop easily and more detail.How CSS script Works
CSS script is a script to set the layout and decorate the web pages, which are decorated by CSS is Tag- HTML tag itself.so how does the script css?
how the script CSS as well apply to javascript very simple, secript will access the users of data contained within HTML tags then modify tags HTML through the data contained on the tag:
a. Either through the tag name.
b. Class Attributes can be owned through the tag or
c. can through the Attribute ID owned by the tag.
So when you want to modify HTML tags in a web page, then at least you have to know the first name of the tag, the class attribute or attributes Id owned by the tag you want to modify the. if you already know the name of the tag or attribute or attributes Class ID possessed by the tag you want to modify, then you can easily decorate and arrange the layout of the tag through one of three ways above? (Either through his tag name, id attribute, or attribute class).
1. If the tag is decorated using the name tag format command is:
command-perintah_css nama_tag {}
if the tag is decorated with the name tag, then simply use the name tag just in front of him.
2. If the tag is decorated with class Atrribut the format of the command is:
command-perintah_css .nama_attribut_class {}?
If the tag is decorated with class attributes, then the command css must dimulah with "." (Read point) or dot.
3. If the tag is decorated with attributes ID, then the format command is:
command-perintah_css #nama_attribut_id {}
Inaget when we decorate the tag with an ID attribute, then the command CSS to mendekrasi the tag must begin with # (read: the fence).
for example:
Let's say I have a html structure to modify are as follows:
????
????????
????
????
?????????
??????????????
The basic technique to modify the look of the blog
?????????
???
Structural html above when read by the browser the right displays a large inscription thick with the size of the H1:
? The basic technique to modify the look of your blog?
Let's say, I want to give the blue color of the text and his want to turn into a big all, remember the affairs of designing is keja CSS script, then one way is to use the CSS code as follows:
a. if using the attribute class (see Attribute class for h1 above is titleku [class='titleku']), we can see that the class attribute which is owned by the h1 tag above his name is titleku, then to modify posts H1 that we can use the class name of the tag as follows:
TITLE {color: red; text-transform: uppercase}b. or can also use the name of the tag (h1) to
h1 {color: red; text-transform: uppercase}or it could be through its ID attrbut have seen h1 id = 'xxx' so its id attribute name xxx
#xxx {color: red; text-transform: uppercase}
css code to modify the site pages can be stored between the code on the structure of your blog template
...
???? css code
...
Actually CSS is the easiest script when compared with scripts or other programming languages, so you can easily decorate the pages of the site or your blog page, then you have to master CSS.
There are a lot of CSS techniques for modifying the site's pages, the example above is a simple example, which is obvious if you already know the techniques of CSS code that is easy to learn and more fun when practiced.
As recomendasi to learn CSS you can learn in a very complete tutorial W3School.com/css site for you as a beginner.
Also you can learn HTML tutorial also there w3school.com/html
have you learned on these sites until you understand.
how to modify your blog Alone
Once you understand how the CSS script to modify the html tag, it can be applied to your blog when you have the desire to modify the look of your blog page.The trick almost as a key point you must first understand the instructions CSS.
you might be a little confused how to modify the look of your blog, while when viewed template blog that has strukturkode so much, why can pusinng dong!.
might be a headache if you do not know how.
this tutorial I present for beginner bloggers who happen not understand how how to modify the look of the blog. I would love to know how.
Simple Techniques Tamplan how to modify your Blog?
Whatever the blog section that zoom you can see, it can be modified, for example menus, background, image, text, type text, text color, layout, etc., but you need to know name tag or attribute ID or attribute class of tag you want to modify.steps to modify your blog page is as follows:
Please open blog that you want to modify, for example for my blog personally:
example of the look of the blog above, I would modify the background color of the menu that originally ?? orange I would be modified into black .
The steps are as follows:
a , The first step, we have to pick out what tags are used by the look of the menu, we can see also the attributes of the class or attribute id used by the menu if there is one.
To find a tag used by the menu will definitely difficult if done manually, please say you are trying to access the template code to your blog you will definitely dizzy looking at the circuit code templates are so many.
the easiest way is to use the help of the browser, the browser now provides facilities that could used by developers. one of which is the facility inspect element,
b. Right-click on the page to see that you want to modify, then select the menu inspect elemet
as an example here I use mozilla firefox browser. zoom are like the image below:
By selecting the menu element inspection, facility inspection elements will help you to make it easier? obtain information on the name TAG used eleh a display (eg menu, logo color text, etc.) you want to modify and CSS script that is being used by the tag.
will appear inspection facilities elements as shown below:
there will be three parts of the facility inspection elements that might be used to modify the look of your blog design:
1. Tool Inspektor (to facilitate finding html tags you want to modify)
2. structure of the HTML window, displaying the web page html code.
3. CSS window, which shows the structure of the css script that compose the selected tag.
for modify the display, there are two ways, selecting a tag in the hTML structure of the window, then modify cssnya to see tapilan be temporary. or with the help of tool inspectors.
So you can easily select the appropriate tag in accordance with the display portion to be modified we'll use the Tool Inspector,
Please press tool inspectors, and then point at the display part blog those of you who want to modify.
for the above example, because I will change the display menu background then I'll take tool inspectors into a menu on the display of my blog then I click on it to see the html tags and CSS that make up tags. will look like the image below:
because I want to change the background color of the menu of my blog, then I point the tool inspector to the Home menu my blog, the menu will be selected , and there is information the size of the menu, please click if the selection is correct.
you will see information on the bagah fasilits inspek element of the TAG HTML for the menu and CSS is being used by the menu.
you will be shown? HTML tags are used on the menu, and also CSS script that is being used by HTML tags such,
In the HTML window
was known that the menu using the tag a , which is located inside the li tag with the attribute class = " dropdown ", and li tag located inside tag Nav with id = " navbarsecond "
In CSS WIndow
We can see a tag script css to the CSS section Window. The tag was known to be modified with CSS command:
#navbarsecond .dropdown ?? a {to modify the tag using #navbarsecond .dropdown ? ? a, accessed using the structure of the tag her parents first.
??? color: # fff;
??? font-size: 14px;
??? font-weight: normal;
??? padding: 5px 10px;
??? background-color: # ea5e00;
??? line-height: 1.2;
??? margin-bottom: 10px;
}
Because we're going to modify the background of the menu, then we just change at the background-color becomes: black or # 000
? please edit (double click on the css window) in line background-color: # ea5e00;
Then please change it to black or # 000. just as the illustration below:
Then press enter, then you will see the changes on the menu that originally orange to black, it looks like the image below:
Important:
Views above only works on memory alias is not permanent, if your blog is reloaded then zoom going back to the beginning as before.
the steps you should take before you apply the changes to the template of your blog, if your change according to what you want then you can directly apply it on your blog template.
Make changes to your blog template?
Once you see the changes that occur through the menu inspek element if the modifications you do already appeared to match the design you want, then the next for the change permanent for your blog you tempalte have to make changes to your blog.the steps are as follows:
a. Make sure you're signed in to your blogspot account
b. Activate by selecting the blog you want to modify
c. On the left side of the menu bar select menu templates> edit HTML untukmengaktifkan template editor.
d. Press CTRL + F to display the search mode
for css we modified earlier using the key #navbarsecond .dropdown ?? a, please find the text using
Once the text is found please change in the same section when you make modifications using the inspection element. namely to section
background-color: # .....
becomes
background-color: # 000
e. Keep your blog template.
If successful, the changes to the design of your blog template will be permanent.
Conclusion.
The above examples are just a simple illustration of how you can make modifications in the design of the look of your blog, actually a lot that you can do that is important you master the commands CSS and HTML, with mengusai command CSS you will be able to modify the appearance that includes layout and also coloring views of your blog in accordance with you want.Whatever flatform blog template that you use to modify the appearance and layout used theta is the CSS code, but it may be the way to put it might be a little berbeda.?
Such articles of basic technique to see how to modify the design of the blog , may be useful. and good luck.
0 Komentar