Cara Membuat Tombol Demo Download Keren Di Blog

Cara Membuat Tombol Demo atau preview button Download Keren Flat UI efek Di Blogspot ringan dan responsive material design tidak mempengaruhi loading blog.Halo sobat blogger kali ini admin jagoankode akan memberikan sedikit trik bagaimana cara mendesain blog untuk tombol demo dan downloadnya sebenarnya membuat button adalah hal yang sangat mudah sekali dilakukan, namun jika tidak diberikan sedikit sentuhan css maka button tersebut tampak seperti biasa saja, namun berbeda jika kita memberikan sedikit efek didalamnya tentu akan lebih menarik perhatian dan sangat jelas terlihat bahwa tombol tersebut merupakan sebuah button yang berfungsi menuju kehalaman yang dimaksud.

Jika anda mencari tutorial mengenai cara memasang tombol download maka sudah berserak tersedia digoogle , dan artikel tersebut menyajikan dengan bentuk yang sangat beragam tentunya. anda tinggal memilih saja button mana yang sesuai designnya dengan selera anda. nah pada kesempatan kali ini admin juga akan memberikan bentuk yang hampir sama juga dengan teman teman lainnya namun ada sedikit perbedaan dari segi warna dan peggabungan beberapa css. untuk memasang Tombol Demo dan download diblogger ini dapat dilakukan dengan 2 langkah dan cara, yaitu dengan langsung memasukannya didalam postingan, dan cara yang kedua adalah dengan menerapkan kodenya didalam template blog yang kita punya.

Tentu kedua cara ini memiliki keuntungan dan kelemahannya masing masing. dari sisi teknis meski perbedaannya tidak telalu signifikan namun keduanya tetaap memiliki perbedaan hahaa. pada tutorial kali ini admin hanya akan menjelaskan memasang langsung pada postingan jadi sobat tidak perlu repot untuk menerapkan kodenya pada template. okelah sobat saya akan menerangkan caranya yaitu dengan menerapkannya langsung pada postingan artikel blog. mari simak langkahnya berikut ini:

Cara Memasang Tombol Demo Download Keren Di Postingan Blog

Oke sobat untuk preview style pemasangan button download ini langsung bisa kalian lihat dibawah karna admin langsung memasangnya pada postingan ini
Nah untuk cara membuatnya melalui teknik pertama ini kita hanya perlu mengcopas kode dibawah ini dan meletakannya pada mode HTML postingan

silahkan buka postingan kalian
pergi ke MODE HTML
Silahkan copy script dibawah
Lalu pastekan di kolom mode html tersebut
Kembali ke MODE Compose Lalu Lihat Hasilnya

#STYLE 1

KODE #STYLE 1

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode {
  margin-right:9px;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #009688;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #000;
}
/* Darker background on mouse-over */
.jagoankode:hover {
    background-color: #a5a6a7;
}
.jagoankode:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://jagoankode.blogspot.com" target="_blank">
<button class="jagoankode"><i class="fa fa-eye"></i> Demo</button></a>
<a href="https://jagoankode.blogspot.com" target="_blank">
<button class="jagoankode"><i class="fa fa-download"></i> Download</button></a>
</center>

#STYLE 2

KODE #STYLE 2

Baca Juga:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode1 {
    margin-right:9px;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #357ae8;
    background-color: #ffffff;
    border: solid;
    border-radius: 25px;
    box-shadow: 7px 0px #000;
}
.jagoankode1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.jagoankode1 span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.jagoankode1:hover span {
  padding-right: 25px;
}
.jagoankode1:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<br />
<center>
<a href="https://jagoankode.blogspot.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://jagoankode.blogspot.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-download"></i><span>Download</span></button></a>
</center>

Catatan :
Ganti Kode Yang berwarna Merah Dengan URL tujuan kalian

Oke sobat kode diatas akan berfungsi bila dipasang langsung didalam postingan., nah seperti yang sudah saya katakan memasangnya ada 2 cara, namun masing masing cara memiliki kelebihan dan kekurangan, kekurangan jika kalian menerapkan cara diatas adalah kalian harus memasukan kode diatas satu persatu didalam postingan, sesuai kebutuhan kalian tentunya. nah bagaimana jika kalian ingin menggunakan nya secara permanen dan otomatis .

kalian tentu bisa menerapkannya dan momodifikasi kode diatas dengan menerapkan font awesome diatas kode </head> serta menerapkan kode style css di atas kode </style> atau b:skin sedangkan untuk pemanggilan dipostingan kalian bisa menambahkan tag div dengan class yang dipanggil oleh contoh kode diatas, untuk instalasi pemasangan didalam template mungkin akan admin bahas dilain waktu,

Demikianlah tutorial mengenaiÂ Cara Membuat dan memasang Tombol Demo Download Keren Di Blogspot semoga cara ini dapat membantu kalian semua sekian dan terima kasih 😀