Самое простое решение для скрытого текста - спойлера для блога на Blogger, Блогспот

 Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

В срочном порядке публикую короткий пост для себя (что бы не потерялся в "километрах" закладок!) и для вас, тех кто читает эти строки. Сегодня я наткнулся на самое простое и эффективное решение - скрыть показать текст. Без JavaScript или JQuery. Поверьте мне, проще решения я не встречал! А нашел это я на замечательном блоге:

ШПАРГАЛКА БЛОГГЕРА http://shpargalkablog.ru/ который я, особенно владельцам blogger, блоггер (blogspot, блогспот) - советую! Выглядит это так:

                      ХОТИТЕ УЗНАТЬ ГДЕ БАБКИ КРУТЯТСЯ? - КЛИКНУТЬ!

Как вы уже наверное догадались, это скрытый - исчезнувший текст. В самом коде, то что выделено красным, вы можете поменять. Это цвет заднего фона.

А вот и сам код:

<style>
#no-div, .no { display: none; }

.no + label { /* вид CSS кнопки */
  background: #4e6473;
  padding: 9px 10px;
  border-radius: 2px;
  color: #fff;
  cursor: pointer; }

.no:checked + label { background: #e36443; }

.no:checked ~ #no-div { display: block; }
</style>

<input type="checkbox" id="raz" class="no"/><label for="raz">Ваш текст о скрытой информации - кликнуть!</label><div id="no-div"><br />
<br />исчезающий текст</div>

источник

Горизонтальное меню 3D для Blogger с эффектом вращения

Это меню особенно впечатляет, при наведение курсором мыши на пункт меню оно вращается, то есть переворачивается. Красота. Не забудьте проверить в демо блоге.

3D Flip меню для блога

Для вставки в поле гаджета Html/JavaScript вот этот код:

<style type="text/css">

.block-menu {

display: block;

background: #000;

}

.block-menu li {

display: inline-block;

}

.block-menu li a {

color: #fff;

display: block;

text-decoration: none;

font-family: 'Passion One',Arial,sans-serif;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

font-smoothing: antialiased;

text-transform: uppercase;

overflow: visible;

line-height: 20px;

font-size: 24px;

padding: 15px 10px;

}

/* animation domination */

.three-d {

-webkit-perspective: 200px;

-moz-perspective: 200px;

perspective: 200px;

-webkit-transition: all .07s linear;

-moz-transition: all .07s linear;

transition: all .07s linear;

position: relative;

}

.three-d:not(.active):hover {

cursor: pointer;

}

.three-d:not(.active):hover .three-d-box,

.three-d:not(.active):focus .three-d-box {

-moz-transform: translateZ(-25px) rotateX(90deg);

-webkit-transform: translateZ(-25px) rotateX(90deg);

-o-transform: translateZ(-25px) rotateX(90deg);

transform: translateZ(-25px) rotateX(90deg);

}

.three-d-box {

-webkit-transition: all .5s ease-out;

-moz-transition: all .5s ease-out;

-ms-transition: all .5s ease-out;

-o-transition: all .5s ease-out;

transition: all .5s ease-out;

-webkit-transform: translatez(-25px);

-moz-transform: translatez(-25px);

-o-transform: translatez(-25px);

transform: translatez(-25px);

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

pointer-events: none;

position: absolute;

top: 0;

left: 0;

display: block;

width: 100%;

height: 100%;

}

.front {

-webkit-transform: rotatex(0deg) translatez(25px);

-moz-transform: rotatex(0deg) translatez(25px);

-o-transform: rotatex(0deg) translatez(25px);

transform: rotatex(0deg) translatez(25px);

}

.back {

-webkit-transform: rotatex(-90deg) translatez(25px);

-moz-transform: rotatex(-90deg) translatez(25px);

-o-transform: rotatex(-90deg) translatez(25px);

transform: rotatex(-90deg) translatez(25px);

color: #FFE7C4;

}

.front, .back {

display: block;

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background: black;

padding: 15px 10px;

color: white;

pointer-events: none;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

</style>

<ul class="block-menu">

<li><a href="###" class="three-d">

Главная

<span class="three-d-box"><span class="front">Главная</span><span class="back">Главная</span></span>

</a></li>

<li><a href="###" class="three-d">

О блоге<span class="three-d-box"><span class="front">О блоге</span><span class="back">О блоге</span></span>

</a></li>

<li><a href="###" class="three-d">

Услуги

<span class="three-d-box"><span class="front">Услуги</span><span class="back">Услуги</span></span>

</a></li>

<li><a href="###" class="three-d">

Карта

<span class="three-d-box"><span class="front">Карта</span><span class="back">Карта</span></span>

</a></li>

<li><a href="###" class="three-d">

Архив

<span class="three-d-box"><span class="front">Архив</span><span class="back">Архив</span></span>

</a></li>

</ul>

Здесь тоже самое заменяйте пункты меню на свои и вставляйте вместо решеток ссылки на что угодно. И последнее меню будет выпадающим.

Красивое горизонтальное меню с анимацией для Blogger

Меню с анимацией для Blogger

Для того, чтобы установить это меню зайдите в панель инструментов Blogger - Дизайн. Нажмите добавить гаджет Html/JavaScript:

Нажмите добавить гаджет Html/JavaScript:

И в его поле добавьте такой код:

<style type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.exespotlightmenu li:hover a{

color: white;

background: #a71b15; /* background color of spotlight */

-webkit-border-radius: 50%; /* large radius to create circular borders */

-moz-border-radius: 50%;

border-radius: 50%;

}

.exespotlightmenu li a exespan{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

</style>

<br />

<div class="exespotlightmenu">

<ul>

<li><a href="##########"><exespan>Главная</exespan></a></li>

<li><a href="##########"><exespan>О блоге</exespan></a></li>

<li><a href="##########"><exespan>Карта</exespan></a></li>

<li><a href="##########"><exespan>Архив</exespan></a></li>

<li><a href="##########"><exespan>Контакт</exespan></a></li>

</ul></div>

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