- спира роботите да индексират архива януари 2017 | Блогът на Илиян Минчев

Всичко, което ме интересува !

21 януари, 2017

Комбинирана система за коментиране чрез Blogger и Facebook, вградена в Blogger блог

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

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

Комбинирана система за коментиране чрез Blogger и Facebook, вградена в Blogger блог
 За демонстрация на живо, вижте в коментарите
 под тази публикация.
Нека започнем!

1. Влезте в контролния панел на Blogger. Отидете на "Шаблон" и си направете резервно копие на шаблона. Никога не пропускайте тази стъпка, защото винаги има шанс нещо да се обърка и е хубаво да имаме копие с което да възстановим блога си.

2. Преди да започнем да пипаме по кода, ще трябва да създадем и приложение за коментари във Фейсбук. Посете този адрес - https://developers.facebook.com/apps и натиснете върху зеления бутон + Add a New App в десния ъгъл.

Попълнете Display Name (напишете име на приложението), в полето Email, напишете електронната си поща, изберете категория и натиснете бутона Create App ID. Попълнете кода за проверка и кликнете върху Sumbit.

В страницата, в която ще ви прехвърли натиснете върху Roles и се уверете, че сте вписани като администратор. Копирайте APP ID, може да погледнете на снимката къде точно се намира и го запишете в текстов документ, защото ще се наложи да го използваме по-късно.

Facebook APP ID

Работата тук почти приключи, влезте в App Review, задайте приложението да бъде публично и потвърдете с Confirm. Ето и снимка, за да се ориентирате по-добре.

Facebook, Make app public?

3. Върнете се обратно в контролният панел на Блогър. Отидете на "Шаблон" и изберете "Редактиране на HTML кода". Използвайте търсачката, появява се чрез натискане на клавишна комбинация Ctrl+F и намерете

</head>

Над него поставете следния код и заместете текста в червено с вашите данни.

<meta content='адрес на профила ви във Фейсбук' property='fb:admins'/>
<meta content='поставете тук вашият APP ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://tipsviablogging.github.io/tvbcommentstyle.js'/>
<script src='http://connect.facebook.net/bg_BG/all.js#xfbml=1'/>

4. Сега потърсете за

<html

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

xmlns:og='http://ogp.me/ns#'

Вижте и приложената снимка, за да се ориентирате как да добавите точно кода.
xmlns:og='http://ogp.me/ns#'
5. Остана само да намерим в кода

 <div class='comments' id='comments'>

излиза ДВА пъти, така че поставете и под двата реда този код

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'>
            Коментирай през Blogger      </div>
             <div class='comments-tab' id='fb-comments' title='Comments made on Facebook'>
            Коментирай през FaceBook              </div>
                      </b:if>
                      <div class='clear'/>
                    </div>
                <div class='comments-page' id='fb-comments-page'>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <br/>
                <br/>
                <fb:comments expr:href='data:post.url' num_posts='10' width='550'/>
                </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Може да промените и текста оцветен в червено и да напишете каквото пожелаете. Написаното ще излиза върху самите бутони, служещи за превключване от Blogger към Facebook коментари.

Текста маркиран в синьо '10' е номера на коментарите показващи се във Фейсбук приставката, преди потребителя да зареди още 10 и т.н. Може да го промените. Ширината на полето на самата приставка може да промените, като редактирате 550 показан в синьо.

6. Ако желаете в бутоните ви да се показва и броя на коментарите, заместете кода от стъпка 5 с този код

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'>
            <data:post.numComments/>                                                                                                  Коментирай през Blogger
      </div>
             <div class='comments-tab' id='fb-comments' title='Comments made on Facebook'>
             <fb:comments-count expr:href='data:post.url'/>       
             Коментирай през FaceBook
              </div>
                      </b:if>
                      <div class='clear'/>
                    </div>
                <div class='comments-page' id='fb-comments-page'>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <br/>
                <br/>
                <fb:comments expr:href='data:post.url' num_posts='10' width='550'/>
                </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

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

7. Запазете промените и влезте в някоя от публикациите ви, за да видите комбинираната ви система за коментари.

Модерацията на коментарите става от този адрес - https://developers.facebook.com/tools/comments.
Ако желаете да промените някой неща натиснете върху Settings, след което ще ви се отвори прозорец, в които може да промените получаването на известия, как да са подредени коментарите, да добавяте модератори, да добавите черен списък с думи, да баннете потребители и т.н.

Забележки:
Използвайте приставката на по-прости и изчистени шаблони, за да работи правилно. Страниците с публикации, ще забавят зареждането си, имайте го в предвид!

Източник: http://web4services.blogspot.bg
Сподели:

17 януари, 2017

Как да добавим емотикони в коментарите на Blogger

Емотикони в коментарите на Blogger? Звучи чудесно, но прилагането на тази идея се оказа по-трудно, отколкото си мислех занимание. Намерих няколко теми с различни емотикони и начини на вграждане на код в блог, изграден върху платформата на Blogspot. В долните редове ще ви представя, как процедирах аз, също и кодовете, които използвах, но преди да започнем нека първо покажа крайния резултат, който се получи след прилагането на долните редове код.

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

threaded commenting system with comments that have the reply function

Нека започваме! Първо разбира се си направете резервно копие на шаблона, за да имате back up, в случай на счупване на сайта ви. Следва да влезнете в контрол панела на блогър, да отидете на "Шаблон" и да изберете "Редактиране на HTML кода".

Стъпка 1. Използвайте търсачката, като натиснете клавишна комбинация "CTRL+F" и намерете следният ред:
</body>
Стъпка 2. Точно над него сложете този код (скрипт):
<script type='text/javascript'>
//<![CDATA[
a=document.getElementById('comment-holder');if(a){b=a.getElementsByTagName("p");for(i=0;i<b.length;i++){if(b.item(i).getAttribute('CLASS')=='comment-content'){_str=b.item(i).innerHTML.replace(/:\)\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2Mo5_ghEbftm0TIwAPPlwHoLIcaqi3691qVS5WJoQrEwKGIOdKQUCz1tAxoIH3e6A_Ug7WMJgs8EFElmHkzUAcMduF7Af8ufVfDUwka-29znUKazlkMZEFA1Jlg627RM3JH4YKuGvgI/s1600/taunt.gif' alt='' class='smiley'/>");_str=_str.replace(/=d&gt;/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSO8xNRJG007yWPEDagCnGPE40GNbUkFBf7ZsDd7ZsRfD7UbzCXCYmkxzFPmB_W75nfZuXihwBfqkSk3EuwEtwWk9pTSW8L0hItm_LNMz0sXuS2y9RIWq3DAg-lgcNJZAxNk6Z3E-khs/s1600/suicide.gif' alt='' class='smiley'/>");_str=_str.replace(/:d/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiD5UIH_Fx0C_pml1ZV39DOgfk-xaHBaYbFAv-TqPO4Ny9CaUQmrzJNUsIGZPMA-XGNFO5iqJ-d5wx1bZizoIo3x-2RC_TVDnURnXCwYQTsT40oT0sf1Gn4NHidZLktOSrSdZujHuXFDI/s1600/biggrin.gif' alt='' class='smiley'/>");_str=_str.replace(/:p/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifx3GL4ejNEhGwy2vztrAJm6R6Qy8brvmGYCV4wlGBNZJZZSX5qkTTxe6HC0gTqD5j7AxsXIzJKaaTYaValZHzxMpO3RAleDVsTCBoBl9TPGUNm-b3WiJ2RXhG0Xp9tZM_pdfJC6x9OKQ/s1600/tongue.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvyoCaCfXe2wUqjB9Ibpykd66lOkw50mFYKi47WPqTR-9t0wsfVYu-2k2atudEktWs9lN0pC6_HOd4dPujwq9WCs7GmURFn7hkU6P5fYeJCUzFJYaTWw8H0vMhAwMfawqkcq_6nuZ5V8/s1600/cry2.gif' alt='' class='smiley'/>");_str=_str.replace(/:\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm2U88OibLjZ0HObxipoL_1fBBweCDGMi7NJOLgEV-NbjxXg-ftLeLMmYADuom70IxxgBaYtp1SZ_pgZ60CrgkOuaUgBpJRuDy75sEQW35mxqEEvbHYDK3dnaYUAcaddEvlOxNJfQ1mY/s1600/smile3.gif' alt='' class='smiley'/>");_str=_str.replace(/:\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8dGKBUYMFh5PQ58wNBxkyoeH83wewrv83RtqGXoZ6NZwJ9rhDG0U00YSE9XBdsEkB_OvNLI4Drz2vHgLxLZoTaRFfUOXZ8EsECNo__fH7J2VZL59dPe13DaEoqJajlSTi-GXp-gmJt4/s1600/sad.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\?/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnlUWCqOcyjdRMSuqo9l5bgB8Ct7JLydSzK-WnTJVQs2Zfc_xTII_4y4NRAsGIvjuHbdH1uWaou_Lp4aGQptv_qFCMz4WuKJUkaRX0C60CQecXUyVyiuEuthi7DABYyduUvfb0Od4Zio/s1600/think.gif' alt='' class='smiley'/>");_str=_str.replace(/d\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MPxum0L36VUo98vD_zcsSV5tTAed3uqY-HYda2ZC8JPXD-Q-RQaRXrv9lzn2tnjV_4ouZX04323GZdHg5Zc3vErmqYc71j4T7dV4FPYiYDatjc-_pMiubPB9rFHkvMAoK9eUrj1SbG8/s1600/doh.gif' alt='' class='smiley'/>");_str=_str.replace(/:-o/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF73HlbDuygua3psjeHbelf07pXSNTWiy9NmCigmt6eLYZirgDxuRuQe9VKrqgWZO60N23ikTu1vHuX-t6pazyPVRpBKRCj6r0GscZr9WOvS2tL5qn5d-vPHhum8_EHuzwDZXnCbhR2uo/s1600/shock.gif' alt='' class='smiley'/>");_str=_str.replace(/:-f/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftg9CYT3d5yTgO0tfsyRVY4Zt49Jzs9a3eHUNUEv_w_m2mQk7CooBmeONWhepCy_E7IoCa5SvJ8iVlkYV0GBrxOPgaFZRIKmYcpoifJC45HgnXYXoyqxGQmXdyZKJwD9j7TcQOKf-0G8/s1600/flowers1.gif' alt='' class='smiley'/>");_str=_str.replace(/:-ss/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUsxoVJtGRe2SUzz8BQGUrF6MMiyMLv9KW_ztPScduc_qK8bsH4TadnbnJG7nV4J8sK5ts-rY-js47XEiX3Y_b3bCNEDNgxFElbsBAGR5wc1B-0xKi3vueaxb5zkuAiQAb410IoYJgDJ8/s1600/unsure.gif' alt='' class='smiley'/>");_str=_str.replace(/b-\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_rqnxGQmtoacLGupOYSwk7a60OQNF9iL98GWEpZJJlFlEEVPzcQNmHgW7JGwMr9YYuA8UNqteaFsF31bfGz3IJY-lpAD3C7RSsGSwB719tnBDaJr5vvDU4eUOPNvjDNOeR7XA2bAzzA/s1600/threaten.gif' alt='' class='smiley'/>");_str=_str.replace(/h-\(/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTejCUhDvZPAVNpAA9UPkn9Pp_EWI8MOW6ij3gzSFvFhKRNJNcWduaznmHDoy6sB0vCaAp5ixzWJkSJvk3s4RyStiWl7jSPyA6doMB_vtSh9ixN-tVs13HqF39yp5Kp06Ruxa6hBiMEZw/s1600/help.gif' alt='' class='smiley'/>");_str=_str.replace(/g-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje93-LJ9uQ7JtTGENYyp_LKHaSJahGQ1aLo5JyKe1eac1MtydS792LtwjFWMoV_AIED3q7_fInuuqxVKazr6Kq9PqEvrHnTIg7jVeugV7GCxqknI0ldRXvVV2s6ybfJjbC270E7Rn3Ys/s1600/good.gif' alt='' class='smiley'/>");_str=_str.replace(/5-\p/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivj0YJB5itQfMWijk9wg_iXXR9iPSSJyywCecfXt5-bDDFfcR_wSGQTh5GTL5CG4B51lFpWxUsn6soElWhaKm2nWd-T2OvyYIoq0idqPpm-vOPdZMU-ZANkfciv1hdCh9-zKhz29nMCcQ/s1600/beee.gif' alt='' class='smiley'/>");_str=_str.replace(/y-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7atn76fiZM-j-CEcJXpYSrtbryO2bNKDqSfEt5-eaSYxHD04eX1Mq1vFCtNoYhHiUasI0wbEBbj0vgm1FPoEs3tRG7LuMEt22R_Od66vU4TAoGQkDIY6pDuenTicv7PYNzc5_j0Ugppc/s1600/yahoo.gif' alt='' class='smiley'/>");_str=_str.replace(/c-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwEaVLESKbOQMsXeulLz4spOM5pbS6ALsU7T2MiCC4IUXcsD7biBgqC5LJPYV-C6oe0zF8hYjdui-sJuG4Ap56ZBiRcbbpQOm8cNAsAmBBcVg0S5mBhlnKZCDED0RxyUKkznhcPGrRLc/s1600/crazy.gif' alt='' class='smiley'/>");_str=_str.replace(/s-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75qIyBO1349cUMmTDOFxNep-ewmjFnNAtPznO84Dd_7dB9sBFxemoFDHqACgzIrdd6QSdtS4-sPtgZNffWQGlhU3m3HGGHWCL5lGTokqEhT8mHqa3g-Cxx-wK2IokcbILmIXnTQ8MIqM/s1600/spiteful.gif' alt='' class='smiley'/>");_str=_str.replace(/d-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLK-mlAWIJHUIkgNDZeciDHVzY3zlFQl7YHFEmn7l13XlMlQdX5BT9IVc6DnXoPIvoQE_6xKsDEy4UGkygvdJYFBNMArEQ9Jnej3jtXCs44LGQq1tPEtjVxFtLpC3HovUcgfxSg-H-xLI/s1600/drinks.gif' alt='' class='smiley'/>");_str=_str.replace(/w-\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-NvhXQgeX4myAHkNyNEQL1oAB5DVIjtwQE5j6nQJiIk0h9oeUwDUD5vi1GjfC7sXa66eEOYjhQuGpLQ02pC1lBn0qNmmLUT5qvon6IAj5tbIf9yGKo2ceByy8TCcVdPxS47Ia6ssYss/s1600/cheer.gif' alt='' class='smiley'/>");_str=_str.replace(/:-\h/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFoVV-6pvKw0WqiCtUcI8SsxdLo33zp6KOkqdzrdYFbQFTNBH7nPQC6QdtHfttfze4uLxgmnZ6XimAZ6UIewJcA0SN08NzWqmaUxn44IgQfzlusILDLmqfDbPhqRNrVNSmbpKgrsRDSk/s1600/hi+2.gif' alt='' class='smiley'/>");_str=_str.replace(/:X/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPK1v9g9UHEhrjzCtObyc2rZehyD2OD6SkMtfX4Rrzl9wRvdjo83ppLeUsrZ2bc1vBaYq_l31oEIurxBeL7Sbsv59coglsrotxv7pMhinzPNVodyKcRPTMMYd8o4FJczn3UrjMMxNOfRo/s1600/give_heart.gif' alt='' class='smiley'/>");_str=_str.replace(/:\-\*/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCM_rpGvaBNe6vPNH3O9COewXve2y3Ip7yGp3BJM4Gcr9cIVA4CwyPZ2AahQ3yxRze1-VNdd-K93iM3WwVkU0TlR8YD1E4YWgcb24cLN_K-Us96dMWftBC96uCH851fhT2fGwyL1Y-b6o/s1600/air_kiss.gif' alt='' class='smiley'/>");_str=_str.replace(/=\)\)/gi,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6pbA-9QVaSpz7bW7E0SXGpSzrs4RGNfSyfKo27pxURhiZNqp2xMF66LotMCUD4hdv_KJNC2hBRk176Xd_nBibCPMium-iAVOlz9SvXZ46X7NTDgPNM_NKaJ0_hEvCDP5qOQOnwbGsc8/s1600/rofl.gif' alt='' class='smiley'/>");b.item(i).innerHTML=_str;}}}
//]]></script>
С това завършихте първия етап от добавянето на емотиконите във вашият блог. Сега остана да сложим кутия с изображенията и кодовете, които вашите посетители могат да копират и публикуват в коментарите си.

Стъпка 3. Намерете следният ред:
<data:commentLabel/>
под него / след него се намира затварящия таг
</h4>
Стъпка 4. Точно под него поставете този код:
<center><div style=' width: 420px; text-align: left; border: 2px solid #333333; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm2U88OibLjZ0HObxipoL_1fBBweCDGMi7NJOLgEV-NbjxXg-ftLeLMmYADuom70IxxgBaYtp1SZ_pgZ60CrgkOuaUgBpJRuDy75sEQW35mxqEEvbHYDK3dnaYUAcaddEvlOxNJfQ1mY/s1600/smile3.gif'/> :) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8dGKBUYMFh5PQ58wNBxkyoeH83wewrv83RtqGXoZ6NZwJ9rhDG0U00YSE9XBdsEkB_OvNLI4Drz2vHgLxLZoTaRFfUOXZ8EsECNo__fH7J2VZL59dPe13DaEoqJajlSTi-GXp-gmJt4/s1600/sad.gif'/> :( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2Mo5_ghEbftm0TIwAPPlwHoLIcaqi3691qVS5WJoQrEwKGIOdKQUCz1tAxoIH3e6A_Ug7WMJgs8EFElmHkzUAcMduF7Af8ufVfDUwka-29znUKazlkMZEFA1Jlg627RM3JH4YKuGvgI/s1600/taunt.gif'/> :)) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvyoCaCfXe2wUqjB9Ibpykd66lOkw50mFYKi47WPqTR-9t0wsfVYu-2k2atudEktWs9lN0pC6_HOd4dPujwq9WCs7GmURFn7hkU6P5fYeJCUzFJYaTWw8H0vMhAwMfawqkcq_6nuZ5V8/s1600/cry2.gif'/> :(( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6pbA-9QVaSpz7bW7E0SXGpSzrs4RGNfSyfKo27pxURhiZNqp2xMF66LotMCUD4hdv_KJNC2hBRk176Xd_nBibCPMium-iAVOlz9SvXZ46X7NTDgPNM_NKaJ0_hEvCDP5qOQOnwbGsc8/s1600/rofl.gif'/> =)) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiD5UIH_Fx0C_pml1ZV39DOgfk-xaHBaYbFAv-TqPO4Ny9CaUQmrzJNUsIGZPMA-XGNFO5iqJ-d5wx1bZizoIo3x-2RC_TVDnURnXCwYQTsT40oT0sf1Gn4NHidZLktOSrSdZujHuXFDI/s1600/biggrin.gif'/> :D <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifx3GL4ejNEhGwy2vztrAJm6R6Qy8brvmGYCV4wlGBNZJZZSX5qkTTxe6HC0gTqD5j7AxsXIzJKaaTYaValZHzxMpO3RAleDVsTCBoBl9TPGUNm-b3WiJ2RXhG0Xp9tZM_pdfJC6x9OKQ/s1600/tongue.gif'/> :P <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF73HlbDuygua3psjeHbelf07pXSNTWiy9NmCigmt6eLYZirgDxuRuQe9VKrqgWZO60N23ikTu1vHuX-t6pazyPVRpBKRCj6r0GscZr9WOvS2tL5qn5d-vPHhum8_EHuzwDZXnCbhR2uo/s1600/shock.gi'/> :-O <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnlUWCqOcyjdRMSuqo9l5bgB8Ct7JLydSzK-WnTJVQs2Zfc_xTII_4y4NRAsGIvjuHbdH1uWaou_Lp4aGQptv_qFCMz4WuKJUkaRX0C60CQecXUyVyiuEuthi7DABYyduUvfb0Od4Zio/s1600/think.gif'/> :-? <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUsxoVJtGRe2SUzz8BQGUrF6MMiyMLv9KW_ztPScduc_qK8bsH4TadnbnJG7nV4J8sK5ts-rY-js47XEiX3Y_b3bCNEDNgxFElbsBAGR5wc1B-0xKi3vueaxb5zkuAiQAb410IoYJgDJ8/s1600/unsure.gif'/> :s <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftg9CYT3d5yTgO0tfsyRVY4Zt49Jzs9a3eHUNUEv_w_m2mQk7CooBmeONWhepCy_E7IoCa5SvJ8iVlkYV0GBrxOPgaFZRIKmYcpoifJC45HgnXYXoyqxGQmXdyZKJwD9j7TcQOKf-0G8/s1600/flowers1.gif'/> :-f <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MPxum0L36VUo98vD_zcsSV5tTAed3uqY-HYda2ZC8JPXD-Q-RQaRXrv9lzn2tnjV_4ouZX04323GZdHg5Zc3vErmqYc71j4T7dV4FPYiYDatjc-_pMiubPB9rFHkvMAoK9eUrj1SbG8/s1600/doh.gif'/> d( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCM_rpGvaBNe6vPNH3O9COewXve2y3Ip7yGp3BJM4Gcr9cIVA4CwyPZ2AahQ3yxRze1-VNdd-K93iM3WwVkU0TlR8YD1E4YWgcb24cLN_K-Us96dMWftBC96uCH851fhT2fGwyL1Y-b6o/s1600/air_kiss.gif'/> :-* <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_rqnxGQmtoacLGupOYSwk7a60OQNF9iL98GWEpZJJlFlEEVPzcQNmHgW7JGwMr9YYuA8UNqteaFsF31bfGz3IJY-lpAD3C7RSsGSwB719tnBDaJr5vvDU4eUOPNvjDNOeR7XA2bAzzA/s1600/threaten.gif'/> b-( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTejCUhDvZPAVNpAA9UPkn9Pp_EWI8MOW6ij3gzSFvFhKRNJNcWduaznmHDoy6sB0vCaAp5ixzWJkSJvk3s4RyStiWl7jSPyA6doMB_vtSh9ixN-tVs13HqF39yp5Kp06Ruxa6hBiMEZw/s1600/help.gif'/> h-( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje93-LJ9uQ7JtTGENYyp_LKHaSJahGQ1aLo5JyKe1eac1MtydS792LtwjFWMoV_AIED3q7_fInuuqxVKazr6Kq9PqEvrHnTIg7jVeugV7GCxqknI0ldRXvVV2s6ybfJjbC270E7Rn3Ys/s1600/good.gif'/> g-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivj0YJB5itQfMWijk9wg_iXXR9iPSSJyywCecfXt5-bDDFfcR_wSGQTh5GTL5CG4B51lFpWxUsn6soElWhaKm2nWd-T2OvyYIoq0idqPpm-vOPdZMU-ZANkfciv1hdCh9-zKhz29nMCcQ/s1600/beee.gif'/> 5-p <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7atn76fiZM-j-CEcJXpYSrtbryO2bNKDqSfEt5-eaSYxHD04eX1Mq1vFCtNoYhHiUasI0wbEBbj0vgm1FPoEs3tRG7LuMEt22R_Od66vU4TAoGQkDIY6pDuenTicv7PYNzc5_j0Ugppc/s1600/yahoo.gif'/> y-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwEaVLESKbOQMsXeulLz4spOM5pbS6ALsU7T2MiCC4IUXcsD7biBgqC5LJPYV-C6oe0zF8hYjdui-sJuG4Ap56ZBiRcbbpQOm8cNAsAmBBcVg0S5mBhlnKZCDED0RxyUKkznhcPGrRLc/s1600/crazy.gif'/> c-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75qIyBO1349cUMmTDOFxNep-ewmjFnNAtPznO84Dd_7dB9sBFxemoFDHqACgzIrdd6QSdtS4-sPtgZNffWQGlhU3m3HGGHWCL5lGTokqEhT8mHqa3g-Cxx-wK2IokcbILmIXnTQ8MIqM/s1600/spiteful.gif'/> s-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLK-mlAWIJHUIkgNDZeciDHVzY3zlFQl7YHFEmn7l13XlMlQdX5BT9IVc6DnXoPIvoQE_6xKsDEy4UGkygvdJYFBNMArEQ9Jnej3jtXCs44LGQq1tPEtjVxFtLpC3HovUcgfxSg-H-xLI/s1600/drinks.gif'/> d-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-NvhXQgeX4myAHkNyNEQL1oAB5DVIjtwQE5j6nQJiIk0h9oeUwDUD5vi1GjfC7sXa66eEOYjhQuGpLQ02pC1lBn0qNmmLUT5qvon6IAj5tbIf9yGKo2ceByy8TCcVdPxS47Ia6ssYss/s1600/cheer.gif'/> w-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFoVV-6pvKw0WqiCtUcI8SsxdLo33zp6KOkqdzrdYFbQFTNBH7nPQC6QdtHfttfze4uLxgmnZ6XimAZ6UIewJcA0SN08NzWqmaUxn44IgQfzlusILDLmqfDbPhqRNrVNSmbpKgrsRDSk/s1600/hi+2.gif'/> :-h <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPK1v9g9UHEhrjzCtObyc2rZehyD2OD6SkMtfX4Rrzl9wRvdjo83ppLeUsrZ2bc1vBaYq_l31oEIurxBeL7Sbsv59coglsrotxv7pMhinzPNVodyKcRPTMMYd8o4FJczn3UrjMMxNOfRo/s1600/give_heart.gif'/> :X </div></center>
Стъпка 5. Сега намерете и този код:
<h4><data:post.commentLabelFull/></h4>
Ето и снимка, за да се ориентирате, ако ви излезе повече от един резултат. На снимката, може да видите, че съм леко добавил надписи "Съществуват" и "под тази публикация", които при вас не съществуват, така че не ги изписвайте в търсачката.

код
Натисни върху снимката, за да се покаже на цял екран!
Стъпка 6. Под него поставете отново:
<center><div style=' width: 420px; text-align: left; border: 2px solid #333333; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnm2U88OibLjZ0HObxipoL_1fBBweCDGMi7NJOLgEV-NbjxXg-ftLeLMmYADuom70IxxgBaYtp1SZ_pgZ60CrgkOuaUgBpJRuDy75sEQW35mxqEEvbHYDK3dnaYUAcaddEvlOxNJfQ1mY/s1600/smile3.gif'/> :) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8dGKBUYMFh5PQ58wNBxkyoeH83wewrv83RtqGXoZ6NZwJ9rhDG0U00YSE9XBdsEkB_OvNLI4Drz2vHgLxLZoTaRFfUOXZ8EsECNo__fH7J2VZL59dPe13DaEoqJajlSTi-GXp-gmJt4/s1600/sad.gif'/> :( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2Mo5_ghEbftm0TIwAPPlwHoLIcaqi3691qVS5WJoQrEwKGIOdKQUCz1tAxoIH3e6A_Ug7WMJgs8EFElmHkzUAcMduF7Af8ufVfDUwka-29znUKazlkMZEFA1Jlg627RM3JH4YKuGvgI/s1600/taunt.gif'/> :)) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvyoCaCfXe2wUqjB9Ibpykd66lOkw50mFYKi47WPqTR-9t0wsfVYu-2k2atudEktWs9lN0pC6_HOd4dPujwq9WCs7GmURFn7hkU6P5fYeJCUzFJYaTWw8H0vMhAwMfawqkcq_6nuZ5V8/s1600/cry2.gif'/> :(( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6pbA-9QVaSpz7bW7E0SXGpSzrs4RGNfSyfKo27pxURhiZNqp2xMF66LotMCUD4hdv_KJNC2hBRk176Xd_nBibCPMium-iAVOlz9SvXZ46X7NTDgPNM_NKaJ0_hEvCDP5qOQOnwbGsc8/s1600/rofl.gif'/> =)) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiD5UIH_Fx0C_pml1ZV39DOgfk-xaHBaYbFAv-TqPO4Ny9CaUQmrzJNUsIGZPMA-XGNFO5iqJ-d5wx1bZizoIo3x-2RC_TVDnURnXCwYQTsT40oT0sf1Gn4NHidZLktOSrSdZujHuXFDI/s1600/biggrin.gif'/> :D <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifx3GL4ejNEhGwy2vztrAJm6R6Qy8brvmGYCV4wlGBNZJZZSX5qkTTxe6HC0gTqD5j7AxsXIzJKaaTYaValZHzxMpO3RAleDVsTCBoBl9TPGUNm-b3WiJ2RXhG0Xp9tZM_pdfJC6x9OKQ/s1600/tongue.gif'/> :P <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF73HlbDuygua3psjeHbelf07pXSNTWiy9NmCigmt6eLYZirgDxuRuQe9VKrqgWZO60N23ikTu1vHuX-t6pazyPVRpBKRCj6r0GscZr9WOvS2tL5qn5d-vPHhum8_EHuzwDZXnCbhR2uo/s1600/shock.gi'/> :-O <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnlUWCqOcyjdRMSuqo9l5bgB8Ct7JLydSzK-WnTJVQs2Zfc_xTII_4y4NRAsGIvjuHbdH1uWaou_Lp4aGQptv_qFCMz4WuKJUkaRX0C60CQecXUyVyiuEuthi7DABYyduUvfb0Od4Zio/s1600/think.gif'/> :-? <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUsxoVJtGRe2SUzz8BQGUrF6MMiyMLv9KW_ztPScduc_qK8bsH4TadnbnJG7nV4J8sK5ts-rY-js47XEiX3Y_b3bCNEDNgxFElbsBAGR5wc1B-0xKi3vueaxb5zkuAiQAb410IoYJgDJ8/s1600/unsure.gif'/> :s <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftg9CYT3d5yTgO0tfsyRVY4Zt49Jzs9a3eHUNUEv_w_m2mQk7CooBmeONWhepCy_E7IoCa5SvJ8iVlkYV0GBrxOPgaFZRIKmYcpoifJC45HgnXYXoyqxGQmXdyZKJwD9j7TcQOKf-0G8/s1600/flowers1.gif'/> :-f <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MPxum0L36VUo98vD_zcsSV5tTAed3uqY-HYda2ZC8JPXD-Q-RQaRXrv9lzn2tnjV_4ouZX04323GZdHg5Zc3vErmqYc71j4T7dV4FPYiYDatjc-_pMiubPB9rFHkvMAoK9eUrj1SbG8/s1600/doh.gif'/> d( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCM_rpGvaBNe6vPNH3O9COewXve2y3Ip7yGp3BJM4Gcr9cIVA4CwyPZ2AahQ3yxRze1-VNdd-K93iM3WwVkU0TlR8YD1E4YWgcb24cLN_K-Us96dMWftBC96uCH851fhT2fGwyL1Y-b6o/s1600/air_kiss.gif'/> :-* <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi_rqnxGQmtoacLGupOYSwk7a60OQNF9iL98GWEpZJJlFlEEVPzcQNmHgW7JGwMr9YYuA8UNqteaFsF31bfGz3IJY-lpAD3C7RSsGSwB719tnBDaJr5vvDU4eUOPNvjDNOeR7XA2bAzzA/s1600/threaten.gif'/> b-( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTejCUhDvZPAVNpAA9UPkn9Pp_EWI8MOW6ij3gzSFvFhKRNJNcWduaznmHDoy6sB0vCaAp5ixzWJkSJvk3s4RyStiWl7jSPyA6doMB_vtSh9ixN-tVs13HqF39yp5Kp06Ruxa6hBiMEZw/s1600/help.gif'/> h-( <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjje93-LJ9uQ7JtTGENYyp_LKHaSJahGQ1aLo5JyKe1eac1MtydS792LtwjFWMoV_AIED3q7_fInuuqxVKazr6Kq9PqEvrHnTIg7jVeugV7GCxqknI0ldRXvVV2s6ybfJjbC270E7Rn3Ys/s1600/good.gif'/> g-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivj0YJB5itQfMWijk9wg_iXXR9iPSSJyywCecfXt5-bDDFfcR_wSGQTh5GTL5CG4B51lFpWxUsn6soElWhaKm2nWd-T2OvyYIoq0idqPpm-vOPdZMU-ZANkfciv1hdCh9-zKhz29nMCcQ/s1600/beee.gif'/> 5-p <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7atn76fiZM-j-CEcJXpYSrtbryO2bNKDqSfEt5-eaSYxHD04eX1Mq1vFCtNoYhHiUasI0wbEBbj0vgm1FPoEs3tRG7LuMEt22R_Od66vU4TAoGQkDIY6pDuenTicv7PYNzc5_j0Ugppc/s1600/yahoo.gif'/> y-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwEaVLESKbOQMsXeulLz4spOM5pbS6ALsU7T2MiCC4IUXcsD7biBgqC5LJPYV-C6oe0zF8hYjdui-sJuG4Ap56ZBiRcbbpQOm8cNAsAmBBcVg0S5mBhlnKZCDED0RxyUKkznhcPGrRLc/s1600/crazy.gif'/> c-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75qIyBO1349cUMmTDOFxNep-ewmjFnNAtPznO84Dd_7dB9sBFxemoFDHqACgzIrdd6QSdtS4-sPtgZNffWQGlhU3m3HGGHWCL5lGTokqEhT8mHqa3g-Cxx-wK2IokcbILmIXnTQ8MIqM/s1600/spiteful.gif'/> s-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLK-mlAWIJHUIkgNDZeciDHVzY3zlFQl7YHFEmn7l13XlMlQdX5BT9IVc6DnXoPIvoQE_6xKsDEy4UGkygvdJYFBNMArEQ9Jnej3jtXCs44LGQq1tPEtjVxFtLpC3HovUcgfxSg-H-xLI/s1600/drinks.gif'/> d-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK-NvhXQgeX4myAHkNyNEQL1oAB5DVIjtwQE5j6nQJiIk0h9oeUwDUD5vi1GjfC7sXa66eEOYjhQuGpLQ02pC1lBn0qNmmLUT5qvon6IAj5tbIf9yGKo2ceByy8TCcVdPxS47Ia6ssYss/s1600/cheer.gif'/> w-) <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFoVV-6pvKw0WqiCtUcI8SsxdLo33zp6KOkqdzrdYFbQFTNBH7nPQC6QdtHfttfze4uLxgmnZ6XimAZ6UIewJcA0SN08NzWqmaUxn44IgQfzlusILDLmqfDbPhqRNrVNSmbpKgrsRDSk/s1600/hi+2.gif'/> :-h <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPK1v9g9UHEhrjzCtObyc2rZehyD2OD6SkMtfX4Rrzl9wRvdjo83ppLeUsrZ2bc1vBaYq_l31oEIurxBeL7Sbsv59coglsrotxv7pMhinzPNVodyKcRPTMMYd8o4FJczn3UrjMMxNOfRo/s1600/give_heart.gif'/> :X </div></center>
Ако се чудите, защо по дяволите добавяте два пъти, един и същи код, сега ще обясня. Когато изпробвах написаното в другите статии, забелязах че кутията с емотиконите се появява само на статии без съществуващи коментари. Ако искате кутията да се показва винаги на всички статии, независимо дали има или няма коментари, тогава е нужно да се добави още един път кода, както посочих на стъпка 5 и 6.

Запазете и  вижте новите си емотикони в някоя публикация. Можете да направите следните корекции в този участък на стъпка 4 и 6:
<div style=' width: 440px;
Коригиране по свой вкус в кода широчината [width: 440px]. От [solid #0084ce] сменявате цветът на рамката, цветът на фона [background: #FEF9EA] и цветът  на текста [color:#0084ce].

Друга възможна корекция е да премахнете html таг-а за центриране на кутията. Отидете на стъпка 4 и 6 и изтрийте:

<center> В началото на кода.
</center> В края на кода.

Източници (кредити) на материал за тази статия:
- Кутията за емотиконите съм взел от блога на Владимир Кабрански, Другият и по-конкретно от тази статия - http://drugiyat.blogspot.bg/2010/05/skype-blogger.html.
- Адресите на изображенията съм взел от този англоезичен блог - HelpBlogger.
Сподели:

03 януари, 2017

Добавяне на дизайн върху коментарите на Blogger чрез CSS код

Здравейте и за много години на всички!

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

Ето и снимки от преди и след като поставих по-долу показаният дизайн. За да видите снимките по-добре цъкнете върху тях за преглед на цял екран!

дизайн върху коментарите на Blogger, преди промяната
ПРЕДИ ПРОМЯНАТА
дизайн върху коментарите на Blogger, след промяната
СЛЕД ПРОМЯНАТА
А сега да преминем към съществената част или как се прави. За по-новите в използването на платформата предоставям обяснение плюс снимки на всяка една стъпка. Моля изчетете статията един път преди да преминете към действия!

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

За да създадете копие, влезнете в контролния панел на сайта си, отидете на "Шаблон" и в горния десен ъгъл натиснете върху "Създаване/възстановяване на резервно копие".

Blogger, създаване на резервно копие на шаблона

След като ви се отвори прозорец, кликнете върху "Изтегляне на шаблона".

Blogger, изтегляне на резервно копие на шаблона

Изчакайте да приключи изтеглянето. Сега затворете прозореца и натиснете върху "Персонализиране".

Blogger, персонализиране на шаблона

От менюто което виждате в горния ляв ъгъл изберете "Коригиране на ширините", а в полето за писане отдясно копирайте и поставете следният код:
* Blogger threaded comments (system) stylization with CSS code by Tech Prevue (http://www.techprevue.com) -----------------------------------------*/ #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#eb1e1e} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #eb1e1e;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#eb1e1e} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px;} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://techprevue.com/wp-content/uploads/2013/07/red-author.png);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:100%!important} .comment-form{width:100%;max-width:100%}
Остана само да натиснете бутона в горния десен ъгъл "Прилагане към блога".

Blogger, добавяне на CSS код

Можете да извършите операцията и изцяло ръчно, ако сте по-напреднал потребител, като вместо "Персонализиране", изберете "Редактиране на HTML кода". Намерете чрез търсачката следната част от кода ]]></b:skin> и преди (над) нея поставете кода, който съм дал.

Blogger, Редактиране на HTML кода

Влезте в някоя от публикациите ви и вижте новия дизайн на коментарите! Ето и няколко съвета как да моделираме някой от нещата по дизайна на коментарите.

- За да промените цветовата схема, поставете избраният от вас код на мястото сегашния оцветен в червено #eb1e1e. Ето и един сайт от мен, с който да намерите кода на избран от вас цвят - ЛИНК.

- За да направите аватарите кръгли, добавете на нов ред най-отдолу към кода:
.comments .avatar-image-container{border-radius: 50%;}
- За да промените цвета на значката "Author" в горния десен ъгъл, сменете линка оцветен в червено в кода, с някой друг на значките по-долу. За да вземете линка на значка натиснете върху избраната от вас и копирайте линка в адрес лентата.
Значка за авторЗначка за авторЗначка за авторЗначка за авторЗначка за автор
Значка за авторЗначка за авторЗначка за авторЗначка за авторЗначка за автор

Кодът и линковете за различните значки са взети от посочения по-долу сайт!
Източник:  http://www.techprevue.com
Сподели:

Какво следя