Нов дизайн на дата и "прочети повече" в публикация

Здравейте, приятели. При обновяване или промяна на дизайна на публикациите в блога не може да се игнорира и друг въпрос. Въпросът е за промяна в дизайна на датата на публикацията и връзката "Прочети повече..". В блоговете на платформата Blogger да се направи това е сравнително лесно, като се използват CSS свойства към нужните селектори, изброени в тази статия и готовите примерни кодове. А в тази публикация ще намерите описание на това как да поставите датата под заглавката на публикацията си в блога.

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

Дата на публикацията

В стандартна тема на блога този блок е със следните идентификатори:

        ◾.date-header или h2.date-header – за целия блок;

◾.date-header span – блок с текста на датата;

Този селектор вече е записан в темата и неговите свойства можете да промените или да добавите.
За промяна в стила на датата на публикацията CSS кода може да бъде такъв:

.date-header {
 display: inline-block;
 background: #ccf;
 text-align: center;
 border: 2px solid #999;
 border-radius: 5px;
 padding: 10px 5px;
 margin: 5px;
 height: auto;
 width: 150px;
}
.date-header span {
 font: normal bold 15px Tahoma;
 color: #000;
 padding: 5px;
}

Връзката "Прочети повече.."

За нея в HTML кода на темата няма записан селектор, но това не пречи вие самостоятелно да го добавите. И той за този елемент е:

 ◾.jump-link - селектор на целия блок;

◾.jump-link a - селектор на връзката;

За този елемент можете да използвате такъв CSS:

.jump-link {
 text-align: right; /*подравняване*/
 height: 100px; /*височина на блока*/
}
/*Стил*/
.jump-link a {
 display: inline-block;
 background: #f9f9f9;
 background: -moz-linear-gradient(top, #f9f9f9 30%, #bcbcbc 100%);
 background: -webkit-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -o-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -ms-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: linear-gradient(to bottom, #f9f9f9 30%,#bcbcbc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#bcbcbc',GradientType=0 );
 border: 1px solid #666;
 border-radius: 3px;
 color: #666;
 text-align: center;
 font: normal normal 14px Arial;
 padding: 5px; /*вътрешен отстъп*/
 margin: 5px 10px; /*външен отстъп*/
 min-width: 150px;
 height: auto;
 width: auto;
}
/*Стил под курсор*/
.jump-link a:hover {
 background: #eaf6ff;
 background: -moz-linear-gradient(top, #eaf6ff 30%, #99d2ff 100%);
 background: -webkit-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -o-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -ms-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: linear-gradient(to bottom, #eaf6ff 30%,#99d2ff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf6ff', endColorstr='#99d2ff',GradientType=0 );
 border: 1px solid #7cbdff;
 color: #000;
}

Също така, вместо цвят или CSS градиента на връзката "Прочети повече ..." можете да използвате изображение, иконка, във всеки подходящ формат, като изберете от следните: .jpeg, .png, или .gif. CSS кода в този случай ще бъде:

.jump-link a {
 display: inline-block;
 background: url(.../image.gif) no-repeat;
 color: transparent; /*цвят на шрифта - прозрачен*/
 font: normal normal 0 Arial; /*размер на шрифта "0"*/
 margin: 0 350px;
 width: 128px; /*ширина, равна на ширината на картинката*/
 height: 48px; /*височина, равна на височината на картинката*/
}
/*Стил под курсор*/
.jump-link a:hover {
 background: url(.../image-hover.gif) no-repeat;
 width: 128px; /*ширина, равна на ширината на картинката*/
 height: 48px; /*височина, равна на височината на картинката*/
}

Когато използваме иконка за този елемент трябва да се освободим от ненужния текст. В този случай, да се освободим от израза "Прочети повече..". Това може да стане с помощта на CSS, посочвайки необходимите значения за свойствата на текста, без да правим промяна в HTML. За свойствата на цвета срещу color, трябва да се отбележи transparent - прозрачен, а за размера на шрифта срещу font да се отбележи 0 ( нула).

Как да поставим датата под заглавието на публикацията

Ако искате датата на публикацията да се показва не над заглавието на публикацията, а под него направете следното:

➤Направете резервно копие на темата, задължително.

➤Отворете HTML кода на темата и с помощта на клавишите (Ctrl+F) намерете този ред:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

В HTML кода на темата те са два, а на вас ви е нужен втория. Внимателно го отстранете чрез клавишната комбинация (Ctrl+X) и го „ приберете“ някъде временно, но да ви е под ръка, защото ще ви трябва.

➤Там, в HTML кода на темата, отново търсите и намирате този ред:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>

Той е единствен и няма да го сбъркате. Точно пред ( по-точно над ) този ред слагате онзи, първия, който „прибрахте“ някъде временно. Трябва да се получи следното:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

<b:if cond='data:blog.metaDescription == &quot;&quot;'>

Натискате „Визуализация“ и ако всичко е добре, запаметявате.
Сега вашите дата и връзка „Прочети повече..“ имат нов дизайн.
Това е за сега, ще се радвам на вашите коментари.

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

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