Profruit banner

Умен звънец в openHAB

16 декември 2023

Телефонът е винаги с мен и сега, където и да се намирам получавам известие от openHAB, че някой е позвънил и чака пред вратата. А ако ме няма вкъщи става ясно часа и датата на последното позвъняване.

Tasmota Multipress

30 септември 2023

Идеята е Sonoff Touch T1 US 2 в салона, да управлява освен своето осветление и това в кухнята, а още вентилатора.

DIY 12V 1A WiFi Router UPS

22 април 2023

При поредно прекъсване на захранването вкъщи, батерията на нoтбука и двата UPS автоматично превключват на аварийно захранване и едновременно полита съобщение за конфуза

Zigbee2MQTT клониране

21 януари 2023

... как да клонираме съществуваща настройка на Zigbee2MQTT без да се налага последвало интервю на zigbee-устройствата.

LD2410 - бюджетен датчик присъствие в openHAB

11 февруари 2023

Цената на HLK-LD2410 зададе име на поредната тема в моя блог. С негова помощ се постига "народен" датчик присъствие в домашната автоматизация. . ...

Показват се публикациите с етикет Blogger. Показване на всички публикации
Показват се публикациите с етикет Blogger. Показване на всички публикации

Редакторът на Blogger силно изостава от конкурентни платформи за блог. Възможностите му все още стигат до форматиране текст и споделяне снимка. Това положение обаче е поправимо, защото Blogger дава възможност да боравите пряко с HTML-код. Нямате пряк достъп до хранилището на Blogger, но можете още да вмъквате между редовете в вашите теми javascript код. Това силно развързва ръцете и ви дава мощно оръжие в лицето на javascript. Вашият блог ще бъде модернизиран с следните примери приведени долу.


Създаване на Спойлер

Част 1

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

spoiler :


Спойлер (от англ. spoil — портить) — преждевременно раскрытая важная информация, которая портит впечатление от: игры, книги, фильма и разрушает их интригу, а также лишает читателя некоторой части удовольствия от сюжета.

Нали ви казах вече, днес никой не танцува робота. Никой!
Затова светът е толкова скучен! Тази песен ще ви направи свободни.

Това е кодът за вашия Blogger спойлер. Поставил съм коментари на всеки ред. Остава само да го редактирате според вашите нужди.

javascript код
<div style="margin-bottom: 6px;"><!-- отстъп на бутона от спойлера -->
spoiler : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрий'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Покажи'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Покажи" /></div><!-- стил на бутона -->
<div style="background: none repeat scroll 0% 0% rgb(252, 252, 252); border: 1px inset; color: #505050; line-height: 1.5em; margin: 0px; padding: 6px;"><!-- стил на спойлера -->
<div style="display: none;"><!-- съдържание на спойлера -->
тук тъпкайте вълната!
</div>
</div>

Тример ефект

Част 2

покажи

... и първите ще станат последни
и болните и слабите ще паднат жертва,
за да се запази стадото ...


Извор:
Andy Langton

Скрий - Покажи jQuery ефект

Част 3



Защо един помияр от улицата е по-умен от чистокръвно куче? Защото е от две породи.

Май си казвате: "тоя си задава въпроси и сам си отговаря". Сам си отговарям, за да съм сигурен, че ще получа качествен отговор. Сега се боря да си върна външният вид от периода 1997 -2001 г. Изсечено лице, талия 69см. Грозната физиономия обезсмисля абсолютно всички останали качества. Външният вид винаги е на първо място, следователно колкото и да си умен, не забравяй, че си грозен!


jQuery показ на снимка

Част 4

Ако ти се стори, че отнякъде ме познаваш е защото пушиш евтини цигари, а може би пиеш от ракията на цар Киро. И двамата знаем за какво си тук, така че да не ти дреме. Автопортрет
Bla bla lorem ipsum dolor sit amet, nam lectus, neque odio, semper wisi rhoncus sit ligula ea dolor, sagittis quam eu sed est.

Извор:
imgPreview demos

Модален прозорец

Част 5

Не е нужно всеки ден да повтаряте на жена си, че я обичате. Инсталирайте си този код за модален прозорец. Натискайки бутон ОК вие потвърждавате, че я обичате. Тя като види и ще ахне, особено ако е руса. А за да не си губите времето преминете в Control Panel под Windows. Намерете Mouse Option и преминете в секция Pointer Option. Активирайте кутийка Automatically move pointer to the default button in a dialog box. По този начин курсора автоматично ще застава на отговора и вие спокойно ще продължите, да си пърдите на дивана пред телевизора.

Проверка за обич

javascript код
<a onclick='javascript:profunct()'><span style='cursor:pointer; color: rgb(51, 51, 255);'>Проверка за обич</span></a>
<script language='JavaScript'>function profunct(){alert('А вие другарю, обичате ли жена си?');}</script>








до нови срещи   ^.^

21.01.2011 profruit 


Коментарите в Blogger притежават съществени недостатъци, а това е повод за поредната ни среща с желание към повече.

Коментарите в Blogger изглеждат сухи и постни. Не може да се форматира текст, уголемяване, оцветяване на избрани пасажи и т.н. Не може да се вмъкват поясняващи снимки. Не може да се вмъкват емоционални иконки (еmoticon). Същите тези автори трябва да са наясно, че коментарите не се индексират от ботовете на мрежата. Дразнещо е още, ако полето за коментар е несъразмерно с главната колона на блога.



Patrick Cowley - Tech-No-Logical World - 1982

Предстоят доста промени по шаблона на нашия блог, затова в самото начало ще изтеглим копие, което ще оставим настрана. Копието ще дублираме и ще работим с дубликата. По този начин ще се предпазим от непредвидени грешки и винаги ще можем да дадем откат на нещата.

Изтегляме копие на нашия шаблон от познато място по познат начин. Профил > Дизайн > Редактиране на HTML кода > Изтегляне на целия шаблон.

Изтегляне и редакция на шаблон

Шаблонът е файл с разширение .xml. За неговата редакция е необходим текстови редактор. Препоръчвам ви безплатния Notepad++ за целта.

Форматиране на текст и добавяне снимка

За тази част ще ползваме скрипт на Macro, описан в блога му Macro of micro.

Първо трябва да инсталираме скрипта. На практика означава да копирате и поставите в шаблона следния код преди таг </body>.

<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'></script>

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

To get Images [im].....[/im]
To get scrolling effect[ma]....[/ma]
To decide font size{you can change numbers}[si="2"]...[/si]
To decide font color[co="red"]...[/co]
To centralize the text [ce]...[/ce]
To get scrolling effect in right side[ma+]...[/ma+]
To box the comment[box]...[/box]
To mark the comment[mark]...[/mark]
To get background effect[card="blue"]...[/card]

Реверанс към вашите читатели е ако преведете поясненията към таговете, а тях можете да покажете чрез следния код.

<div style=' width: 92%;  text-align: left;  border: 1px solid #A5ACB2;  background: #E6F2F8; padding: 10px;   color:#0084ce;  margin-top:12px;'> 
 <b>Снимка</b> - [im]url на снимката[/im]
 <b>Color</b> - [co="red"]текст[/co]
 <b>Marquee </b> - [ma]текст[/ma]
</div>

Този контейнер вмъкнете в шаблона веднага след този код:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Добавянето на тази опция крие малък риск. Поредният коментатор може да добави снимка с огромни размери и това да изкърти спретната визия на вашия блог.

Емоционални иконки за коментарите в Blogger


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

По начина на предходния скрипт, добавяме и този след таг </head>. Спокойно може да добавите и над таг </body>. Аз съм го добавил последен над таг </html>. Въпрос на екстравагантност.

<script type='text/javascript'>

//<![CDATA[
a = document.getElementById('comments');
if(a) {
    b = a.getElementsByTagName("DD");
    for(i=0; i < b.length; i++) {
            if (b.item(i).getAttribute('CLASS') == 'comment-body') {
                _str = b.item(i).innerHTML.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6pdiVIm854TSSuIidop0riyvjA4s-1w6jv-p3XYz8TXTjyGHr2ikb1nSKDl2WMfBFPYjrE0dN9d7-3sQRLAcTmJHIFxV97Jy8exAg_Sv4_Jiz_T_RSc6v_MTCD8wcuksIAZg1T95ooEY/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI86p-l5ngX0kU1xyB4aHO9VvRDMWiI4k8fhlc5M7fljGwgsNrWEr_ozaCMeyCjPWhwaeeMjM3bJcCJ6ulos5TY-2UwaxfnKBXffmDZW3w-2awZpIgzlsyd8PWmgTTkbBYMi9xJqvnETY/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLA2jz3uG_T_PCkazO31XLDmmEkW12Ep2awaPrBEO7TxXAg5_qCFnewNNvluql0hVQGZYSgsUQ6-4pvKDxGUisq3OyV_xJZ_aWdVlbVj4nn25LMD4d3NV1sHYs7YmEp5tkne7cUG0-S1Y/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpGiNX0vKMDFYWiQvTgsncxh9CIZ76fPllVGmJ1NcrmZEXcAcMRM6NPtUtnH9mWCgQaNQaWwLVZi7xkb9vzzRcjZndRKgkLpJZXkaJw35e5C_l2oP42PcX7l6rcH040p0jYd2zmfOX4E4/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3JinJnqlDtbNfOh1NG57mY5h1MpGxVJ7ckHimFcUBiDl-ObawDZE0gkIrQ34xW8mjkXmPwAZnKgH1b4sgTSX_duakSK-w4xeY4Q1BokAIT-1DmLLMawjgpeoKFJC2w0IRCH3lB2ogXw/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefl8X_CUePKSx1UvTNy_mHAnwFKd4b5O5Apkxz0j1LnBSWQ60axSJfAef81LvZb9kzUMouKenUgLcy4eJxr2ypzGDczhn1UOgOu9Hu0JKmOqRxPGCbAsh1_SWwmngJVmbkNhsJCeO7vA/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsPHOCPQHMwMxbgUF4xByQBpnObdUgbmCuEsgjgRp9lq23ZMC3KyzcsceqqYDNhbhF5PFvds7frrsnMuAlB2hyphenhyphenOMtxihXmik98_taWf-vLyz7T3zTmrAXGNyY2L7DjzHfbwlfVIywiOk/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVCDdWWajWlU3lcGXnyqM5MsQb8TNwqUjCUAgSeBgPNTII_vqbu8SHnfYlRNhjTb48oOAE50BXK-_2o79j3KOYLevQhBCaireMlI2PdgDdEpPjDbRP0a1vnulUjcvIaRqkjlRnbEixag/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpVHTIbpCE78tyxwGckIhAbKBrIQB-5jBMK0yS7o6LHy2vmZQqyydaj_KvTKehTSlNufT8XztzhrlZfwLWWhu030yFJiS3FascYZ2koM6vqj9s5_v7owdEesXhMI1hTeCnR4OG7MiIo4/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7_TNjpr5i0aipjHno3bCVZFvdYDHRjHduGeH8zWkyT4NLr3NkZST8qxe4OMhi1RqoRw9lHwTIfCxf705w5rYDDhpPdtun60W5w6SQu-1WXGALQetVi2je89gpbMZLjsXztcG8R-qREk/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3THE34TpkHgrKli6-AzswEIAp-pIGWyB35M5Y7-lZFvZyp2EntOWjqyqiER2Vo4s7ghll-IALgrVQ8XFeadUEbWewBAhHIOCVhyphenhyphenC9bUbLPz2HREJiO4hHtbvGPiGH2BN5ut7ipq6ikLM/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

                _str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWClmz-Q8yicZLulZTDI3zShJQQNaHmeM54iUkPxEYM2Adsxz3rbISCMCjRtmo5jdemUVuROjmvLotD5oqHgvYBkTvPclZUduS1QjbtY81BCS4XGnJk2hcbDGVw5MMrR0hZWo7Thtyiw/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpissHozBr-Rsul3sRmcRY_cHoyrPkH2eJujNt4gTFEK2SCmuLmI62JtiznnFOVrnK8zy3h5esBmhj_Ndh4Zv6NGqBFxr9SHl3MpUreEulE3ZRiPWu4IJj9SVsx2EOcH86guMpgPpxq7I/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCaUQoZ-aqAKFa-TgKlois5wrs4FB6xF9zjX0oY3vadKIJyQIHRJRTge6-4qv9KLKvzw2Gqh6PvqGI8Q0xWtIDN39CIA6_vtct0Itud3U8A8NfDdlmkNPoFT_7pDHW9oAm-Nr7horFcTg/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh77tzaRnaowoRQyXq6qSzUzOr7dkKBAxNVAwtN76BN5lu9x3JneV8CcJfjWNPiGY2X_Yv_5oHQf4tfUfVt9-MW_v3Qa9Ksfjj3-fn-VJTDCYeIwUFDKEB6dBT10p2cinXcLyhJCGMt7rk/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHXA3KPNPwA3UjD-JZf9BZQnzuwIE2Wx8n4cmC7lBAROjdvbfdp7vq6KbcZs1GG81Wg9t64WffR4McPmogDVsfxiGTzdeHNuxZNpgLECy4K3rtKoUPzc3e4FAPFqwKTNNctxuf53T0D8/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwCC5FMLYpfLNtTK-hqHxdj84mZJVXUKVApwTm9jFVHuauy35EyBptDZfDCNKD3arEay1ozpTYof3Zxiw6cN66XrUMPcZPneMEKU64MIflOZFkjyWE_Ah5qWdopBwuy5QSv6ZO7Jmdso/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzit7qQrj0v1cz_lwS92bZaJA_WRNE1hi8OXx6gA5A_MIlC4c3VoZL0AUaQKVBRygjzZL82dcv1WMYhxZOeBS3nG2ckgm5rrV41iKh2FZWROFi95NPiAgq9jWZHvvJeT7N6Ni-ALezGE/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
                _str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOt9iIj_rEvlKVzJxccHLlxFgoOB9LvhYS5G4mkosoNKJ-wb09YCY9Pi-ZatflDC-KfiPjrw3v-SgXVsf17vw_PHLwkT2GvwqDSGUWLJY2OUFPzNBXOpnkWaMxO1ogK14sGBhg7wdfahM/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
        _str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCuYp1C44i4eY2JEId54Xl5ZRqz9m60VX40G_DK42vlUsnSwZSxkQaewOQvyUfUWICcUDAT8Kssy12tlXlZKioe81V05AEoI1nQMisWaQwS9bfgXFHToXAVZopW3sK3frS5Nt-PRDiOjQ/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
                b.item(i).innerHTML = _str;
            }
    }
}

//]]>

</script>

Сам по себе си скрипта не е достатъчен и е нужно обявяване на иконките. Скриптът просто ще замени буквени символи в текста на коментарите с емоционални иконки. В случая ползвам готови на Skype, намиращи се в image-хранилище Picasa. Иконките можете да покажете в контейнер или да добавите към предходния описан, а това изглежда така.

<div style=' width: 92%;  text-align: left;  border: 1px solid #A5ACB2;  background: #E6F2F8; padding: 10px;   color:#0084ce;  margin-top:12px;'> 
 <b>Снимка</b> - [im]url на снимката[/im]<br/>
 <b>Color</b> - [co="red"]текст[/co]<br/>
 <b>Marquee </b> - [ma]текст[/ma]<br/>

    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWClmz-Q8yicZLulZTDI3zShJQQNaHmeM54iUkPxEYM2Adsxz3rbISCMCjRtmo5jdemUVuROjmvLotD5oqHgvYBkTvPclZUduS1QjbtY81BCS4XGnJk2hcbDGVw5MMrR0hZWo7Thtyiw/s800/emoticon-0100-smile.gif'/> :a
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpissHozBr-Rsul3sRmcRY_cHoyrPkH2eJujNt4gTFEK2SCmuLmI62JtiznnFOVrnK8zy3h5esBmhj_Ndh4Zv6NGqBFxr9SHl3MpUreEulE3ZRiPWu4IJj9SVsx2EOcH86guMpgPpxq7I/s800/emoticon-0101-sadsmile.gif'/> :b
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCaUQoZ-aqAKFa-TgKlois5wrs4FB6xF9zjX0oY3vadKIJyQIHRJRTge6-4qv9KLKvzw2Gqh6PvqGI8Q0xWtIDN39CIA6_vtct0Itud3U8A8NfDdlmkNPoFT_7pDHW9oAm-Nr7horFcTg/s800/emoticon-0102-bigsmile.gif'/> :c
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh77tzaRnaowoRQyXq6qSzUzOr7dkKBAxNVAwtN76BN5lu9x3JneV8CcJfjWNPiGY2X_Yv_5oHQf4tfUfVt9-MW_v3Qa9Ksfjj3-fn-VJTDCYeIwUFDKEB6dBT10p2cinXcLyhJCGMt7rk/s800/emoticon-0105-wink.gif'/> :d
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHXA3KPNPwA3UjD-JZf9BZQnzuwIE2Wx8n4cmC7lBAROjdvbfdp7vq6KbcZs1GG81Wg9t64WffR4McPmogDVsfxiGTzdeHNuxZNpgLECy4K3rtKoUPzc3e4FAPFqwKTNNctxuf53T0D8/s800/emoticon-0104-surprised.gif'/> :e
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwCC5FMLYpfLNtTK-hqHxdj84mZJVXUKVApwTm9jFVHuauy35EyBptDZfDCNKD3arEay1ozpTYof3Zxiw6cN66XrUMPcZPneMEKU64MIflOZFkjyWE_Ah5qWdopBwuy5QSv6ZO7Jmdso/s800/emoticon-0106-crying.gif'/> :f
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzit7qQrj0v1cz_lwS92bZaJA_WRNE1hi8OXx6gA5A_MIlC4c3VoZL0AUaQKVBRygjzZL82dcv1WMYhxZOeBS3nG2ckgm5rrV41iKh2FZWROFi95NPiAgq9jWZHvvJeT7N6Ni-ALezGE/s800/emoticon-0109-kiss.gif'/> :g
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOt9iIj_rEvlKVzJxccHLlxFgoOB9LvhYS5G4mkosoNKJ-wb09YCY9Pi-ZatflDC-KfiPjrw3v-SgXVsf17vw_PHLwkT2GvwqDSGUWLJY2OUFPzNBXOpnkWaMxO1ogK14sGBhg7wdfahM/s800/emoticon-0111-blush.gif'/> :h
     <br/>
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCuYp1C44i4eY2JEId54Xl5ZRqz9m60VX40G_DK42vlUsnSwZSxkQaewOQvyUfUWICcUDAT8Kssy12tlXlZKioe81V05AEoI1nQMisWaQwS9bfgXFHToXAVZopW3sK3frS5Nt-PRDiOjQ/s800/emoticon-0110-tongueout.gif'/> :i
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6pdiVIm854TSSuIidop0riyvjA4s-1w6jv-p3XYz8TXTjyGHr2ikb1nSKDl2WMfBFPYjrE0dN9d7-3sQRLAcTmJHIFxV97Jy8exAg_Sv4_Jiz_T_RSc6v_MTCD8wcuksIAZg1T95ooEY/s800/emoticon-0126-nerd.gif'/> :j
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI86p-l5ngX0kU1xyB4aHO9VvRDMWiI4k8fhlc5M7fljGwgsNrWEr_ozaCMeyCjPWhwaeeMjM3bJcCJ6ulos5TY-2UwaxfnKBXffmDZW3w-2awZpIgzlsyd8PWmgTTkbBYMi9xJqvnETY/s800/emoticon-0103-cool.gif'/> :k
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLA2jz3uG_T_PCkazO31XLDmmEkW12Ep2awaPrBEO7TxXAg5_qCFnewNNvluql0hVQGZYSgsUQ6-4pvKDxGUisq3OyV_xJZ_aWdVlbVj4nn25LMD4d3NV1sHYs7YmEp5tkne7cUG0-S1Y/s800/emoticon-0130-devil.gif'/> :
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpGiNX0vKMDFYWiQvTgsncxh9CIZ76fPllVGmJ1NcrmZEXcAcMRM6NPtUtnH9mWCgQaNQaWwLVZi7xkb9vzzRcjZndRKgkLpJZXkaJw35e5C_l2oP42PcX7l6rcH040p0jYd2zmfOX4E4/s800/emoticon-0133-wait.gif'/> :m
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3JinJnqlDtbNfOh1NG57mY5h1MpGxVJ7ckHimFcUBiDl-ObawDZE0gkIrQ34xW8mjkXmPwAZnKgH1b4sgTSX_duakSK-w4xeY4Q1BokAIT-1DmLLMawjgpeoKFJC2w0IRCH3lB2ogXw/s800/emoticon-0137-clapping.gif'/> :n
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefl8X_CUePKSx1UvTNy_mHAnwFKd4b5O5Apkxz0j1LnBSWQ60axSJfAef81LvZb9kzUMouKenUgLcy4eJxr2ypzGDczhn1UOgOu9Hu0JKmOqRxPGCbAsh1_SWwmngJVmbkNhsJCeO7vA/s800/emoticon-0136-giggle.gif'/> :o
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsPHOCPQHMwMxbgUF4xByQBpnObdUgbmCuEsgjgRp9lq23ZMC3KyzcsceqqYDNhbhF5PFvds7frrsnMuAlB2hyphenhyphenOMtxihXmik98_taWf-vLyz7T3zTmrAXGNyY2L7DjzHfbwlfVIywiOk/s800/emoticon-0141-whew.gif'/> :p
     <br/>
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmVCDdWWajWlU3lcGXnyqM5MsQb8TNwqUjCUAgSeBgPNTII_vqbu8SHnfYlRNhjTb48oOAE50BXK-_2o79j3KOYLevQhBCaireMlI2PdgDdEpPjDbRP0a1vnulUjcvIaRqkjlRnbEixag/s800/emoticon-0148-yes.gif'/> :q
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpVHTIbpCE78tyxwGckIhAbKBrIQB-5jBMK0yS7o6LHy2vmZQqyydaj_KvTKehTSlNufT8XztzhrlZfwLWWhu030yFJiS3FascYZ2koM6vqj9s5_v7owdEesXhMI1hTeCnR4OG7MiIo4/s800/emoticon-0149-no.gif'/> :r
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3THE34TpkHgrKli6-AzswEIAp-pIGWyB35M5Y7-lZFvZyp2EntOWjqyqiER2Vo4s7ghll-IALgrVQ8XFeadUEbWewBAhHIOCVhyphenhyphenC9bUbLPz2HREJiO4hHtbvGPiGH2BN5ut7ipq6ikLM/s800/emoticon-0178-rock.gif'/> :s
     
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7_TNjpr5i0aipjHno3bCVZFvdYDHRjHduGeH8zWkyT4NLr3NkZST8qxe4OMhi1RqoRw9lHwTIfCxf705w5rYDDhpPdtun60W5w6SQu-1WXGALQetVi2je89gpbMZLjsXztcG8R-qREk/s800/emoticon-0155-flower.gif'/> :t
    </div>

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

По-важно е как стоят нещата на практика. В появилия се нов участник на шаблона в сектор Коментари ще се вижда поредица от икони, а в дясно от тях буквени символи. Тези символи трябва да се добавят в коментара, за да се визуализират в последствие в емоционални икони. Влачене на иконка в прозореца за коментари не върши работа.

Размери на формата за коментари


Шаблоните за Blogger изобилстват като количество, но всички те ползват обща форма за коментари. Възможно е обаче тя да не пасва на общата визия на блога по размери. Вие можете да промени това състояние като намерите следния код.

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Веднага под него се нарежда подобен код.

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Значенията в width и в height можете да променяте по ваш вкус. Можете да задавате значенията и в проценти, за да получите желаните размери.

NoFollow или DoFollow за коментарите в Blogger


Аз не съм SEO-оптимизатор и се въздържам от задълбочен коментар. Искам да насоча вашето внимание към съшествен момент относно коментарите в Blogger. Te не се индексират от паяците в мрежата. Причина за това е значение на атрибута rel на тага «a», а той е nofollow. Това виждаме в следния код.

<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

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

За себе си реших да премахна този атрибут, защото вярвам, че интернет е създаден от хората за хората, а не за машини. В този улеи се е създало движение DoFollow. Повече за него потърсете информация в интернет.










до нови срещи   ^.^

07.01.2011 profruit 


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

По подразбиране изплуващите подсказки (Tooltip) взимат значението на атрибута на елемента title. Отличителната способност на изплуващата подсказка Easy Tooltip е възможността да използва в блока подсказките на произволно html съдържимо - картинка, даден текст, списък с адреси и т.н.

В статията си Easy Tooltip - jQuery plugin, Alen Grakalic обяснява в сбита форма начина за инсталиране и ползване на скрипта. Съществено в случая е наличен easyTooltip.zip за изтегляне. В него ще намерите три начина за ползване на скрипта, от които аз предпочетох първия.

Инсталация


Инсталирайте jQuery и скрипта на вашата страница.
В изтегления архив от статията на Grakalic има папка js, която съдържа необходимото. jQuery в случая е версия 1.3.2. Аз предпочетох да включа въпросната библиотека от хранилището на Google, която е по-нова версия.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>

Инициализране на скрипта става чрез този код:

$(document).ready(function(){
$("a").easyTooltip();
});

Съчетавайки двата кода с възможностите на Google при мен нещата стоят така:

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip();
});
</script>
</head>
<body>

CSS за блока на подсказката:

#easyTooltip{
padding:5px;
border:1px solid #ccc;
background:#f1f1f1;
}
фоново изображение
Изображение с наличен градиент ще подсили визуалния ефект на подсказката. За целта го добавяме в стиловете, като фоново, което ще се повтаря по ос Х. В добавка още ще включим новите възможности на CSS3 за сянка и за заоблени ъгли.

Параметри

Параметър Значение Описание
xOffset 10 отстъп на подсказката в ляво от курсора
yOffset 20 отстъп на подсказката нагоре от курсора
tooltipId easyTooltip произволен id за избран блок
clickRemove false По подразбиране подсказката пропада, когато курсора е отместен от елемента. Използвайки този параметър може да се скрие подсказката по клик по елемента.
content празен ред По подразбиране, скриптът извежда в своя прозорец значението на атрибута на елемента title.
useElement «» Позволява да се задава в качествето на изплуваща подсказка съдържимото на указания елемент.

Споменатите параметри може да коригирате в файл easyTooltip.js.
Отворете файла с предпочитан текстови редактор и намерете секция: // default configuration properties.

Демонстрация

За да видите действието на този скрипт просто преминете над следните адреси Profruit blog или Google търсачка. Скриптът ще прочете съдържанието на атрибут title и ще го изведе като подсказа.




до нови срещи   ^.^

20.11.2010 profruit 


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

Качване снимка от Blogger


Разясненията в своите теми в Blogger (profruit.blogspot.com) аз подкрепям с снимки. По замисъл тези снимки се съхраняват в Picasa. Picasa и Blogger са собственост на Google и това унифицира нещата за ползване под едно потребителско име. Всяка снимка се качва с помощта на java-редактор, намиращ се в админ-панела на Blogger. Този редактор върши черната работа за писане на html - код при оформяне на поредна статия. Аз не харесвам генерирания от него код. Той е обременен и неоптимизиран. Липсват атрибути alt="" и title="". Кликайки по снимката, посетителя бива отвеждан в нов прозорец, за да я разгледа. Следва интуитивно затваряне на снимката след разглеждане и на практика затваряне на блога. Никак неудобно и те кара, да помниш, че си пренасочен, за да се върнеш обратно. Тъпо!

Това е кодът, управляващ снимката.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s1600/code.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s320/code.jpg" /></a>
</div>

Корекция код от Profruit

code

Не малка част от посетителите ми са доведе от image.google.com. Обяснение за това е, че си правя труда да добавям липсващите атрибути alt="" и title="" в отделната снимка. Реших, че е по-добре снимката да се отваря в пълен размер в нов прозорец с помощта на атрибут target="_blank". По този начин посетителя не напуска страницата. От друга страна е леко дразнещо пръкването на нов прозрец и това го съдя по себе си.

Това е кодът, управляващ снимката.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s1600/code.jpg" target="_blank" title="profruit корекция"><img border="0" alt="code" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinbIwFumNljPoDA2Kys22s9GWLO0XnEzlI2yz9G1VEnlq6U89U-QjacwbMc9ZuLbBHWrVNhrVZheZ4l9acuFEbS_UclSKRcupOlnv2q8DheucVnvmjNRX-iSgLolycmX8FwdmeYf2oyJxA/s320/code.jpg"  />
</a>

Lightbox за Blogger

code
 Това ме наведе на мисълта да впрегна Lightbox в услуга на моя блог. Lightbox е дело на Lokesh Dhakar. Това е JS (джава скрипт), който придава модерен и елегантен вид на вашите снимки. Определено е много ефектен и повдига имиджа на сайта ви. Поднася снимките на затъмнен фон, а това повдига констраста и спомага за по-комфорно разглеждане.

Инсталация на Lightbox

  1. Влезте в админ-панела на вашия блог
  2. Преминете в Дизайн > Редактиране HTML кода
  3. Намерете таг </head>
  4. Маркирайте го и го заменете с кода, показан долу
<!--Light Box Code Starts  Bloggerplugins.ORG-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MDAPdu58eUMCqOSfySA6Tg2angvxw9xzVx3vLfq0KOIIT_W9nwnyLJlwPVnhRHP3fv5mzXxnDfxCAahSTStOGRF0t3s_JNFiE5lBHlLwZaeJEpgI67gf5Jamy93B3WEvsGIaGJ8IOmo/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEh-xl3A5mIlFIGwM7zujVBFNL6Mpt8tufjkyqJYB2PQQSvttX2k8JbwdGPaZYKIvOr7YiIfSPtk2_bhHZzshqMtpxbySrNPTXyWBTPBc7YIaFwWZgj1qrjb7UZyjV4q4t25bmJGQREhk/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }       
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}    
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
</head>

На снимката се вижда замяната с предложения код. Той е предоставен от Bloggerplugins.OR. В края на замяната съхранете измененията. Това е всичко. Остава да допълните един атрибут - rel="lightbox" в кода на споделената снимка, за да оживите Lightbox. Пример:

<a rel="lightbox" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" border="0" /></a>

Фотоалбум Тел Авив

Tel AvivTel AvivTel AvivTel Aviv

С предложения скрипт можете да създавате фотоалбум. Достатъчно е да подберете нужните снимки и да допълните атрибута по показания начин - rel="lightbox[име на албума]".

Натиснете предварително бутон F11 от вашата клавиатура. Това ще отвори браузера ви на пълен екран и по-комфортно ще разглеждате снимките. Забележете, че можете да управлявате галерията с следните бутони.
  • N - напред
  • P - назад
  • С - затваряне

Slimbox 2 за Blogger

Скелет на моя блог е Zinmag Primus v1.02. В шапката се вижда въртележка. Тя се задвижва от JQuery. След добавяне на кода за Lightbox, въртележката спря. Някакъв конфликт настъпва между отделните скриптове и аз потърсих решение на въпроса. Оказа се разновидност Slimbox 2. Ако при вас настъпи подобен проблем, ползвайте следния код на Slimbox 2.

<!--LightBox 2 @profruit.blog -->
<link href='http://my_site/slimbox2.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>
<script src='my_site/slimbox2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function()
{

});
</script>

Файл-скриптове и файл-стил можете да изтеглите от тук:
slimbox2.js
slimbox2.css

Картинките можете да изтеглите от тук:
prevnextclose

Картинките можете да преведете в графичен редактор на български език или език по ваше желание. Качете ги в "Уеб албуми Picasa". Копирайте пълните им адресите там и ги заменете в файл slimbox2.css.

Регистрирайте си сайт в Google sites и качете двата скрипта плюс редактирания файл с стилове. Копирайте адресите им и съответно ги заменете в кода на Slimbox 2, а него готов, допишете в шапката на вашия блог преди таг </head>.

Разлика в резултата не намирам между двата кода и принципът е същия. За единична снимка примерът е този:

<a rel="lightbox" href="адрес на снимката" title=""><img src="адрес на миниатюрата" alt="" border="0" /></a>

За галерия този: rel="lightbox[име на албума]".






до нови срещи   ^.^

23.07.2010 profruit 



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

SEO oптимизация  на Blogger

Както забелязвате този начин е неудачен за SEO (Search Engine Optimization). По-важно в случая е името на публикацията да бъде пред името на блога, особено когато името на публикацията е ключова фраза за търсачката на Google. На практика Google така ме е индексирал. Едва ли някой ще търси с ключова фраза "Profruit: Книгата на живота", от което ще страда моята позиция на едноименния разказ.

SEO oптимизация  на Blogger

Следва че е изключително важно подредбата да бъде Post Title + Blog Title, защото по този начин желаете да бъдете намирани в резулатите на Google.
Какво е нужно за промяна местата на заглавията?
1. Вход в своя профил на Blogger - Табло за управление - Настройки - Оформление - Редактиране на HTML кода. Пред вас ще се появи прозорец с название "Редактиране на шаблон".

2. В този прозорец търсим таг  <title><data:blog.pageTitle/></title>
 и го заместваме с този:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

3. Съхраняваме измененията.
В резултат имаме постигната цел:

SEO oптимизация  на Blogger











Позволете да продължим нашата оптимизация, чрез просто добавяне на мета-тагове в кода на нашия блог.
Какво е Meta Tag? Това е част от HTML, който обикновено стои в началото на шаблона на всеки сайт. Той осигурява информация на търсачката, относно съдържанието на вашата web - страница. Според оптимизатори, мета-таговете са изживели ролята си, но определено се вярва, че те все още се взимат под внимание. Нека ги добавим тогава без умисъл за вреда от това.
Отново отиваме по описания горе път за корекция на кода в прозореца - Редактиране на шаблон.
С клавишна комбинация "CTRL + F" търсим код  <title><data:blog.pageTitle/></title>

Веднага след него добавяме новите два реда:

<meta content='Опишете вашия блог тук' name='description'/>
<meta content='Вашите ключови думи тук' name='keywords'/>

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

Поздравления, вашият блог е с едни гърди пред другите!




до нови срещи   ^.^

profruit 

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: openHAB, Ubuntu, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога