Cara membuat tombol responsive pada blog

Hai sahabat blogger, responsive adalah adalah kekuatan utama dari sebuah tampilan blog. Blog yang memiliki tampilan responsive dan elegan pastinya akan membuat pengunjung blog merasa betah untuk berselancar diblog anda. Dalam pembahasan kali ini admin akan memberikan tutorial cara membuat tombol responsive pada blog untuk menambah kecantikan blog.
Tutorial ini menggunakan metode edit unsur HTML dari sebuah blog jadi saran dari admin sebelum melakukan pengeditan sebaiknya membackup terlebih dahulu template anda untuk menghindari hal-hal yang tidak diinginkan seperti template rusak, error dan lainnya.

Cara membuat tombol responsive pada blog

Ikuti tutorial dibawah ini dengan seksama demi menghindari kesalahan penempatan kode.
  • Masuk ke dashboard blog anda
  • Masuk ke menu tema
  • Lalu klik edit HTML
  • Tempelkan kode script font awesome dibawah ini diatas kode </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link> 
  • Tempelkan kode dibawah ini diatas kode </style> atau ]]></b:skin>
/* Faronesia Button */
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'PT Sans Narrow',text-decoration:none;font-weight:700;background:#dc143c;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #fff;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#fff;color:#dc143c;box-shadow:inset 0px -50px 0px #fff;}
a.btn:active {color:#fff;box-shadow:inset 0px -50px 0px #fff;}
  • Lalu simpan tema
  • Selanjutnya tinggal mengaplikasikan kode css diatas ke html
  • Masukkan kode dibawah ini pada postingan anda pada bagian html (bukan compose)
<div id="wrap"><a class="btn" href="#">Button</a></div>
Keterangan:
Ganti tanda # dengan link tautan yang anda inginkan
Hasilnya lihat dibawah ini:
Sekian tutorial cara membuat tombol responsive pada blog semoga bermanfaat, silahkan mencoba tutorial ini jika mengalami masalah jangan sungkan-sungkan untuk berkomentar.

0 Response to "Cara membuat tombol responsive pada blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel