Cara Membuat Tombol Download Keren Terbaru #1
Cara Membuat Tombol Download Keren Terbaru #1 - Hallo sahabat Iya Info ~ Kumpulan Semua Informasi!, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Download Keren Terbaru #1, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel BLOGGER,
Artikel TUTORIAL, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Cara Membuat Tombol Download Keren Terbaru #1
link : Cara Membuat Tombol Download Keren Terbaru #1
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 Download Flat UI di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Lalu cari kode </head>, dan Copas kode berikut ini diatas kode </head> namun jika sudah ada kode CSS seperti dibawah ini tidak usah ditambahkan.
4. Setalah itu silahkan Anda cari kode ]]></b:skin> atau </style>
5. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>
6. Setelah itu Simpan atau Save Tempalatenya.
7. Nah saat Anda membuat postingan dan membutuhkan tombol download, maka Anda tidak memanggilnya dengan cara memasang kode berikut di Mode HTML (bukan Compose) pada postingan.
Pilih salah satu yang ingin agan pasang!!
Nah itulah langkah singkat memasang tombol download Flat UI di blog dengan mudah dan simple. Semoga dengan adanya tutorial ini dapat membantu permasalahan Anda. Sekian dulu dari artikel kali ini jika ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.
Anda sekarang membaca artikel Cara Membuat Tombol Download Keren Terbaru #1 dengan alamat link https://iyainfo.blogspot.com/2019/08/cara-membuat-tombol-download-keren.html
Judul : Cara Membuat Tombol Download Keren Terbaru #1
link : Cara Membuat Tombol Download Keren Terbaru #1
Cara Membuat Tombol Download Keren Terbaru #1
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.
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 Download Flat UI di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Lalu cari kode </head>, dan Copas kode berikut ini diatas kode </head> namun jika sudah ada kode CSS seperti dibawah ini tidak usah ditambahkan.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
5. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>
/* CSS Button Style 2 by www.adam-tips.id */
a:link{text-decoration:none}
.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-red a:hover{
background:#7f8c8d
}
.vn-green a{
background-color:#27ae60;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-green a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-green a:hover{
background:#7f8c8d
}
.vn-wisteria a{
background-color:#8e44ad;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-wisteria a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-wisteria a:hover{
background:#7f8c8d
}
.vn-orange a{
background-color:#f39c12;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-orange a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-orange a:hover{
background:#7f8c8d
}
.vn-blue a{
background-color:#2980b9;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-blue a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-blue a:hover{
background:#7f8c8d
}
a:link{text-decoration:none}
.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-red a:hover{
background:#7f8c8d
}
.vn-green a{
background-color:#27ae60;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-green a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-green a:hover{
background:#7f8c8d
}
.vn-wisteria a{
background-color:#8e44ad;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-wisteria a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-wisteria a:hover{
background:#7f8c8d
}
.vn-orange a{
background-color:#f39c12;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-orange a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-orange a:hover{
background:#7f8c8d
}
.vn-blue a{
background-color:#2980b9;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}
.vn-blue a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}
.vn-blue a:hover{
background:#7f8c8d
}
7. Nah saat Anda membuat postingan dan membutuhkan tombol download, maka Anda tidak memanggilnya dengan cara memasang kode berikut di Mode HTML (bukan Compose) pada postingan.
<div class="vn-red" style="text-align: center;">
<div class="vn-green" style="text-align: center;">
<div class="vn-wisteria" style="text-align: center;">
<div class="vn-orange" style="text-align: center;">
<div class="vn-blue" style="text-align: center;">
<a href="#">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>
</div>
Nah itulah langkah singkat memasang tombol download Flat UI di blog dengan mudah dan simple. Semoga dengan adanya tutorial ini dapat membantu permasalahan Anda. Sekian dulu dari artikel kali ini jika ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.
Demikianlah Artikel Cara Membuat Tombol Download Keren Terbaru #1
Sekianlah artikel Cara Membuat Tombol Download Keren Terbaru #1 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Tombol Download Keren Terbaru #1 dengan alamat link https://iyainfo.blogspot.com/2019/08/cara-membuat-tombol-download-keren.html
Iyalah keren tu :)
ReplyDelete