Blogger Templates

вторник, февраля 21

Виджет подписки с социальными кнопками

Компактный виджет подписки на обновления блога


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

Вам надо скопировать код, вставить его в черновике blogger добавить гаджет и установить в нужном месте макета блога. предварительно измените адреса аккаунтов социальных сетей на свои. Итак, вот код, скопируйте его:




<style>
/*-------------Widget by: TwistBlogger.com-------------*/
.TwistBlogger {
Color: white;
width: 194px;
margin-left: 5px;
line-height: 9px;
padding-left: 10px;
padding-right: 10px;
display: block;
border: 2px solid #000000;
background-color: #000000;
border-radius: 40px;
}
.TwistBlogger img:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
}
.TwistBlogger img {
-webkit-transition: all 1.1s ease-in-out;
-moz-transition: all 1.1s ease-in-out;
-o-transition: all 1.1s ease-in-out;
-ms-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
/*---------------Button---------------*/
.TwistBlogger7:hover{
background:#1805A0;
}
.TwistBlogger7 {
font-size: 20px;
font-weight: normal;
margin: 0px 0px 2px 10px !important;
color: white;
background: #FF5C00;
border: 1px solid #000000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
Padding: 4px 20px 4px 20px;
}
/*--------------Mailbox---------*/
.Enter-mail {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
margin-left: 0px !important;
border-radius: 4px;
color: #666;
font: 12px "trebuchet ms", sans-serif;
padding: 6px 10px;
margin-bottom: 7px;
width: 245px;
}
.Enter-mail:hover{
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.TBstatus {
line-height: 1.7em;
font-size: 17px;
text-align: center;
margin-top: 5px;
margin-bottom: -5px;
margin-left: 5px;
margin-right: 5px;
}
/*--------------Outer Box---------*/
#TwistBlogger9 {
border: 1px dashed #A7A7A7;
width: 290px;
height: 235px;
background: #FFFDFD;
box-shadow: inset 0px 0px 11px rgba(0, 0, 0, 0.17);
}
</style>
<center><div id='TwistBlogger9'><div class="TBstatus"><span style="text-shadow: 0px 1px 0px #F7F7F7, 0px 2px 0px #F5F3F3, 0px 3px 0px #F5F5F5, 0px 4px 0px #E9E9E9, 0px 5px 0px #E9E9E9, 0px 6px 0px rgba(218, 213, 213, 0.1), 0px 7px 0px rgba(223, 220, 220, 0.15);color: #000000;font-size: 32px; font-weight:bold;">Подпишитесь</span> на <span style="color:#16BE07;font-size:25px;font-weight:bold">обновления</span>блога</div><br /><div id="email-news-TwistBlogger7"><div class="emailbox"><form action="http://feeds.feedburner.com/blogspot/TsLmX" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/tPDSo&loc=ru_RU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input class="Enter-mail" size="35" type="text" style="font-size: 15px;" id="email" name="email" value="Введите Ваш E-mail адрес" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="TwistBlogger" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="TwistBlogger7" name="commit" type="submit" value="Подписаться" /></p><p class="TwistBlogger"><a href="http://www.facebook.com/bdblogov" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Tbwkk8K3NkA/UwuarrwFuDI/AAAAAAAAAck/FFsuByi5aW8/s1600/facebook.png" title="Like Us on Facebook" alt="undefined" /></a> | <a href="http://www.twitter.com/violavasil_eva" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-yyZ-OKHh1Ys/Uwuas6KDVOI/AAAAAAAAAc0/jH4lb2Z_E9Q/s1600/twitter.png" title="Follow Us On Twitter" alt="undefined" /></a> | <a href="https://plus.google.com/+OlgaProtasova/about" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-ElLzOZSn3IA/UwuasjPY5iI/AAAAAAAAAcs/WAIBT8D7KBQ/s1600/google+.png" title="Follow Us on Google+" alt="undefined" /></a></p></form></div></div></div></center>

Выделенный у меня жирный текст можно изменить на свой. Коричневым-адрес feedburner; красным-facebook; лиловым-twitter; синим-Google+. С другими настройками я думаю разберетесь. Можно изменить размер и фон гаджета, цвет шрифта, размер, форму  и цвет границ рамки. На сегодня у меня все. Всего доброго.

понедельник, февраля 20

Еще вариант горизонтального меню

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


Скопируте код ниже

<style>#mbtnavbar {    background: #3B5998;    width: 100%;
    color: #FFF;        margin: 10px 0;        padding: 0;        position: relative;        border-top:0px solid #960100;        height:35px;}#mbtnav {    margin: 0;    padding: 0;}#mbtnav ul {    float: left;    list-style: none;    margin: 0;    padding: 0;}#mbtnav li {    list-style: none;    margin: 0;    padding: 0;      }#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {    color: #FFF;    display: block;   font:bold 12px Helvetica, sans-serif;   margin: 0;    padding: 9px 12px 11px 12px;        text-decoration: none;        border-right:0px solid #627AAD;}#mbtnav li a:hover, #mbtnav li a:active {    background: #627AAD;    color: #FFF;    display: block;    text-decoration: none;        margin: 0;    padding: 9px 12px 11px 12px;    
}#mbtnav li {    float: left;    padding: 0;}#mbtnav li ul {    z-index: 9999;    position: absolute;    left: -999em;    height: auto;    width: 160px;    margin: 0;    padding: 0;}#mbtnav li ul a {    width: 140px;}#mbtnav li ul ul {    margin: -25px 0 0 161px;}#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {    left: -999em;}#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {    left: auto;}#mbtnav li:hover, #mbtnav li.sfhover {    position: static;}#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {    background: #EDEFF4;    width: 120px;    color: #3B5998;    display: block;    font:normal 12px Helvetica, sans-serif;    margin: 1px 0 0 0;    padding: 9px 12px 10px 12px;        text-decoration: none;z-index:9999;border:1px solid #ddd;-moz-border-radius:4px;-webkit-border-radius:4px;
}#mbtnav li li a:hover, #mbtnav li li a:active {    background: #627AAD;    color: #FFF;    display: block;    }#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {    background: #EDEFF4;    width: 120px;    color: #3B5998;    display: block;    font:normal 12px Helvetica, sans-serif;    padding: 9px 12px 10px 12px;        text-decoration: none;z-index:9999;border:1px solid #ddd;    margin: 1px 0 0  -14px;
   }#mbtnav li li li a:hover, #mbtnav li li li a:active {    background: #627AAD;    color: #FFF;    display: block;}</style><div id='mbtnavbar'>          <ul id='mbtnav'>            <li>              <a href='http://experiment-u.blogspot.com'>Главная страница</a>            </li>            <li>              <a href='#'>Контакты</a>           </li> <li>              <a href='#'>Об авторе</a>           </li>            <li>              <a href='#'>Партнерские программы</a>            </li>      <li>               <a href='#'>Карта▼</a>                <ul>                    <li><a href='#'>Виджеты</a></li>                    <li><a href='#'>Дизайн</a></li>                    <li><a href='#'>Рамки</a>                   <ul>                    <li><a href='#'>Оптимизация</a></li>                    <li><a href='#'>SEO</a></li>                    <li><a href='#'>Индексация</a></li>                  </ul></li>                  </ul>            </li>          </ul>        </div>


Все выделенное жирным шрифтом можно настроить. Всего доброго.

Непрерывеая строка