Cara Membuat Tombol DEMO Pada Template Viomagz
Seperti yang kita ketahui pada template viomagz milik mas sugeng ,, yaitu belum di bekali tombol DEMO , maka dari itu sobat perlu membuatnya secara manual ,,
Sobat bisa juga menggunakan kode CSS yang nantinya berfungsi menjadi tombol DEMO ,kode css ini sobat simpan ke dalam template blogger milik sobat.
Cara membuatnya tidak lah terlalu ribet , asal sobat faham.
Apa Fungsi Dari Tombol Demo !!
Biasanya untuk para blogger yang membahas mengenai download template blogger , sebelum mendownload terkadang kita jumpai yaitu Demo , dimana kita bisa melihat tampilanya,, atau Link yang menuju ke tampilan template yang akan di download. Sehingga tombol tersebut bisa mempermudah pengunjung mengetahui isinya.
" Sebenarnya , sobat juga bisa membuatnya secara manual , yaitu dengan cara :
Contoh :
Cara Membuat Tombol Search Viomagz Mirip Iqniel
👇👇
DEMO
Dengan cara membuat tulisan Demo lalu di beri Link ,, dimana link tersebut menuju ke tampilan , sehingga tombol tersebut mempermudah pengunjung hanya dengan meng klik tombol demo.
Namun jika sobat kurang suka dengan cara tersebut , sobat bisa membuatnya dengan menggunakan , atau menambahkan kode css ke dalam template blogger.
Ok langsung saja ke tutorialnya :
Cara Membuat Tombol DEMO Pada Blogger. !!
Saran :
Saya sarankan kepada sobat supaya membackup terlebih dahulu template blogger milik sobat , apabila terjadi error bisa segera di pulihkan.
1. Cara Membuat Tombol DEMO Simpel
Cara ini cukup simpel , sehingga loading blog template tidak terbebani , karena dengan tampilannya yang simpel
Saya rasa cara ini cukup bagus kerena tidak mempengaruhi kinerja loading.
Ada dua cara dalam metode ini
Cara pertama !
Memasang tombol demo pada template blogger. !
Menggunakan kode css
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
Cari kode </style>
Taruh kode ini tepat di atasnya
ini code nya gaes..
/* Tombol Demo */
.buttonDemo {
display: inline;
background: #2c5f8b;
cursor: pointer;
padding: 10px;
border-radius: 3px;
transition: all .3s;
font-size: 13px;
font-weight: bold;
color: #fff !important;
}
.buttonDemo:hover {
background: #e20075;
}
Klik Simpan Template ,, Selesai !!
Cara Kedua !
Memasang tombol demo pada HTML artikel. !
1. Buka Akun Blogger.
2. Buat Postingan
Taruh kode ini di dalam artikel yang akan di publikasikan dimana kode demo ini akan ditampilkan. !
ini code nya gaes..
<p style="text-align: center;"><b><a class="buttonDemo" href="https://westoiku.blogspot.com/" target="_blank">DEMO</a></b></p>
Ganti Url diatas dengan Url blog milik sobat ,, !
Sebelum di publikasikan , sobat bisa tekan tombol pratinjau terlebih dahulu , sekiranya tampilanya sudah pas , sobat bisa langsung klik publis.
2. Cara Membuat Tombol Demo Responsive By Arlina
Cara ini sangat responsive gaes ,
Sobat tahu sendiri kan , tampilan yang responsive adalah tampilan yang sangat di sukai para blogger.
Sobat bisa ikuti panduan di bawah ini !!
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
Cari kode. ]]></b:skin>
Taruh kode ini tepat di atasnya
ini code nya gaes..
/* Arlina Design Material Button Edit by www.libralibry.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
Klik simpan template. !!
Cara Penggunaanya
Taruh kode ini di dalam artikel mode HTML
ini code nya gaes..
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.libralibry.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.libralibry.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Sobat taruh kode tersebut di artikel yang sekiranya dimana tombol demo akan di tampilkan.
3. Cara Membuat Tombol Demo Download Buy Now
Cara ini keren banget , selain ada tiga jenis tombol , tampilanya pun di lengkapi dengan warna ,
Jika sobat ingin membuatnya , ikuti panduan di bawah :
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
cari kode </style>
Taruh kode ini tepat di atasnya
ini code nya gaes..
#btn-keren {margin: 10px auto;
text-align: center;}
#btn-keren br {display: none;}
.btn-keren1, .btn-keren2, .btn-keren3 {position: relative;display: inline-block;height: 50px;width: 200px;line-height: 50px;padding: 0;border-radius: 50px;background: #fdfdfd;border: 2px solid #009688;margin: 10px;transition: .5s}
.btn-keren2 {border: 2px solid #3f51b5;}
.btn-keren3 {border: 2px solid #d83500;}
.btn-keren1:hover {background-color: #009688;}
.btn-keren2:hover {background-color: #3f51b5;}
.btn-keren3:hover {background-color: #d83500;}
.btn-keren1:hover span.circle, .btn-keren2:hover span.circle2, .btn-keren3:hover span.circle3 {left: 100%;margin-left: -45px;background-color: #fdfdfd;}
.btn-keren1:hover span.circle{color: #009688;}
.btn-keren2:hover span.circle2 {color: #3f51b5;}
.btn-keren3:hover span.circle3 {color: #d83500;}
.btn-keren1:hover span.title, .btn-keren2:hover span.title2, .btn-keren3:hover span.title3 {left: 40px;opacity: 0;}
.btn-keren1:hover span.title-hover, .btn-keren2:hover span.title-hover2, .btn-keren3:hover span.title-hover3 {opacity: 1;left: 40px;}
.btn-keren1 span.circle, .btn-keren2 span.circle2, .btn-keren3 span.circle3 {display: block;background-color: #009688;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: 0;left: 0;transition: .5s;border-radius: 50%;}
.btn-keren2 span.circle2 {background-color: #3f51b5;}
.btn-keren3 span.circle3 {background-color: #d83500;}
.btn-keren1 span.title,.btn-keren1 span.title-hover, .btn-keren2 span.title2,.btn-keren2 span.title-hover2,.btn-keren3 span.title3, .btn-keren3 span.title-hover3 {position: absolute;left: 90px;text-align: center;margin: 0 auto;font-size: 16px;font-weight: bold;color: #009688;transition: .5s;}
.btn-keren2 span.title2,.btn-keren2 span.title-hover2 {color: #3f51b5;left: 80px;}
.btn-keren3 span.title3,.btn-keren3 span.title-hover3 {color: #d83500;left: 80px;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {left: 80px;opacity: 0;}
.btn-keren1 span.title-hover, .btn-keren2 span.title-hover2, .btn-keren3 span.title-hover3 {
color: #fff;
}
Simpan template.. !!
Cara Penggunaanya.
1. Buka Akun Blogger.
2. Buat Postingan Baru.
Setelah membuat artikel. Lalu sobat ingin menampilkan tombol ini..
Taruh kode ini di dalam postingan sobat
ini code nya gaes..
<div id="btn-keren">
<a href="#" class="btn-keren1" target="_blank">
<span class="circle"><i class="fa fa-desktop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-keren2" 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>
<a href="#" class="btn-keren3" target="_blank">
<span class="circle3"><i class="fa fa-shopping-cart"></i></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Click here</span>
</a>
</div>
Ganti bagian href="#"
pagar hapus lalu beri url link dimana link tersebut terarahkan ke url tujuan.
Catatan :
Jika template sobat belum terpasang font awesome , silahkan tambahkan kode ini.
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML
Cari kode. </head>
Taruh kode ini tepat diatasnya
ini code nya gaes..
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>
Tapi jika template sobat sudah di bekali font awesome , sobat tidak memerlukan kode diatas.
Demikian tutorial dari westoiku.