Cara Menambahkan Tombol Demo Dan Download di Blogger Kamu 2017

Cara Menambahkan Tombol Demo Dan Download di Blogger Kamu 2017 Menambahkan Demo dan tombol Download di Blogger - Ikuti bersama seperti yang kita membuat demo sederhana dan menyembuhkan dan tombol Download menggunakan beberapa CSS3. CSS demo dan men-download tombol akan menggunakan efek hover css termasuk border-radius, box-shadow, linear-gradien, z-index dan transisi untuk mencapai efek yang unik dan sederhana di hover. Dalam posting ini saya akan berbagi tutorial bagaimana menambahkan responsif css Demo dan tombol Unduh untuk blogger. tutorial ini dapat membantu mereka blogging tentang template blogger dan theme wordpress. Demo dan Unduh tombol yang dibuat dengan CSS dengan efek mouse hover. Dua ikon diambil dari fontawesome. Jadi sebelum menatap tutorial ini Anda harus harus menambahkan fontawesome di blog Anda.

Berikut adalah cara itu akan bekerja: menggunakan kombinasi HTML dan CSS, saya akan membuat dua bagian yang terpisah. Ini termasuk tombol utama dan dua mata kecil dan men-download ikon. mata dan men-download ikon yang digunakan dari ikon fontawesme.

Jika Anda mencari sederhana tapi indah CSS3 demo dan tombol download untuk website atau blogspot blog, maka tutorial ini akan membantu Anda. Dalam tutorial ini saya berbagi benar-benar css dan html dasar demo dan tombol download untuk blogger. Jika Anda menjalankan blogger template atau tema wordpress berbagi situs, maka Anda harus harus perlu menambahkan dua tombol sederhana dan mereka Demo dan Unduh tombol. Ini dua tombol yang paling penting untuk situs berbagi Template.

tutorial ini adalah koleksi bagus dari yang indah CSS3 demo dan men-download tombol dengan efek CSS3 animasi yang dibuat dengan CSS3 dan html dan tombol ini adalah membantu orang-orang yang menjalankan template blogger atau tema wordpress situs berbagi. Efek pada tombol dibuat menggunakan transisi css dan properti border-bottom. Ada dua gradien digunakan pada dasarnya, satu adalah CSS3 transisi dan yang lainnya adalah border-bottom di hover untuk membuat efek lebih bagus.

Berikut Cara Memasang Add Demo dan Download di Bogger

Pertama kamu Pergi ke Dasboard blog kamu dulu
Lalu kamu pilih Tema atau Tempate => Edit Template
Lalu Kamu Cari Code CSS </style> atau ]]></b:skin> Di Template Kamu
Lalu Kamu Copy  Code Di  Bawah ini , 
Kamu Pastekan Codenya Tepat di Atas Code </style> atau ]]></b:skin>

CSS Code

.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:12px 15px!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:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;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:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 

lalu kamu masukan  code di bawah ini kalau kamu ingin memasang tombol demo sama download di artikel kamu yang ingin kamu posting

HTML

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

Sekian dari saya semoga bermanfaat cara memasang tombol download sama demo di blog kamu sekian dan terma kasih , Cara Menambahkan Tombol Demo Dan Download di Blogger Kamu 2017


EmoticonEmoticon