Tampilkan postingan dengan label tombol. Tampilkan semua postingan
Cara Membuat Tombol Sopiler di Blog - Apa itu spoiler? Saya yakin teman-teman blogger sudah pada tahu semua mengenai arti dari spoiler ini yaitu sebuah script yang berfungsi sebagai tombol buka tutup (open close button). Spoiler telah banyak digunakan didalam web blog site karena fungsinya yang sangat membantu tampilan sebuag web blog site itu sendiri. Salah satu kesamaan dengan spoiler ini adalah scroll bar dan tab view yang juga memiliki fungsi yang sama diantara ketiganya.
Apa saja fungsi tombol spoiler ini untuk sebuah blog?
Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini
Apa saja fungsi tombol spoiler ini untuk sebuah blog?
- Membuat tampilan minimalis
- Menghemat ruang tampilan pada blog
- Menyembunyikan objek atau teks yang ada didalam blog atau artikel
- dan sebagai tombol yaitu open close button
Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini
Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>
Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Ganti dengan objek atau teks yang anda inginkan
</div>
</div>
</div>- Keterangan:
Warna merah : Silahkan ganti dengan objek atau teks yang anda inginkan
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tombol Spoiler di Blog
Cara Memasang Tombol Link Gambar Blog - Pada artikel sebelumnya, saya telah menjelaskan tentang cara membuat tombol klik pada background gambar yang masih ada kaitannya dengan artikel ini yaitu cara memasang tombol link gambar blog. Pada artikel sebelunya, saya juga memberitahukan kalau artikel cara memasang tombol link gambar blog ini memiliki perbedaan dengan artikel sebelumnya. Kalau pada artikel sebelumnya, seluruh tampilan (background dan garis border) menggunakan gambar tapi pada artikel ini, seluruh tampilan menggunakan kode-kode CSS dan html dan tidak menggunakan gambar sama sekali
Contoh dalam gambar
Demonya
Nantikan mini-site template khusus blogger....
Dengan tidak menggunakan gambar pada tampilan tersebut, hal ini tentunya memiliki keuntungan tersendiri yaitu loading blog lebih cepat daripada yang menggunakan gambar. Sedangkan dari tingkat kesulitan, juga lebih mudah dilakukan pada artikel ini daripada artikel sebelumnya.. Padahal ya sama-sama sulit hehee..
Berikut Cara Memasang Tombol Link Gambar Blog
Silahkan buka menggunakan password panduantemplateblog dan masukkan kode html kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
Keterangan: Tidak ada, silahkan mainkan imajinasi anda :)
Horeee.. capek dah! Terimakasih telah membaca artikel ini, cara memasang tombol link gambar blog
Contoh dalam gambar
Demonya
Harga..
Rp. 1 Trilliun
Penawaran Ini Ditutup
Jika Penjualan Sudah Mencapai 100 Sales
Jika Penjualan Sudah Mencapai 100 Sales
Nantikan mini-site template khusus blogger....
Dengan tidak menggunakan gambar pada tampilan tersebut, hal ini tentunya memiliki keuntungan tersendiri yaitu loading blog lebih cepat daripada yang menggunakan gambar. Sedangkan dari tingkat kesulitan, juga lebih mudah dilakukan pada artikel ini daripada artikel sebelumnya.. Padahal ya sama-sama sulit hehee..
Berikut Cara Memasang Tombol Link Gambar Blog
Silahkan buka menggunakan password panduantemplateblog dan masukkan kode html kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
Keterangan: Tidak ada, silahkan mainkan imajinasi anda :)
Horeee.. capek dah! Terimakasih telah membaca artikel ini, cara memasang tombol link gambar blog
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Memasang Tombol Link Gambar Blog
Cara Membuat Tombol Klik Pada Background Gambar - hmm.. maksudnya apa ya? Saya sendiri juga bingung dengan judul artikel ini, cara membuat tombol klik pada background gambar blog.. Tapi baiklah, karena kita sama-sama bingung mari kita bahas artikel ini agar kebingungan ini tidak menjadi penyakit heheheee. Begini, biasanya saat membuat background gambar pada blog atau didalam artikel dan menyertakan link kedalam background gambar tersebut maka gambar itu sendiri lah yang bisa di klik dan kali ini kita akan membuat tombol klik yang memiliki background!
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1oQWta-JDTfrYXtvbINhiwTB5qEuycj23mjqVr6QBAjRit-ypcD-GICrztcZDO4gzmPp3wy4Rb3JcRJyI21rnDZpjzsxjJiMPZCXoMQwyN-ayabMZuNeO0dxcP_4JMnnNy5Q7UoRjs8/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8MCXhQdS8aueIhipMuL5l-wFydsUGtV5y6mwl7CydSBOfJvBYQ8CrPgnNqkfQjxvVF2-VHacI_6h-FiIsB4Wpb9Q2z7KRgg1wCQDI9hsEoBbDieUL65qLrJnt634gy0n8b1J6IKOsos/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1oQWta-JDTfrYXtvbINhiwTB5qEuycj23mjqVr6QBAjRit-ypcD-GICrztcZDO4gzmPp3wy4Rb3JcRJyI21rnDZpjzsxjJiMPZCXoMQwyN-ayabMZuNeO0dxcP_4JMnnNy5Q7UoRjs8/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8MCXhQdS8aueIhipMuL5l-wFydsUGtV5y6mwl7CydSBOfJvBYQ8CrPgnNqkfQjxvVF2-VHacI_6h-FiIsB4Wpb9Q2z7KRgg1wCQDI9hsEoBbDieUL65qLrJnt634gy0n8b1J6IKOsos/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Cara Membuat Tombol Klik Pada Background Gambar
