Blogger Hareketli Devamını Oku Butonu

Blogunuzda şunu aratın.
<div class='readmore'>
bulduğunuz bu kodu'n </div> koduna kadar olan kısmını silin. (<div class='readmore'>  ve </div> dahil ! )
Daha sonra aşağıda ki verdiğim kodu sildiğiniz kodun olduğu boşluğa yapıştırın



<div class='readmore'>
  <readmore class='readmore'><span><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3k3fjUQtvLYIF6ggXfl3wIsooPW1wZvS2Mg7Tz6hEQFceo4kNmgbyThV_W7busfgBHwvoDvOcGTYC7i6C4fljpO2G4INWgVj9mWLotzM8fWK-QH8xLLFP7GK86ZRsxL_RDaypKyEZUhg/h71/devam.png'/></a> </span></readmore>
</div>


Daha sonra ]]></b:skin> kodunu bulup üzerine aşağıda verdim kodu ekleyin.


.readmore {
 color:#fff;
  transition: all 0.5s;
  text-align: center;
  border-radius: 4px;
    display: block;
    width: 95%;
    border: none;
background: #4394ad;
  padding: 10px;
   font-size: 20px;
    cursor: pointer;
    text-align: center;
  margin: 5px;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


.readmore span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.readmore span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.readmore:hover span {
  padding-right: 25px;
}

.readmore:hover span:after {
  opacity: 1;
  right: 0;
}

.readmore:link {
    color: hotpink;
}




Kodun orjinal yapısı için https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1 adresini ziyaret edin.

Sıcak

Yeniler