Google+ Followers

Будь в курсе событий!

22.09.2013

Ярлыки-Labels стили оформления- 3

Leave a Comment
                              Еще одна статья про ярлыки, думаю заключительная.)
И так снова  повторюсь что вставляется либо  исходный код перед ]]></b:skin> либо
 с тегами <style>  свой Код CSS </style>  перед тегом    </body>  И не забываем про пункт меню в настройках нашах ярлыков такой.



                                                   Восьмой стиль будет такой
                                                   

                                                       
                                                         
 
                                                       А вот и код от него

.Label a{
background: #181818;
border-radius: 10px;
padding: 8px;
margin: 1px;
color: #FFFFFF !important;
text-decoration:none !important;
float:left;
font-size:12px;
text-transform:uppercase;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.Label a:hover{
background: #2CDA00;
color: #000 !important;
text-decoration:none !important;
oz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

                                                                     Девятый стиль

                                       


                                                                   Код к нему такой

/*--------Cloud Label from www.zarnakoom.blogspot.com ------------*/

#Label1 a{outline:none;
    border: 1px rgba(0,0,0,0.2) solid;
    padding: 4px 6px 4px 12px;
    text-decoration:none;
    color:black;
    white-space: nowrap;
font-family: arial;
    font-size: 10px;
    font-weight: bold;
    position: relative !important;
    background: #58E6F9;
    float:left;
    padding: 4px 3px;
    margin: 0 5px 5px 0;
   border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
}
#Label1 a:hover {
background:#5BFDD5;
color:#5B5BFD;
}
#Label1 a:active {
background:#EC88C9;
}
/*-------End cloud Label style---------*/
                                                        Десятый  стиль

                                                
                                                    Код к нему такой
   


.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}
.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}
                                                         
На этом  моменте я должен вас прервать), на сегодня я закончу с со стилями ярлыков  возможно позже будут новые интересные стили, ждите новых статей.
/* ------Sidebar Label Cloud  By helpmeblogging.com---------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}

.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;} - See more at: http://www.helpmeblogging.com/2013/07/add-colorful-labels-cloud-to-blogger.html#sthash.73YIWm9F.dpuf
/* ------Sidebar Label Cloud  By helpmeblogging.com---------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}

.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;} - See more at: http://www.helpmeblogging.com/2013/07/add-colorful-labels-cloud-to-blogger.html#sthash.73YIWm9F.dpuf
/* ------Sidebar Label Cloud  By helpmeblogging.com---------- */
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
  color:#fff!important;
  background:#222;
  padding:8px 22px;
  margin:0 3px 3px 0;
  float:left;
  display:block;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#FF8000}

.sidebar .label-size-2 a {background:#D7DF01}
.sidebar .label-size-3 a {background:#B40404}
.sidebar .label-size-4 a {background:#298A08}
.sidebar .label-size-5 a {background:#084B8A}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
  background:#2288bb; color:#fff; text-decoration:none}
.sidebar .label-size span {
  background:#2288bb;
  color:#fff;
  padding:8px 22px;
  margin:0 0 3px;
  clear:both;
  float:left;
  }
.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:16px;
  font-family:'Oswald', sans-serif;
  color:#fff;
  }
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;} - See more at: http://www.helpmeblogging.com/2013/07/add-colorful-labels-cloud-to-blogger.html#sthash.73YIWm9F.dpuf

0 коммент. :

© 2012-2017 Cash's from program