Para era zaman sekarang banyak yang desain yang bagus-bagus yang kuno sudah dibuang, dari tampilan kita maupun gadget kita semua baru, sama halnya blogger dari tahun ke tahun selalu ada perubahan tambilan atau widghet yang bagus untuk keperluan blog dan mempercantik blog, sehingga pengunjung juga tertarik.
Oleh karena itu disini saya akan menjelaskan cara membuat tombol Demo dan Download seperti gambar di atas judul ya. Susah? tidak gampang? banget, kalau kalian mengikuti step-stepnya satu demi satu.
Apakah nanti akan mempengaruhi sistem di blog apakah jadi berat nantinya, jawabnnya tampilan CSS ini tidak mempengaruhi daya sistem blogger jadi aman. Jadi untungnya lebih rapi dan bagus di lihat.
Ok mari kita mulai caranya:
1. Kalian masuk ke Blogger.com > tema > edit HTML.
Pada saat sudah di edit HTML kalian letakaan sebelum atau di atas kode ]]></b:skin>.
catatan : kalau belom menemukan kalian CTRL + F lalu tulis /b:skin > Enter.
.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;}
.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;}
2. Di tahap ini sudah selesai, di tanggal kalian Post dan pindah ke HTML. Lalu Copy dan paste-kan code di bawah ini di artikel HTML-mu. rubah tulisan YOUR-LINK-HERE menjadi link website kamu.
catatan : Bila kalian sudah paste di HTML tidak boleh pindah ke > Compose karena mengakibatkan code berubah.
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Ini Code untuk Tulisan demonya saja,
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
</ul>
</div>
Ini Code untuk Tulisan Downloadnya saja,
<div style="text-align: center;">
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<ul class="btn">
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
Kalian sudah berhasil membuatnya, dan nikmati hasilnya. Kalau belom sukses coba periksa code kamu apa sudah benar apa tidak penempatan masukinnya, ingat sesuai dengan di atas. Kalau sudah bisa terserah rekreasi sendiri sesuai kesukaan mu.
Tidak ada komentar:
Posting Komentar