Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog

Hallo Gengs,
Balik lagi dengan RozorTech.net, yang selalu membahas sesuatu yang menarik. Gimana kabarnya Gengers ?, semoga dalam keadaan baik dan sehat-sehat ya. Pada Kesempatan kali ini RozorTech akan memberikan info yang cukup menarik loh. simak ya.


Pembahasan


Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog - Salah satu trik yang sangat populer saat kini, dengan menggabung 2 bahasa pemograman antara HTML dan CSS, membuat tombol ini sangat lah mudah seperti yang saya sudah jelaskan di judul yaitu cara mudah.


Tombol tersebut didalamnya terdapat link yang menuju url yang kita arahkan, dengan membuat link yang di design sedemikian rupa yang memberikan kesan berbeda dari link yang biasanya yang dibuat untuk lebih menarik.

Button ini ada 2 kategori yaitu Demo dan Download.


Button demo dan download ini kami buat dengan sederhana mungkin tapi tidak membuat tampilannya terkesan kuno atau ketinggalan jaman.

Dengan Button ini kami rasa dapat membuat blog anda semakin bagus dan elegan untuk di lihat para visitor.


Baca Juga :






Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog

Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog

DemoDownload

Biasanya Button ini di gunakan para blogger untuk menyediakan template atau penjual template dan blog yang biasanya berisikan download. Demo adalah preview atau tampilan dari sebuat file yang akan visitor lihat yang dapat didownload jika diinginkan.

Lalu, bagi anda yang ingin memakai / memasang tombol ini di blog gengers semua caranya sangat mudah, dimohon untuk mengikuti dan pahami langkah-langkah berikut ini :



Memasang Kode di Template Blog


  • Masuk ke akun Blogger.com kalian
  • Pilih bagian Theme lalu Edit HTML
  • Cari kode ]]><</b:skin> atau </style>
  • Copy kode Css dibawah ini :

.demo { .demo {  border: none;  border-radius: 2px;  padding: 5px 20px !important;  background: #e74c3c;  color: #fff !important;  text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);  transition: background-color 1s ease-out 0s;  letter-spacing: 1px;}.download {  border: none;  border-radius: 2px;  padding: 5px 20px !important;  background: #4cc3ff;  color: #fff !important;  text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);  transition: background-color 1s ease-out 0s;  letter-spacing: 1px;}.demo:hover {  background: #000;  text-shadow: 0 0 1px #222;}.download:hover {  background: #000;  text-shadow: 0 0 1px #222;}border: none;  border-radius: 2px;  padding: 5px 20px !important;  background: #e74c3c;  color: #fff !important;  text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);  transition: background-color 1s ease-out 0s;  letter-spacing: 1px;}.download {  border: none;  border-radius: 2px;  padding: 5px 20px !important;  background: #4cc3ff;  color: #fff !important;  text-align: center;  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);  transition: background-color 1s ease-out 0s;  letter-spacing: 1px;}.demo:hover {  background: #000;  text-shadow: 0 0 1px #222;}.download:hover {  background: #000;  text-shadow: 0 0 1px #222;}

  • Paste kode ini diatas kode ]]><</b:skin> atau </style>
  • Klik Simpan Template


Nah kita sudah memasang kode css di template gengers, sekarang kita akan mencoba kode tersebut di dalam artikel gengers semua. 


Bagaimana caranya ? Silahkan simak dibawah ini :


Untuk Demo :

<button href="#" title="Demo" class="demo">Isi Seterah</button><a href="#" title="Demo" class="demo">Isi Seterah</a>


Untuk Download :

<button href="#" title="Download" class="download">Isi Seterah</button><a href="#" title="Download" class="download">Isi Seterah</a>


Ex : <a class="demo" href="https://www.rozortech.net/" title="Demo">Demo</a>


Note : Href diisi dengan arah tujuan link kamu


Gengers bisa memilih antara kedua kode tersebut

Bagaimana memasukkan kodenya ini caranya :



Cara memasukkan kode di Blog


  • Buka artikel gengers / membuat artikel baru
  • Beralih ke bagian mode HTML
Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog

  • Pilih kode diatas, copy dahulu lalu pastekan di area yang gengers inginkan
Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog
  • Klik Preview dan lihat hasilnya

Akhir Kata 

Tombol ini juga dapat berfungsi sebagai tombol apapun layaknya sebuah tombol loh, jadi anda bisa gunakan di manapun. :D

Demikian itu Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog, Terimakasih semoga bermanfaat kalau ada yang mau ditanyakan silahkan tuliskan comment dibawah , jangan lupa Like Fanspage Kami Dan Share ke media sosialnya lainnya, sekali lagi saya ucapkan,  terimakasih salam RozorTech..... 
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Mudah Membuat Tombol Demo dan Download Keren Flat Design di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel