
Нека да започнем. Когато напишете текста на публикацията си, по обикновения начин вмъквате в нея и желаното изображение. В моя случай е изображение на папагали.
Не забравяйте да оптимизирате изображението (прочетете публикацията за оптимизиране изображенията в блога).
Кода на изображението е:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg" height="200" title="картинка" width="200" /></a></div>/></a></div>
Сега преминаваме към редакция в HTML режим и просто добавяме едно свойство от CSS-стила, а именно style="border-radius: 100%;" след
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsasPQ8tQQIii9XJ-bgG6Z2s8LVTILBu_bfAUzAFx06ZrWxeLZg1ktm3F7Ct8zcW9QIgrMS7Fhh3vFvaO3avPBQ-3uivx9KLJLb2Af4uBwZj6uJwRpercx4X6MEebwlDOP66snOXqRX8/s1600/papagal1.jpg style="border-radius: 100%; " height="200" title="картинка" width="200" /></a></div>/></a></div>
И моите папагали вече са така.

Можем да направим изображение и с малко необичайна форма. За този вид, ние също отиваме в режим на HTML редакция и тук допълваме този код там, където ще бъде нашето изображение.
<div style="background: url('адрес на изображението'); width: 281px; height: 210px; border: 2px solid #405C0A; border-radius: 0 180px 0 200px; -webkit-border-radius: 0 180px 0 200px; - moz-border-radius: 0 180px 0 200px;"></div>
И се получава
И още едно изображение с друга форма. Кодът му е:
<div style="background: url('адрес на изображението'); width: 265px; height: 211px; border: 5px solid #850000; border-radius: 120px 200px 0 180px; -webkit-border-radius: 120px 200px 0 180px; -moz-border-radius: 120px 200px 0 180px;"></div>
А се получава следното.
Когато работите върху промяна формата на изображения в публикациите някои размери, като border-radius: трябва да се променят в съответствие с размерите на изображението.
Ще пиша още за интересни ефекти на изображенията в блога ни. Информацията споделих от
Пробвайте, интересно е.
Желая ви успех!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

Няма коментари:
Публикуване на коментар