Cara Menciptakan Tombol Demo & Download Dengan Aba-Aba Css

Baca Juga

Link yakni tautan yang menghubungkan antara halaman satu dengan halaman yang lain. Sesuai dengan judul yaitu Cara Membuat Tombol Demo & Download dengan instruksi CSS. Sebelumnya aku pernah menciptakan tutorial buat blogger yaitu : Cara Membuat Link Pada Tombol Icon Download. Cara tersebut sama, hanya kita memakai gambar Icon Download. Namun untuk kali ini berbeda, Yiatu dengan memakai instruksi CSS yang diletakkan di </style> atau ]]></b:skin> Langsung ikuti langkah - langkah berikut ini, jikalau ingin memasangnya.

Screenshoot :

Cara Membuat Tombol Demo & Download dengan instruksi CSS

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan : 

1. Temukan kode </style> atau ]]></b:skin>
2. Copy&paste instruksi CSS berikut ini, dan letakkan diatas kode </style> atau ]]></b:skin>

/* CSS Demo Download Buttons */ .btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn 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;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;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;}

3. Terakhir, anda buat postingan/Entri Baru. Pilih HTML sebelum Compose.

Perhatikan gambar berikut ini!

4. Copy&paste instruksi HTML berikut ini dan letakkan di bagian HTML bukan Compose

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="https://mamankdzgn.blogspot.com/" target="_blank">DEMO</a></li> <li><a class="download" href="https://mamankdzgn.blogspot.com/" target="_blank">Free Download Template</a></li> </ul> </div> </div>

Note : "Silakan goresan pena yang berwarna merah diganti dengan link kepunyaan anda."

Preview : 

• DEMO
• Download

5. Selesai. Tinggal buat postingan deh. ^.^

Demikianlah Tutorial blogger kali ini, Praktis bukan. Sekian dari saya, Semoga Bermanfaat!
Thanks for Reading, Sharing & Visited and Search : Cara Membuat Tombol Demo & Download dengan instruksi CSS