Cara Menciptakan Tombol Demo Download Keren Di Blog

Cara Membuat Tombol Demo atau preview button Download Keren Flat UI dampak Di Blogspot ringan dan responsive material design tidak mensugesti loading blog.Halo sobat blogger kali ini admin jagoankode akan memperlihatkan sedikit trik bagaimana cara mendesain blog untuk tombol demo dan downloadnya bekerjsama menciptakan button ialah hal yang sangat gampang sekali dilakukan, namun jikalau tidak diberikan sedikit sentuhan css maka button tersebut tampak ibarat biasa saja, namun berbeda jikalau kita memperlihatkan sedikit dampak didalamnya tentu akan lebih menarik perhatian dan sangat terperinci terlihat bahwa tombol tersebut merupakan sebuah button yang berfungsi menuju kehalaman yang dimaksud.

 Cara Membuat Tombol Demo atau preview button Download Keren Flat UI dampak Di Blogspot ring Cara Membuat Tombol Demo Download Keren Di Blog


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

Tentu kedua cara ini mempunyai laba dan kelemahannya masing masing. dari sisi teknis meski perbedaannya tidak telalu signifikan namun keduanya tetaap mempunyai perbedaan hahaa. pada tutorial kali ini admin hanya akan menjelaskan memasang pribadi pada postingan jadi sobat tidak perlu repot untuk menerapkan kodenya pada template. okelah sobat saya akan menunjukan caranya yaitu dengan menerapkannya pribadi 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 pribadi sanggup kalian lihat dibawah karna admin pribadi memasangnya pada postingan ini
Nah untuk cara membuatnya melalui teknik pertama ini kita hanya perlu mengcopas isyarat 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
<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: '\00bb';
  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://www.ngopisite.xyz/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://www.ngopisite.xyz/" 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 isyarat diatas akan berfungsi bila dipasang pribadi didalam postingan., nah ibarat yang sudah saya katakan memasangnya ada 2 cara, namun masing masing cara mempunyai kelebihan dan kekurangan, kekurangan jikalau kalian menerapkan cara diatas ialah kalian harus memasukan isyarat diatas satu persatu didalam postingan, sesuai kebutuhan kalian tentunya. nah bagaimana jikalau kalian ingin memakai nya secara permanen dan otomatis .

kalian tentu sanggup menerapkannya dan momodifikasi isyarat diatas dengan menerapkan font awesome diatas isyarat </head> serta menerapkan isyarat style css di atas kode </style> atau b:skin sedangkan untuk pemanggilan dipostingan kalian sanggup menambahkan tag div dengan class yang dipanggil oleh referensi isyarat 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 agar cara ini sanggup membantu kalian semua sekian dan terima kasih :D

0 Response to "Cara Menciptakan Tombol Demo Download Keren Di Blog"

Post a Comment

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel