Blogger'a indirme butonu nasıl oluşturulur? Ekleme yöntemi...

Bloggere html kodu ile indirme butonu eklemek için aşağıdaki yönergeleri uygulayın

Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın. kodunun altına şu kodu ekleyin:

<link href="https://github.com/bEYLOKMAN/beylokman/blob/main/font-awesome.css" rel="stylesheet"></link></head>

]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }

#buton br {     display: none; }

.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }

.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }

.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }

.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }

.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }

.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }

.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }

.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }

.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }

.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }

.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }

Sonra indirme butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve buonun gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a class="mbg-btn-slide" href="https://www.okuldosyam.com/p/git.html?url=https://drive.google.com/file/d/1x311juPUnahvXEROmn46yZnubJVTlYBS/view?usp=sharing" target="_blank">   <span class="circle"><i class="fa fa-download"></i></span>   <span class="title">Dosyayı İndir</span>   <span class="title-hover">Dosyayı İndir</span> </a> </div>