Как добавить набор кнопок «Поделиться в социальных сетях» внизу сообщения Blogger.
Сервисов для создания набора кнопок «Поделиться» (share) а-ля «все-в-одном» сейчас в Интернете как блох на бродячей собаке. Выбор какого-то конкретного сервиса — это уже вопрос личных сексуальных предпочтений.
Предлагаю воспользоваться сервисом AddThis.
Читать дальше »
Простой пример выравнивания по центру; подходит как для страницы, так и для отдельных блоков. Вот как это сделано в шаблонах Blogger.
Магия кроется в тегах body и div outer-wrapper. Хотя нет, вру: магия как обычно в CSS.
Продолжаю серию постов о тюнинге заголовка Blogger. В этот раз картинка – фоновое изображение под Названием и Описанием блога.
Напомню, что в Blogger существуют три варианта виджета Заголовок. Этот – второй и в терминах «Блоггера» обозначен как
Цель данного тюнинга, в первую очередь, – избавиться от громоздкого и недостаточно предсказуемого вычислимого выражения в виджете заголовка.
Не так давно я рассказывал как быстро и просто создать в шаблоне Blogger дополнительную, третью колонку. В примере колонка размещалась между основным блоком и боковой панелью. В этот раз расскажу как тем же способом добавить третью колонку слева и справа.
Сам метод создания 3-колоночного шаблона для Blogger приведен в этой статье: Третья колонка в шаблоне. Из него и буду исходить.
Невероятно, но факт – существуют шаблоны Blogger и вовсе без боковой панели – «сайдбара» (sidebar). Лично я подозреваю, что основным инструментом создания таких шаблонов является клавиша Del, нажатая в нужном месте. Тем не менее нельзя полностью исключить исчезновение сайдбара как результат некоего Высшего Замысла.
В данном случае речь о ситуации когда нужды пользователя идут вразрез с замыслом Его Рукоблудия – дизайнера.
За редкими исключениями, основной блок (main) и боковая панель (sidebar) располагаются внутри блока «содержимое» (content). Причем, main – с «прилипанием» к левому краю содержимого, sidebar – к правому. Или наоборот (зависит от ВЗ).
Блоки Main и Sidebar в шаблоне BloggerПеред внесением любых изменений в шаблон, рекомендую сделать резервную копию.
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
<!-- Код для сайдбара -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<!-- Здесь будут виджеты сайдбара -->
</b:section>
</div>
<!-- Конец кода сайдбара -->
<!-- Следующий код убирает обтекание текста -->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
float: right;#main-wrapper {
width: 500px;/* ширина основного блока */
float: left;/* выравнивание по левому краю */
}
#sidebar-wrapper {
width: 300px;/* ширина боковой панели */
float: right;/* выравнивание по правому краю */
}Теперь всё на своих местах; порядок и благолепие.
--
Организовать твою поклажу, – лэптоп, коммуникатор, бутерброд и два пакетика кофе, – помогут специальные средства. Например – сумки для ноутбуков или другого багажа.
Есть хорошая рекомендация, а точнее – правило: Таблицы в HTML документе использовать только по прямому назначению. А именно – для отображения табличной информации. «Трудо-часы – трудо-доллары», «дебет-кредит-итого» и подобных структурированных данных. Все остальное, как говорится, – «от лукаваго».
Недавно наш новый командный tech writer начал доводить до ума проектный FAQ и попросил помочь ему избавиться от таблиц в разметке документа. Раз уж мы пытаемся уйти от «табличной верстки» в сторону «верстки дивной», то хорошо бы чтоб новые таблицы не появлялись там, где их не ждут. За несколько минут набросал ему HTML+CSS код для двухколоночного параграфа.
Двухколоночный параграфКод HTML: табличная верстка (было)
<table width="100%" border="0"><tbody>
<tr>
<td valign="top" width="50%">
<strong>Method 1 - By logging into your ***** account</strong>:
<ol><li>Go to My Account > My Account Page. This displays the Profile page.</li>
<li>In the Profile page, locate the My Account section.</li>
<li>Click on the Edit button. Enter the new Password as requested in the correct places.</li>
<li>Click on the Save button.</li></ol>
</td>
<td width="50%">
<img src="/images/change-password.gif" alt="change your password" height="202" width="212" hspace="12" align="right" border="0">
</td>
</tr></tbody></table>
Код HTML+CSS: дивная верстка (стало)
<div style="width:50%; float:left;">
<strong>Method 1 - By logging into your ***** account</strong>:
<ol><li>Go to My Account > My Account Page. This displays the Profile page.</li>
<li>In the Profile page, locate the My Account section.</li>
<li>Click on the Edit button. Enter the new Password as requested in the correct places.</li>
<li>Click on the Save button.</li></ol>
</div>
<img style="float:right; margin:0 0 0 12px; border-width:0;" src="/images/change-password.gif" alt="change your password" height="202" width="212" />
<div style="clear:both;"></div>
Разумеется, впоследствии я выделил стили для элементов в классы CSS и отправил писателю шаблонный HTML для использования.
Надеюсь, это окажется полезным. Успехов!
С сегодняшнего дня в Blogger доступны аватары в комментариях. К сожалению, «автоматически» эта функция доступна только в стандартных шаблонах. Как же быть пользователям нестандартных шаблонов Blogger?
А все довольно просто.
При недавнем небольшом редизайне проекта решил отказаться от поддержки IE. Верстка по-прежнему осталась кроссбраузерной, как и работа скриптов, но некоторые декоративные эффекты теперь доступны только для нормальных браузеров. В данном случае я веду речь о поддержке CSS3, который постепенно ввожу в употребление. И действительно, почему когда большинство нормальных браузеров уже поддерживают третью спецификацию каскадных стилей, мы должны использовать технологии «каменного века», перегружая страницу и заставляя пользователя тянуть лишние килобайты кода для «фиксов» хромого на обе ноги браузера?
Далее поведу речь о создании тени вокруг изображений (и других элементов) с использованием свойства CSS3 box-shadow.
В общем случае синтаксис box-shadow выглядит так:
box-shadow: inset || [ <length> <length> <length>? <length>? || <color> ]
И небольшая демонстрация свойства box-shadow. Работает в браузерах Firefox, Safari и Chrome.
А для «прихильників» браузера Internet Explorer даю картинку :)
Стили CSS3:
#example-box-shadow img {
margin-left:0.7em;
padding:3px;
border: 1px solid #1A3457;
box-shadow: 0 0 5px #1A3457;/* Каноническое задание */
-webkit-box-shadow: 0 0 5px #1A3457; /* Safari, Chrome */
-moz-box-shadow: 0 0 5px #1A3457; /* Firefox */
}
/* Тень смещена вправо-вниз */
#example-box-shadow img.sh-rb {
box-shadow: 5px 5px 5px #1A3457;
-webkit-box-shadow: 5px 5px 5px #1A3457; /* Safari, Chrome */
-moz-box-shadow: 5px 5px 5px #1A3457; /* Firefox */
}
/* Тень смещена влево-вверх */
#example-box-shadow img.sh-lt {
box-shadow: -5px -5px 5px #1A3457;
-webkit-box-shadow: -5px -5px 5px #1A3457; /* Safari, Chrome */
-moz-box-shadow: -5px -5px 5px #1A3457; /* Firefox */
}
Код HTML:
<img class="sh-lt" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
<img class="sh-rb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39t4LkbLjl08GuTTBcCfBgdKKTvP2P45WIwaEkeXxpORGh0A8ijQIXo5a39ZpJgS9OUT-pwEcPSuWnxf_RrMjjdHfCDXqLXMrV7FbfcWVKjDEsnRa9KbpI4tcr44ysSLhkOpxWb4PXVf6/" />
И в качестве бонуса CSS3 код для расширения тени при наведении указателя мыши:
#example-box-shadow img:hover {
box-shadow: 0 0 7px 1px #1A3457;
-webkit-box-shadow: 0 0 7px 1px #1A3457;
-moz-box-shadow: 0 0 7px 1px #1A3457;
}Приверженцы Internet Explorer этого не увидят.
UPD: Еще по теме CSS3: Свойство border-radius.
UPD: Ну и дабы развеяться: Топ 10 «креативных» дизайнов обложек «Преступление и наказание»
© 2009 dotrb.blogspot.com
Или «как в блоге прятать текст под спойлеры». Недавно написал небольшой javascript-компонент Widget SpoilerManager для использования скрытого текста в блоге. Собственно, это та «культурная программа», которой я посвятил прошлую субботу. Да, я псих.
UPD: Последний раз я доверил свои файлы богом проклятому сервису HotLinkFiles! Пусть горит в аду! Позже выложу в текстовом виде.
Пример:
Как использовать
/* Стили для спойлера */
.bar {
background:#B2BDCB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91MO6k3OKdYj59ONnuGLGObIMEJLBtDbz7lDf4L4_QOHq3x_bp5P8ra-DgCtL2XRJh1KtVd96j3CcxIvDto-b9nI8On3Zjv9Z-x1BftnGyEr9LrR2eHtJnZ7kIOai5Www6hgtWPjvoBFw/') no-repeat;
padding-left: 30px;
color: #1A3457;
height:26px;
font-weight:bold;
cursor:pointer;
}
/* Скрытый спойлер */
.spoiler-hidden .bar {
background-position: 0 0;
}
.spoiler, .spoiler-hidden .text {
display: none;
}
/* Открытый спойлер */
.spoiler-visible .bar {
background-position: 0 -26px;
}
.spoiler-visible .copy {
text-align:right; font-size:0.6em;
}
.spoiler-visible .text {
display:visible;
padding: 0 1em;
border: 1px dashed #B2BDCB;
border-top-width:0;
}
<script src='http://www.hotlinkfiles.com/files/2667809_ezrak/widget_spoiler.js' type='text/javascript'></script>
<script type='text/javascript'>
/* Для предотвращения проблем с кириллицей, задай надпись по умолчанию */
WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
/* Запусти виджет Спойлер-Менеджера */
WidgetSpoilerManager.init();
</script>
<script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/railsdepot/files/widget_spoiler.js' type='text/javascript'></script>
<script type='text/javascript'>
WidgetSpoilerManager.setOption ("defaultTitleText", "Скрытый текст");
WidgetSpoilerManager.init();
</script>
<div class="spoiler" title="здесь задай краткое описание">
А здесь текст, который хочешь сделать скрытым
</div>
Виджет сам найдет и скроет все блоки текста, отмеченные как спойлер.
Недавно мне задали вопрос, как бы я сделал в макете колонки одинаковой высоты. Предложил использовать способ с нижними «паддингами» и «маргинами». Или, русским языком – «полями» и «отступами».
Код HTML:
<div class="cols">
<div class="col1">Налево пойдешь – коня потеряешь</div>
<div class="col2">Прямо пойдешь – лбом упрешься</div>
<div class="col3">Направо пойдешь – лучше не ходи..</div>
</div>
Стили CSS:
.cols{
overflow:hidden;
width:100%;/* Задать свойство hasLayout для IE6;
Можно использовать _zoom:1 (невалидное свойство) */
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}UPD 2009.08.07
Стили CSS для отображения в виде колонок с разным цветом фона:
.cols .col1{width:25%; float:left; background:#999999;}
.cols .col2{width:50%; float:left; background:#E0E9EF;}
.cols .col3{width:25%; float:left; background:#5588AA;}Результат выполнения еще одного «тестового задания». ..И в который раз затрудняюсь с выбором кавычек. Выкладываю коды здесь, вдруг да когда пригодится. Использовался фреймворк Prototype. Сам текст задания, возможно, выложу позже.
document.opener (main.html);document.opener;
Изображения получены из открытых источников
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Main Window</title>
<link type='text/css' rel='stylesheet' href='public/stylesheets/general.css' />
<script type="text/javascript" src="public/javascripts/prototype.js"></script>
<script type="text/javascript" src="public/javascripts/main.js"></script>
</head>
<body>
<p><input id="btnOpen" type="button" value="Изменить..." onclick="return btnOpen_onclick();" /></p>
<div id="connections"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DHTML Tab Connection Panel</title>
<script type="text/javascript" src="public/javascripts/prototype.js"></script>
<link type='text/css' rel='stylesheet' href='public/stylesheets/general.css' />
<script type="text/javascript" src="public/javascripts/child.js"></script>
</head>
<body>
<p id="navBar">
<input id="btnAdd" type="button" tabindex="1" value="Добавить" onclick="tabView.addControl(); return false;" />
<a id="aTabPrev" href="#" tabindex="2" onclick="tabView.tabPrev(); return false;">←</a>
<kbd>Ctrl</kbd>
<a id="aTabNext" href="#" tabindex="3" onclick="tabView.tabNext(); return false;">→</a>
</p>
<div id="tabView1" class="tabView">
<div id="tabPanel" class="tabPane">
<div id="tabViewTab_0" class="tabActive" style="left: 0px;" onclick="tabView.tabSelect(0); return false;">
<div class="icon"></div>
<span tabindex="4"><span id="tabText_0" class="tabText">Guest</span>
<a href="#" onclick="tabView.destroy(0); return false;"><img class="close" width="8" height="8" src="public/images/icon_delete.gif" /></a>
</span>
<img class="tab_right" src="public/images/tab_right.gif" />
</div>
</div>
<div class="clear"></div>
<div id="aFormCont" class="aTab">
<form id="aForm" action="">
<input id="index" type="hidden" />
<div>Логин</div>
<div><input id="login" type="text" onchange="tabView.onChange();" /></div>
<div>Пароль</div>
<div><input id="password" type="password" onchange="tabView.onChange();" /></div>
<div><input id="remember_login" type="checkbox" onchange="tabView.onChange();" /><label for="remember_login">Запомнить логин</label></div>
<div><input id="remember_password" type="checkbox" onchange="tabView.onChange();" /><label for="remember_password">Запомнить пароль</label></div>
<div><input id="auto_login" type="checkbox" onchange="tabView.onChange();" /><label for="auto_login">Входить автоматически</label></div>
<p style="text-align:right;">
<input id="button_submit" type="button" value="Подключить" onclick="tabView.onChangeStatus();" />
</p>
</form>
</div>
</div>
</body>
</html>
/* General */
body{
margin:10px;
font-size:0.9em;
}
/* Main */
#connections p {
border:1px solid #919B9C;
padding: 0 0.2em;
width: 500px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
/* Child */
a{
color:#F00;
}
.tabView {
width:500px;
height:400px;
}
.tabPane{
height:21px; /* Height of tabs */
border-bottom:1px solid #919b9c;
}
.aTab{
border-left:1px solid #919b9c;
border-right:1px solid #919b9c;
border-bottom:1px solid #919b9c;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
padding:5px;
}
.tabPane div{
float:left;
height:100%; /* Height of tabs */
padding-left:3px;
vertical-align:middle;
background-repeat:no-repeat;
background-position:bottom left;
cursor:pointer;
position:relative;
bottom:-1px;
margin-left:0px;
margin-right:0px;
}
.tabPane .tabActive{
background-image:url('../images/tab_left_active.gif');
margin-left:0px;
margin-right:0px;
z-index:10;
}
.tabPane .tabInactive{
background-image:url('../images/tab_left_inactive.gif');
margin-left:0px;
margin-right:0px;
z-index:10;
}
.tabPane .inactiveTabOver{
background-image:url('../images/tab_left_over.gif');
margin-left:0px;
margin-right:0px;
}
.tabPane span{
font-family:arial;
vertical-align:top;
font-size:11px;
padding-left:3px;
padding-right:3px;
line-height:21px;
float:left;
}
.tabPane .tabActive span{
padding-bottom:1px;
line-height:20px;
position: relative;
padding-left: 4px;
padding-right: 12px;
}
.tabPane .tabInactive span{
padding-bottom:1px;
line-height:20px;
position: relative;
padding-left: 3px;
padding-right:10px;
}
.tabPane img{
float:left;
}
.tabPane .tabActive img.tab_right {
background-image:url(../images/tab_right_active.gif);
}
.tabPane .tabInactive img.tab_right {
background-image:url(../images/tab_right_inactive.gif);
}
.tabActive a {
display:none;
}
.icon {
background-image:url(../images/globe_icon.gif);
background-repeat:no-repeat;
background-position:bottom left;
width:15px;
}
img.close {
position: absolute;
top: 6px;
right: 0;
border:0;
}
a img.close {
opacity:.01;
filter: alpha(opacity=1); /* IE */
-moz-opacity: 0.01; /* Firefox */
}
a:hover img.close {
opacity:1;
filter: alpha(opacity=100); /* IE */
-moz-opacity: 1; /* Firefox */
}
.tabText{
min-width:30px;
display:inline-block;
}
.clear {
clear: both;
}
/* Navigation Bar */
#navBar {
width:500px;
text-align:right;
}
#navBar input {
float:left;
}
#navBar a {
text-decoration:none;
}
#navBar kbd {
font-size:larger;
}
/* Form elements */
input[type="text"], input[type="password"] {border:1px solid #919b9c;}
/* for IE */
input { border:expression((this.type=='text')||(this.type=='password') ? '1px solid #919b9c' : ''); }
// <!CDATA[
var pPrefix = "connection_";
var prefixLogin = "login_";
document.addConnection = addConnection;
document.updateConnection = updateConnection;
document.destroyConnection = destroyConnection;
document.updateConnectionStatus = updateConnectionStatus;
/* Open Child document */
function btnOpen_onclick(){
open("child.html", "Child");
}
/* Helpers */
bool2human = function(value){
return (value == true) ? "да" : "нет";
}
humanStatus = function(value){
return (value == true) ? "Подключен" : "Отключен";
}
/* Dynamic template for #connections P.innerHTML */
getTemplate = function(attr){
return 'Логин: <span class="login">'+ attr.login +'</span><br />'+
'Пароль: <span class="password">'+ attr.password +'</span><br />'+
'Запомнить: логин (<span class="remember_login">'+ bool2human(attr.remember_login) +'</span>),'+
' пароль (<span class="remember_password">'+ bool2human(attr.remember_password) +'</span>)<br />'+
'Входить автоматически (<span class="auto_login">'+ bool2human(attr.auto_login) +'</span>)<br />'+
'<span class="status">'+ humanStatus(attr.status) +'</span>';
}
/* functions called by Child document */
function addConnection(attr){
try {
var p1 = document.createElement("p");
p1.id = pPrefix + attr.index;
var template = getTemplate(attr);
p1.innerHTML = template;
$("connections").appendChild(p1);
}
catch (e) {
alert(e.description);
}
}
function updateConnection(attr){
try {
var p1 = $(pPrefix + attr.index);
var template = getTemplate(attr);
p1.innerHTML = template;
}
catch (e) {
alert(e.description);
}
}
function destroyConnection(index){
var p1 = $(pPrefix + index);
Element.remove(p1);
}
function updateConnectionStatus(index, status){
var cssExpr = $$("#"+ pPrefix + index +" .status");
cssExpr[0].innerHTML = humanStatus(status);
}
// ]]>
document.onkeydown = navigateTabs;
function navigateTabs (event){
if (window.event) event = window.event;
if (event.ctrlKey){
switch (event.keyCode ? event.keyCode : event.which ? event.which : null){
case 0x25:
tabView.tabPrev();
break;
case 0x27:
tabView.tabNext();
break;
}
}
}
/* Class: Tab View */
TabView = function(){
this.tabPrefix = "tabViewTab_";
this.tabTextPrefix = "tabText_";
this.tabPanelId = "tabPanel";
this.items = new Array();
this.cnActive = "tabActive";
this.cnInactive = "tabInactive";
this.patternTabActive = "#tabView1 ." + this.cnActive;
this.tabIndexShift = 4; //сдвиг tabindex
this.init = function(){
this.add("Guest", "guest", true, true, false, false);
}
this.destroy = function(index){
if ( $(this.tabPrefix + index) != undefined ){
this.items[index] = null;
this.destroyConnection(index);
Element.remove(this.tabPrefix + index);
}
}
this.add = function(login, password, remember_login, remember_password, auto_login, status){
var index = this.items.length;
var Item = new Object();
Item.index = index;
Item.login = login;
Item.password = password;
Item.remember_login = remember_login;
Item.remember_password = remember_password;
Item.auto_login = auto_login;
Item.status = status;
this.items.push(Item);
this.addConnection(Item);
}
/* Functions for Document.Opener */
this.addConnection = function(obj){
opener.document.addConnection(obj);
}
this.updateConnection = function(obj){
opener.document.updateConnection(obj);
}
this.destroyConnection = function(index){
opener.document.destroyConnection(index);
}
this.updateConnectionStatus = function(index, status){
opener.document.updateConnectionStatus(index, status);
}
/* Helpers */
this.humanStatus = function(value){
return (value == true) ? "Отключить" : "Подключить";
}
this.checkbox2bool = function(value){
return (value == null) ? false : true;
}
/* DOM Functions */
this.addControl = function(){
this.add("", "", false, false, false, false);
var index = this.items.length-1;
var p1 = document.createElement("p");
var div1 = document.createElement("div");
div1.id = this.tabPrefix + index;
div1.className = this.cnInactive;//;
div1.onclick = function(){ tabView.tabSelect(index); return false; };
var div2 = document.createElement("div");
div2.className = "icon";
div1.appendChild(div2);
var span1 = document.createElement("span");
span1.setAttribute("tabindex", index*1 + this.tabIndexShift);
var span2 = document.createElement("span");
span2.id = this.tabTextPrefix + index;
span2.className = "tabText";
span1.appendChild(span2);
var a1 = document.createElement("a");
a1.href = "#";
a1.onclick = function(){ tabView.destroy(index); return false; };
var img1 = document.createElement("img");
img1.className = "close";
img1.setAttribute("width", 8);
img1.setAttribute("height", 8);
img1.setAttribute("src", "public/images/icon_delete.gif");
a1.appendChild(img1);
span1.appendChild(a1);
var img2 = document.createElement("img");
img2.className = "tab_right";
img2.setAttribute("src", "public/images/tab_right.gif");
div1.appendChild(span1);
div1.appendChild(img2);
$(this.tabPanelId).appendChild(div1);
}
this.fillForm = function(obj){
$("index").value = obj.index;
$("login").value = obj.login;
$("password").value = obj.password;
$("remember_login").checked = obj.remember_login;
$("remember_password").checked = obj.remember_password;
$("auto_login").checked = obj.auto_login;
$("button_submit").value = this.humanStatus(obj.status);
}
this.tabSelect = function(index){
//scope for each() function
cnActive = this.cnActive;
cnInactive = this.cnInactive;
if ( $(this.tabPrefix + index) != undefined ){
//off
$$(this.patternTabActive).each( function(elem){
Element.removeClassName(elem, cnActive);
Element.addClassName(elem, cnInactive);
});
//on
Element.removeClassName(this.tabPrefix + index, this.cnInactive);
Element.addClassName(this.tabPrefix + index, this.cnActive);
this.fillForm(this.items[index]);
return true;
}
return false;
}
/* onModyfy functions */
this.onChange = function(){
var index = $F("index");
var Item = this.items[index];
Item.index = index;
Item.login = $F("login");
Item.password = $F("password");
Item.remember_login = this.checkbox2bool( $F("remember_login") );
Item.remember_password = this.checkbox2bool( $F("remember_password") );
Item.auto_login = this.checkbox2bool( $F("auto_login") );
$(this.tabTextPrefix + index).innerHTML = Item.login;
this.updateConnection(Item);
}
this.onChangeStatus = function(){
var index = $F("index");
var Item = this.items[index];
Item.status = (Item.status == true) ? false : true;
this.updateConnectionStatus(Item.index, Item.status);
$("button_submit").value = this.humanStatus(Item.status);
}
/* Navigation through Tabs */
this.tabPrev = function(){
var index = $F("index");
for (var i = index*1-1; i >= this.items.first().index; i--){
if (this.tabSelect(i)){
break;
}
}
}
this.tabNext = function(){
var index = $F("index");
for (var i = index*1+1; i <= this.items.last().index; i++){
if (this.tabSelect(i)){
break;
}
}
}
this.init();
}
// End: Class TabView
// Init tabView
tabView = new TabView();
Event.observe(window, "load", function() {
tabView.fillForm(tabView.items[0]);
});
Вот как-то так :).
Сегодня коллега попросил помочь разобраться со странным поведением браузера Chrome.
На странице два элемента <iframe>. В одном чат, в другом ротатор баннеров.
<!-- В этом фрейме работает флешевый чат -->
<iframe id="frame_chat" src="/userplane/chat" frameborder="no"></iframe>
<!-- В этом фрейме сторонний скрипт баннеро-ротатор -->
<iframe id="frame_ads" src="http://third_part_banner_rotator" frameborder="no"></iframe>
Скрипт приводить не буду. Действует так: через каждые 30 секунд создает frameset с фреймами. Во фреймах различные составные рекламные баннеры.
Все браузеры (даже IE!), как и задумано, перезагружают только содержимое ифрейма "frame_ads", а Chrome – страницу целиком.
Перекопано было все, что только можно, по ходу исправлено еще несколько неаккуратностей, а проблема решилась до безобразия просто. Переписал тег второго ифрейма в сокращенной XHTML форме:
<iframe id="frame_ads" src="http://third_part_banner_rotator" frameborder="no" />
И всё заработало :). Сыроват еще «Хром», сыроват...
Приведу пример с использованием абсолютного позиционирования (CSS).
Что должно получиться
Первая часть похожа на размещение баннера в заголовке блога.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>
div с изображениями:<div id='header-wrapper'>
<div id="head-left"><img src="public/robot1.jpg" /></div>
<div id="head-right"><img src="public/robot2.jpg" /></div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>
#head-left {
position:absolute;
margin-left:-201px;/* ширина изображения + ширина бордюра шапки */
_margin-left:-206px;/* IE fix */
}
#head-right {
position:absolute;
margin-left: 661px; /* ширина шапки + бордюр */
}Смотри так же: Баннера в заголовке блога;
Смешной текст про роботов взят из пасхалки Firefox.
Ответ на вопрос «Как вставить изображение (баннер) выше или ниже шапки в стандартном шаблоне», заданный Ingward.
Далее опишу самый простой способ, основанный на редактировании HTML шаблона Blogger.
Перво-наперво загрузи требуемое изображение, в свой альбом Picasa.
В редакторе HTML шаблона найди строки:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>
Чтобы добавить баннер выше заголовка блога (хедера), вставь тег изображения между открывающими тегами <div id='header-wrapper'> и <b:section ...>.
<div id='header-wrapper'>
<img style="width:660px; height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwvbb7DF9BJ0ID9CLR6r2bQHSMjjgpqNjC8ooEygCpFF2TDNxpy-HT6dY4VIibvrsKI3jAEvvduxdHrDrfdb8PcJyUVFA8P5ekOa9JDXPE4Hvqc49ejCQhQj3dontBg2r1gYMT54R_QQ6/" />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>
Чтобы вставить баннер ниже хедера, добавь код между закрывающими тегами </b:section> и </div>.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
<img style="width:660px; height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwvbb7DF9BJ0ID9CLR6r2bQHSMjjgpqNjC8ooEygCpFF2TDNxpy-HT6dY4VIibvrsKI3jAEvvduxdHrDrfdb8PcJyUVFA8P5ekOa9JDXPE4Hvqc49ejCQhQj3dontBg2r1gYMT54R_QQ6/" />
</div>
Так же можно добавлять изображение перед открывающим тегом <div id='header-wrapper'> (выше) или закрывающим тегом </div> (ниже) данного примера. С той лишь разницей, что в первом случае изображение будет находиться внутри контейнера header-wrapper, а во втором – за его пределами.
Сделал блок текста со скругленными углами с использованием элементов техники CSS-sprites. Пример работает для блоков фиксированного размера. Но предполагаю впоследствии сделать и для произвольной величины.
.rounded {
width: 300px;
margin: 16px;
background-color: #DFE5ED;
color: #000;
}
.rounded p {
padding:5px 10px;
}
.rc {
background-image: url('public/rounded.gif');
background-repeat:no-repeat;
height: 150px;
}
.tl {
background-position: -15px -15px;
}
.bl {
background-position: -15px 135px;
}
.tr {
background-position: 285px -15px;
}
.br {
background-position: 285px 135px;
}<div class="rounded">
<div class="rc tl">
<div class="rc tr">
<div class="rc bl">
<div class="rc br">
<p>Блок фиксированной ширины</p>
<p>CSS-блок со скругленными краями c использованием CSS-спрайтов.</p>
</div>
</div>
</div>
</div>
</div>
Работает в Firefox, IE 6, Chrome, Opera, Safari.
Я предполагаю CSS скругленные углы для блоков произвольного размера.
О том, что такое футер, как его организовать и даже как разбить его в три и более колонок, запросто отыщешь в интернете. Все примеры и методики по своему хороши, но... Я расскажу как сделать футер шаблона Blogger по-настоящему Blogger-powered! Иными словами, как использовать в подвале возможности платформы Блоггер на полную.
Для начала вводное слово, или «о чем, собственно речь». Нетерпеливые могут пропустить следующий раздел.
Футер (англ. footer) или подвал – часть сайта, находящаяся внизу страницы. Обычно содержит данные о владельце страницы, дополнительную навигацию, справочную и контактную информацию.
До недавнего времени так оно и было. Теперь, то ли с приходом веб-два-нольной эпохи, то ли с увеличением скоростей и мощностей интернета, то ли в связи с ужесточившейся конкуренцией среди веб-дизайнеров... но функции «подвала» значительно расширились. За примерами красивых футеров далеко ходить не надо – не сносив двух пар лаптей, наберешь лукошко.
Не так давно я сменил дизайн блога. В процессе получил еще и массу полезного опыта, которым охотно поделюсь.
Вот так теперь выглядит футер моего блога в режиме визуального редактирования.
Как нетрудно заметить, в каждой из трех частей подвала можно использовать виджеты для шаблонов Blogger. И теперь-то я расскажу, как создать такой футер самому.
<b:section class='footer' id='footer'/>
<b:section class='footer' id='footer2'/> <b:section class='footer' id='footer3'/> <b:section class='footer' id='footer4'/>
<b:section class='footer' id='footer2'></b:section> <b:section class='footer' id='footer3'></b:section> <b:section class='footer' id='footer4'></b:section>
.footer{
padding:0 24px;
margin:0 0 1em; text-align: left;
}
#footer2 {
width: 25%; float: left;
}
#footer3 {
width: 33%; float: left;
}
#footer4 {
width: 27%; float: right;
}Все! После этого на странице визуального редактирования шаблона (Макет - Элементы страницы) ты сможешь добавлять в каждую из колонок футера виджеты Blogger.
«Тебе повезло, ты не такой как все...» © Ленинград
Не так давно я открыл рубрику «Зеленые страницы». Закономерно, что мне захотелось выделить сообщения этой рубрики зеленым цветом (как ни странно) в отличие от общей цветовой схемы блога.
Первое, что приходит на ум &ndash это заключить все сообщение внутри специального элемента. Например так:
<div class="green-page">
...Тело поста...
</div>
.green-page {
background-color:#9FFFA3;
}
.green-page a, .green-page a:link {
color: #076F0B;
}
.green-page a:visited {
color: #3E8F42;
}
.green-page img {
border:1px solid #076F0B;
}
Проблема этого метода в том, что стили будут распространяться только на сам элемент и его вложенные, «дочерние» элементы. А хотелось бы выделить еще и заголовок. К сожалению, CSS в своей текущей инкарнации не поддерживает «родительские» селекторы. Поэтому надо каким-то образом охватить весь контейнер сообщения.
Задача – каждому контейнеру сообщения задать уникальный идентификатор, чтобы уже к этому идентификатору привязывать стили CSS.
<b:includable id='post' var='post'>
<div class='post hentry'>
Каждое сообщение в блогах на платформе Blogger имеет собственный глобальный уникальный идентификатор. Этот идентификатор и будешь использовать как идентификатор контейнера сообщения, предварительно снабдив коротеньким префиксом, чтобы избежать возможной путаницы с другими виджетами шаблона. Лично я задал префикс rb.
<div class='post hentry' expr:id='"rb"+data:post.id'>
Допустим, у тебя уже есть сообщение, которое ты хочешь выделить.
<div id="rb2861954547900697711" class="post hentry">
...
</div>
"rb2861954547900697711". Этот идентификатор сообщения ты теперь можешь использовать для привязки стилей.<div class="green-page">
<style type="text/css">
div#rb2861954547900697711 {background-color:#EFFFEF; padding: 15px 10px;}
div#rb2861954547900697711 h3 a {color: #076F0B;}
</style>
...Тело сообщения...
</div>
<style type="text/css"> ... </style>
Теперь у тебя для выделенного сообщения действуют как глобальные (привязанные к контейнерам class="green-page") так и локальные стили (заданные для каждого сообщения отдельно).
Развлекайся :).
Если ты планируешь использовать собственный блог для продвижения своих услуг, будь то веб-разработка, дизайн или грудное вскармливание кроликов породы Французский Вислоухий, тебе понадобится как минимум две статические страницы. Первая из них – «Обо мне» aka “About”, с коротким рассказом о себе-любимом и информацией о предлагаемых услугах. Пулитцеровскую премию за сей опус ты вряд ли получишь, а вот потенциального работодателя заинтересовать скорей всего сможешь. Ты же блоггер! Помнишь?
И тогда, в нетерпении нервно притоптывающий обеими задними ногами, работодатель уж точно озадачится вопросом как с тобой связаться. Вот для этого и предназначена страница «Контакты» или “Contact”. И именно туда ты можешь от души напихать своих твиттеров, асек и электропочт. Ага! – под завязку!
Уже чуешь для чего нужны статические страницы в блоге и какая от них польза? Тогда идем дальше. Создать эти самые статические страницы нам поможет совет от блога Web Design For Idiots. Да, блог полностью соответствует своему названию, поэтому я на него и подписан ;).
Перво-наперво создай новый пост. К примеру, тот же “About”. Убедись, что текст хорошо отформатирован и его не стыдно ни показать, ни прочитать. Отключи в сообщении комментарии и бэклинки. Ты ведь на самом деле не хочешь, чтобы кто-то комментировал информацию о тебе? Затем сохрани пост задним числом. Например, прошлым годом, чтобы он не отображался в твоей RSS ленте. Для этого в форме для создания сообщения щелкни ссылку Настройки сообщения и выставь сообщению прошлогоднюю дату.
Осталось дать ссылку в меню на созданные страницы блога. И вот это самое меню нужно сначала создать.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ruby Brewed (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
#header ul li {
display: inline;
padding:0 5px;
}]]></b:skin>
Всё. Занавес. Аплодисменты!
И благодарности очаровательной ведущей блога Web Design For Idiots за рецепт Creating Static Pages using Blogger.
Довольно часто просматривая чужие блоги натыкаюсь на ссылки вида:
<a rel="external nofollow" href="http://dotrb.blogspot.com">Солодоварни Рубина</a>
Что значит атрибут nofollow я знаю, но вот что такое external? Дело в том, что в спецификации XHTML атрибут ссылки target не поддерживается. Следовательно, конструкция вида: target="_blank" не является валидной. Открывание нового окна браузера – это задача скрипта, а не гипертекстовой разметки. Открывать ссылки в новом окне теперь предлагается с помощью, например языка javascript. Для этого отдельными разработчиками и был искусственно введен атрибут external.
