Cara Membuat download dan Demo pada Blog

Hallo Semua! Selamat datang di onnews.my.id.

Seperti yang kita ketahui, demo dan download biasa lebih sering dipakai pada webs berisi tentang tutorial-tutorial maupun downloads.

© onnews | Cara Membuat download dan Demo pada Blog

Pada kesempatan ini, admin akan menambahkan Cara Membuat download dan Demo pada Blog

---

Cara Membuat download dan Demo pada Blog?

Cara Membuat download dan Demo pada Blog tidaklah memerlukan banyak pengetahuan tentang HTML, CSS atau JS karena admin onnews sudah menyiapkan untuk kamu. Yang perlu kamu lakukan adalah menerapkan kode di tempat yang tepat di XML Tema Blogger kamu.

Perlu di Ingat!Sebelum kami mulai menambahkan kode dalam XML, saya akan merekomendasikan Anda untuk mengambil Cadangan dari tema Anda saat ini. Kebetulan jika terjadi masalah, Anda dapat memulihkannya nanti.

Langkah 1: Pertama silahkan Login pada blog kamu Blogger Dashboard.

Langkah 2: pada Blogger Dashboard, Silahkan Theme.

Langkah 3: Kliklah icon seperti gambar disamping Kemudian Pilih 'customize' button.

Langkah 4: klik Edit HTML, kamu akan diarahkan ke halaman penyuntingan.

Langkah 5: Sekarang carilah code berikut ini ]]></b:skin> dan paste CSS di atas code tersebut.

jangan sampai keliru letak code CSS dengan benar.

/* --- demo downloads --- */
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }

ubah warna CSS sesuai selera kamu.

Baca Juga :

Langkah 6: Sekarang tambahkan berikut ini Javascript di atas </body> tag. Jika Anda tidak menemukannya, mungkin sudah di Parse </body>.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Langkah 7: Selanjut yang Terakhir, Simpan perubahan dengan mengklik ikon ini

Pada Setiap postingan blog silahkan masukkan code berikut ini

<div id="wrap" style="text-align: center;">
<a class="bie-slide" href="#" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Hasilnya akan seperti dibawah ini:

Demo Click here Download Click here

Kesimpulannya

Ini semua tentang Cara Membuat download dan Demo pada Blog. Saya harap Anda menikmati artikel ini. Tolong bagikan artikel ini. Dan jika Anda menghadapi masalah di bagian mana pun atau Anda memiliki pertanyaan, tanyakan kepada kami di kotak komentar. Terima kasih!