Как да промените външния вид на вашия блог

Здравей отново!

Почти се върнах... Не ме мързи, просто съм зает с други необходими неща и скоро ще го завърша. Пфу-пфу-пфу, за да не го прокълнете.

Това ще бъде статия за загряване, в противен случай почивката беше дълга, трябва постепенно да включите)))

Честно казано, не го написах нарочно, просто така се случи. Моят добър приятел Александър ми изпрати писмо с въпроса как разбирам блога му толкова бързо: къде, какво да променя и в отговор написах цяла статия за необходимите инструменти за всеки блогър.

Част първа. Започнете

Най-общо тази статия може да се нарече „Как да използваме инструменти за уеб администратори“ и с пример.

Нашият експериментален блог ще бъде ... ta-a-a-dames - блогът на Юлия Королева Inet-boom.ru. И всичко това, защото Юлия не знаеше как да подреди джаджата за обявяване на статия по по-красив начин, така че влязох, както обикновено, със съвет и песента се втурна ...

Когато прочетох по-късно, разбрах, че съм бил тщеславен. Да, да, станах арогантен, защото се сетих за себе си преди година ... Виждате ли, "няма нищо сложно" ... Давам ви го! Доста, просто))) Сега може да не е трудно за мен, но за тези, които не разбират вътрешностите на блоговете? Ето нещо!

Ето защо реших да нарисувам подробно целия процес, може би ще бъде полезно за някого, освен това Юлия даде разрешение за изпълнението на своя блог.

Част две. Инструменти и знания

Инструменти

Аз самият използвам следните инструменти:

Набор от инструменти може да бъде всичко, тук е по-удобно за всеки.

Всички инструменти, нищо повече не е необходимо.

Поне на основно ниво трябва да разберете:

• език за маркиране на хипертекст HTML
• каскадни css стилови таблици
• Структура на WordPress шаблон

Защо в този ред? Нека да го разберем.

Ще разгледаме изходния код, който е написан на html и трябва да разграничим тага

Не съм убеден, добре, не, не.

Но все пак ви съветвам да разгледате безплатните курсове на Евгений Попов по HTML, CSS по тези теми.

Не би било лошо да поддържате под ръка справочни материали под формата на уебсайта htmlbook.ru, статията на Larisa Web-Koshka за CSS и просто Google с Yandex.

Част трета. Решаваме проблема

Е, въоръжени ли сте с инструменти? Тогава нека формулираме проблема.

Има малък списък с желания текст, който трябва да бъде подреден в общ стил с шаблона. Моето предложение беше да вземем за основа облака от тагове, за да не мислим дълго за дизайна.

Казано накратко, би било:

Изисква се към текста да се приложат стилове, подобни на облака от етикети.

Намиране на правилните стилове

Съответно, първо трябва да знаете какви стилове се прилагат към облака от етикети и къде да ги намерите. Защо да отворите уебсайта на Julia в Chrome и да намерите желаните стилове.

Задръжте курсора на мишката върху който и да е елемент от облака с етикети и натиснете десния бутон на мишката. Наричаме менюто „Преглед на кода на елементите“

Ще видим такъв прозорец, в който ще ни покажат необходимите стилове, класове и селектори

Какво виждаме като резултат?

В левия прозорец ни се показва html кода, в десния прозорец - css стиловете. Което ни трябва. Проблемът е наполовина решен! Има стилове, сега трябва да ги приложим правилно.

Наборен html

На този етап се нуждаем от Notepad ++ или Adobe Dreamweaver. Ще покажа в Dreamweaver, визуализацията е по-лесна в него. Но първо нека поговорим...

Ние имаметри реда текст. Така? Така. Освен това само първите два реда са информационни. Последният е призив за действие, в този случай, да се абонирате за актуализации на блога.

Можете, разбира се, да оградите всеки ред в абзац таг и да приложите стилове към него, но това не е правилно и неудобно. Затова ще действаме по различен начин.

Ще приложим списъци с водещи символи към информационните редове и маркер за абзац към повикването.

Защо така? Е, защото може да има няколко съобщения, а списъците с водещи символи ви позволяват просто да добавяте нови елементи.

И така, в Dreamweaver създаваме нов html файл и записваме следното в тага body:

Да, да, приложихме класа anonsi към главния таг на списъка с водещи символи ul И не забравяйте да затворите всички тагове, тъй като всички те са сдвоени.

какво си забравил Да, забравих призива за действие. Е, тук всичко е просто, на следващия ред след затварящия ul таг пишем желаните награди и ги затваряме в абзац таг.

Dreamweaver в десния прозорец показва какво се е случило. Оказа се това, което беше предназначено, сега остава само да се приложат стиловете.

Прилагане на стилове

Стиловете вече са ни известни и намерени от нас, така че остава само да ги копираме правилно.

Нуждаем се от файл style.css, в който търсим (Ctrl + F) класа, който ни трябва, в нашия случай това е класът .tagcloud

И след това избираме необходимите стилове и отиваме в нашия файл, отворен в Dreamweaver, и вътре в тага на главата създаваме таг за стил, в който вмъкваме нашите стилове. Трябва да се получи така

Просто не можете да копирате стиловете, защото браузърът не разбира към какво трябва да се прилагат тези стилове. Ето защо добавихме класа anonsi към нашия списък. За да стане по-ясно, нека видим какизглежда като нашия текст с различни идентификатори.

И така, стиловете се прилагат просто към целия списък с водещи символи:

А сега само към елементите на списъка

Така че, това е точно това, от което се нуждаете, но все пак нещо не е наред, разбирате ли. Списъчните маркери се виждат, а самите елементи са някак криви. Нека да разберем какво не е наред и да го поправим. Защо трябва внимателно да обмислите самия стилов код.

font-size: 14px!важно; - размер на шрифта padding: 2px 10px; – подложка margin-bottom: 10px; – долно поле margin-right: 7px; – външна дясна подплата float: ляво; - обвиване на текста, поради което елементите изглеждат криви фон: #E9E9E9; – цвят на фона на елемент цвят: #615F5F; – цвят на шрифта border-right: 1px solid #CACACA!important; – дясна граница border-bottom: 1px solid #CACACA!important; – долна граница border-top: 1px solid #CACACA!important; – горна граница border-left: 3px solid #00A8FF; - лява граница

Така че, нека незабавно премахнем свойството float и да видим какво ще се случи

Както можете да видите, това вече е това, от което се нуждаем, но маркерите все още са видими и елементите на списъка са твърде далеч от левия край. Нека добавим няколко свойства, които ще поправят всичко това.

Е, маркерите изчезнаха, но вдлъбнатината остана, но това не е страшно, защото не трябва да забравяме, че все още трябва да прикрепим всичко това към джаджата и да инсталираме джаджата в лентата на сайта. По правило много стилове вече са написани в шаблона, така че ще редактираме на място.

Закачаме джаджата

Може ли всеки да създаде джаджа? Това е добре. И така, създаваме джаджа и поставяме нашия код в необходимото поле. Трябва да вмъкнете в уиджета само това, което е вътре в тага style и ul тага, всичко останало е за насняма нужда

Получаваме тази джаджа

И ето го резултата

Най-важното е, че в крайна сметка получихме това, от което се нуждаехме, и дори с възможността да правим промени директно от админ панела...

И сега мисля къде да събера базата от абонати. Кажете ми какви са алтернативите на Smartresponder?

---