Memiliki template blogger sendiri yang dibuat dari nol memacu keinginan untuk mencoba banyak hal. Contohnya ketika bergabung dengan program afiliasi dari IDCloudHost beberapa waktu yang lalu. Saat itu, banner yang sudah dikemas apa adanya saya coba langsung pasang di Sidebar.
Namun sejurus kemudian, banner tersebut dihapus karena saya pikir tidak menghasilkan. Padahal namanya mencari penghasilan melalui internet tidak bisa secara instan. Oleh karena itu, setelah bejalan beberapa waktu terpikirlah kembali untuk memasang banner tersebut.
Namun kali ini dengan memanfaatkan komponen "Card" dari Bootstrap. Sekalian karena theme blogger yang saya gunakan ini menggunakan Bootstrap. Sehingga, link yang mengarah ke server CDN Bootstrap bisa digunakan dalam banyak hal agar template terlihat lebih baik lagi.
Cara Mendapatkan Gambar dari Banner Afiliasi
Banner biasanya sudah disediakan oleh masing-masing penyedia layanan afiliasi. Dan jikalau ingin membuat banner sendiri sebetulnya tidak mengapa. Asalkan ketika ditempatkan di blog kita tetap mengarah kesana sesuai dengan alamat khusus yang sudah diberikan.
Dan kali ini kita tidak akan belajar membuat gambar sendiri melaui aplikasi atau lannya. Melainkan mengambil salah satu gambar yang disediakan untuk kemudian ditempatkan pada sebuah wadah. Wadah inilah yang bisa kita artikan sebagai padanan kata untuk "Card".
Namun sebelum masuk pada pembahasan "card" tersebut. Terlebih dahulu akan kita contohkan cara mendapatkan gambar yang sudah disediakan. Contoh praktek di sini menggunakan layanan dari IDCloudHost. Barangkali ada yang belum daftar afiliasi silahkan register terlebih dahulu.
1. Kunjungi laman IDCloudHost.
2. Arahkan pointer ke atas area Login button.
3. Akan muncul menu yang terdiri atas: "Client Area", "Console Platform", dan "Awan Platform".
4. Klik "Client Area".
5. Masukan email address serta kata sandi kemudian klik "Login".
6. Klik "Afiliates".
7. Copy salah satu kodenya, misalnya seperti ini:
8. Kemudian ambil dan simpan kode gambarnya sebagaimana contoh di bawah ini.
9. Sedangkan alamat afiliasi kita ditunjukan setelah kode a href =. Cara menyisipkannya nanti tanpa perlu mengikutsertakan kedua buah tanda kutipnya ya.
Cara Membuat Banner Afiliasi dengan Card dari Bootstrap
Membuat banner afiliasi dengan Card? Apa itu Card? Dalam bahasa kita biasa diterjemahkan dengan kartu. Namun apa maksud dari kartu ini? Melansir laman dokumentasi Bootstrap disebutkan bahwa Card adalah wadah konten yang fleksibel dan dapat diperluas.
Hal ini mencakup opsi untuk header dan footer, beragam konten, warna latar belakang kontekstual, dan lainnya. Jika sebelumnya familiar dengan Bootstrap 3, Card kini telah menggantikan panel, well, dan thumbnail lama. Fungsi serupa dengan komponen tersebut tersedia sebagai class pengubah untuk Card.
Sekarang mari kita coba untuk mempraktekannya.
1. Siapkan kode Card sesuai selera, misalnya saya menggunakan kode berikut ini:
2. Perhatikan pada bagian class="card text-center" pada contoh di atas. Class text-center menjadikan tulisan yang ada pada body maupun title sebuah card berada di tengah-tengah. Jika Anda menginginkannya berada di sebelah kanan bisa diganti dengan "text-end". Dan bagi Anda yang menginginkan rata kiri silahkan hapus "text-center"nya sehingga hanya tertera: <div class="card" saja.
3. Untuk kata "Nama Domain Murah pada tag <h5> pada judul atau title card silahkan ganti sesuai kebutuhan. Dan isi dari "card-text", dalam hal ini yaitu kalimat:"Mau beli nama domain tapi masih bingung? Coba di sini aja! Sudah terbukti murahnya." Silahkan ganti sesuai keinginan. Begitu juga dengan kata "Dapatkan Segera" pada class = btn.
4. Pada langkah sebelumnya, yaitu cara mendapatkan gambar dari banner afiliasi. Tepatnya pada langkah nomor 8 merupakan URL Address dari gambar yang didapat dari banner afiliasi. Untuk menempatkan ke dalam baris kode card silahkan isikan kedalam tag <img src="...". Tepatnya menggantikan kata:"URL Adress gambar dari banner afiliasi". pada kode nomor 1 di atas.
5. Sedangkan "URL Address afiliasi afiliasi" dalam tag <a href="URL Address afiliasi afiliasi" class="btn btn-primary">. Silahkan isi dengan kode afiliasi milik Anda.
6. Banner afiliasi yang dibuat dengan Card dari Bootstrap sudah siap digunakan.
Cara Menempatkan Banner Afiliasi di Sidebar Blogger
Banner afiliasi yang dibuat dengan Card dari Bootstrap memiliki tampilan yang berbeda. Dan apa yang baru kita lakukan di atas adalah salah satu contoh saja. Karena sebagaimana telah disebutkan pada paragraf sebelumnya. Penggunaan komponen Card ini bisa diperluas berdasarkan kebutuhan Anda.
Sekarang mari kita coba mempraktekannya pada template blogger yang Anda gunakan. Kemudian lihatlah hasilnya sebagaimana saat ini terlihat pada bagian sidebar. Apakah menarik? Jika penasaran silahka ikuti tahapannya sebagaimana berikut ini.
1. Kunjungi laman Blogger, pastikan sudah menggunakan theme blogger yang sudah memiliki akses ke link CDN Bootstrap baik CSS maupun JS-nya seperti template Sebardi Blog ini. Bagi teman-teman yang ingin mempelajari pembuatan theme blogger dari nol dengan bootstrap bisa lihat pembahasan 2 column maupun 3 column pada blog ini.
2. Masukan username dan password kemudian klik "Login".
3. Pilih salah satu blog jika Anda memiliki banyak blog dalam satu akun.
4. Klik "Tata Letak" atau "Layout".
5. Pada section "Sidebar' silahkan klik "Tambahkan Gadget' atau "Add a Gadget'.
6. Pilih HTML/JavaScript.
7. Paste baris kode "card afiliasi" yang sudah kita buat tadi ke dalam "Konten".
8. Klik "Simpan".
9. Hasil jadi akan terlihat seperti tangkapan layar berikut:
Kesimpulan
Card merupakan salah satu komponen Bootstrap yang bisa menampilkan gambar disertai dengan deskripsi. Sifatnya yang fleksibel dan dapat diperluas sesuai kebutuhan menjadikannya bsa digunakan untuk beragam kebutuhan. Baik website Anda bertindak sebagai toko online ataupun sekedar tulisan.
Contoh penerapan card dari Bootstrap ini misalnya untuk membuat daftar harga, galeri produk, album gambar dan lain-lain. Dan di atas kita sudah mencoba komponen ini meskipun hanya sebatas sebuah banner afiliasi dengan tampilan yang sederhana.
Akhir kata semoga tulisan kali ini tentang cara membuat banner afiliasi di sidebar blogger dengan Bootstrap bisa bermanfaat untuk semuanya. Silahkan komentar jika hasilnya ternyata tidak sama. Barangkali bisa menjadi PR pribadi agar terus mempelajari Bootstrap dan Blogger.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar