Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tombol Link Button di Blogger

Cara membuat tombol button di blog. Kita sering menjumpai tampilan desain blog yang menarik, nyaman untuk dilihat dan betah berlama-lama membaca artikel demi artikel blog tersebut. 

Cara Membuat Tombol Link Button di Blogger

Pas lagi asyik cari beberapa tutorial soal ngeblog, disitu saya ketemu blog yang dalam artikelnya berisi artikel dan link. Link pada umumnya hanyalah teks biasa saja, pada blog tersebut linknya berupa tombol atau button dengan warna yang menarik.

Bukan hal baru dalam dunia blogger tentang tutorial cara membuat button link html, sudah sangat banyak yang mengulas tentang hal tersebut. Apalagi blog-blog yang khusus membahas dunia per-kodingan, artikel membuat button keren, membuat tombol button di php, membuat button responsive. Itu sudah umum dibahas.

Manfaat tombol button di blogger

Tombol button di blogger jelas sangat membantu sekali dalam banyak hal, salahsatunya blog kita semakin terlihat menarik dan kemungkinan pengunjung akan tertarik untuk menekan tombol button yang kita buat. Tombol link ini sangat efisien untuk blog yang membahas tentang demo template, blog download dan lainnya.

Cara membuat tombol button di blogger

Tapi bagaimana cara membuat tombol button di blogger atau blogspot? Sebenarnya cukup mudah dan tidak terlalu jauh beda dengan membuat button di html atau php. Anda hanya perlu copy-paste script dibawah ini dan perhatikan langkah-langkahnya agar sesuai dengan yang di demokan.

Membuat tombol link button di template LinkMagz

Dalam demo pertama ini saya menggunakan template LinkMagz dari mas sugeng, script ini sebetulnya sudah ada dalam panduan member area bila anda sudah membeli template ini.

Caranya copy script di bawah ini dan paste-kan ke halaman editor blogger teman-teman, ubah Tampilan Menulis (Compose) menjadi Tampilan HTML dan letakkan script yang tadi ke posisi yang teman-teman inginkan.


<div style="text-align: center;">
<a class="buttonDownload" href="#">Download</a>
</div>

Membuat tombol link button yang keren

Beberapa langkah ini harus anda ikuti, perhatikan dimana letak script ini dipasangkan. Berikut caranya.

  1. Klik menu Tema > Edit HTML
  2. Dalam model Edit HTML, carilah kode ]]></b:skin> atau </style>
  3. Copy-paste semua code CSS berikut ini tepat diatas code yang dicari tadi

.demo{border:none;border-radius:2px;padding:5px 20px!important;background:#5959ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.download{border:none;border-radius:2px;padding:5px 20px!important;background:#4cc3ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.demo:hover{background:#000;text-shadow:0 0 1px #222}.download:hover{background:#000;text-shadow:0 0 1px #222}

Setelah memasang kode diatas, cara penggunaannya simpel, cukup memanggil class demo atau class download dalam link yang anda buat.

  
    <a class='demo' href="https://www.idharian.com/"
    title="IDHarian">IdHarian</a>
  

Sekian tutorial cara membuat tombol link button di blogger atau blogspot, cukup sederhana tapi bisa berdampak pada tampilan blog kita dan tentu lebih menarik ketmbang menggunakan teks link biasa.

    Posting Komentar untuk "Cara Membuat Tombol Link Button di Blogger"