Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic
link : Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic

Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic

Bagi anda pemilik blog tutorial yang banyak membagikan cara mendesain tampilan blog, mungkin akan lebih cocok jika di postingan blog anda diberi tombol demo agar pengunjung dapat melihat langsung contoh hasil nyata dari tutorial yang dijabarkan di postingan tersebut. Keberadaan tombol ini tentu akan lebih meyakinkan pengunjung jika ingin menerapkan tutorial tersebut di blog miliknya. 

Selain tombol demo, kadang juga dijumpai tombol download di sampingnya atau di bawahnya. Biasanya yang menyertakan tombol download ini adalah blog-blog yang menjual atau membagikan aplikasi atau file-file tertentu kepada pengunjungnya. Blog-blog pembuat template blog juga biasanya menyertakan tombol-tombol ini untuk memudahkan pengunjung yang berminat untuk mengunduh template-template tersebut. 

screenshot tombol demo & download

Berkaitan dengan uraian di atas, pada postingan kali ini saya akan membagikan sebuah tutorial tentang cara membuat tombol demo & download keren di postingan blog agar blog anda semakin terlihat profesional dan disukai pengunjung. Bagaimana caranya?, simak langkah-langkah di bawah ini. 

Cara Membuat Tombol Demo & Download Keren di Postingan Blog

1. Buka akun blogger anda. 

2. Pilih thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style>, kemudian letakkan kode berikut ini di atasnya.

.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:10px 10px!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:#f39c12;}

.demo:hover {background-color:#60B8F4;color:#fff}

.download:hover {background-color:#C77E0A;color:#fff}

.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;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:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

4. Pastikan di template blog anda sudah terpasang kode font awesome. Jika belum, silahkan tambahkan kode berikut ini di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Simpan kembali template anda.

6. Silahkan pilih postingan yang hendak anda tambahkan tombol demo & download. 

7. Buka pada mode html dan letakkan kode berikut ini di mana pun anda suka. 

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> <li><a class="download" href="LINK-DOWNLOAD" target="_blank">DOWNLOAD</a></li> </ul> </div>

Keterangan: 

• Ganti yang ditandai warna merah dengan link tujuan demo dan download. 
• Jika anda hanya ingin memasang salah satunya saja, misal hanya tombol demo saja, silahkan ubah menjadi seperti berikut ini:

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> </ul> </div>

8. Simpan kembali perubahan pada postingan dan lihat hasilnya.

Jika sewaktu-waktu ingin menampilkan tombol tersebut di postingan lain, anda cukup tambahkan saja kode pada menu postingan seperti langkah terakhir di atas. 

Demikianlah tutorial tentang cara membuat tombol demo dan download keren di postingan blog. Semoga bermanfaat.

Demikianlah Artikel Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Membuat Tombol Demo dan Download di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/11/artikel-menarikcara-membuat-tombol-demo.html

Share this post