Куда заливать свои файлы

Привет всем! Кто сталкивался с проблемой где можно бесплатно хранить Ваши файлы и не только хранить, но и чтобы посетители могли кликнуть по ссылке прямо из поста и скачать файл
Дать возможность скачать файл по прямой ссылке, оказывается можно с помощьюGoogle Сайтов. Для этого нам нужно создать свой сайт или выбрать уже готовый. Как сделать так, чтобы посетители могли кликнуть по ссылке прямо из поста и скачать файл.Заходим в свой аккаунт на Google. Находим ссылку на сайты и кликаем по ней.
На следущей странице заполняем название сайта,дизайн и другие настройки можно сделать и позже, обратите внимание на пункт Дополнительные параметры – Общий доступ.
Обязательно выберите - Этот сайт может просматривать любой пользователь. Если не сделать эту настройку, ваши файлы не будут доступны для скачивания. Кстати там можно выбрать готовый сайт. Если Вы не хотите ломать голуву, советую выбрать из предложенных вариантов.


После заполнения,жмем кнопку Создать сайт. 
Нажмите кнопку - Ещё. Выпадет меню: выбираем пункт Управление сайтом. Попадаем на страницу Управление сайтом. Нажимаем пункт: Приложения

Дальше жмем на кнопку Загрузить и загружаем файл с компьютера.
Когда загрузите файл. Жмем правой кнопкой мыши по ссылке загрузить. И выбираем пункт Копировать ссылку.Но эту ссылку пока нельзя вставлять в блог. Её необходимо немного отредактировать.


https://sites.google.com/site/help/ cmotrim tyt.rar?attredirects=0&d=1
У этой ссылки необходимо удалить все, что находится после знака вопроса. Ссылка должна заканчиваться строго на типе файла, в данном случае так:

https://sites.google.com/site/ help/ cmotrim tyt.rar .rar
Вот такую ссылку можно вставлять в блог. 

источник

CSS - как сделать вертикальное меню?

Продолжаем изучать CSS, и сегодня мы будем рассматривать пример создания вертикального выпадающего меню или по-другому его еще называют меню «аккордеон». Меню будем делать на чистом CSS без использования JavaScript, хотя если использовать JS, меню получится намного лучше, но в этом уроке мы изучаем CSS.

Примечание! Если Вы до этого не встречались с технологией CSS (Cascading Style Sheets), то для освоения данного урока сначала прочитайте статью Основы CSS для начинающих.

Важно! Пример ниже, тестировался и точно работает, со всеми эффектами, в браузерах:

• Google – Chrome (всех последних версий);
• Mozilla Firefox  (всех последних версий);
• Opera 12.00.

Некоторые эффекты не работают:

• Internet Explorer (версии 6-9);
• Opera (ниже 11 версии).

Меню вообще не работает:

• Internet Explorer (ниже 6 версии).

Ну что давайте приступим, сразу скажу, что меню делается не сложно, да и получилось оно достаточно простое, сейчас Вы все сами увидите.

Для начала посмотрим на то, что мы попытаемся сделать в конечном итоге:

Меню 1

Меню 2

Меню 3

Меню 4

В сегодняшнем уроке мы рассмотрим и научимся использовать следующие:

• селекторы идентификаторов и классов;
• селекторы потомков;
• селекторы дочерних элементов;
• селекторы псевдоклассов;
• свойства (например: margin, cursor, overflow, width, height, text-align, background, color);
• проприетарные CSS-свойства (transition, border-radius и linear-gradient);
• рассмотрим один css хак (для IE);
• секцию expression;
• использование комментариев, обозначаются /*Текст комментария*/.

Для того чтобы все было понятней, весь код я подробно комментирую, каждый селектор и каждое свойство. Чтобы у Вас все работало, скопируйте весь код и создайте файл с расширением html и вставьте этот код туда. Советую использовать при редактировании, для удобства, текстовый редактор NotePad++ и в нем поставьте синтаксис CSS, после чего у Вас все комментарии станут подсвечиваться, если они Вам не потребуются, то просто удалите их.

Исходный код выпадающего меню на CSS

<style> /*для элемента с идентификаторов mymenu*/ #mymenu { width: 150px; /*ширина основного блока*/ margin: 0 auto; /*отступ от каждого края, так мы выровняли наше меню по центру*/ } /*для элемента с классом mydiv, у которого в потомках есть идентификаторов mymenu*/ #mymenu .mydiv { width: 150px;/*ширина всего меню*/ transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 15px;/*округления уголков рамки*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; } /*для элемента h3, у которого в потомках есть класс mydiv*/ .mydiv h3{ cursor:pointer; margin: 0 0 0 0;/*величина отступа от каждого края*/ text-align: center; color:white; border-radius: 15px;/*округления уголков заголовка*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; background: #4EAEC1; /*цвет фона для параграфа*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #21cbed 0%, #055261 44%, #086a7d 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /*IE10+ */ background: -ms-linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); /* W3C */ background: linear-gradient(top, #21cbed 0%,#055261 44%,#086a7d 100%); filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#21cbed', endColorstr='#086a7d',GradientType=0 ); } /*для элемента p, у которого в потомках есть идентификаторов mymenu*/ #mymenu p { text-align: center;/*выравнивание по центру*/ margin: 0 0 0 0;/*величина отступа от каждого края*/ height: 0px;/*выставляем высоту для параграфа, чтобы по умолчанию он был скрыт*/ overflow: hidden;/*скрываем переполнение контента*/ transition: height ease-in-out 500ms; /*Изменяем высоту и задаем время задержки*/ -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border-radius: 15px;/*округления уголков параграфа*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; background: #21cbed; /*цвет фона для параграфа*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #4EAEC1 0%, #188499 44%, #065868 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* IE10+ */ background: -ms-linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); /* W3C */ background: linear-gradient(top, #4EAEC1 0%,#188499 44%,#065868 100%); filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 ); } /*для элемента p с псевдоклассов :hover(срабатывает при наведении) у которого в потомках есть идентификаторов mymenu*/ #mymenu p:hover { background: #4ee1fe;/*цвет фона для параграфа при наведении*/ /* FF3.6+ */ background: -moz-linear-gradient(top, #4ee1fe 0%, #11b4d4 44%, #06a2c1 100%); /* Chrome10+,Safari5.1+ */ background: -webkit-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* IE10+ */ background: -ms-linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); /* W3C */ background: linear-gradient(top, #4ee1fe 0%,#11b4d4 44%,#06a2c1 100%); cursor:pointer;/*изменяем курсор*/ } /*для элемента p, который является дочерним элементом элемента div с псевдоклассом :hover (будет срабатывать при наведении), у которого в потомках есть идентификаторов mymenu*/ #mymenu div:hover > p { height: 25px;/*при наведении на блок с заголовком, высота параграфа становится 25 пикселей, это как раз и есть эффект появления подменю*/ } /*далее идет примочка для Internet Explorer, другие браузеры ее не видят, так называемый хак для IE*/ * html #mymenu .mydiv { filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 ); height: 20px;/*начальная высота блока*/ overflow: hidden; /*скрываем переполнение контента*/ forIE: expression(/*секция expression - вставляем javascript код, для выставления нового класса*/ onmouseover = function() {this.className += ' hover'}, onmouseout = function() {this.className = this.className.replace('hover', '')} ); } /*для только что созданного нового класса .hover*/ * html #mymenu .mydiv.hover { height: auto;/*выставляем высоту для нашего блока с параграфами в авто, для того чтобы было динамическое меню, т.е. при добавлении новых пунктов меню блок сам будет подгонять свой размер по данным внутри себя*/ } /*для элемента a(ссылки), у которого в потомках есть элемент p, в свою очередь, у которого в потомках есть идентификаторов mymenu, поставим цвет белый, т.е. цвет ссылки*/ #mymenu p a { color:white; } </style> <div id="mymenu"> <div class="mydiv"> <h3 > Меню 1</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> </div> <div class="mydiv"> <h3> Меню 2</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> </div> <div class="mydiv"> <h3> Меню 3</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> <p> <a href = "#">Подменю4</a></p> </div> <div class="mydiv"> <h3> Меню 4</h3> <p> <a href = "#">Подменю1</a></p> <p> <a href = "#">Подменю2</a></p> <p> <a href = "#">Подменю3</a></p> <p> <a href = "#">Подменю4</a></p> <p> <a href = "#">Подменю5</a></p> </div> </div>

источник

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

Как создать снимок системы в Linux Mint? Создание резервной копии системы и ее восстановление (714 Hits)

Как скачать все фото из Инстаграм на компьютер? (1021 Hits)

Как вывести значения столбца в строке через запятую на T-SQL? Microsoft SQL Server (890 Hits)

Как сделать скриншот экрана в Linux? (1386 Hits)

Fedora Media Writer - как создать загрузочную флешку с Linux Fedora? (1411 Hits)

В российских городах прошли митинги против повышения пенсионного возраста

www.9111.ru

В нескольких городах России прошли митинги против повышения в стране пенсионного возраста, пишет Интерфакс.    Так, на акцию протеста против пенсионной реформы вышли жители Хабаровска. В их числе были сторонники оппозиционера Алексея Навального.    Митинг был согласован с городскими властями. По официальным данным администрации, в мероприятии приняли участие порядка 300 человек, организаторы же сообщили, что на акцию собралось более 1 тыс. хабаровчан.    Аналогичный митинг прошел в Брянске на площади Революции. Его участниками стали около 400 человек.     Организатором акции выступило местное отделение КПРФ. Ее также согласовали с властями. Накануне региональное отделение «Справедливой России» на своем сайте заявило о поддержке коммунистов по этому вопросу и намерении принять участие в митинге. К акции также присоединились брянские сторонники Навального, профсоюзные лидеры.    Еще один митинг состоялся сегодня в Томске в сквере студенческих стройотрядов. Его устроили сторонники Алексея Навального, предварительно согласовав с администрацией города. По оценкам организаторов, на акцию пришли до 500 человек.    Активисты до митинга и во время его проведения собрали порядка 1,5 тыс. подписей против изменений пенсионного законодательства, которые они намерены направить в Совет Федерации.    Напомним, что проект закона о повышении пенсионного возраста уже внесен в Госдуму. Документ предлагает поднять пенсионный возраст до 63 и 65 лет у женщин и мужчин соответственно источник

Как сделать меню вкладками для Blogger.

Меню вкладками можно сделать как с помощью только CSS, так и обращаясь к JavaScript. Здесь я хочу предложить последний вариант, поскольку данный элемент будет полностью интегрирован в шаблон Blogger, что позволит нам добавлять в него стандартные гаджеты. Тут не нужно подбирать ширину и высоту, данные параметры настраиваются автоматически. По моим наблюдениям для более выигрышного вида ширина боковой панели должна быть от более 330 пикселей. Таким может быть конечный вариант: пример. 
Переходим на вкладку "Дизайн"-"Изменить HTML". Нажав CTRL+F, ищем </head> и перед ним добавляем:

<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>');function tabberObj(argsObj){var arg;this.div=null;this.classMain="tabber";this.classMainLive="tabberlive";this.classTab="tabbertab";this.classTabDefault="tabbertabdefault";this.classNav="tabbernav";this.classTabHide="tabbertabhide";this.classNavActive="tabberactive";this.titleElements=['h2','h3','h4','h5','h6','strong'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabberid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabberObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabber=this;DOM_a.tabberIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabberid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabber:this})}return this};tabberObj.prototype.navClick=function(event){var rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false}self=a.tabber;tabberIndex=a.tabberIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabber':self,'index':tabberIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabberIndex);return false};tabberObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabberObj.prototype.tabHide=function(tabberIndex){var div;if(!this.tabs[tabberIndex]){return false}div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabberIndex);return this};tabberObj.prototype.tabShow=function(tabberIndex){var div;if(!this.tabs[tabberIndex]){return false}this.tabHideAll();div=this.tabs[tabberIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabberIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabber':this,'index':tabberIndex})}return this};tabberObj.prototype.navSetActive=function(tabberIndex){this.tabs[tabberIndex].li.className=this.classNavActive;return this};tabberObj.prototype.navClearActive=function(tabberIndex){this.tabs[tabberIndex].li.className='';return this};function tabberAutomatic(tabberArgs){var tempObj,divs,i;if(!tabberArgs){tabberArgs={}}tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs)}}return this}function tabberAutomaticOnLoad(tabberArgs){var oldOnLoad;if(!tabberArgs){tabberArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabberAutomatic(tabberArgs)}}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs)}}}if(typeof tabberOptions=='undefined'){tabberAutomaticOnLoad()}else{if(!tabberOptions['manualStartup']){tabberAutomaticOnLoad(tabberOptions)}} //]]> </script>

Преимуществом данного скрипта является то, что не требуется подключать дополнительные библиотеки. Его можно также вынести во внешний файл.

Перед ]]></b:skin> пишем:

.tabberlive{ clear: both; margin: 10px 0 10px 0;} .tabbernav { margin: 0 0 0 15px; padding: 3px 0; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold;} .tabbernav li { list-style: none; margin: 0; display: inline;} .tabbernav li a { padding: 3px 0.5em; margin-right: 1px; text-decoration: none; color: #5588aa; border-radius: 3px 3px 0 0;} .tabbernav li a:hover { background: #5588aa; border-color: #5588aa; border-radius: 3px 3px 0 0; color: #ffffff; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { color: #ffffff; border-bottom: 1px solid #ffffff; background: #5588aa;} .tabberlive .tabbertab { padding: 5px; border: 1px solid #5588aa; background: #ffffff; border-radius: 0 3px 3px 3px;} .tabberlive .tabbertab h2, .tabberlive .tabbertab strong, .tabberlive .tabbertabhide { display: none; } .tabbertab .widget-content ul{ list-style: none; margin: 0 0 10px 0; padding: 0;} .tabbertab .widget-content li { border-bottom: 1px solid #ffffff; margin: 0 5px; padding: 2px 0 5px 0;}

Здесь простой CSS:

• background - фон,
• border - рамка,
• color - цвет текста,
• font-size - размер шрифта.

Цвета (цифры после значка #) я подбираю с помощью программ Colorpicker (для определения исходного значения) и Фотошопа на панели "Окно"-"Инструменты"-"Палитра цветов" (для их варьирования).

И заключительный шаг. Нужно разместить код, который определяет количество вкладок (<b:section class='tabbertab' id='tab1' maxwidgets='1'/>):

<div class='tabber'> <b:section class='tabbertab' id='tab1' maxwidgets='1'/> <b:section class='tabbertab' id='tab2' maxwidgets='1'/> <b:section class='tabbertab' id='tab3' maxwidgets='1'/> <b:section class='tabbertab' id='tab4' maxwidgets='1'/> </div>

Для правой боковой панели: <div class='column-right-inner'> либо здесь код меню <aside> .......... </aside> либо здесь код меню </div>

Аналогично с левой панелью (<div class='column-left-inner'>).

В итоге, у нас в "Дизайн"-"Элементы страницы" появятся новые поля для добавления гаджетов.

Добавить гаджеты в меню вкладками для Blogger.

источник

33 шага для создания и настройки бесплатного блога Blogger

Мне часто приходится для разных целей создавать новые блоги на платформе Blogger, о всех преимуществах и недостатках которой, вы могли прочитать здесь. Сама процедура создания и настройки настолько проста, что доступна даже для начинающих веб-мастеров, чьи знания и навыки ещё далеки от совершенства.
Тем не менее, процесс требует выполнения обязательных последовательных шагов.

Систематизируя трёхлетний опыт, я написал шпаргалку, которая, надеюсь, будет полезна как начинающим, так и опытным блоггерам.

Если вы предполагаете использовать блог только как личный дневник - вполне достаточно выполнить первые три шага. Если в ваших планах создание профессионального блога с перспективой превратить его в мощный источник регулярных доходов - рекомендую воспользоваться моей шпаргалкой в полном объёме:)

Блог на Blogger - последовательные шаги

1. Регистрация аккаунта в Gmail
2. Регистрация названия и адреса блога
3. Выбор временного шаблона
4. Публикация двух-трёх постов
5. Перенаправление канала RSS через FeedBurner
6. Настройки в панели администратора
7. Замена шаблона на готовый из Интернета, или настройки в Дизайнере шаблонов Blogger
8. Регистрация и верификация в Инструментах вебмастеров Google
9. Добавляем код Google Analytics
10. Регистрация и верификация в Инструментах вебмастеров Yandex
11. Настройки метатегов в разделе head шаблона (ключевые слова. заголовки, canonical и др.)
12. Заполняем и настраиваем статические страницы ("Контакты", "О блоге", "Услуги" и т.д.)
13. Закрываем от индексации ярлыки
14. Оформляем форму подписки в сайдбаре
15. Оформляем форму подписки в конце поста
16. Добавляем кнопки социальных сетей
17. Вставляем счётчики
18. Настройки поиска в панели администратора
19. Оптимизация сообщений
20. Оптимизация изображений
21. Добавляем поиск по сайту от Google и Yandex
22. Создание карты сайта
23. Вставляем виджет "Последние статьи"
24. Вставляем виджет "Популярные статьи"
25. В конце поста добавляем виджет похожих сообщений
26. Виджет с картинками от LinkWithin
27. Добавляем код Яндекс-метрики
28. Подтверждаем авторство в расширенных сниппетах Google
29. Удаляем лишние внешние ссылки (ссылки быстрого редактирования и пр.)
30. Настраиваем систему комментирования
31. Добавляем блог в аддурилки Google и Yandex
32. Если есть необходимость - переводим блог на домен второго уровня (этот шаг платный)
33. Ускоряем индексацию с помощью Twitter, Google+ и Facebook

Детальную информацию по выполнению каждого шага можно найти либо на страницах этого блога, либо "по-гуглив" в Интернете.

источник