Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.
Доброго времени суток, друзья. Пост обновлён и дополнен информацией Красиво оформленные цитаты в тексте не только элемент дизайна. Оформлению цитат в сообщениях стоит уделять особое внимание, ведь красиво оформленный участок текста лучше воспринимается читателем. В первую очередь цель цитирования — это привлечь внимание посетителя.

Чтобы указать цитату в тексте, необходимо отметить её кавычками – никаких дополнительных действий делать не нужно.

Много уже написано, как можно выделить цитату в тексте. Предлагаю вам подборку ещё нескольких видов оригинального оформления цитат на страницах блога.

Сегодня во всех примерах привела для наглядности скриншоты. Вы же выбираете для себя понравившийся вариант и просто копируете его код. Можно проверить работу кода в этом редакторе. 

Вариант 1.

оформление цитат

Код

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>blockquote {
background: linear-gradient(135deg, #F6EEDB 50%, #F4FEF9 50%);
padding: 50px 30px;
text-align: center;
position: relative;
color: #49152C;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
font-size: 22px;
margin-top: 30px;
}
blockquote p:before {
content: "\201C";
font-size: 100px;
color: #EA6844;
font-family: serif;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
blockquote cite {
font-style: normal;
}</style>

Вариант 2.

оформление цитат

Код

<blockquote>
  <p>Лучший модный аксессуар женщины - красивый мужчина.</p>
  <cite>Коко Шанель</cite>
</blockquote>

<style>blockquote {
margin: 0;
background: white;
border-top: 5px solid #EAF9F9;
border-bottom: 5px solid #EAF9F9;
color: #3A3C55;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: 20px;
top: 20px;
color: white;
background: #FB6652;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 50px;
line-height: 1.35;
text-align: center;
}
blockquote p {
margin: 0 0 16px;
font-size: 22px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
}</style>


Вариант 3.

оформление цитат

Код

<blockquote>
  <p>Люди, обладающие хорошим вкусом могут носить бижутерию. Остальные – предпочитают золото.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>blockquote {
margin: 0;
background: #BCE8EA;
color: #131314;
padding: 30px 30px 30px 90px;
position: relative;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
top: 20px;
left: 16px;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
blockquote:after {
content: "";
width: 4px;
background: white;
position:absolute;
left: 70px;
top: 20px;
bottom: 20px;
}
blockquote p {
margin-top: 0;
font-size: 24px;
font-weight: 300;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
}</style>



Вариант 4.


Код

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

<style>
blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}</style>

Вариант 5.


Код

<blockquote>
  <p>Ничто так не старит женщину, как слишком богатый костюм.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>
<style>
blockquote {
margin: 0;
background: #F0F0F1;
color: #333334;
padding: 20px 30px;
position: relative;
border-left: 35px solid #DFDEDE;
font-family: 'Lato', sans-serif;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: -29px;
top: 5px;
color: #BCBCBC;
font-size: 50px;
text-shadow: 1px 2px 0 white;
}
blockquote p {
margin: 0 0 16px;
font-size: 20px;
letter-spacing: .05em;
line-height: 1.4;
}
blockquote cite {
font-style: normal;
font-weight: 300;
}</style>


В участке кода

<blockquote>
  <p>Главное в женщине не одежда, а милые манеры, рассудительность и строгий режим дня.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>


 





Вариант 6.

цитата в тексте сообщения

Код
<blockquote class="blockquote-5">

    <p>Текст цитаты</p>

    <cite>Автор цитаты</cite>

</blockquote>

<style>

.blockquote-5 {

    position: relative;

    padding: 16px 24px;

    margin: 16px 16px 26px 16px;    

    font-size: 16px;

    border-top: 2px solid #337AB7;

    border-bottom: 2px solid #337AB7;

}

.blockquote-5::after {

    font-family: Times, sans-serif;

    font-weight: bold;

    position: absolute;

    content: "”";

    color: #BFE2FF;

    font-size: 160px;

    line-height: 0;

    bottom: -22px;

    right: 30px;

    text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;    

}

.blockquote-5 cite {

    color: #337AB7;

    font-size: 15px;

    padding-top: 20px;

    display: block;

}

</style>


Пишите вашу цитату и имя автора. Общий фон цитат определяется свойством background: и вы легко можете подобрать нужный цвет, если воспользуетесь этой таблицей цветов. При написании сообщения перейдите в режим HTML и установите в нужном месте готовый код.

Пусть страницы ваших сообщений будут привлекательными для посетителей не только полезной и интересной информацией, но и своим оригинальным оформлением. 

Сегодня всё. До встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Доброго времени суток, друзья. Не так давно обещала выложить варианты оформления страницы 404 в Блоггере. Предлагаю вам несколько таких дизайнерских решений сразу с кодами. 

У меня была уже небольшая статья о том для чего нужна эта страница 404 и простые способы её оформления. Кто пропустил можно посмотреть здесь. Я свою страницу меняю очень часто. Очень нравиться что - то новенькое придумать. Так что в старом посте код моей первой страницы ошибка 404.  

На данный момент она выглядит так.

Не рассуждая долго, посмотрите подборку оформления страницы вместе с кодами. Все проверены и опубликованы на тестовых блогах для наглядности.

Вариант 1. Тёмная страница с неоновым свечением. 

Чтобы посмотреть вбейте в поиск адрес https://b-v-blog.blogspot.com/лоло .

тёмная страница 404


Код

<div id="dendingac_rosanels">
  <div class="dendingac_rosanels">
  <div class="dendingac_rosanels-404">
  <h1>404</h1>
  <h2>страница не найдена</h2>
  </div>
  <a href="http://www.shpargalochki.ru/">можно перейти на главную</a>
  </div>
  </div>
<style>
#dendingac_rosanels {
  position: relative;
  height: 100vh;
  background: #030005;
}

#dendingac_rosanels .dendingac_rosanels {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dendingac_rosanels {
  max-width: 567px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.dendingac_rosanels .dendingac_rosanels-404 {
  position: relative;
  height: 180px;
  margin-bottom: 20px;
  z-index: -1;
}

.dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
  font-size: 130px;
  font-weight: 900;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -12px;
  color: #190327;
  text-transform: uppercase;
  text-shadow: -1px -1px 0px #8b43ce, 1px 1px 0px #ef256c;
  letter-spacing: -20px;
}

.dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  /* font-size: 42px; */
  font-weight: 700;
  color: #dadada;
  text-transform: uppercase;
  text-shadow: 0px 2px 0px #e00cb3;
  letter-spacing: 14px;
  margin: 0;
}

.dendingac_rosanels a {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  color: #ff005a;
  text-decoration: none;
  border: 2px solid;
  background: transparent;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.dendingac_rosanels a:hover {
  color: #8400ff;
}

@media only screen and (max-width: 767px) {
  .dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-size: 28px;
  }
}

@media only screen and (max-width: 480px) {
  .dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-size: 132px;
  }
}</style>


Вариант 2. Симпатичная страничка с анимацией и переходом на главную страницу.

анимация страницы 404

Чтобы посмотреть на странице вбейте в поиск https://prostotestblog.blogspot.com/лоо

Код

<div id="notfound">
  <div class="notfound">
  <div class="notfound-404">
  <h1>4<span></span>4</h1>
  </div>
  <h2>Oops! Страница не найдена</h2>
  <p>Извините, но страница, которую вы ищете, не существует. Возможно была удалена или временно не доступна</p>
  <a href="http://www.shpargalochki.ru/">Вернуться на главную страницу</a>
  </div>
</div>
<style>
#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.notfound .notfound-404 {
  height: 190px;
}

.notfound .notfound-404 h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 146px;
  font-weight: 700;
  margin: 0px;
  color: #232323;
}

.notfound .notfound-404 h1 > span {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/mozilla/36/pensive-face_1f614.png");
  background-size: cover;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  z-index: -1;
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.notfound h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #232323;
}

.notfound p {
  font-family: "Montserrat", sans-serif;
  color: #787878;
  font-weight: 300;
}

.notfound a {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  padding: 12px 30px;
  font-weight: 700;
  background-color: #f99827;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
  height: 115px;
  }
  .notfound .notfound-404 h1 {
  font-size: 86px;
  }
  .notfound .notfound-404 h1 > span {
  width: 86px;
  height: 86px;
  }
}

@keyframes floating {
  from {
  transform: scale(1.4) translate(0, 0);
  }

  50% {
  transform: scale(1.4) translate(0, 15px);
  }

  to {
  transform: scale(1.4) translate(0, 0);
  }
}

</style>


Вариант 3. Совсем простая страничка. Картинку можно поменять на более жизнеутверждающую

светлая страница ошибка 404

Чтобы увидеть вбейте в поиск https://teststudiblog.blogspot.com/лоло

Код

<div id="tukortunovounal">
  <img src="https://pngicon.ru/file/uploads/ljagushonok-pepe-256x243.png" id="logo404">
  <h1>Вау ... Как не хорошо получилось!</h1>
  <h2>Пожалуйста перейдите на<a href="http://www.shpargalochki.ru/" target="_blank"> главную страницу</a></h2>
</div>
<style>
.ncelede-dupcoming {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  top: -100px;
  opacity: 0.05;
  z-index: 230;
  user-select: none;
  user-drag: none;
}

.mosterta-inlymoved {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 95px;
  font-style: italic;
  text-align: center;
  width: 100px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60px;
  right: 0;
  animation: noise 2s linear infinite;
  overflow: default;
}

.mosterta-inlymoved:after {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 163px;
  height: 57px;
  line-height: 57px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: blue;
  animation: noise-1 .2s linear infinite;
}

.tenarkedes {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 23px;
  font-style: italic;
  text-align: center;
  width: 225px;
  height: 58px;
  line-height: 59px;
  margin: auto;
  position: absolute;
  top: 153px;
  bottom: 0;
  left: 0;
  right: 0;
  animation: noise-3 3s linear infinite;
}

.mosterta-inlymoved:before {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 97px;
  height: 58px;
  line-height: 58px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: red;
  animation: noise-2 .3s linear infinite;
}

@keyframes noise-1 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: -6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: 2px;}
}

@keyframes noise-2 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: 6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: -2px;}
}

@keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(1.7);}
  43% {opacity: 1; transform: scaleX(1.5);}
}

@keyframes noise-3 {
  0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(4);}
  43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
}</style>


Вариант 4. Вот такая с котейкой. Тоже с картинкой и соответствующими ссылками.

страница 404 с котиком

Вбейте в поиск https://test-tri.blogspot.com/лоло

Код

<table width="100%" style="height:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="100%" align="center" valign="top">

<div style="height:400px;width:70%;overflow:hidden;position:relative">
<img src="https://image.freepik.com/free-vector/404_114360-1900.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />
<div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%"><span style="color:purple"><span style="font-family:'Geneva'"><span style="font-size:23pt"><b>Страница 404</b></span></span></span></div> </div>
<tbody><tr>
<td>
<h1>Страница не найдена! (ошибка 404)</h1>
<p>Ну и дела! На сайте <a href="http://www.shpargalochki.ru/"></a> нет такой страницы!<br>
Причины могут быть разные</p>
<ul>
<p>Вы ошиблись, набирая адрес</p>
<p>Страница была давно удалена и ваша ссылка устарела</p>
</ul>
<p><a href="http://www.shpargalochki.ru/">Перейдите на главную страницу сайта ШПАРГАЛКИ БЛОГЕРШИ"</a> чтобы продолжить работу.</p>
</td>
</tr>
</tbody></table>




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

Теперь как и куда вставлять коды. Если работаете в старом интерфейсе Блоггер, то в статье, ссылка на которую в начале этого поста, подробно написано про это. В обновлённом интерфейсе, идём тем же путём. Админ-панель - настройки и в длинном списке находим функцию персонализированная страница об ошибке 404. Нажимаем и в открывшемся окне вставляем код, выбранной вами страницы. не забудьте сохранить.



Всё. Обязательно оформляйте вашу страницу с ошибками 404. Пусть она будут интересной и уникальной.

Все добра, удачи и летних денёчков. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

 Всем привет.  Давненько я не писала в блоге. Не могу не поделиться с вами, как вернуть, исчезнувшие картинки  В блог. Ко мне уже несколько раз обращались мои дорогие читатели с вопросом что с изображениями в блах творится и где искать решение. У меня у самой на всех блогах исчезли  сразу все картинки. Восстанавливать заново просто нереально . Руки опустились Но ответ нащла на этом сайте  и на форуме blogger

Все адреса с .bp.blogspot.com заблокированы в России.

Просто напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Тут, уже американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет. 

 Когда мы размещаем картинки свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально. 

<script>

  var images = document.getElementsByTagName(&quot;img&quot;);

for(var i=0;i&lt;images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4.googleusercontent.com&quot;);

}

</script>

Все адреса с .bp.blogspot.com заблокированы в России.

Просто-напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Да, уж, американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет. 

 когда вы их размещаете в свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально.

 что делать теперь ?

Нашлись умные люди, которые написали скрипт для подмены адресов картинок в блоге с bp.blogspot.com на h4.googleusercontent.com ( это всё зеркальные адреса) 

Нужен вот такой скрипт

<script>

  var images = document.getElementsByTagName(&quot;img&quot;);

for(var i=0;i&lt;images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4.googleusercontent.com&quot;);

}

</script>

В скрипте src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4 -наши блокированные домены с 1.bp до 4.bpэто  блокированные домены с 1.bp до 4.bp.

Как вставить скрипт,чтобы в блоге появились все пропавшие картинки снова. 

Копируйте данный скрипт. Заходите во вкладку  Тема, Сделайте (на всякий случай), резервную копию шаблона В открывшимся окне Нажимаем на оранжевую кнопку и выбираем изменить HTML




проблема с картинками


Далее, находим в шаблоне закрывающийся тег </body>. Он обычно конце шаблона прописан. И над ним вставляем


скрипт для картинок

Не забудьте сохранить изменения. Возвращаемся в блог и видим, что все картинки на своём месте.  В моём случае во все свои блоги установила скрипт и все фото встали на место. Было настроение совсем удалить блоги. Но вот такая уловка сработала и стало веселее. Хотя, конечно, есть определённая нагрузка от лишних скриптов, но хоть что-то. Проблема с картинками отпала.


Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


Всем, доброго времени суток. Сегодня задача заключается в том, как выделить весь DIV, Span текст при щелчке мыши по кнопке с помощью JavaScript для копирования. Многие блогеры используют подобную опцию, чтобы дать своим посетителям не прокручивать содержание всего блока для копирования, а одним щелчком мыши скопировать сразу всю область. 

копирование кода одним кликом


Что в итоге имеем

Выделяется все содержимое DIV/Span/Textarea с помощью кнопки.

Чистый JavaScript-Код.

Простота в использовании

Вы можете добавить неограниченное количество DIV даже на одну страницу / пост.

Вы можете добавить CSS стили на ID.

Он отменит выделение всего содержимого DIV/Span/Textarea так же с помощью кнопки.


Нам понадобиться вот такой готовый код, который вы сразу, тут же на странице,  сможете легко проверить (кликните по кнопке скопировать и вставьте у себя в черновике или блокноте), чтобы посмотреть, как это работает

<script type="text/javascript"> function fnSelectundefinedobjId) { fnDeSelectundefined); if undefineddocument.selection) { var range = document.body.createTextRangeundefined); range.moveToElementTextundefineddocument.getElementByIdundefinedobjId)); range.selectundefined); } else if undefinedwindow.getSelection) { var range = document.createRangeundefined); range.selectNodeundefineddocument.getElementByIdundefinedobjId)); window.getSelectionundefined).addRangeundefinedrange); } } function fnDeSelectundefined) { if undefineddocument.selection) document.selection.emptyundefined); else if undefinedwindow.getSelection) window.getSelectionundefined).removeAllRangesundefined); } </script> <div id="execodediv0"> А здесь будет зашифрованный код или просто текст </div> <center> <input onclick="javascript:fnSelectundefined'execodediv0');" title="скопировать код" type="submit" value="скопировать код" /> <input onclick="javascript:fnDeSelectundefined);" title="отменить копирование" type="submit" value="отменить копирование" /> </center>


Как это добавить на страницу

В сообщении переходим в формат HTML и в строке, отмеченной синим цветом, вставляем свой текст.

Для вебмастеров, которые публикуют свои коды для копирования, порядок немного другой. Следует сначала декодировать код. У меня здесь ENCODER кодов. Установить, так же как с текстом, вместо строки синего цвета этот декодированный код. Перейдя в формат вёрстки результат будет, как в примере выше.


Для нового Div на той же странице добавьте только этот код Div снова, но измените execodediv0 на execodediv1 в двух местах и т. д. Потом сохраните и всё.
Для информации предлагаю статью по теме - как копировать текст в буфер обмена кликом.


Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


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

Здравствуйте меня зовут Борис. Я долгое время читаю Блог Виктории "Шпаргалки Блогерши" и он меня радует своей простотой.

Код плеера мне достался даром и поэтому я решил поделиться им с людьми так же даром. Потому что в поиске практически не найдешь такой пост который я хочу написать для Вас. Такой же финт я пробовал сделать с кодом для фото и видео чтобы хостингом был непосредственно Гугл Диск.

плеер для сайта

Значит, первым делом загружаем аудиофайл на хостинг Гугла Google Disk в формате WAW, MP 3, Windows. Файл может быть и большой но желательно не очень большой так как он начнет сам сбиваться.

код ауди плеера с Гугл диска

Открываем доступ к файлу для всех. Копируем прямую ссылку в блокнот или в поле вставки плеера в блоге. Затем вырезаем из нее индификационный номер файла и вставляем его в поле кода для плеера. Сохраняем.


Копируем номер из прямой ссылки на файл





Вставляем номер файла сюда

Плеер сохранен и воспроизводится

Главное работать с кодом и ссылкой корректно.

Чтобы плеер располагался ровно можно использовать тег <br /> <center />

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

Так же, к плееру можно добавить ширину. Для Этого в команду кода вставляем тег <with>

Ширина плеера

<audio controls style="width: 200px;">
  
Код без расширения
  
<audio controls="controls">
 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=18ckYBdErJN1BJZvf6-WROfWlgxCL40rc" type="audio/mpeg"></source></audio>

Как вы видите в команду audio controls добавлен тег style


Тогда плеер получится такой или такой...

Тогда плеер можно делать как шире так и уже.

Еще к плееру можно нарисовать свою кнопочку. Для этого к коду добавляем графический тег <img> и кнопочку <button> и вуаля ваш плеер работает персонально у вас в блоге без дополнительной регистрации и ограничения в загрузке. 


Код для аудиоплеера:

1 вариант.

<audio controls="controls">
 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1MPQtK50-u-UtjItMlI7jfClM4BFN0H8A" type="audio/mpeg"></source></audio>
<br/>


2 вариант. С картинкой/кнопкой


<img src="https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png" onclick="if (this.src=='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png') {this.src='https://c.radikal.ru/c31/2009/61/98c14bce7608.jpg'; document.getElementById('audio').play() } else { this.src='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png'; document.getElementById('audio').pause() };" />

<audio id="audio" src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1AGNq6csVLhMZL3fjDErcZ7lCcu5i92Cw" type="audio/mpeg" controls ></audio><button onclick="document.getElementById('audio').play()">Play</button><button onclick="document.getElementById('audio').pause()">Pause</button><button onclick="document.getElementById('audio').volume+=0.1">Vol +</button><button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

Хостингом для картинки можно использовать как сам блоггер так и сторониие ресурсы например Радикал.ру


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

плеер для блога
Другой способ вставки плеера


плеер для блога


Плеер во всплывающем окне с кнопкой


Для этого просто копируем код плеера и вставляем в код всплывающего окна и сохраняем. Только гаджет блоггер работает так что если размер окна выставляешь больше то меньше назад его можно сделать только если стереть пустой виджет и создав новый виджет сохранить код с конечной разметкой ширины и высоты окна. В окно можно к плееру вставить что угодно, текст картинку, видео или ссылку.

Я попробовал вставить в окно даже интернет радио из WinAmip
Получилось здорово. В кнопке бегущая строка.

<a href="http://79.120.39.202:8000/pop80" onclick="newMyWindow(this.href); return false;"><button><marquee scrollamount="3" width="100"  height="20"style="font-size: 14pt; ">Слушать... </marquee></button> </a>

 

<script>

function newMyWindow(e) {

  var h = 150,

      w = 250;

  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

}

</script>


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

Видео https://youtu.be/Zcpx14hLpUo

Спасибо за консолидацию!

Если возникнут вопросы или, что-то не совсем понятно, пишите в комментариях к этому посту.