Як додати хмаринку тегів для блогу на Blogger.сom?
Якщо Ви користуєтесь платформою Blogger фірми Google, то напевно знаєте, що не належить вона до найкращих. Багато в чому програє своєму конкуренту – платформі Wordpress. Blogger немає багатьох основних функцій, які потрібні для успішного блогування.
Маю на увазі можливості додавати такі віджети як ‘Найцікавіші статті’, ‘хмаринка тегів’, ‘ostatnie wpisy’, ‘останні коментарі’, ‘популярні статті’ i ще кілька функцій. Сьогодні розкажу Вам як можна скористатись можливостями хмаринки тегів, відомої нам із Wordpress. Перед тим як почати модифікувати шаблон зробіть запасну копію шаблону! На блогу повинен бути хоча би один тег для того, щоб хмаринка запрацювала!
1. Зайдіть у Налаштування> Макет > Редагувати код HTML
2. Відшукайте запис: ]]></b:skin>
3. Вставте код, що написаний нище перед записом ]]></b:skin>
/* Label Cloud Styles ———————————————– */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:”” !important}
4. Відшукайте знову запис ]]></b:skin> i розмістіть код, що написаний нище після запису ]]></b:skin>
<script type=’text/javascript’> // Label Cloud User Variables var cloudMin = 1; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script>
5. Потрібно код подібний до цього: <b:widget id=’Label1′ locked=’false’ title=’назва’ type=’Label’/>
6. Замініть замість коду із пункту 5 кодом, що написаний нище.
<b:widget id=’Label1′ locked=’false’ title=’Теги’ type=’Label’> <b:includable id=’main’> <b:if cond=’data:title’> <h2><data:title/></h2> </b:if> <div class=’widget-content’> <div id=’labelCloud’/> <script type=’text/javascript’> function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values=’data:labels’ var=’label’> var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length – cloudMin; lc2 = document.getElementById(’labelCloud’); ul = document.createElement(’ul’); ul.className = ‘label-cloud’; for(var t in ts){ if(ts[t] < cloudMin){ continue; } for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement(’li’); li.style.fontSize = fs+’px’; li.style.lineHeight = ‘1′; a = document.createElement(’a’); a.title = ts[t]+’ Posts in ‘+t; a.style.color = ‘rgb(’+c[0]+’,’+c[1]+’,’+c[2]+’)’; a.href = ‘/search/label/’+encodeURIComponent(t); if (lcShowCount){ span = document.createElement(’span’); span.innerHTML = ‘(’+ts[t]+’) ‘; span.className = ‘label-count’; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(’ ‘); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript> <ul> <b:loop values=’data:labels’ var=’label’> <li> <b:if cond=’data:blog.url == data:label.url’> <data:label.name/> <b:else/> <a expr:href=’data:label.url’><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </noscript> <b:include name=’quickedit’/> </div> </b:includable> </b:widget>
7. Натисніть Зберегти шаблон. Якщо Ви все зробили правильно, то помилок бути не повинно.
Зараз змодифікуємо Хмарку Тегів.
Значення cloudMin= 1; означає, що всі теги на твоєму блозі будуть показуватись одночасно у цій хмарці. Якщо у тебе на блозі більше 100 тегів, то потрібно прописати число “2″ ( cloudMin= 2 ). Тоді будуть показуватись теги, що приписані мінімум до 2 статтей.
var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false;
maxFontSize i minFontSize максимальний та мінімальний розмір шрифта для тегів. Модифікуючи значення maxColor i minColor (у форматі RGB) допасовуємо кольори тегів до кольорів нашого блогу. Скористайтесь допоміжними матеріалами для корегування кольору RGB .
#labelCloud {text-align:center;font-family:arial,sans-serif;}
Тут можна змінити стандартне вирівнювання тегів – ‘center‘ на ‘justify‘, ‘right‘ або ‘left‘ , а також можна вибрати вид шрифту. Це основні модифікації, які потрібно виконати, але якщо Ви непогано орієнтуєтесь в програмуванні раджу відвідати Сайт Автора Скрипта.
Якщо виникнуть проблеми із використанням коду пишіть коментарі до цієї статті.
