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/AVvXsEiWm3oS3J2HUVoMyitQ21djrlT6oWt6rn6PQ4NaZlCRG_Z_CUpuN6OSbmY42tjpCBCDzmIRlxYAwX9UaiQTmyKoEmoPy2Gq9xTsOAcsl6J6oEnKUfP5trzHMbNVLggOHvrwIKnRR1Cp8rwG/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.

Yorum Gönder

0 Yorumlar
* Please Don't Spam Here. All the Comments are Reviewed by Admin.