Dit nieuwste artikel is geschreven om dit onder de aandacht te brengen actuele informatie over het verwijderen van onnodige links uit Blogspot-sjablonen en uit nieuwe Blogger-thema's. Zoals je weet zijn er in 2018 wijzigingen aangebracht in de Blogger-codes, waardoor veel acties met de code op een nieuwe manier moeten worden uitgevoerd. Bovendien zijn er nieuwe onderwerpen verschenen die anders zijn gevormd. In verband met deze wijzigingen zullen we het onderwerp verwijderen van links bespreken.
U kunt uw blog controleren op de aanwezigheid van externe links op de services https://pr-cy.ru/link_extractor/ en https://seolik.ru/links. Vergeet niet dat je niet alleen de hoofdpagina van de blog moet controleren, maar ook de berichtenpagina en de pagina. Grote hoeveelheid Externe links die openstaan ​​voor indexering worden voorkomen.

Links verwijderen uit de oude standaard Blogger-sjabloon Gebruik de eenvoudige sjabloon als voorbeeld.
Dergelijke sjablonen geven de meeste externe links. Toen ik op mijn testblog een eenvoudig thema installeerde, controleerde en vond ik 25 externe links naar startpagina, waarvan er 14 zijn geïndexeerd.
Ik herinner u eraan dat u dit eerst moet doen voordat u wijzigingen aanbrengt in de sjablooncode reservekopie!

Link naar Blogger verwijderen - https://www.blogger.com/. Deze link bevindt zich in de Attribution-widget. Op het tabblad ‘Blogontwerp’ wordt het weergegeven als het attributiegadget en . Om het te verwijderen, ga naar het tabblad “Thema” -> HTML bewerken. Door naar widgets te zoeken (lijst met widgets), vinden we Attribution1 en verwijderen we alle code samen met het voettekstgedeelte waarin deze is ingesloten. Zo ziet de verwijderde code er samengevouwen uit:


En hier is de volledige code:














Sla de wijzigingen op en controleer de blog op Attributie.

Je hebt natuurlijk de ‘Moersleutel en schroevendraaier’-pictogrammen op je blog gezien waarmee je snel widgets kunt bewerken. Elk dergelijk pictogram heeft een externe link naar Blogger. Ze zijn nu gesloten getagged met nofollow, maar je moet ze nog steeds kwijtraken. U bewerkt widgets op het tabblad Ontwerpen.
Hier is een onvolledige lijst met links die zijn gecodeerd in de moersleutelpictogrammen (de blog-ID is van jou)
- HTML1-widget: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
- HTML2-widget http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
- Blogarchief: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
- Blogsnelkoppelingen: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
- Populaire berichten: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
Het is gemakkelijk om van al deze links af te komen. Zoek de tag in uw blogsjabloon. Het verschijnt net zo vaak als er widgets op je blog staan. Verwijder alle exemplaren van de tag.

Koppelingen verwijderen naar snel bewerken blogberichten (“Potlood”-pictogram). Maakt het gemakkelijker om berichten te bewerken, maar vormt een bedreiging als een externe link zoals: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=potlood
Hoe te verwijderen:
Methode 1. Bewerk op het tabblad Ontwerpen het element ‘Blogposts’ en schakel het selectievakje ‘Snelle bewerking weergeven’ uit.
Methode 2. Zoek de tag in uw blogsjabloon en verwijder deze. Sla uw wijzigingen op en controleer uw blog op het pictogram en de link.

Navigatiebalk verwijderen. Zoek naar widgets in html-sjabloon blog Navbar1 en verwijder alle code samen met de sectie.

Namelijk:

functie setAttributeOnload(object, attribuut, val) (
if(window.addEventListener) (
window.addEventListener("laden",
function())(object = val; ), false);
) anders (
window.attachEvent("onload", function())(object = val; ));
}
}




gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() (
if (gapi.iframes && gapi.iframes.getContext) (
gapi.iframes.getContext().openChild((
url: "https://www.blogger.com/navbar.g?targetBlogID\x3d1490203873741752013\x26blogName\x3dnew\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dLIGHT\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://m- ynewblog.blogspot.com /search\x26blogLocale\x3dru\x26v\x3d2\x26homepageUrl\x3dhttps://m-ynewblog.blogspot.com/\x26vt\x3d-3989465016614688571",
waarbij: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});

(functie() (
var script = document.createElement("script");
script.type = "tekst/javascript";
script.src = "//pagead2.googlesyndication.com/pagead/js/google_top_exp.js";
var head = document.getElementsByTagName("head");
als (hoofd) (
hoofd.appendChild(script);
}})();



Nu biedt de blog Navbar geen indexeerbare externe links, maar ik geloof dat dit het geval is extra onderdeel, die geen functionele belasting draagt, en het is beter om deze te verwijderen.

Verwijderen externe links naar de afbeeldingen. Wanneer u afbeeldingen naar een blogpost uploadt, wordt er automatisch een link in de afbeelding ingesloten. Om dergelijke links te verwijderen, moet u alle blogberichten bewerken. In de modus “Beeld” en vervolgens op het pictogram “Link”. Als de afbeelding geen externe link bevat, is het pictogram 'Link' niet actief wanneer u op de foto in de berichteditor klikt (het pictogram is niet gemarkeerd).

Verwijder de link naar het profiel van de blogauteur. Verwijder de blogauteur uit het bericht. Om dit te doen, zoekt u de ware code en schrijft u false in plaats van true. Het zal vals blijken

Sluit de link van de widget “ ” van indexering met de nofollow-tag. Als je de ‘profiel’-widget op je blog gebruikt, zoek dan door snel zoeken voor widgets in de blogsjabloon, gadgetcode Profiel1. U moet de widgetcode bewerken, waarbij u rel=’author’ op twee plaatsen vervangt door rel=’nofollow’ en rel=’nofollow’ toevoegt aan twee links. Je zou zoiets als de schermafbeelding moeten krijgen:

Gemaakt met behulp van een bewerkingsvoorbeeld Google-profiel Plus. Ik herinner je eraan Google Plus zal op 2 april 2019 worden geliquideerd. Dienovereenkomstig moet u na deze datum andere wijzigingen aanbrengen in de widgetcode ‘Over mij’.

We controleren op de aanwezigheid van externe links op elke pagina van een Blogspot-bericht waarop opmerkingen zijn geplaatst. Zoek en verwijder de code in de blogsjabloon:

Volg in Bloginstellingen het pad Bloginstellingen -> Overige -> Sitefeed -> Blogfeed toestaan ​​en pas de volgende instellingen toe:

Verwijder externe links uit de nieuwe standaard Blogger-sjabloon. Gebruik het Notable-thema als voorbeeld

Attributie verwijderen (link hieronder – Blogger-technologieën)
We vinden Attribution1 in de blogsjabloon voor zoeken op widgets (lijst met widgets) en verwijderen de code samen met de sectie, vergelijkbaar met de oude Blogger-sjabloon (zie hierboven 1).

We verwijderen de link uit de widget ‘Misbruik melden’. Dit is de ReportAbuse1-widget. We vinden bij het zoeken naar widgets:
De volledige code ziet er als volgt uit:

We controleren de blogpostpagina met opmerkingen en verwijderen links naar analogie met de oude blogsjablonen (zie hierboven - punt 8).

Wij verwijderen links uit blogberichten die zijn ingesloten in de afbeeldingen van berichten (zie punt 5).

Na verloop van tijd hebben beginnende webmasters een logische vraag: hoe kunnen ze de kleur en stijl van de kopteksten veranderen, volume toevoegen en het lettertype van dezelfde kopteksten groter maken. Dit verwart veel beginners, omdat het niet duidelijk is wat en waar ze moeten kijken.

Natuurlijk kun je al deze fijne kneepjes van het bouwen van websites diepgaand bestuderen, maar hoewel er als zodanig geen vooruitzichten aan de horizon zijn, rijst er een andere logische vraag: heb je het nodig?

Het zal u een behoorlijke hoeveelheid tijd kosten om de basisprincipes van webmastering onder de knie te krijgen. En tijd is geld. Als u dus kleine aanpassingen aan sommige elementen van de sjabloon nodig heeft en niet weet hoe u de benodigde HTML-code kunt vinden, ongeacht het siteplatform, dan is dit artikel iets voor u.

HTML en CSS - relatie

Eigenlijk zou het onderwerp zoiets moeten heten als: “Hoe CSS-code bewerken.” Nou, oké, we beginnen met HTML en eindigen met CSS. Het punt is dat als het nodig is om de kleur of het lettertype van de site te wijzigen, broodkruimels naar CSS-bestanden leiden.

Laten we eerst deze twee concepten definiëren:

- HTML-code is de basis waarop de site is gemaakt. Dankzij dit begrijpt de browser welke elementen en in welke volgorde op een bepaalde pagina moeten worden weergegeven.

- CSS-code is een programmeertaal die verantwoordelijk is voor het uiterlijk van webpagina's. Het is deze code die bewerkbaar moet zijn als u het uiterlijk van de site wilt wijzigen.

Het wordt duidelijk dat als je bijvoorbeeld de kleur van de titel in een artikel of in menu-items moet wijzigen, een van de CSS-bestanden moet worden bewerkt. Dit is precies wat u moet begrijpen in de beginfase van het zelf aanbrengen van wijzigingen.

Waar is de html-code van de pagina?

Ik zal het feit niet verbergen dat ik aan het begin van mijn kennismaking met de principes van het bouwen van websites niet alleen een theepot was, maar een echte roestige samovar. Daarom zul jij, net als ik, zeker slagen.

En dus, als u terugkeert naar het onderwerp van het wijzigen van de paginacode, moet u eerst naar de html-code kijken. Ik zal het je vertellen met de Opera-browser als voorbeeld, aangezien ik er voornamelijk in werk. Ik haast me om u te informeren dat als u liever een andere browser gebruikt, u deze pagina niet onmiddellijk moet sluiten, aangezien het verificatieprincipe, ongeacht de browser, vrijwel identiek is.

Hoe u de koptekststijl kunt wijzigen

In een van de vorige artikelen had ik het over “Hoe een link uit de Joomla-header te verwijderen”, en vandaag zul je leren hoe je dit hele ding kunt corrigeren en aantrekkelijker kunt maken.
Stel dat we de kleur en grootte van de artikeltitel moeten wijzigen. Om dit te doen, klikt u er met de linkermuisknop op en selecteert u “Elementcode bekijken” in het venster dat wordt geopend. Waarna aan de linkerkant van het scherm fantastische hiërogliefen onder onze aandacht verschijnen, met behulp waarvan we zullen bepalen waar de hond begraven ligt. Op deze manier kunt u vrijwel elk element van de sjabloon bekijken en corrigeren.

Bovenaan heb ik de HTML-code gemarkeerd die verantwoordelijk is voor het weergeven van de h1-header. Standaard wordt dit gemarkeerd bij het controleren grijze achtergrond. Ach, daar was het voor algemene informatie. We moeten aandacht besteden aan de onderkant van de schermafbeelding, waar de scripts staan ​​die verantwoordelijk zijn voor het uitvoeren van CSS-stijlen. Ik wil je meteen waarschuwen dat, afhankelijk van de sjabloon, de naam CSS-bestand kan variëren, maar meestal is het style.css of template.css.

En dus hebben we een besluit genomen over het bestand, maar hoe komen we erachter waar het is? Het is heel eenvoudig, u hoeft alleen maar de muiscursor over de locatie te bewegen rechterkant het woord style.css, waarna het pad naar het bestand ernaast wordt weergegeven. Tegelijkertijd wordt hier ook de lijn aangegeven die we moeten corrigeren. Zoals je op de afbeelding kunt zien, is dit de eerste regel.

Belangrijk punt!

Voordat u wijzigingen aanbrengt, moet u als het ware een reservekopie van de site maken, voor het geval dat

Enkele CSS-eigenschappen Hieronder geef ik enkele eigenschappen waarmee je kunt toevoegen bepaalde veranderingen

en experimenteer met stijlen.

Lettergrootte – wijzig de tekstgrootte.

Tekstversiering – afhankelijk van de opdracht omvat dit het doorhalen en onderstrepen van tekst, evenals het markeren met lijnen.

Lettertypefamilie – lettertypefamilie.

Lettertype-dikte – selectie.

Kleur – tekstkleur. Als er na de aanpassing niets is veranderd, leeg dan de cache van uw browser. Zoals je kunt zien, om te veranderen verschijning

headers en vernieuw het siteontwerp, u hoeft alleen de CSS-code aan te passen en de html-code niet te wijzigen.

Bedankt voor uw aandacht en tot ziens op de pagina's van Stimylrosta. Gevonden in de tekst grammaticale fout

? Meld dit dan bij de beheerder: selecteer de tekst en druk op de sneltoetscombinatie Ctrl+Enter Wij hebben vrijgelaten nieuw boek "Contentmarketing in sociale netwerken

: Hoe je in de hoofden van je abonnees kunt kruipen en ze verliefd kunt maken op je merk.”

Abonneren De broncode van de site is een combinatie van HTML-opmaak, CSS-stijlen en JavaScript-scripts

, die de browser ontvangt van de webserver.

Meer video's op ons kanaal - leer internetmarketing met SEMANTICA Het kan worden vergeleken met een reeks bevelen die door een commandant aan soldaten worden gegeven. Stel je voor dat het publiek de baas niet ziet of hoort. Vanuit hun oogpunt voert het leger zelfstandig acties uit. In ons geval is de commandant de browser, de commando's zijn dat broncode

, en marcherende soldaten zijn het eindresultaat. De site wordt opgeslagen op een webserver, die de pagina op verzoek van de gebruiker verzendt. Een verzoek is het typen van een URL in de adresbalk, het klikken op een link of het klikken op een verzendknop op een formulier. Het maakt niet uit in welke taal de webpagina's zijn geschreven, of ze deze nu bevatten. Het eindresultaat van elk server-side algoritme is een set HTML-tags en tekst.
De paginabroncode is een set gegevens die het volgende omvat:

• html-opmaak;
• stylesheet of bestandslink;
• programma's geschreven in JavaScript of links naar bestanden met code.

Deze drie secties worden door de browser verwerkt. Voor de server is dit simpelweg de tekst die moet worden verzonden als reactie op het verzoek.

Waarom we misschien de broncode moeten bestuderen

Alles wat we zien, kunnen we analyseren en toepassen om bepaalde problemen op te lossen die zich voordoen tijdens het werken met de site, vooral bij het optimaliseren ervan. Door naar de broncode te kijken, kunnen we:

• Bekijk de metatags van uw site of die van iemand anders om deze te analyseren.
• Zie de aan- of afwezigheid van bepaalde elementen op de site: tellers, identificatiecodes in diverse systemen, bepaalde scripts en andere dingen.
• Ontdek de parameters van de elementen: maten, kleuren, lettertypen.
• Vind het pad naar foto's en andere elementen op de pagina.
• Verken links op de pagina.
• Vind problemen met de code die het proces van website-optimalisatie verstoren: die niet worden behandeld in aparte bestanden stijlen, scripts, ongeldige code.

Dit zijn de basisfuncties, maar door de code te kunnen lezen, kun je in feite veel meer over de pagina te weten komen.

Hoe u de broncode van een site kunt bekijken

Het zal niet mogelijk zijn om dit volledig te doen in de vorm waarin het vanuit de browser op de server wordt geplaatst. Maar u kunt alle markeringen zien door met de rechtermuisknop op de pagina te klikken. Hier en verderop Google-voorbeeld Chroom.

Selecteer de optie ‘Paginacode bekijken’ en bekijk de volledige lijst op een apart tabblad.

Het is gewoon tekst die je moet analyseren om te begrijpen. Maar u kunt interactieve code verkrijgen met behulp van de ontwikkelaarstools.

Hoe u de broncode van een websitepagina kunt vinden

Klik op het menupictogram in de browser. Meestal bevindt het zich aan de rechterkant en ziet het eruit als drie stippen of strepen.

In de sectie extra gereedschap selecteer "Ontwikkelaarstools".

Er wordt een venster geopend met de actieve status van de code. Dit betekent dat wanneer u op de markering klikt, de elementstijl ernaast verschijnt en de geselecteerde blokken op de pagina worden gemarkeerd.

Op het tabblad “Bron” kunt u de inhoud van sommige bestanden bekijken: scripts, lettertypen, afbeeldingen.

Op het tabblad ‘Beveiliging’ kunt u het certificaat van de site controleren.

Op het tabblad ‘Audits’ kunt u de bron controleren die op de hosting is geplaatst.

Als de locatie van het paneel aan de rechterkant lastig is, kunt u op de drie stippen klikken en deze wijzigen door het gewenste item te selecteren.

Hoe u metatags kunt bekijken

Elk HTML-document bevat structuurtags. Hier zijn er enkele:

Html – het hele document.

Hoofd – sectie van serviceheaders.

Titel – paginatitel (weergegeven op het tabblad).

Hoofdtekst – de hoofdtekst van het document.

H1-H6 – paginatekstkoppen.

Artikel – artikel.

Sectie - sectie.

Menu – menu.

Div – blok.

Spanwijdte – snaar.

P – paragraaf.

Tafel – tafel.

Elementen zijn ontworpen om secties op een pagina logisch af te bakenen; ze zijn ontworpen met behulp van stijlen. Ze bevatten tekst die op de een of andere manier zichtbaar is op de pagina. Maar binnen tag Hoofd er is service-informatie. Om dit aan te geven worden metatags gebruikt. Alles wat erin staat, is bedoeld voor de server en zoekmachines.

De inhoud ervan kan op geen enkele andere manier worden achterhaald.

Laten we aandacht besteden aan de Link-tag. Met zijn hulp worden links naar externe opgenomen bestanden gespecificeerd. Indien gewenst kunt u de inhoud bekijken en op schijf opslaan. Om dit te doen, verplaatst u de aanwijzer naar het adres en drukt u op RMB. Selecteer "Openen in nieuw tabblad".

Wordt geopend in een nieuw tabblad opgegeven bestand, die u kunt bekijken of opslaan.

Hoe u de broncode van een pagina kunt bekijken om fouten in een script te debuggen

In dit geval is het het handigst om de pagina te openen lokale machine. Als u alleen opmaak, stijlen en scripts hoeft te corrigeren, kunt u dit rechtstreeks vanuit de map doen. De HTML-code wordt op dezelfde manier bekeken. Hier zijn de fouten JavaScript-code is te zien op het tabblad “Console”. Hier ziet u de beschrijving van de fout en het regelnummer waar deze is opgetreden.

De syntaxis is direct in de code te zien. Dit is waar het tabblad ‘Bron’ voor is.

Hoe u de code van een specifiek element kunt bekijken

Voor grote pagina's Met een groot aantal elementen zijn moeilijk te vinden vereiste code gedurende de hele opmaak. In dit geval moet u gebruiken speciaal elftal contextmenu. Beweeg de muis over het fragment en druk op RMB. Selecteer de opdracht ‘Code bekijken’.

Hetzelfde venster wordt geopend, maar met de focus op het geselecteerde object.

Cv

We hebben je verteld wat de broncode van de pagina is. Het is voldoende om de basiskennis van HTML en CSS onder de knie te krijgen en te gebruiken handig gereedschap ontwikkelaar, kunt u uw eigen HTML-documenten debuggen.

Door de broncode op internet te bekijken, kunt u niet alleen van leren eigen ervaring, maar gebruik ook echte werkvoorbeelden. En voor SEO-specialisten zullen metatags nuttig zijn, waarvan de informatie veel over de site kan vertellen.

Ctrl + U Hoe bekijk ik de broncode van een element?

Klik met de rechtermuisknop op het gewenste pagina-element.

Google Chrome: “Bekijk elementcode”

Opera: “Inspecteer element”

FireFox: “Element analyseren”

Zoek in andere browsers naar een menu-item met een vergelijkbare betekenis.

Hallo allemaal!

Ik heb het hele punt vooral aan het begin van het artikel uiteengezet, voor degenen die op zoek zijn naar een snel antwoord.

De informatie is misschien bij velen bekend, maar aangezien ik schrijf voor beginnende bloggers, webprogrammeurs en andere goudzoekers, is dit referentieartikel een must-have.

In de toekomst zul je zeker de broncode van pagina's en individuele elementen bestuderen.

Laten we eens kijken specifiek voorbeeld hoe u de broncode van een pagina kunt bekijken.

We willen bijvoorbeeld zien wat trefwoorden(trefwoorden) worden gebruikt specifieke pagina. We gaan naar de webpagina waarin we geïnteresseerd zijn en drukken op Ctrl+U. De broncode van deze pagina wordt geopend in een apart venster of op een apart tabblad. Druk op Ctrl+F om naar een codefragment te zoeken. IN in dit geval typ het woord "in het zoekvak" trefwoorden". Je wordt automatisch doorgestuurd naar een stukje code met deze metatag en het gezochte woord wordt gemarkeerd.

Naar analogie kun je andere codefragmenten zoeken en bestuderen.

Het bekijken van de gehele broncode van een pagina is in de meeste gevallen niet erg handig, waardoor het mogelijk is om de code in alle browsers te bekijken individueel onderdeel of fragmenteren.

Laten we een specifiek voorbeeld gebruiken van het bekijken van de code van een element. Laten we bijvoorbeeld eens kijken of de link dat wel heeft nofollow-attribuut. Klik klik met de rechtermuisknop muis op de link waarin we geïnteresseerd zijn en in de vervolgkeuzelijst contextmenu Klik met de linkermuisknop op het item “Elementcode bekijken” of iets dergelijks (afhankelijk van uw browser). Hieronder, in een speciaal venster voor codeanalyse, krijgen we iets soortgelijks.

We zien dat de linkcode rel=”nofollow” bevat. Dit betekent dat PR niet via deze link zal ‘lekken’. We zullen hier in de volgende artikelen meer in detail over praten. Het belangrijkste is nu dat je nu weet hoe je de broncode van de pagina en de broncode van een afzonderlijk element kunt bekijken.

Grootte, kleur van sommige belangrijke elementen blog - zoals de titel van een blog of bericht, meer label en dergelijke. Ik zocht handmatig naar de benodigde code, experimenterend met het testdomein, op basis waarvan later het artikel werd geschreven.

En onlangs moest ik de kleur van links veranderen. Nadat ik een heleboel literatuur over dit onderwerp had doorgenomen, besefte ik het simpel ding: iedereen geeft voorbeelden van eigen sjablonen, maar we hebben allemaal verschillende sjablonen, en het is goed als de code uit het voorbeeld op zijn minst een beetje op elkaar lijkt: zonder te zeuren, zal ik hem nog steeds vinden door te zoeken - willekeurig.

Het nummer werkte niet met de linkcode. Iedereen wees totaal verschillende paden aan. Ik vroeg me af of er een eenvoudig en accuraat hulpmiddel was om de vereiste html-code op een site te vinden.

Veel bloggers hebben, zelfs met ervaring, moeite met kleine aanpassingen aan de sjabloon. Daar is niets mis mee, want iedereen heeft zijn eigen interesses en doelen bij het maken van een website. Als u kleine wijzigingen in de sjabloon wilt aanbrengen, bijvoorbeeld een kop, de naam van artikelen en secties, de kleur en grootte van lettertypen en links wilt wijzigen, is het meestal voldoende om te leren eenvoudig principe , die in dit artikel wordt besproken. Maar er zijn ook complexe gevallen die een diepgaander onderzoek vereisen html leren

en css, of de hulp van een specialist.

Op een dag vroeg een kennis me waar ik de kleur van het categoriepaneel in zijn sjabloon kon veranderen. Een onderwerp geüpload naar een testsubdomein. De instellingen voor dit element werden niet opgeslagen in style.css, maar in een ander bestand, zodat iemand het niet kon vinden.

Hoe u de HTML- en CSS-code van een site kunt vinden en wijzigen Als je niet liefhebt lange artikelen , voor u is er aan het einde van het artikel een video-tutorial die u vertelt hoe u de html-code van een site kunt zien met met behulp van Kladblok ++ en breng wijzigingen aan in het ontwerp van een sjabloon met behulp van het voorbeeld van hoe u de kleur van het lettertype kunt wijzigen. In de video zijn er nog andere subtiliteiten bij het omgaan met een blog. En voor degenen die dichter en duidelijker bij de tekst staan, hieronder gedetailleerde analyse
thema's met schermafbeeldingen.

http://youtu.be/uIlVvwCt2ho

Termen en concepten Het zou juister zijn om het artikel de titel ‘Hoe te vinden css-code “, maar ik besloot voor de “verkeerde” naam te gaan, omdat het antwoord op deze vraag feitelijk in html te vinden is. CSS en HTML zijn heel verschillende dingen, ook al zijn ze twee delen van hetzelfde systeem. Er staat veel op internet technische artikelen

• , hier zal het voor ons voldoende zijn om te begrijpen dat:
• HTML - is verantwoordelijk voor de structuur van de site (wat volgt op wat, in welke volgorde, enz.). Dit is de basis waarop de site is gemaakt. Als we het vergelijken met een huis, dan is dit de indeling, de indeling van de kamers.

CSS is verantwoordelijk voor het ontwerp (welke lettertypen, maten, kleuren etc.). Dit is de algemene stijl van het huis en de stijl van de individuele kamers: wat voor soort behang zal er zijn, lampen, gordijnen, meubels. Daarom wordt het document waarin de CSS-codes zijn geschreven een “style sheet” genoemd. En als u zich afvraagt ​​hoe u bijvoorbeeld de kleur van de sitetitel, de lettergrootte in teksten of de kleur van koppen in de zijbalk kunt wijzigen, dan moet u dit allemaal in de tabel zoeken. CSS-stijlen

Ik houd ervan om het complexe eenvoudig te maken. Ik herinner me dat ik lang geleden, toen ik mijn eerste auto had, heel oud was, de bedrading verrot was, zekeringen vaak kapot gingen, en elke keer dat ik hem naar het benzinestation sleepte. Stel je eens voor hoeveel geld er daardoor werd verspild zelf-vervanging, zo bleek, kost een cent.

Op een dag keek ik naar wat de meester precies doet. Ik weet nog steeds niet hoe de zekering werkt. Maar ik weet waar ik het moet veranderen). Ik zou de motor niet zelf repareren en het vervangen van de zekering is niet moeilijk. Hetzelfde geldt voor websites.

Als je geen programmeur wilt worden, hoef je geen diepgaande kennis van programmeren te hebben. Het is voldoende duidelijk om te begrijpen wat waarvoor bedoeld is, waar je het moet zoeken en hoe je het kunt veranderen. Het is beter om zelf te veranderen wat je kunt en al het andere aan specialisten over te laten. In het artikel over daar staat nuttige link over dit onderwerp.

Moet je overal een expert in zijn?

Er zijn vaak discussies op SEO-blogs over de vraag of een beginner een diep begrip van HTML moet hebben, of nog beter, moet leren hoe hij zelf websites moet schrijven, zodat alles uniek is. Nou, ik weet het niet, ieder zijn eigen, en hier is wat dichter bij wie dichter is. Ik ben wat meer geïnteresseerd, dus ik leer nu meer van Vladimir. In november van dit jaar opende Vladimir zijn eigen blog. Zijn blog is op de eenvoudigste manier gemaakt, gratis sjabloon, hij veranderde het slechts een klein beetje naar eigen inzicht.

Na 10 dagen bestaan ​​​​bezette de blog de 104e plaats in de ranglijst van alle Runet-sites met een verkeer van ongeveer 1,5 duizend mensen per dag. Over 10 dagen. Dus wat is er aan de hand? Vladimir is goed thuis in HTML en kan een uniek sjabloon bestellen en kopen. U moet dus begrijpen dat het geheim niet in de sjablonen ligt, maar in het nut van de informatie.

Waar is de html-code verborgen?

Sorry voor de uitweiding, laten we terugkeren naar onze codes). Stel dat u de letterkleur van uw blogtitel wilt wijzigen. Laten we eens kijken naar het voorbeeld van mijn testsite.

De site openen binnen Google-browser Chroom(als je het nog niet gebruikt, installeer het dan - het is goed ontworpen voor het werken met websites, het heeft veel ingebouwde tools).

We verplaatsen de muiscursor over het element dat we gaan wijzigen. In dit geval - de naam van de blog. We klikken er met de rechtermuisknop op en in het venster dat verschijnt, selecteren we ELEMENTCODE BEKIJKEN.

BELANGRIJK: verwar dit niet met HET BEKIJKEN VAN DE PAGINACODE! We hebben nu niet de hele pagina nodig, alleen een afzonderlijk element.

Klik erop - er verschijnt een venster voor het bekijken van de code onderaan de browser:

De coderegel die we wijzigen, is rood gemarkeerd.

Maar het blauw gemarkeerde gebied bevat wat we zoeken. Hier kunt u de exacte (niet bij benadering) coderegel vinden die verantwoordelijk is voor lettertypen, kleur, grootte, markering, enz. Op deze manier kunt u ELKE code van elk element van elk sjabloon achterhalen.

Zoek de gewenste regel in het blauw gemarkeerde blok. Aan de rechterkant bevindt zich een schuifregelaar, u kunt er doorheen scrollen en de regel vinden die u nodig heeft.

Algemeen principe van waar je dingen moet zoeken:

Lettertypenaam - in de FONT FAMILY-regel

Lettergrootte - in de regel FONT SIZE

Tekstkleur - in de COLOR-regel

Hier zijn drie hoofdregels waarin de naam, grootte en letterkleur van elk element veranderen. Recht in de rij stijl css De positie van de lijn in het document wordt gegeven. Als u een ander element moet wijzigen (u moet bijvoorbeeld weten waar de lijn is waar u de kleur van de menubalk of de kleur van links kunt wijzigen), dan gebeurt alles precies hetzelfde.

AANDACHT:

De lijn die we gaan kopiëren is in de figuur rood gemarkeerd,

zodat u deze later in het stijlblad kunt terugvinden.

4. Kopieer de regel. Omdat we in dit voorbeeld de kleur van de sitenaam willen wijzigen, kopieer ik de lijn die is gemarkeerd in de rode rechthoek in de tweede afbeelding. In mijn sjabloon is het verantwoordelijk voor het wijzigen van de kleur van de sitetitel:

#header h1 a, #header h1 a: bezocht (

Zoek de gewenste regel in het bestand “style sheet (style.css)”. Dit gebeurt al in het beheerdersdashboard. Ik vraag met klem dat, hoewel er geen vertrouwen en volledig begrip is, alle experimenten moeten worden uitgevoerd op een testsubdomein om .

Ga dus naar het beheerderspaneel: CONSOLE - UITERLIJK - EDITOR. In de rechterzijbalk vinden we het bestand STYLE TABLE (STYLE.CSS), open het.

Open nu de zoekbalk CTRL-toetsen+ F: er verschijnt een leeg lijnvenster in het bovenste venster. We plakken erin de regel die we in stap 4 hebben gekopieerd.

En u zult zien hoe deze regel wordt gemarkeerd in het stijlblad (in het oranje op de afbeelding):

We brengen een wijziging aan in het element. In ons geval veranderen we de kleur van het lettertype, dus vervangen we in de COLOR-regel een andere waarde: de gewenste kleur. In het voorbeeld is de kleur zwart, de betekenis is:

U kunt een kleur selecteren in elke webkleurenpaletservice: typ 'Webkleurenpalet' in een zoekmachine en selecteer de gewenste kleur. Selecteer een kleur en kopieer deze digitale waarde en vervang voorzichtig de oude. waarna we op BESTAND UPDATEN klikken en kijken wat er is gebeurd.

Als de wijzigingen niet worden weergegeven, ga dan het afgelopen uur opnieuw naar de pagina - deze keer zou alles moeten worden weergegeven.

Het kost veel tijd om het te beschrijven, maar in de praktijk wordt alles snel gedaan, vooral als de eerste vaardigheid verschijnt.

Meer gedetailleerd hoe u bepaalde elementen kunt wijzigen:

Dat is alles voor vandaag, ik zal u niet meer lastig vallen met codes. Ik hoop dat je nu zelf elk element van de html-code, of liever de CSS-code, gemakkelijk kunt vinden en wijzigen - mogen de experts mij vergeven dat ik het heb vereenvoudigd. En als je er niet uitkomt, bezoek dan nog steeds de pagina. Verspil je tijd niet aan onzin.

Ik stel voor om de video van Artem Abramovich te bekijken over hoe je elk woord of element in elk thema/sjabloon, voor elke engine (wordpress, joomla, etc.) kunt zoeken en vinden en het kunt vervangen door wat je nodig hebt:

Deel alsjeblieft als je het leuk vond:

Mogelijk bent u ook geïnteresseerd in het volgende: