SEO продвижение » Визуальное оформление целей

Добрый день, сегодня захотел визуально дополнить блок «выполнение цели», который находиться у меня в сайдбаре. Раньше у меня выводилось только в процентах, а сейчас ещё добавил progress bar, который более наглядно показывает нынешнюю ситуацию.

progress bar css

Про то как это всё работает, я и опишу ниже.
Если мы хотим выводить progress bar, то нам нужно получить значение, на основе которого будет строиться сама полоска. Это может быть количество посетителей в день, месяц, подписчики, в общем всё что угодно, главное что бы мы могли получить числовое значение. В моём случае это количество уникальных посетителей в день, взятых в среднем за последние 7 дней.

Код

Код скрипта в sidebar.php:

function listat($url){
$content = file_get_contents(«http://counter.yadro.ru/values?site=cospi.ru»);
preg_match_all(«|LI_([^ ]+) = (d*);|»,$content,$ok);
for($i=0; $i<count($ok[1]); $i++) $info[$ok[1][$i]]=$ok[2][$i];
return $info;}

$ff=listat($url);
$w_vis=((($ff[week_vis]/7)*100)/700);// Высчитываем средние значение посетителей
$cel =round($w_vis,2);?>

[week_vis] — получаем значение уникальнных посетителей за неделю по Li, так же от туда можно сграбить
[today_vis] — посетители за сегодня. Зайдя на http://counter.yadro.ru/values?site=вашсайт.ру вы увидите все доступные значения.

Вывод всего блока со значениями:

<div class=«meter»><span style=«width: >> «$cel%»;?>
</span></div>

Строчка style=»width: оформляет размер нашего progress bara в зависимости от значения полученного от скрипта, то есть если скрипт отдаёт 30%, то мы увидим такое:

progress bar css

Если скрипт насчитает 60%, наш progress bar увеличит свою ширину вот так:

progress bar css

Оформление

Оформление в css у меня выглядит вот так:

.meter { position: relative; background: #afafaf; border: 1px solid black; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; width: 270px; height: 13px; padding: 5px; margin-top:10px; } #proc { display: block; width: 100%; text-align: center; font-size: 14px; font-family: Tahoma, Arial; font-weight: bold; color: #eee; text-shadow: 0px 1px 0px #333; position: absolute; top: 0; line-height: 24px;} .meter &gt; span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background: url(‘bg.gif’) 0px 0px repeat; border: 1px solid #37c; }

Многие блогеры ставят себе цели по достижению количество подписчиков на блоге. Поможет получить численное значение подписчиков по feedburner вот такой скрипт:


$fburl=«http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Cospi»;
$grid = new SimpleXMLElement(file_get_contents($fburl));
echo $grid->feed->entry[‘circulation’]; //Вывод числового значения подписч.
?>

Таким способом можно оформить практически любую цель и когда вы постоянно видите свой прогресс, то более рационально можете построить свою работу, по достижению поставленных целей.

Оценить статью post

Похожие статьи

Написать комментарий