Memodifikasi DOWNLOAD dan DEMO di Blog

Tutorial berikut ini tentang Memodifikasi DOWNLOAD dan DEMO di Blog. Biasanya membuat tombol download dan demo ini adalah ketika memposting artikel yang membutuhkan demo, misalnya ketika memposting mengenai template blog ataupun widget blog dan lain sebagainya.

 dan mungkin saja akan saya gunakan di postingan dengan tombol download dan demo seperti dibawah ini.  agar terlihat lebih menarik dan indah
tombol DOWNLOAD dan DEMO di Blog 1
LIVE DEMO


MENAMBAHKAN KODE CSS

Ok berikut ini adalah cara membuatnya :

1. Masuk ke blog sobat>> Pilih Opsi  Template>> Edit HTML

2. Taruh kode dibawah ini diatas kode  ]]></b:skin>


.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }


3. Simpan template.

4. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode         HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http:/coretanewbiee.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://coretanewbiee.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>






Sekian Pembelajaran tentang CSS
Semoga bermanfaat, Terima Kasih

Comments

  1. Thanks infonya gan, bisa langsung dicoba nih

    ReplyDelete
  2. mantap nih tipsnya,, bisa dipraktekin di blog download tan (y) jgn lupa BW balik ya gan :D

    ReplyDelete
  3. wah , keren ni, sangat berguna untuk website saya

    ReplyDelete
  4. itu bisa diterapin ke semua template blog ya gan ?

    ReplyDelete
    Replies
    1. Kayaknya tidak semua gan, soalnya ada template yang gak ada
      ]]> nya

      Delete
  5. Cara mengganti warna tombol downloadnya gimana gan? soalnya warna dominan blog saya Hitam dan ijau muda.

    ReplyDelete
  6. Widih Keren :D , Bisa Dicoba Nih :D

    ReplyDelete

Post a Comment

Peraturan Berkomentar Di Coretanewbiee

HARAP MEMBACA TERLEBIH DAHULU
SEBELUM BERKOMENTAR

|| Dilarang Spam ||
|| Dilarang Meninggalkan Link Aktif ||
|| Diharapkan berkomentar Sesuai Dengan Post ||
|| Berkomentar Yang Mengarah Ke Sisi Positif ||
|| Utamakan Baca Artikel sebelum berkomentar ||
|| Dilarang SARA , PORN, atau sebagainya ||
|| Diharapkan berkomentar menggunakan bahasa yang sopan ||

Komentar Yang Melanggar Akan Segera DiHapus

Tertanda "CoretaNewbiee" ✔

Popular posts from this blog

Judul lagu iklan McDonalds 2016 berhadiah Mobil HRV

G vusion Responsive Blogger Template

Asiknya Iklan Beri Oreo tuk si vampir