Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Link Tombol di Blogger, Button Demo dan Download di Postingan Blogger

Daftar Isi [Tampil]

Cara Membuat Link Tombol di BloggerLink tombol ini biasanya banyak sekali digunakan bagi seorang blogger yang dalam situsnya membagikan sebuah link download game atau file-file penting lainnya.

Gambar Cara Membuat Link Tombol di Blogger
Cara Membuat Link Tombol di Blogger
Bagi seorang blogger pemula pastinya masih sangat asing dengan postingan yang memiliki tombol keluar atau menuju link lain, dan ini biasanya sering disebut dengan tombol button.

Apa Sih Tombol Button ?

Tombol button ini biasanya digunakan oleh website atau blog yang isi kontennya adalah konten download seperti aplikasi, game, dan konten download anime.

Jadi bagi anda seorang blogger pemula yang membahas tentang konten download anda wajib mengetahui cara ini terlebih dahulu, agar para pengunjung anda bisa mendapatkan apa yang mereka cari di blog anda.

Jika sudah begitu maka pengunjung pun akan senantiasa mengunjungi blog anda setiap mereka membutuhkan sesuatu informasi yang ada di blog anda, karena anda memudahkan mereka untuk mendapatkan apa yang mereka cari.

Tujuan Tombol Button Untuk Blog ?

Tujuannya sudah saya sebutkan tadi yaitu untuk mempermudah pengunjung mendownload aplikasi atau game yang anda sudah sediakan, mereka hanya cukup menekan tombol button dan langsung akan mengarah ke download.

Nah, jika sobat sudah penasaran dengan caranya sobat boleh simak tutorial selengkapnya dibawah ini.


Baca Juga : Cara Mengganti Favicon Blogger, Logo yang Muncul di Pencarian


Cara Membuat Tombol Button Responsive di Postingan Blogger

Alangkah baiknya sobat ikuti tutorial ini dengan benar supaya nantinya tidak ada kesalahan saat penempelan kode.

1. Langkah pertama sobat bisa login dulu ke akun Blogger sobat.

2. Jika sudah di dashboard blogger maka langsung pilih “Tema” dan “Edit HTML

3. Lalu sobat langsung saja salin/copy kode dibawah ini.

<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css’ rel=’stylesheet’/>

4. Dan sobat masukkan kode tersebut di atas kode </head> cara mencari kode ini sobat bisa langsung tekan CTRL + F lalu tekan Enter, dan akan muncul pencarian dan di pencarian sobat tempel saja kode </head> maka akan langsung mencari dengan otomatis.

5. Langkah selanjutnya sobat juga harus memasukkan kode dibawah ini di atas kode ]]></b:skin> Atau </style> jika sobat kebingungan sobat bisa mencarinya seperti tadi, dengan menggunakan CTRL + F

/* CSS Button Style www.lewatinaja.com */

.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}

.button ul{margin:0;padding:0}

.button li{display:inline;margin:5px;padding:0;list-style:none}

.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’}

6. Langsung saja simpan.

Nah, ini baru proses pertama memasukkan kode HTML yah sobat, sekarang bagaimana cara menggunakan atau membuatnya di Postingan Blogger ? Simak ulasannya dibawah ini.


Baca Juga : Cara Membuat Disclaimer dan Privacy Policy di Blogger


Cara Membuat/Menggunakan Tombol Button di Postingan Blogger

Jika kalian sudah berhasil memasang kode di atas tadi maka langkah selanjutnya kalian akan memunculkan tombol button download dan demo di postingan blog kalian.

1. Pilih menu “Postingan

2. Tambahkan “Postingan Baru

3. Ubah dari tampilan menulis ke Tampilan “HTML

4. Selanjutnya sobat silahkan letakan kode dibawah ini di postingan blog yang ingin sobat publikasikan.

<div style=”text-align: center;”>

  <ul class=”button”>

    <li><a class=”demo” href=”#” target=”_blank”>Demo</a></li>

    <li><a class=”download” href=”#” target=”_blank”>Download</a></li>

  </ul>

</div>

<div class=”clear”></div>

Catatan : Silahkan sobat ganti tanda pagar “#” yang berwarna merah dengan link menuju artikel atau aplikasi yang ingin sobat download, lalu publikasikan.

Sampai disini proses sudah selesai sobat tinggal langsung mengujinya terlebih dahulu apa tombol sudah ada atau belum ? Takutnya sobat melakukan kesalahan.

Jika eror sobat boleh memperbaiki kembali postingan yang sobat ingin tambahkan tombol button tersebut, caranya ikut langkah-langkahnya dengan benar.

Nah, demikianlah informasi cara membuat link tombol di blogger yang dapat warga selatan net sampaikan. Semoga informasi ini bisa bermanfaat dan berguna bagi warga semua.

Masih ada banyak sekali artikel yang admin belum sampaikan, jadi dalam kesempatan selanjutnya admin akan membagikannya kembali kepada warga semua, Sekian dan Terimakasih.

Posting Komentar untuk "Cara Membuat Link Tombol di Blogger, Button Demo dan Download di Postingan Blogger"