Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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



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

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

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

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

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

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

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


    #header-inner h1 {
    overflow: hidden;
    line-height: 200px; /* текст в център по вертикала */
    text-align: center; /* текст в център по хоризонтала */
    position: relative;
    }
    #header-inner h1:before {
    content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
    }
    #header-inner h1:after {
    content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/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 {
    content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
    }
    #header-inner:after {
    content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg);
    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> добавяме скрипта:

    <script>
    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 {
    content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
    }
    #header-inner:after {
    content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg);
    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>
    <script>
    var image=new Array(6);
    image[0]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_hPXTmI/AAAAAAAABQE/ycRtyie_-gI/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg";
    image[1]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_8AQKdI/AAAAAAAABQI/ufHQP58hACU/s1600/core_navigation_gl-class_x164_230x200_06-2009.jpg";
    image[2]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5AXuchnI/AAAAAAAABQM/gSz7ReXWcso/s1600/Corenavigation_A-Saloon_230x200_04-2008.jpg";
    image[3]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5Au7yytI/AAAAAAAABQQ/KR4epWzqi0w/s1600/corenavigation_cl-class_c216_230x200_07-2010.jpg";
    image[4]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5Ay9raqI/AAAAAAAABQU/9x-wO6Apuc0/s1600/Corenavigation_CLS-Class_230x200_04-2008.jpg";
    image[5]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5BM1PjII/AAAAAAAABQY/KolkdBXhyAo/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> вписваме скрипта:


    <script>
    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 {
    content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
    }
    #header-inner:after {
    content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg);
    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>
    <script>
    var image=new Array(12);
    image[0]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_hPXTmI/AAAAAAAABQE/ycRtyie_-gI/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg";
    image[1]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_8AQKdI/AAAAAAAABQI/ufHQP58hACU/s1600/core_navigation_gl-class_x164_230x200_06-2009.jpg";
    image[2]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5AXuchnI/AAAAAAAABQM/gSz7ReXWcso/s1600/Corenavigation_A-Saloon_230x200_04-2008.jpg";
    image[3]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5Au7yytI/AAAAAAAABQQ/KR4epWzqi0w/s1600/corenavigation_cl-class_c216_230x200_07-2010.jpg";
    image[4]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5Ay9raqI/AAAAAAAABQU/9x-wO6Apuc0/s1600/Corenavigation_CLS-Class_230x200_04-2008.jpg";
    image[5]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5BM1PjII/AAAAAAAABQY/KolkdBXhyAo/s1600/corenavigation_g-cabrio_230x200_06-2008_.jpg";
    image[6]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5BeI2gGI/AAAAAAAABQc/_hF4A7UVAH8/s1600/corenavigation_glk-class_x204_230x200__12-2009.jpg";
    image[7]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5Bv_Q9oI/AAAAAAAABQg/zC4HYXCDSac/s1600/Corenavigation_M-Class_230x200_04-2008.jpg";
    image[8]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5B-UuhtI/AAAAAAAABQk/6K2aZlNk2R0/s1600/corenavigation_r-class_wv251_230x200_05-2010.jpg";
    image[9]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5CK9THrI/AAAAAAAABQo/ZcGlUk6rb0w/s1600/corenavigation_s-class_w221_230x200__06-2009.jpg";
    image[10]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5CplQh_I/AAAAAAAABQs/zHZoC8M0sHs/s1600/Corenavigation_SLK-Class_230x200_06-2008.jpg";
    image[11]="http://4.bp.blogspot.com/_ebKrCj8TLPk/TRc1BKG-f4I/AAAAAAAABP8/n1pDnM2Oqgc/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> вписваме скрипта:

    <script>
    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 {
    content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
    }
    #header-inner:after {
    content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg);
    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>
    <script>
    var d=new Date();
    var month=new Array(12);
    month[0]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_hPXTmI/AAAAAAAABQE/ycRtyie_-gI/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg";
    month[1]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_8AQKdI/AAAAAAAABQI/ufHQP58hACU/s1600/core_navigation_gl-class_x164_230x200_06-2009.jpg";
    month[2]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5AXuchnI/AAAAAAAABQM/gSz7ReXWcso/s1600/Corenavigation_A-Saloon_230x200_04-2008.jpg";
    month[3]="http://3.bp.blogspot.com/_ebKrCj8TLPk/TRc5Au7yytI/AAAAAAAABQQ/KR4epWzqi0w/s1600/corenavigation_cl-class_c216_230x200_07-2010.jpg";
    month[4]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5Ay9raqI/AAAAAAAABQU/9x-wO6Apuc0/s1600/Corenavigation_CLS-Class_230x200_04-2008.jpg";
    month[5]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5BM1PjII/AAAAAAAABQY/KolkdBXhyAo/s1600/corenavigation_g-cabrio_230x200_06-2008_.jpg";
    month[6]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5BeI2gGI/AAAAAAAABQc/_hF4A7UVAH8/s1600/corenavigation_glk-class_x204_230x200__12-2009.jpg";
    month[7]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5Bv_Q9oI/AAAAAAAABQg/zC4HYXCDSac/s1600/Corenavigation_M-Class_230x200_04-2008.jpg";
    month[8]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5B-UuhtI/AAAAAAAABQk/6K2aZlNk2R0/s1600/corenavigation_r-class_wv251_230x200_05-2010.jpg";
    month[9]="http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc5CK9THrI/AAAAAAAABQo/ZcGlUk6rb0w/s1600/corenavigation_s-class_w221_230x200__06-2009.jpg";
    month[10]="http://2.bp.blogspot.com/_ebKrCj8TLPk/TRc5CplQh_I/AAAAAAAABQs/zHZoC8M0sHs/s1600/Corenavigation_SLK-Class_230x200_06-2008.jpg";
    month[11]="http://4.bp.blogspot.com/_ebKrCj8TLPk/TRc1BKG-f4I/AAAAAAAABP8/n1pDnM2Oqgc/s1600/conavi_viano_01_230x200_de_07-2010.jpg";
    document.write("<style>#header-inner1:after {content: url(" + month[d.getMonth()] + "); position: absolute;}</style>");

    </script>


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

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

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

    BGtop




    Няма коментари:

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