1. Remove Attribution (link below - Blogger Technologies)
   Find Attribution1 in the widget search blog template (list of widgets) and delete the code along with the section similar to the old Blogger template (see above 1).
2. Remove the link from the "Report Abuse" widget. This is the ReportAbuse1 widget. We find in the search by widgets:
   The whole code looks like this:
   

   
   
   
   
   

3. We check the blog post page with comments and remove links by analogy with the old blog templates (see above - point 8).
4. Remove links from blog posts that are embedded in post pictures (see point 5).

How to create an image gallery You can also test my gallery at the end of this article and add your own links. It is welcomed 😉 Ivanova Natalya

We have released a new book, “Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand”.

A site's source code is a collection of HTML markup, CSS styles, and JavaScript that a browser receives from a web server.

More videos on our channel - learn internet marketing with SEMANTICA

It can be compared to a set of commands given to soldiers by the commander. Imagine that the audience cannot see or hear the boss. From their point of view, the military independently performs actions. In our case, the commander is the browser, the commands are the source code, and the marching soldiers are the end result.

The site is stored on a web server that sends the page at the request of the user. A request is typing a URL in an address bar, clicking a link, or clicking a submit button on a form. It doesn't matter what language the web pages are written in, whether they include code. The end result of any server-side algorithm is a set of html tags and text.
The source code of a page is a dataset that includes:

• html markup;
• style sheet or file link;
• programs written in JavaScript or links to files with code.

These three sections are handled by the browser. For the server, this is simply text that needs to be sent in response to a request.

Why we might need to study the source code

Everything that we see, we can analyze and apply to solve certain problems that arise in the course of working with the site, especially when optimizing it. By looking at the source code, we can:

• See the meta tags of your own or someone else's site to analyze them.
• See the presence or absence of certain elements on the site: counters, identification codes in various systems, certain scripts, and more.
• Find out the parameters of the elements: sizes, colors, fonts.
• Find the path to photos and other items on the page.
• Explore links from the page.
• Find problems with the code that interfere with the process of website optimization: styles, scripts, invalid code not included in separate files.

These are basic features, but in fact, by knowing how to read the code, you can learn a lot more about the page.

How to view the source code of the site

Completely in the form in which it is posted on the server, this cannot be done from the browser. But you can see all the markup by right-clicking on the page. Hereinafter, using the example of Google Chrome.

We select the option "View page code" and get the full listing in a separate tab.

It's just text that will have to be parsed to understand. But you can get interactive code using the developer tools.

How to find the source code of a site page

Click on the menu icon in the browser. Most often it is on the right and looks like three dots or stripes.

In the additional tools section, select "Developer Tools".

A window will open showing the active state of the code. This means that when you click on the markup, the element style will be displayed next to it, and the selected blocks will be highlighted on the page.

In the "Source" tab, you can view the content of some files: scripts, fonts, images.

Checking the site certificate is available in the "Security" tab.

The "Audits" tab will help to check the resource posted on the hosting.

If the location of the panel to the right is inconvenient, you can click three dots and change it by selecting the desired item.

How to view meta tags

Every html document includes structure tags. Here are some of them:

1. Html - whole document.
2. Head - section of service headers.
3. Title - page title (displayed on the tab).
4. Body - the body of the document.
5. H1-H6 - headers of the page text.
6. Article - article.
7. Section - section.
8. Menu - menu.
9. Div - block.
10. Span is a string.
11. P - paragraph.
12. Table - a table.

Elements are intended for logical delimitation of sections on the page; if necessary, they are styled. They contain text that is somehow visible on the page. But the Head tag contains service information. Meta tags are used to indicate it. Everything that is written in them is intended for the server and search engines.

It is impossible to find out their contents in any other way.

Let's pay attention to the Link tag. With its help, links to external include files are specified. If desired, you can see the contents and save to disk. To do this, hover the pointer over the address and press RMB. Select "Open in new Tab".

The specified file will open in a new tab and can be viewed or saved.

How to view the source code of a page for debugging a script

In this case, it is most convenient to open the page on the local machine. If you only need to fix the markup, styles and scripts, then you can do it right from the folder. The html code is viewed in the same way. However, JavaScript code errors can be seen in the "Console" tab. It shows a description of the error and the line number on which it occurred.

The syntax can be seen directly in the code. The "Source" tab is intended for this.

How to view the code of a specific item

For large pages with a lot of elements, it is difficult to find the code you want in all the markup. In this case, you should use a special command of the context menu. Hover the mouse over the fragment and press RMB. Let's select the "View Code" command.

The same window will open, but with focus on the selected object.

Summary

We told you what the page source code is. It is enough to master basic knowledge of HTML and CSS, and using convenient developer tools, you can debug your own html-documents.

Browsing the resource code on the Internet will allow you to learn not only from your own experience, but also use real working examples. And for seo-specialists, meta tags will be useful, the information in which can say a lot about the site.

The size and color of some of the important elements of a blog, such as the title of the blog or post, the more tag, and the like. I searched for the necessary code manually, experimenting with the test domain, on the basis of which the article was later written.

And recently I needed to change the color of the links. Having shoveled a bunch of literature on this issue, I realized a simple thing: everyone gives examples from their own templates, but we all have different templates and it's good if the code from the example is even a little bit similar: I’m not whining, I’ll still find it by rolling - by the method poke.

The number did not pass with the reference code. All pointed completely different paths. I wondered if there was a simple and precise instrument, how to find the required html code on any site. Many bloggers, even with experience, find it difficult to slightly tweak the template. There is nothing wrong with that, because everyone has their own interests and goals for creating a website.

If you want to make small changes to the template, for example change any title, title of articles and headings, color and size of fonts and links, it is usually sufficient to learn the simple principle discussed in this article. But there are also complex cases that require either a deeper study of html and css, or the help of a specialist.

One day a friend asked me to find out where to change the color of the heading bar in his template. Uploaded the topic to the test subdomain. The settings for this element were not stored in style.css, but in another file, so the person could not find it.

How to find and change the html and css code of the site

If you do not like long articles, for you at the end of the article a video tutorial that tells how you can see the html code of a site using Notepad ++ and make changes to the design of any template using an example of how to change the font color. There are other subtleties of handling a blog in the video. And for those who are closer and clearer to the text, below is a detailed analysis of the topic with screenshots.
httpv: //youtu.be/uIlVvwCt2ho

Terms and concepts

It would be more accurate to call the article “ How to find css code“, But I decided to stick with the“ wrong ”name, because basically the answer to this question is searched for in html. CSS and HTML are very different things, although they are two parts of the same system. There are many technical articles on the Internet, it will be enough for us here to understand that:

• Html- is responsible for the structure of the site (what follows what, in what order, etc.). This is the foundation on which the site is built. If we compare it with a house, then this is its layout, the arrangement of rooms.
• CSS- is responsible for the design (what fonts, sizes, colors, and the like). This is the general style of the house and the style of its individual rooms: what kind of wallpaper will be, lamps, curtains, furniture. Therefore, the document in which the css codes, called a "style sheet"

And if you wondered how to change, for example, the color of the site's title, the size of the font in the texts or the color of the titles in the sidebar, then you need to look for all this in the CSS stylesheet. This is the only thing that is worth understanding to begin with in order to make changes to the code yourself.

I like to turn the complex into the simple. I remember a long time ago, when I had my first car, it was very old, the wiring was rotten, fuses often burned out, and I pulled it in tow every time to the service station. Imagine how much money was thrown away, despite the fact that an independent replacement, as it turned out, costs a penny.

Once I looked at what the master was doing. I still don't know how the fuse works. But I know where to change it). I wouldn't fix the motor myself, and it's not difficult to replace the fuse. It's the same with websites.

If you do not want to become a programmer, then there is no need for deep understanding of programming. It is enough to clearly understand what is intended for what, where to look for it and how to change it. It is better to change what is possible, and leave the rest to specialists. The article on has a helpful link to this topic.

Do I need to be an expert in everything

In seo blogs, there are often discussions about whether a newbie needs to understand deeply in html, or even better - learn how to write websites yourself, so that everything is unique .. Well, I don’t know - to each his own, and then who is closer to someone. I am interested a little more, so now I am additionally learning from Vladimir. In November of this year, Vladimir opened his own blog. His blog is made on the simplest, free template, he only slightly modified it for himself.

After 10 days of existence, the blog took 104th place in the ranking of all sites on the Runet with a traffic of about 1.5 thousand people per day. In 10 days. So what's the deal? Vladimir is well versed in html, can order and buy a unique template. So you should understand that the secret lies not in the templates, but in the usefulness of the information.

Where is the html code hiding

Sorry for the digression, back to our codes). Let's say you want to change the font color of a blog title. Let's consider it on the example of my test site.

1. Opening the site in the Google Chrome browser (if you don't already use it, install it - it is well-sharpened for working with websites, it has a lot of built-in tools).
2. Hover the mouse cursor over the element that we are going to change ... In this case, the name of the blog. Click on it with the "right" mouse and in the window that appears, select VIEW ELEMENT CODE.

IMPORTANT: do not confuse with VIEWING PAGE CODE! We don't need the entire page now, just a single element.

Click on it - a code view window appears at the bottom of the browser:

The line of code that we are changing is highlighted in red.

But the area highlighted in blue contains what we are looking for. This is where you can find the exact (and not an approximate) line of code responsible for fonts, color, size, emphasis, and more. This way you can find out ANY code of any element of any template.

Find the required line in the block highlighted in blue. There is a slider on the right, you can scroll and find the desired line.

General principle, where is what is looked for:

Font name - in line FONT FAMILY

Font size - in line FONT SIZE

Font color - in line COLOR

There are three main lines that change the name, size and font color of any element. On the right, in the style css line, the position of the line in the document is given. If you need to change some other element (for example, you need to find out where the line is located, in which you can change the color of the menu bar or the color of links), everything is done in exactly the same way.

ATTENTION:

the line that we will copy is highlighted in red in the figure,

to later find it in the stylesheet.

4. Copy the line... Since in this example we want to change the color of the site name, I copy the line in the second picture highlighted with a red rectangle. In my template, she is responsible for changing the color of the site name:

#header h1 a, #header h1 a: visited (

Find the required line in the "style sheet (style.css)" file. This is done already in the admin panel. I strongly ask, while there is no confidence and complete understanding, to conduct all experiments on a test subdomain in order to exclude.

So, go to the admin panel: CONSOLE - APPEARANCE - EDITOR. In the right sidebar we find the STYLE TABLE file (STYLE.CSS), open it.

Now open the search bar with the CTRL + F keys: an empty window line will appear in the upper window. We paste into it the line that we copied in step 4.

And you will see how this line is highlighted in the style sheet (in the picture - in orange):

We make a change to the element. In our case, we change the font color, so we substitute another value in the COLOR line - the color we want. In the example, the color is black, its value:

You can choose a color in any service of palettes of web colors: type in the search engine "Palette of web colors" and pick the one you want. Choose a color, copy its digital value and carefully substitute it for the old one. then click UPDATE FILE and go to see what happened.

If the changes were not displayed, in the past hour and then go to the page again - this time everything should be displayed.

It is described for a long time, but in practice everything is done quickly, especially when the initial skill appears.

In more detail, how to change certain elements:

That's all for today, I will no longer torment you with codes. I hope that now you yourself can easily find and change any element of the html code, or rather, the css code - experts will forgive me for the simplification. And if you don't understand, visit the page all the same. Don't waste time on nonsense.

I suggest watching Artem Abramovich's video on how to search and find in any theme / template, for any engine (wordpress, joomla, etc.) any word or element and replace it with what you need:

Please share if you liked:

You may be interested in learning more:

If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 4.1 shows the code for a simple document containing basic tags.

Example 4.1. Source code of the web page

Heading

First paragraph.

Second paragraph.

Copy the contents of this example and save it in the c: \ www \ folder as example41.html. After that, launch the browser and open the file through the menu item File> Open File (Ctrl + O)... In the Select Document dialog box, specify the file example41.html. The web page shown in Figure 4 will open in your browser. 4.1.

Rice. 4.1. Example execution result

Elementis intended to indicate the type of the current document - DTD (document type definition, document type description). This is necessary for the browser to understand how to interpret the current web page, because HTML exists in several versions, and there is also XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs from it in syntax. So that the browser does not "get confused" and understands according to what standard to display the web page and it is necessary to set in the first line of code .

There are several types, they differ depending on the version of HTML they are targeting. Table 4.1. lists the main types of documents with their descriptions.

The difference between strict and transient document descriptions is the different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving. Transitional HTML is more "relaxed" about some flaws in the code, so this type is preferable in certain cases.

For example, in strict HTML and XHTML, the tag

Tag