Изображение в заглавката на блога

Pepa Tabakova

понеделник

Здравейте, приятели, редовни мои читатели и гости. Как да поставите изображение преди заглавието на публикация вече знаете. Знаете и начините, по които да го поставите след заглавието или от двете му страни. А как да поставите изображение в заглавката на блога? Върху това ще работим днес.

Ще се запознаем и как да постигнем няколко различни ефекта за смяна на изображението в заглавието на блога:

➧да се сменя в зависимост от времето на деня;

➧да се сменя при всяко презареждане на страницата;

➧и при смяна на месеца от годината;

Мисля, че тези ефекти заслужават внимание.

Шапката на блог на Blogger има идентификатор id='header-inner'. Знаейки това можем да допълним към CSS стиловете на блога следното, например:

#header-inner h1 {

overflow: hidden;

line-height: 200px; /* текст в център по вертикала */

text-align: center; /* текст в център по хоризонтала */

position: relative;

}

#header-inner h1:before {

content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirABKU5ykpvkzclyMAp6qxEv6l_pu7xEvAZxx9NKHBC_aU0JSG4A4bhCpqXbdBdTw01hJyMB0-yAbcjQSG__xJ2dc42B49prR1t618owM7_dGCXAd_48BgkxAyVU0pnYv4DDzE-bvsk5dq/s1600/privet.gif);

}

#header-inner h1:after {

content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKUHL9PPVm75W7HJyn1YZDjXUrrCidmFT2Hu4hnW9yDbnMJiv-oOoo4-4r4aX05iwU-TEKRvZl_a4M8cFsHb3XBfxOWQ5ulstyEiThAc7rbcZad5Ta3sT9LTiuiaCZcpx1rORcE8IkiLiH/s1600/demoHeader.jpg);

position: absolute;

transform: translate(100px, 0px); /* изместване в дясно */

}

Уточнение: Преработих кода по-горе, за да го проверете чрез този инструмент и да видите как изглеждат изображенията в заглавката на блога.

<style>

#header-inner {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

overflow: hidden;

line-height: 200px;

text-align: center;

position: relative;

}

#header-inner:before {

}

#header-inner:after {

position: absolute;

transform: translate(100px, 0px);

}

#header-inner1, #header-inner2, #header-inner3 {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

line-height: 200px;

padding-left: 10px;

}

</style>

<div id='header-inner'>Пример</div>

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

На посетителя ще се показва изображение, което съответства на часа, в който той е влязъл в блога, ако:

пред </head> добавяме скрипта:

var image=new Array();

image[0]="изо0";

image[1]="изо1";

image[2]="изо2";

image[3]="изо3";

image[4]="изо4";

image[5]="изо5";

var now = new Date();

var hours = now.getHours();

var alea=0

if (hours>0) {alea=0;}

if (hours>4) {alea=1;}

if (hours>8) {alea=2;}

if (hours>12) {alea=3;}

if (hours>16) {alea=4;}

if (hours>20) {alea=5;}

document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>");

</script>

Образец

Пояснения:

➤В реда image [0] = "изо0"; image [0] е броят на изображенията, а "изо0" е мястото за URL на самото изображение. Те са по ваш избор, както и самите изображения, но да не са повече от 24;

➤В предложения ви скрипт редът "if (hours>0) {alea = 0;}" означава, че първото изображение {alea=0;} ще се показва в продължение на четири часа - от 0:00 до 4:00 часа. След това ще бъде заменено със следващото {alea=1;}, което също ще се показва в течение на следващите четири часа;
И така нататък, по аналогия. Едно изображение ще се сменя със следващото на всеки четири часа.

➤Участъкът #header-inner:after показва, че изображението е след заглавката;

Предлагам и готов, редактиран код.

<style>

#header-inner {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

overflow: hidden;

line-height: 200px;

text-align: center;

position: relative;

}

#header-inner:before {

}

#header-inner:after {

position: absolute;

transform: translate(100px, 0px);

}

#header-inner1, #header-inner2, #header-inner3 {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

line-height: 200px;

padding-left: 10px;

}

</style>

<div id="header-inner3">Образец</div>

var image=new Array(6);

image[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIy0OhrhEkKBkpOsKiwToo5GsvQeRyJHXzFjECb379JYm41-9UjtfsX4sNbaF3eBJ2EbUG1pXgATZaGzHj4OUPpujVVIMpBrX6BPXyXHMRlMhVB1Xp0eaRp1MBYFds6X1xEHd4EDqw8SY/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg";

image[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7OCkUz-cnFGKo5mWqHp6l1xly0fzMiQM96mRyVaiDY7SL83YWPrJmLt5gZyUjJis9w7LZtsf4KR4z-QFsf8nODUK5IO-YXew2xB_pbHGHRS6MlHqUBM-VGVQM1U977cz3fszp7WnAyA/s1600/core_navigation_gl-class_x164_230x200_06-2009.jpg";

image[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNhI5Wd3RiglZYdRIUkb02OTMMpOK8vY_AL7FDElCnQy0vdy_qDkAVU3cOeQVdAFlhAoyHO_xKOhBehyphenhyphen5c_AtqGRxcYNNg0iBsbnyLzv_YWK5-VShV6ij6dC52WtDU6qQopA9je7SbZkw/s1600/Corenavigation_A-Saloon_230x200_04-2008.jpg";

image[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjS60w4Rq6oYMtGKSIBcuXJUv8aS4mDNuhJPaM3SkaYahnwRyaOVBP7wYAV0RQ7fzQfsALCpObD6iK21LzSE7rp5JDvChxQjK8RPuOcTCaKIP6uiizHy8jGchkGmAOsaHEQo_mcL_gMTY/s1600/corenavigation_cl-class_c216_230x200_07-2010.jpg";

image[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNm27chzZrt5ww79F1Yw3grCW7huwnF-KeBM2orTbAQnWFCkFrU7xNQeLPURrGMFuUvALOQIPxoadZAgCc3ZKb8ex4oiyYSsQ31KvN6ntQtyoZb8i6ySa7RSmmskzHF3oAs7SBsVTL-U/s1600/Corenavigation_CLS-Class_230x200_04-2008.jpg";

image[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjXl_dCHN0VfysVWoRYtqP0IA0KEcbyA8AOe7wjooMuFT9ab5UH1LR0raiEb2hAshrWd79Z7exXqCxeAH2rbmG6t78u0uKfOrLd-fmXDHI3_z8TxFbt8duiyxoQ0GGkqPvXpkDhI7dPk/s1600/corenavigation_g-cabrio_230x200_06-2008_.jpg";

var now = new Date();

var hours = now.getHours();

var alea=0

if (hours>0) {alea=0;}

if (hours>4) {alea=1;}

if (hours>8) {alea=2;}

if (hours>12) {alea=3;}

if (hours>16) {alea=4;}

if (hours>20) {alea=5;}

document.write("<style>#header-inner3:after {content: url(" + image[alea] + "); position: absolute;}</style>");

</script>

Промяна на изображението при презареждане на страницата

Когато страницата се актуализира, ще се показва произволно изображение от списъка в кода. За да се получи този ефект пред </ body> вписваме скрипта:

var image=new Array(12);

image[0]="изо0";

image[1]="изо1";

image[2]="изо2";

image[3]="изо3";

image[4]="изо4";

image[5]="изо5";

image[6]="изо6";

image[7]="изо7";

image[8]="изо8";

image[9]="изо9";

image[10]="изо10";

image[11]="изо11";

var alea=Math.round(Math.random()*11);

document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>");

</script>

Образец

Примерен, редактиран код:

<style>

#header-inner {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

overflow: hidden;

line-height: 200px;

text-align: center;

position: relative;

}

#header-inner:before {

}

#header-inner:after {

position: absolute;

transform: translate(100px, 0px);

}

#header-inner1, #header-inner2, #header-inner3 {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

line-height: 200px;

padding-left: 10px;

}

</style>

<div id='header-inner2'>Образец</div>

var image=new Array(12);

image[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDXz3T83hf4Sy6Bc9A64jdUwymlX6vGFcG4ad3mqJX0grxfUP2j_ibMTVFWppmS8KBRqkJgJF8BATXdrHeN43Lksxw40J8ge8GsxF_kryOUUOqP5sqrWHNRlxGYE0airi7m9uSy3LTbs/s1600/corenavigation_glk-class_x204_230x200__12-2009.jpg";

image[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9TP-jJWardRX7XV3zLhNCryhYj0LocBu5LheoNL3df4LwoFmsrQ8Sr4jFT21rWodZ8TxriE9k1DZjY2fewJ6Jhg16J3GXWv15eKTbGRnEJzn0Ty3lMdl0sVaKATJShl9SktI-rp2ql4/s1600/Corenavigation_M-Class_230x200_04-2008.jpg";

image[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG-J9zBM_XzzvutLzwLKorWbRJxxUPhzvej6P2AuPSQkxLUDOqbBj86hV5WTLiLsLQRwPzhbiz_6jiQiGaMTH5BpPAHZFoz8WRHlHm8cmytqxSc6AcSJ5OHJE87RlN_FraW9yIlDXR_E/s1600/corenavigation_r-class_wv251_230x200_05-2010.jpg";

image[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81wqoyCLUy0xaPXjm211w3bzrMcwuM5QGt1-fXtrNDgHOaBjZ8u7AvIyTxWir5xZ-aS1hWmoOg5F9ezphalznZ6idATZBVpTZqzAv8a3wfMRjPKlWMfw6_XdSszGDgxlvJfDGO2ipoWw/s1600/corenavigation_s-class_w221_230x200__06-2009.jpg";

image[10]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MQWvXrmh1wipyD7M2mB3DOZWzOyVZjlOxCUydaxnggEdkEOzh-wJvojfhfJ0e4SGKz6fIzr8Xqcc4yA7EZyg5MeYxiF2LT5eefLZaIjrEp0yVhgOQ4lePmC93GmBkDVy2kWhUPK8PeM/s1600/Corenavigation_SLK-Class_230x200_06-2008.jpg";

image[11]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDL95iPWCU83yYKZcEaV6mZIrDxWbJHOdgthhaVf7_8uxJTXTxd5egQIHGMxDHP01H_8SG8El8S3KJgkv57gUVjBTGIcQ94KUCaVYX59N4_UI-PeZAsHyw9ffxtFhz6DkUrvF9683GOpN/s1600/conavi_viano_01_230x200_de_07-2010.jpg";

var alea=Math.round(Math.random()*11);

document.write("<style>#header-inner2:after {content: url(" + image[alea] + "); position: absolute;}</style>");

</script>

Промяна на изображението при смяна на месеца

Пред </ body> вписваме скрипта:

var d=new Date();

var month=new Array(12);

month[0]="изо0";

month[1]="изо1";

month[2]="изо2";

month[3]="изо3";

month[4]="изо4";

month[5]="изо5";

month[6]="изо6";

month[7]="изо7";

month[8]="изо8";

month[9]="изо9";

month[10]="изо10";

month[11]="изо11";

document.write("<style>#header-inner:after {content: url(" + month[d.getMonth()] + "); position: absolute;}</style>");

</script>

Образец

Примерен редактиран код:

<style>

#header-inner {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

overflow: hidden;

line-height: 200px;

text-align: center;

position: relative;

}

#header-inner:before {

}

#header-inner:after {

position: absolute;

transform: translate(100px, 0px);

}

#header-inner1, #header-inner2, #header-inner3 {

box-shadow: 0px 0px 0px 1px #fff, 0px 2px 5px 1px #000;

font: 60px Times,'Times New Roman',FreeSerif,serif;

color: rgb(127, 122, 91);

line-height: 200px;

padding-left: 10px;

}

</style>

<div id='header-inner1'>Образец</div>

var d=new Date();

var month=new Array(12);

month[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIy0OhrhEkKBkpOsKiwToo5GsvQeRyJHXzFjECb379JYm41-9UjtfsX4sNbaF3eBJ2EbUG1pXgATZaGzHj4OUPpujVVIMpBrX6BPXyXHMRlMhVB1Xp0eaRp1MBYFds6X1xEHd4EDqw8SY/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg";

month[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7OCkUz-cnFGKo5mWqHp6l1xly0fzMiQM96mRyVaiDY7SL83YWPrJmLt5gZyUjJis9w7LZtsf4KR4z-QFsf8nODUK5IO-YXew2xB_pbHGHRS6MlHqUBM-VGVQM1U977cz3fszp7WnAyA/s1600/core_navigation_gl-class_x164_230x200_06-2009.jpg";

month[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNhI5Wd3RiglZYdRIUkb02OTMMpOK8vY_AL7FDElCnQy0vdy_qDkAVU3cOeQVdAFlhAoyHO_xKOhBehyphenhyphen5c_AtqGRxcYNNg0iBsbnyLzv_YWK5-VShV6ij6dC52WtDU6qQopA9je7SbZkw/s1600/Corenavigation_A-Saloon_230x200_04-2008.jpg";

month[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjS60w4Rq6oYMtGKSIBcuXJUv8aS4mDNuhJPaM3SkaYahnwRyaOVBP7wYAV0RQ7fzQfsALCpObD6iK21LzSE7rp5JDvChxQjK8RPuOcTCaKIP6uiizHy8jGchkGmAOsaHEQo_mcL_gMTY/s1600/corenavigation_cl-class_c216_230x200_07-2010.jpg";

month[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNm27chzZrt5ww79F1Yw3grCW7huwnF-KeBM2orTbAQnWFCkFrU7xNQeLPURrGMFuUvALOQIPxoadZAgCc3ZKb8ex4oiyYSsQ31KvN6ntQtyoZb8i6ySa7RSmmskzHF3oAs7SBsVTL-U/s1600/Corenavigation_CLS-Class_230x200_04-2008.jpg";

month[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjXl_dCHN0VfysVWoRYtqP0IA0KEcbyA8AOe7wjooMuFT9ab5UH1LR0raiEb2hAshrWd79Z7exXqCxeAH2rbmG6t78u0uKfOrLd-fmXDHI3_z8TxFbt8duiyxoQ0GGkqPvXpkDhI7dPk/s1600/corenavigation_g-cabrio_230x200_06-2008_.jpg";

month[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEDXz3T83hf4Sy6Bc9A64jdUwymlX6vGFcG4ad3mqJX0grxfUP2j_ibMTVFWppmS8KBRqkJgJF8BATXdrHeN43Lksxw40J8ge8GsxF_kryOUUOqP5sqrWHNRlxGYE0airi7m9uSy3LTbs/s1600/corenavigation_glk-class_x204_230x200__12-2009.jpg";

month[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9TP-jJWardRX7XV3zLhNCryhYj0LocBu5LheoNL3df4LwoFmsrQ8Sr4jFT21rWodZ8TxriE9k1DZjY2fewJ6Jhg16J3GXWv15eKTbGRnEJzn0Ty3lMdl0sVaKATJShl9SktI-rp2ql4/s1600/Corenavigation_M-Class_230x200_04-2008.jpg";

month[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRG-J9zBM_XzzvutLzwLKorWbRJxxUPhzvej6P2AuPSQkxLUDOqbBj86hV5WTLiLsLQRwPzhbiz_6jiQiGaMTH5BpPAHZFoz8WRHlHm8cmytqxSc6AcSJ5OHJE87RlN_FraW9yIlDXR_E/s1600/corenavigation_r-class_wv251_230x200_05-2010.jpg";

month[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81wqoyCLUy0xaPXjm211w3bzrMcwuM5QGt1-fXtrNDgHOaBjZ8u7AvIyTxWir5xZ-aS1hWmoOg5F9ezphalznZ6idATZBVpTZqzAv8a3wfMRjPKlWMfw6_XdSszGDgxlvJfDGO2ipoWw/s1600/corenavigation_s-class_w221_230x200__06-2009.jpg";

month[10]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1MQWvXrmh1wipyD7M2mB3DOZWzOyVZjlOxCUydaxnggEdkEOzh-wJvojfhfJ0e4SGKz6fIzr8Xqcc4yA7EZyg5MeYxiF2LT5eefLZaIjrEp0yVhgOQ4lePmC93GmBkDVy2kWhUPK8PeM/s1600/Corenavigation_SLK-Class_230x200_06-2008.jpg";

month[11]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDL95iPWCU83yYKZcEaV6mZIrDxWbJHOdgthhaVf7_8uxJTXTxd5egQIHGMxDHP01H_8SG8El8S3KJgkv57gUVjBTGIcQ94KUCaVYX59N4_UI-PeZAsHyw9ffxtFhz6DkUrvF9683GOpN/s1600/conavi_viano_01_230x200_de_07-2010.jpg";

document.write("<style>#header-inner1:after {content: url(" + month[d.getMonth()] + "); position: absolute;}</style>");

</script>

Ще се радвам на вашите мнения, отзиви и коментари.

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

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

Cancel

Изображение в заглавката на блога