Basic techniques for modifying the appearance design of a blog for beginners
A web page be it a blog or website when you access it so that it appears on the browser page that you use (such as Mozilla Firefox, Google Chrome, Internet Explorer etc.) is generally composed of a combination of several web client scripts, the script can be understood and translated by the browser to display the site pages, these scripts are HTML scripts , CSS (Cascade style sheet) scripts and Javascript, these scripts actually collaborate with each other intentionally programmed in such a way that displays the site pages as desired by the owner of the site or blog.
Actually when you create or develop a professional blog or website page like a blog, in general there are two categories of scripts involved, client script and server script, client scripts are HTML, CSS and javascript while server scripts such as special language blog widgets (like code specifically that we often use on blogspot,), PHP scripts as commonly used in wordpress templates, ASP scripts, JSP etc.
Web Design
The difference between the two scripts lies in the location of the processor, the client script is only processed and translated by the browser, while the server script is processed and translated by the server machine which is a computer engine where the website or blog page script is placed, if the server reads the server script, the server will translate it into HTML script, if the server reads the client script (HTML CSS Javascript) then the server will read it but will not process it, the script processing results will be sent to the client computer via a browser in a bentyk script client and the script is translated by the browser that accesses it so generate website page views.
Get to know the scripts that make up the look of the blog page In this article I will explain how the basic techniques for modifying the appearance design of the blog, but before I explain at length you must first know the function of the scripts that make up the appearance of the blog page, including:
A. Server script
Server scripts will generally be translated by the server machine into client scripts, some examples of server scripts are as follows:
a. widget specific code blogspot , for example in blogspot (a framework that can only be understood by blogspot machine translators, this code will be processed in the blogspot engine and translated into a html script before being sent to the client)
b. PHP , an example commonly used in WordPress (wordpress uses a special framework with PHP scripts, with the wordpress framework you don’t need to develop web pages from scratch, because library is already provided by the wordpress framework itself)
c. etc. , depending on the blog template, you can use different programming languages.
B. Client Script.
a. CSS Script
The function of this script is to manage matters relating to the layout and modify the design of the display page of the site (coloring, images, etc.), how it works actually modifies the html tag, either through the name tag, id or clsss of certain html tags that you want to set the layout its location and want to be modified.
b. Javascript
The function of this script is to make the blog page look more interactive (when you give an action then react), for example when the page is clicked scroll itself, when the mouse is directed to a button, the color of the button changes etc, the way it works is similar to CSS that is modifying the html tag, either through the name of a specific html tag, id or classs tag.
c. HTML Script
This script functions as a foundation or cover that combines all the scripts used, consisting of codes in the form of tags or special commands that can be read by a web browser, the html script will wrap the css script, javascript and also the server script if any, all of which are wrapped by the script This HTML, is mandatory, meaning that at least the site pages that pay attention to the structure of good code must contain HTML scripts in it.
when you modify the blog template you will definitely find special codes that are placed between square brackets (), it is a tag
Tags are special codes that are generally wrapped between the characters “”, which usually consists of opening and closing tags, tag format is as follows:
< tag_name attribute_1 = 'fill attribute 1' attribute_2 = 'fill attribute2' attribute_N = 'fill attribute N'> contents nama_tag >
there are lots of html tag codes.
Example tags such as the body tag
tag and other tags.
Tags can have more than one attribute with different functions, exist to color, specify width etc., tags with other tags have different attributes, but there are special attributes that can be owned by all tags namely Attribute ID and CLASS, that attribute is usually used by CSS scripts and also Javascript to modify the tag both to set the layout of the tag and to decorate the tag.
How to design a blog using CSS
Here I will explain how to modify and design the appearance of the blog, when dealing with blog display design, the script involved is HTML and CSS scripts only. You can also involve Javascript to make the site pages more interactive, but here I will only focus more on HTML and CSS, oh yes here I will not be too long to explain what the HTML and CSS scripts are, but here I will explain just the procedure, if you understand you can develop it easily and in more detail.
How CSS Scripts Work
CSS scripts are scripts to manage the layout and decoration of web pages, which are decorated by CSS are HTML tags themselves.
So how does this css script work?
How the CSS Script works as well as applies to javascript is very simple, this secript will access the data contained in the HTML tag and then modify the HTML Tag through the data contained in the tag:
a. Can be through the Name tag.
b. can go through the Class Attributes that the tag has or
c. can through the ID attribute that the tag has.
So when you want to modify an HTML tag in a web page, then at least you have to know in advance the tag name, class attribute or Id attribute that is owned by the tag that you want to modify. if you already know the tag name or ID attribute or Class attribute that is owned by the tag you want to modify, then you can easily decorate and manage the layout of the tag in 1 of the 3 ways above (can be through the tag name, attribute id, or class attribute).
1. If the tag is decorated using the tag name then the command format is:
name_nag {commands_css}
if the tag is decorated through the name tag, then just use the name tag in front of it.2. If the tags are decorated through class Attributes, the command format is:
name_attribute_class {command_css}
If the tag is decorated via the class attribute, then the css command must start with “.” (read dot) or dot.3. If the tags are decorated through the Attribute ID, the format of the command is:
# nam3_attribute_id {command_css}
Inaget when we decorate a tag through the ID attribute, the CSS command to decode the tag must begin with the # sign (read: fence).
As an example:
Let’s say I have an html structure that I want to modify is as follows:
Basic technique of modifying the appearance of the blog
The html structure above if it is read by a browser will display a large bold font with H1 size:
Basic techniques to modify the appearance of the blog
For example, I want to give the text a blue color and the writing wants to be changed to all, remember that the design is the CSS script, it is wrong one way is to use CSS code as follows:
a. if using the class attribute (see the class attribute for h1 above is titleku [class=’titleku’]), it can be seen that the class attribute owned by the h1 tag above the name is titleku, then to modify the H1 text we can use the class name of the tag as follows:
title {color: red; text-transform: uppercase}
b. or you can also use the tag name (h1) to
h1 {color: red; text-transform: uppercase}
or it could be through the ID attrbut see h1 has id = ‘xxx’ so the name of the id attribute is xxx
# xxx {color: red; text-transform: uppercase}
css code to modify the site pages can be stored between the code
in the structure of your blog template
…
css-code
…
Actually CSS is the easiest script when compared to scripts or other programming languages, so you can easily decorate your site or blog page, then you must use CSS.
There are lots of CSS techniques for modifying site pages, the example above is just a simple example, which is clear if you already know that the CSS code technique is very easy to learn and fun when practiced.
As a recommendation for learning CSS you can learn on the site W3School.com/css Very complete tutorial for you as a beginner.
Also you can learn HTML tutorials there too w3school.com/html
Please learn on the site until you understand.
How to Modify Your Own Blog
After understanding how the CSS script works to modify the html tag, this can be applied to your blog when you have the desire to modify the appearance of your blog page.
The method is almost the same as the main key, you must first understand CSS instructions.
Maybe you will be a little confused how to modify the appearance of your blog, while if you see a blog template that has so many code structures, wow it can be confused!
It might get dizzy if you don’t know how.
I present this tutorial for novice bloggers who happen to not yet understand how to modify the appearance of the blog. I will tell you how.
Simple technique how to modify your Blog Tamplan?
Whatever part of the blog you can see, you can modify it, for example menu, background, image, text, type of writing, color of writing, layout etc., but you should know tag name or ID attribute or class attribute of the Tag you wish to modify.
The steps to modify your blog page are as follows:
Please open the blog display you want to modify, for example for my personal blog:
For example from the appearance of the blog above I will modify the background color of the menu originally colored orange I will modify it to black .
The steps are as follows:
a. The first step, we must find out what tags are used by the menu display, we can also see the class attribute or id attribute used by the menu if it exists.
To find the tags used by the menu will definitely be difficult if done manually, please just try to access your blog template code, you will definitely get dizzy seeing so many templates of code.
The easiest way is to use the help of a browser, the browser currently provides facilities that can be used by developers. one of them is the inspect element facility,
b. Right-click on the page view you want to modify, then select the inspect elemet menu
for example here I am using the Mozilla Firefox browser. it looks like the image below:
By selecting the element inspection menu, the element inspection facility will help you to make it easier to get information on the name of the TAG used by a display (eg menus, text color logos etc.) that you will modify and also the CSS script that is being used by the tag.
Element inspection facility display will appear as shown below:
There will be 3 parts of the element inspection facility which can later be used to modify the appearance of your blog design:
1. Inspector Tool (to make it easier to find the html tag you want to modify)
2. The structure of the HTML window, displaying the html code of the site page.
3. CSS window, which shows the structure of the css script that compiles the display of the selected tag.
To modify the display, there are two ways, select the tag in the html window structure, then modify the css to see the temporary display. or by using the help of the inspector tool.
To make it easy to choose the right tag according to the part of the display we want to modify we will use the Inspector Tool,
Please press the Inspector tool, then navigate to the part of your blog display that you want to modify.
For example above, because I will change the appearance of the background menu, I will direct the inspector tool to the menu on my blog display, then I click the menu to see the HTML tags and CSS that compose the tags. will look like the image below:
because I want to change the background color of my blog menu, then I point the inspector tool to the Home menu of my blog, the menu will be selected, and there is information on the size of the menu, please click if the selection is correct.
You will see information in the section on the inspect element features regarding the HTML TAG for the menu and also the CSS that is being used by the menu.
You will be shown the HTML tags used by the menu, and also the CSS scripts that are being used by these HTML tags,
In the HTML window section
it turns out that the menu uses the tag a , which is located inside the li tag with the class = “attribute dropdown “, and the li tag is located in the Nav tag with id =” navbarsecond ”
In CSS Window
We can see the css script for tag a in the CSS Window section. it turns out that the tag was modified with the CSS command:
# navbarsecond . dropdown a {
color: #fff;
font-size: 14px;
font-weight: normal;
padding: 5px 10px;
background-color: # ea5e00;
line-height: 1.2;
margin-bottom: 10px;
}
to modify the tag using # navbarsecond . dropdown a, accessed using the structure of the parent tag first.
Because we will modify the background of the menu, then we just need to change the background color to black or # 000
please edit (double click on the css window) in the line background-color: # ea5e00;
Then please change it to black or # 000. as illustrated below:
Then press enter, then you will see a change in the menu that was originally colored orange to black, looks like the picture below:
Urgent :
Display above only works on memory alias is not permanent, if your blog is refreshed then the display will return to the beginning as before.
You must take these steps before you apply changes to your blog template, if the changes you make are in accordance with what you want then you can immediately apply them to your blog template.
Make changes to your blog template
After you see the changes that occur through the element inspect menu if the modification that you make already seems to match the design you want, then in order to make the changes permanent for your blog, you must make changes to your blog’s tempalte.
The steps are as follows:
a. Make sure you are logged in your blogspot account
b. Activate it by selecting the blog you want to modify
c. On the left side menu bar select template menu> edit HTML to enable the template editor.
d. Press CTRL + F to display the search mode
because the css that we modified earlier uses a key # navbarsecond . dropdown a, please search using the text,
After the text is found, please change it in the same section when you make modifications using the inspection element. i.e. for the section
background-color: # …..
Becomes
background-color: # 000
e. Save your blog template.
If successful, changes to the design of your blog template will be permanent.
Conclusion.
The example above is just a simple illustration of how you can make modifications to your blog’s display design, in fact there is a lot you can do that is important that you master CSS and HTML commands, by using CSS commands you will be able to modify the appearance which includes the layout and also coloring your blog display in accordance with what you want.
Whatever blog template platform you use to modify the appearance and layout used is CSS code, but maybe the way to put it might be a little different.
Thus the article about Basic techniques for modifying the display design of the blog , may be useful. and good luck.
0 Response to "Basic techniques for modifying the appearance design of a blog for beginners"
Post a Comment