Дизайн на формата за коментар в Blogger

Здравейте, добър ден на всички, които четат Blogzablogove.com. Днес ви предлагам да се научим как да променим дизайна на прозореца (формата) за създаване на коментари под всяка публикация. Много блогъри използват този метод, за да създадат свой собствен дизайн на този елемент. Ако някой от вас не се досеща за какво става дума, нека да погледне в Админ панел➔ настройки ➔ съобщения и коментари. В най-долната част на страницата е тази опция. Тя изглежда така:

Не е много привлекателна и най-вероятно много хора не и обръщат внимание. Сега можете да я промените. А текста в нея съчинете сами.

С помощта на малки промени в шаблона ( темата ), ще се опитаме да я направим привлекателна. Забележима. Да променим нейния дизайн няма да е трудно, след което прозорецът за създаване на коментари ще изглежда страхотно във всеки дизайн.
Влизаме в раздела "Тема", като не забравяме да направим резервно копие. С Ctrl + F намираме в него това място:

<p><data:blogCommentMessage/></p>

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

Всеки един от тях внимателно отстраняваме и на тяхно място поставяме следното:

<div id='pra-comment'><data:blogCommentMessage/></div>

После в темата намираме познатия ни ред ]]></b:skin> и над него вписваме този код:

#pra-comment{
position: relative;
background:#F3C5C5;
width:100%;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #AD3000;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #AD3000;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #F3C5C5; /* цвет такой же, как цвет общего фона.  */
border-width: 9px;
left: 10%;
margin-left: -30px
}

За цветови решения имате избор. По ваша преценка променете стойността, определяща фона: # F3C5C5; . Ако искате да е без фон, заменете стойността на фона: # F3C5C5; с background:none;
Когато сте готови щракнете върху бутона за визуализация и ако няма забележки смело запазите промените.
И така, без много усилия, сме разнообразили дизайна на блога си. Сега всички ще забележат този прозорец.
Това е всичко за днес. Доскоро!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: