MyBB Süper Duyuru Panosu Kodu

[Xan]

1. Temlar&Şablonlar > Şablonlar > 1. Ana Sayfa - [index] Şablonlar > İndex
Grip İstedğimiz Yere Ekliyoruz.

Kod: Tümünü Seç Tümünü Kopyala

<a class="button teach-me">
  <span class="item">Duyuru 1 Satış</span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry"> Eylük 10, 2013</span>
  <span class="meta cost">30₺</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Duyuru 2 Satış</span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">40₺</span>
  <i class="chevron"></i>
</a>

<a class="button handyman">
  <span class="item">Duyuru 3 Satış </span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">15₺</span>
  <i class="chevron"></i>
</a>

<a class="button pick-up-delivery">
  <span class="item">Duyuru 4 Satış</span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">30₺</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Duyuru 5 Satış </span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">10₺</span>
  <i class="chevron"></i>
</a>

<a class="button">
  <span class="item">Duyuru 6 Satış</span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">30₺</span>
  <i class="chevron"></i>
</a>

<a class="button teach-me">
  <span class="item">Duyuru 7 Satış</span>
  <span class="meta category">Satın Al</span>
  <i class="clock"></i>
  <span class="meta expiry">Eylük 10, 2013</span>
  <span class="meta cost">30₺</span>
  <i class="chevron"></i>
</a>

2. Temlar&Şablonlar > Temalar > Global.css 
Gir En alta Ekle

Kod: Tümünü Seç Tümünü Kopyala

/*
* re: https://twitter.com/CodePen/status/355107665099231232
*
* this version uses <i> for the icons; this is the first time i've constructed icons out of pure css using pseudo elements (MUCH more on that here: http://css-tricks.com/pseudo-element-roundup/ )
*
* next version(s) might substitute the <i>s with @fontface & unicode range; i'd like to also try to get more semantic with this (though i think this is pretty semantic to start with... no? maybe not); i'd also like to get this modernizr'd and compatible way back to ie version who-knows-what
*
* feel free to hit me up w/criticisms @ jeremy.buller@gmail.com
*/

*,
*:before,
*:after {
  box-sizing: border-box;
}



.button {
  display: block;
  position: relative;
  padding: .75em 5em .75em 1em;
  border-radius: .25em;
  margin-bottom: .5em;
  background: #fff;
  box-shadow:
    /* regular bottom */
    0 .0625em .125em rgba(0, 0, 0, .125),
    /* inset bottom */
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    /* category color (left) */
    inset 1em 0 0 -.7em rgba(200, 0, 120, .5),
    /* arrow background (right) */
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.button:hover { 
      text-decoration: none;
}

.teach-me {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(0, 95, 210, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.handyman {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(20, 160, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.pick-up-delivery {
  box-shadow:
    0 .0625em .125em rgba(0, 0, 0, .125),
    inset 0 -.25em 0 -.125em rgba(0, 0, 0, .125),
    inset 1em 0 0 -.7em rgba(210, 15, 0, .5),
    inset -2em 0 0 -.3em rgba(0, 0, 0, .05);
}

.item {
  font-weight: bold;
  color: #000;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.item:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
}

.meta {
  margin-left: .25em;
}

.category,
.expiry,
i {
  font-size: 9px;
  line-height: 2; /* 16 "px" */
}

.expiry {
  font-weight: bold;
}

.expiry:before {
  content: 'Tarih: ';
  font-weight: normal;
}

.cost {
  position: absolute;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 2em;
  right: 1.125em;
  top: 0;
  line-height: 2.083; /* 50 "px", should be same as button height */
}

.clock {
  display: inline-block;
  position: relative;
  width: 1.333em;
  height: 1.333em;
  margin-left: .333em;
  border: .25em solid #95979d;
  border-radius: 50%;
  vertical-align: middle;
}

.clock:before,
.clock:after {
  content: '';
  display: block;
  position: absolute;
  width: .125em;
  height: .25em;
  background: #95979d;
}

.clock:before {
  left: 50%;
  bottom: 47%;
  margin-left: -.0625em;
}

.clock:after {
  transform: rotate( 135deg );
  left: 63%;
  top: 47%;
}

.chevron {
  display: block;
  width: 1em;
  height: 1em;
  font-size: .75em;
  position: absolute;
  right: .667em;
  top: 50%;
  margin-top: -.6em; /* just eyeballing it */
}

.chevron:before,
.chevron:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, .125);
  width: .5em;
  height: .5em;
  right: .25em;
  top: 50%;
}

.chevron:before {
  transform: skewX( 45deg );
  top: 0;
  box-shadow: inset -.125em .125em .125em rgba(0, 0, 0, .25);
}
.chevron:after {
  transform: skewX( -45deg );
  bottom: 0;
  box-shadow: inset .25em .125em .125em -.125em rgba(0, 0, 0, .25);
}

Resim;