Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog


Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog

Membuat tombol download dan demo yang keren di blogger sebenarnya sangatlah mudah sama seperti membuat text link biasa, namun bedanya link tersebut kita ubah menjadi sebuah tombol atau button menggunakan css agar lebih menarik dan memberikan kesan yang berbeda dari link biasanya.


Nah penggunaan tombol download dan demo ini sangatlah berguna untuk anda yang memiliki niche download atau tutorial, karna dengan menggunakan tombol download dan demo yang keren ini akan membuat blog anda terasa sangat profosional.

Bagi anda yang ingin mencobanya
silahkan simak tutorial berikut ini

Cara membuat tombol download dan demo yang keren di blog

Berikut Tampilan Tombol Download Dan Demonya


Nah pertama tama silahkan login akun blogger anda terlebih dahulu
Setelah itu pada halaman dashbord klick tema > edit html
Kemudian copy dan paste script di bawah ini tepat di atas code ]]></b:skin> atau </style>

.download, .demo {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #49ACE1;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.download:hover, .demo:hover {
opacity: .85;
}
.download:before, .download:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.demo:before, .demo:after {
content: '\f06e';
font-family: FontAwesome;
display: block;
position: absolute;
left: 5%;
top: 20%;
}
.download:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.download:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.download:hover:after, .demo:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}

 Terakhir klick simpan tema 

Untuk penggunaannya silahkan simak tutorial berikut

Cara Menggunakan Tombol Downoad Dan Demo Di Postingan Blog

Nah untuk menggunakannya sangatlah gampang anda hanya perlu menambahkan code class="demo" untuk tombol demo dan class="download" untuk tombol download

Caranya silahkan login akun blogger anda

Setelah itu pada menu postingan klick edit pada artikel yang ingin anda tambahkan tombol download atau demo di dalamnya

Silahkan masuk ke mode HTML bukan Compose 

Kemudian cari link yang ingin anda ubah dan tambahkan class sesuai button yang anda inginkan

Contohnya :

<a href="https://link-yang-dituju/">Demo / Download</a>

menjadi

<a class="demo" href="https://link-yang-dituju/">Demo</a>

atau

<a class="download" href="https://link-yang-dituju/">Download</a>

Penutup 

itulah tadi artikel mengenai  Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog, semoga dapat bermanfaat bagi anda.

Dan jika anda mempunyai pertanyaan mengenai artikel di atas  silahka kirim pertanyaan anda melalui kolom komentar di bawah 

akhir kata
see you next time and happy blogging 

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Tombol Download Dan Demo Yang Keren Di Blog"

Posting Komentar

Jika Ada Yang Ingin Anda Tanyakan Terkait Artikel Ini Silahkan Bertanya Melalui Kolom Komentar Dibawah, Atau Dengan Menghubungi Kami Pada Halaman Contact.

1. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel