Cara Membuat Tombol Demo dan Download Di Blog Keren

Nyampling << N >> Cara Membuat Tombol Demo dan Download Di Blog Keren. Seringkali ketika kita mengunjungi sebuah blog yang menawarkan sebuah template blog ataupun blog streaming film. Selalu menggunakan kedua tombol ini. Kedua fungsi tombol ini memang sangat berguna untuk mengalihkan kehalaman lain ataupun ke link sebuah drive tempat file tersebut untuk diunduh.

Cara Membuat Tombol Demo dan Download Di Blog Keren

Pada kasus diatas maka kedua tombol ini sangat penting karena sebelum membeli sebuah template ataupun sebelum mengunduh file film maka biasanya visitor dapat melihat demonya ataupu trailernya dulu. Sehingga visitor dapat mempertimbangkan apakah harus didownload ataupun tidak.

Cara Membuat Tombol Demo dan Download Di Blog Keren


Nah, kali ini nyampling akan memberikan tutorial bagaimana cara membuat kedua tombol ini diblog sehingga memudahkan visitor untuk menuju link tanpa harus ribet beralih ke tab lain. Oke, simak tutorialnya dibawah ini ya.

Style 1. Bentuk  Sederhana


Langkah 1. Login Blogger >> Template >> Edit HTML
Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#0070b0!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#f78d1d!important;background:0} .buttonx:active{position:relative;top:1px}
Langkah 3. Simpan Template!
Langkah 4. Untuk memanggil kode CSS di postingan blog, maka tempelkan kode berikut pada halaman HTML postingan. (Jangan di Compose)
Langkah 5. Tempelkan kode dibawahsetiap kali akan membuat tombol.
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Download</a>
</div>
Jika mau menambah tombol lain maka, tinggal tambahkan kode:

<a class="buttonx" href="http://www.nyampling.com/" target="_blank">Nama Tombol</a> 
 Ganti alamat blognya dengan link blog sobat
Langkah 6. Lihat dipratinjau atau Publish.

Style 2. Efek Rainbow (Efek Pelangi)


Langkah 1. Login Blogger >> Template >> Edit HTML
Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
a {
  text-decoration:none;
  color:#FFF;
}
.rainbow-button {
  width:calc(10vw + 10px);
  height:calc(4vw + 10px);
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-size:2vw;
  font-weight:bold;
}
.rainbow-button:after {
  content:attr(alt);
  width:10vw;
  height:4vw;
  background-color:#191919;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rainbow-button:hover {
  animation:slidebg 2s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:30vw;
  }
}
Langkah 3.  Simpan Template!
Langkah 4. Untuk memanggil kode CSS di postingan blog, maka tempelkan kode berikut pada halaman HTML postingan. (Jangan di Compose)
Langkah 5. Tempelkan kode dibawahsetiap kali akan membuat tombol.
<a href="#" class="rainbow-button" alt="Demo"></a>
Langkah 6. Lihat hasilnya dipratinjau atau dipublish

Style 3. Efek Animasi Ripple (Gelombang Air)


Script By Arlina https://www.arlinadzgn.com/2017/01/tombol-demo-dan-download-material-ui.html
Langkah 1. Login Blogger >> Template >> Edit HTML
Langkah 2. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>
/* Arlina Design Material Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
Untuk warna tombol dan fungsi lainnya bisa sobat sesuaikan kembali
Langkah 3. Tambahkan kode jQuery ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>
Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol
Langkah 4. kemudian simpan template.
Langkah 5. Sekarang untuk kode pemanggilnya, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose)
<div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>
Tambahkan link tujuan pada kode yang ditandai
Langkah 6. Selesai! Dan lihat hasilnya

Style 4. Alternatif Paling Sederhana


Pada style alternatif ini kalian tidak perlu memasang kode ditemplate alias kalian tinggal pasang kode di html postingan (Jangan di Compose ya). Untuk dapat memasangnya, kalian tinggal pasang kode dibawah ini ya.
Script By Jagoan Kode https://www.jagoankode.com/cara-membuat-tombol-demo-download-keren-di-blog/

Alternatif 1


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode {
  margin-right:9px;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #009688;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #000;
}
/* Darker background on mouse-over */
.jagoankode:hover {
    background-color: #a5a6a7;
}
.jagoankode:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<br />
<center>
<a href="https://nyampling.com" target="_blank">
<button class="jagoankode"><i class="fa fa-eye"></i> Demo</button></a>
<a href="https://nyampling.com" target="_blank">
<button class="jagoankode"><i class="fa fa-download"></i> Download</button></a>
</center>









Alternatif 2


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.jagoankode1 {
    margin-right:9px;
    padding: 15px 25px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #357ae8;
    background-color: #ffffff;
    border: solid;
    border-radius: 25px;
    box-shadow: 7px 0px #000;
}
.jagoankode1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.jagoankode1 span:after {
  content: '0bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.jagoankode1:hover span {
  padding-right: 25px;
}
.jagoankode1:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
<br />
<center>
<a href="https://nyampling.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-eye"></i><span>Demo</span></button></a>
<a href="https://nyampling.com/" target="_blank">
<button class="jagoankode1" style="vertical-align: middle;"><i class="fa fa-download"></i><span>Download</span></button></a>
</center>









Demikian tutorial Cara Membuat Tombol Demo dan Download Di Blog Keren yang telah nyampling rangkum untuk sobat. Semoga dapat bermanfaat dan dapat diaplikasikan diblog sobat, tinggal pilih saja mana style yang paling praktis dan mudah digunakan.

Berlangganan update artikel terbaru via email:

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

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hubungi Kami