Blogger Etiket Tasarımı

<!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto} a:link{text-decoration:none;outline:none;transition:all 0.25s} .container{width:40%;margin:auto;margin-top:5em;border:1px solid black;padding:.5em;box-shadow:inset 0 1px 1px rgba(255,255,255,0.75),inset 0 0 0.5em rgba(0,0,0,0.5);border-radius:0.5em;background:linear-gradient(to bottom,rgba(94,96,95,0.91) 0%,rgba(94,96,95,0.91) 1%,rgba(110,119,116,0.89) 50%,rgba(10,14,10,0.89) 51%,rgba(51,51,51,0.87) 100%)} #Label1 .label-size{display:inline-table} #Label1 .label-size a{color:#444;display:inline-block;position:relative;z-index:100;padding:5px;margin:8px 0 8px 0;border-radius:3px 2px 0 3px;box-shadow:0 1px 1px rgba(0,0,0,0.5);text-shadow:0 1px 1px white;cursor:pointer;background:linear-gradient(to bottom,#fff 0%,#f1f1f1 50%,#e1e1e1 57%,#d3c7c0 94%,#f6f6f6 100%)} #Label1 .label-count{color:white;text-shadow:0 -1px rgba(0,0,0,0.5);left:100%;top:.125em;padding:.125em .25em;background:#e6822f;content:attr(data-number);border-radius:0 3px 3px 0;box-shadow:1px 1px 1px rgba(0,0,0,0.5)} #Label1 .label-size a:hover{background:linear-gradient(to bottom,#f6f6f6 0%,#f1f1f1 50%,#e1e1e1 57%,#f1f1f1 94%,#fff 100%)} #Label1 .label-count:hover{background:#c16417} </style> </head> <body> <div class="container"> <div id="Label1"> <div class="widget-content cloud-label-widget-content"> <span class="label-size label-size-2"> <a href="#">Etiket 1</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 2</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 3</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 4</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 5</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 7</a> <span class="label-count" dir="ltr">1</span> </span> <span class="label-size label-size-2"> <a href="#">Etiket 8</a> <span class="label-count" dir="ltr">1</span> </span> </div> </div> </div> </body> </html>