Skip to content Skip to sidebar Skip to footer

Membuat Download Responive blog

Hasil gambar untuk cara membuat tombol download responsive blog

Kali ini kami akan memberikan sedikit tutorial tentang cara membuat download dan demo responsive di blog, unutk contoh bisa diligat di RAKUTUSAN21 .
Biasannya logo download dan demo di atas dipakai bagi anda yang menyediakan blog download template atau blog download lainnya.
Sekerang kita menuju tutorialnya langsung saja.


  • Silahkan login ke blogger => Pilih Template => Edit HTML
  • Letakan kode CSS ini  diatas kode </style>

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px; padding:2px;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download {padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} .demo {background-color:#5a6269;} .download {background-color:#ff9e47;} .demo:hover {background-color:#ff9e47;color:#fff;opacity:1;} .download:hover {background-color:#5a6269;color:#fff;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}


  • Kemudian klik "Simpan Template" 
  • Untuk menggunakan tombol demo dan download di postingan bisa menggunakan kode dibawah ini dan letakan di bagian HTML postingan


<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#" target="_blank" title='Demo'>Demo</a></li>
<li><a class="download" href="#" target="_blank" title='Download'>Download</a></li>
</ul>
</div>
<div class="clear"></div>


  • Ganti "#" dengan link demo atau download kalian  

Post a Comment for "Membuat Download Responive blog"