1 сент. 2013 г.

Выпадающее меню для blogger

Мой blogger. Seo оптимизация

tweetn

Выпадающее меню для Блогспот

Вставляется очень просто в гаджет. Пример здесь

<style>
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}
/* уголок не влезай + overflow: hidden; в body*/
.{
margin: 0px;
padding: 0px;

-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

.forkit {
position: absolute;
right: 0;
top: 0;

width: 200px;
height: 150px;

font-family: 'Lato', sans-serif;
text-decoration: none;
}
.forkit .tag {
display: block;
height: 30px;
width: 200px;

color: #fff;
background: #aa0000;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 30px;
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

-webkit-transform-origin: 15px 0px;
  -moz-transform-origin: 15px 0px;
   -ms-transform-origin: 15px 0px;
    -o-transform-origin: 15px 0px;
       transform-origin: 15px 0px;
}
.forkit .tag:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 196px;
height: 26px;
margin: 1px;
border: 1px solid rgba( 255, 255, 255, 0.4 );
}
.forkit .string {
display: block;
height: 1px;
width: 0px;
position: absolute;

background: rgba( 255, 255, 255, 0.7 );
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

-webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
       transform-origin: 0px 0px;
}


.forkit-curtain {
position: absolute;
width: 100%;
height: 100%;
top: -100%;
}

/* ----////// Подписка на обновление/////------- */ 
#optin {
    background: #4F4942;
    border: 2px solid #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #eee;   
    font-size: 16px;
    text-align: center;
    padding:5px 10px;
    width: 500px; 
}
    #optin p { margin: 0px; 
font-weight: bold;
margin-bottom: 10px
}
    #optin input {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 0 2px 2px #111;
        -moz-box-shadow: 0 2px 2px #111;
        -webkit-box-shadow: 0 2px 2px #111
    }
        #optin input[type="text"] {
            border: 1px solid #111;
            font-size: 15px;
            padding: 8px 10px;
margin-bottom: 10px;
            width: 90%
        }
         
        #optin input[type="submit"] {
            background: #960e17;
            border: 1px solid #111;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            padding: 3px 5px;
            text-shadow: -1px -1px #3a060a;
            text-transform: uppercase

        }
            #optin input[type="submit"]:hover { color: #CCCCCC }

/* ----//////меню/////------- */ 
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     background-color:#ffffff;
}
ul#navigation li a span{
    font-family: Helvetica;
    letter-spacing:1px;
    font-size: 15px;
font-weight:bold;
    color:#000;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url("http://4.bp.blogspot.com/-OWR-QWEO8uw/UiOlzGrPa8I/AAAAAAAABXU/zP_L-Gd1-ZQ/s320/home.png");
}
ul#navigation .search a      {
    background-image: url("http://2.bp.blogspot.com/--YGqVsST_yA/UiOlzI3YllI/AAAAAAAABXs/H5W7RFuvOoI/s320/rss2.png");
}
ul#navigation .podcasts a      {
    background-image: url("http://2.bp.blogspot.com/-ql3vCeMDe14/UiOlzraWeFI/AAAAAAAABXo/NAzzTbTEyj8/s320/twitter1.png");
}
ul#navigation .rssfeed a   {
    background-image: url("http://2.bp.blogspot.com/-lU0U4goSTZ4/UiOlz_1B_nI/AAAAAAAABXk/KP4OfpRtNqI/s320/youtube.png");
}
ul#navigation .photos a     {
    background-image: url("http://1.bp.blogspot.com/-zwUgQT5pxWw/UiOlzMOGMCI/AAAAAAAABXY/tC2dS5V8q-s/s320/google_plus.png");
}
</style><script type="text/javascript" src="http://sozdaiblog.ru/demo.js/jQuery.js"></script><script type="text/javascript" src="http://sozdaiblog.ru/demo.js/1.js"></script>

<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="Ссылка на страницу"><span>Главная</span></a></li>

<li class="search"><a href="Ссылка на страницу"><span>RSS</span></a></li>
<li class="photos"><a href="Ссылка на страницу"><span>Google+</span></a></li>
<li class="rssfeed"><a href="Ссылка на страницу"><span>You Tube</span></a></li>
<li class="podcasts"><a href="Ссылка на страницу"><span>Twitter</span></a></li>

</ul>
http://uwblogger.blogspot.com/ Взято отсюда