Tutorial cara membuat tombol demo & download agar responsive

Halo sahabat KeySal yang ada di seluruh Indonesia , khususnya di Jakarta. Kembali lagi bersama blog Keyword Ngasal. Pada artikel kali ini kita akan membahas permasalahan para pemula yang ingin belajar bagaimana cara memasang tombol DEMO & DOWNLOAD di blogger. Cocok banget untuk kalian para blogger pemula. Langsung saja kalian simak tutorialnya.

Apa sih tombol Demo & Download itu ? Tombol demo dan download ini adalah kedua tombol yang sering di gunakan oleh blog blog download atau blog review atau juga blog tutorial yang sering kalian temui di website website tersebut.

Tentu saja tombol demo dan download ini sangat membantu kalian yang ingin agar website kalian terlihat responsive dan juga rapih. 

Terus kegunaanya itu apa tombol Demo dan Download ? Kegunaanya adalah agar para pengunjung dapat menemukan link tujuan tertentu dengan mudah dan tentunya agar tidak membingungkan.

Apa kedua tombol demo dan download ini responsive ? Sudah saya beritahu sebelumnya bahwa kedua tombol ini responsive dan mobile friendly untuk semua template. Kalian penasaran, Langsung simak yuk langkah langkahnya !

LANGKAH MEMBUAT TOMBOL DEMO DAN DOWNLOAD

1. Langkah kali ini ( Kalian lewati jika kalian telah memasang js font awesome ), Kalian tinggal buka Blogger > Pilih tema > Edit HTML > Lalu salin kode dibawah ini dan kalian letakan di atas kode </head>
   

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

2. Selanjutnya kalian salin kode dibawah ini dan pastekan kode di atas kode </style>
   

   .whitebutton {
       margin: 20px auto;
       padding: 20px 0;
       width: 200px;
   }
   
   .whitebutton a {
       background: #fff;
       color: #666;
       display: block;
       font-size: 17px;
       font-weight: 700;
       font-family: 'Arial',Verdana,sans-serif;
       height: 50px;
       line-height: 50px;
       text-align: center;
       text-decoration: none;
       text-transform: uppercase;
       width: 200px;
       position: relative;
       z-index: 2;
   }
   
   .whitebutton a:before {
       content: '\f019';
       font-family: FontAwesome;
       font-weight: normal;
       padding: 8px;
       margin-left: -12px;
       margin-right: 6px;
   }
   
   .whitebutton span {
       background: #444;
       color: #fff;
       display: block;
       font-size: 12px;
       font-family: 'Arial', Verdana,sans-serif;
       height: 40px;
       line-height: 40px;
       text-align: center;
       width: 200px;
       z-index: 1;
       text-transform: uppercase;
       font-weight: bold;
   }
   
   .whitebutton .up {
       background: #e25734;
       margin: -25px auto;
       opacity: 0;
       border-radius: 0 0 5px 5px;
       transform: translate(0,-50px);
       transition: 350ms;
   }
   
   .whitebutton .down {
       margin: -30px auto;
       opacity: 0;
       border-radius: 5px 5px 0 0;
       transform: translate(0,-50px);
       transition: 350ms;
   }
   
   .whitebutton .down:before {
       content:'\f14a';
       font-family: FontAwesome;
       font-weight: normal;
       margin-right: 6px;
       color: #aaa;
   }
   
   .whitebutton:hover .up {
       opacity: 1;
       transform: translate(0,0);
   }
   
   .whitebutton:hover .down {
       opacity: 1;
       transform: translate(0,-90px);
   }
   
   .whitebuttondemo {
       margin: 20px auto;
       padding: 20px 0;
       width: 200px;
   }
   
   .whitebuttondemo a {
       background: #e25734;
       color: #fff;
       display: block;
       font-size: 17px;
       font-weight: 700;
       font-family:'Arial',Verdana,sans-serif;
       height: 50px;
       line-height: 50px;
       text-align: center;
       text-decoration: none;
       text-transform: uppercase;
       width: 200px;
       position: relative;
       z-index: 2;
       transition: 350ms;
   }
   
   .whitebuttondemo a:before {
       content:'\f002';
       font-family: FontAwesome;
       font-weight: normal;
       padding: 8px;
       margin-left: -12px;
       margin-right: 6px;
   }
   
   .whitebuttondemo a:hover {
       color: #fff;
   }
   
   .whitebuttondemo span {
       background: #444;
       color: #fff;
       display: block;
       font-size: 12px;
       font-family: 'Arial', Verdana,sans-serif;
       height: 40px;
       line-height: 40px;
       text-align: center;
       width: 200px;
       z-index: 1;
       text-transform: uppercase;
       font-weight: bold;
   }
   
   .whitebuttondemo .up {
       background: #444;
       margin: -25px auto;
       opacity: 0;
       border-radius: 0 0 5px 5px;
       transform: translate(0,-50px);
       transition: 350ms;
   }
   
   .whitebuttondemo:hover .up {
       opacity: 1;
       transform: translate(0,0);
   }

   Jika sudah kalian tekan tombol simpan template untuk melanjutkan langkah selanjutnya.
3. Pada langkah ini kalian cukup memasukan salin dan pastekan kode dibawah ini pada postingan dengan cara ketik HTML  ( sebelah tombol Compose )
   

   ]<div class="whitebuttondemo">
   <a href="#" target="_blank">Demo</a><br>
   <span class="up">click to view</span></div>
   <br>
   <div class="whitebutton">
   <a href="#" target="_blank">Download</a><br>
   <span class="up">click to begin</span><br>
   <span class="down">1.6MB .rar</span></div>

   
   Ganti tanda "#" dengan URL kalian nah disitulah tombol Demo dan Download akan terbentuk.
4. Ingat sebelum kalian publish artikel kalian alahkah baiknya kalian pratinjau untuk melihat apakah tombol Demo dan Download berjalan sesuai dengan apa yang kalian mau.

Okelah sahabat KeySal mungkin cukup sekian artikel dari Tutorial cara membuat tombol demo dan Download dengan mudah. Semoga kalian terus berkarya agar blogger indonesia semakin maju dan berkualiatas. Sampai jumpa di pertemuan / artikel selanjutnya teman teman. Jangan lupa untuk meninggalkan komentar untuk masukan agar blog ini dapat meningkatkan kualitasnya. Cukup sekian dan Terima kasih.