Senin, 14 Desember 2015

Cara Membuat Kotak Script di Blogspot

Seringkali ketika saya pribadi mau membagikan tutorial blogger yang baru saya dapatkan dengan kode script tapi belum berhasil disharekan jadi saya biasanya hanya menyimpannya dalam notepad. Pernah juga tidak? Mau berbagi tutorial blogger yang pakai kode-kode script tapi yang keluar malah kode-kode tidak jelas. Maksudnya mau berbagi tapi kode scriptnya malah hilang. Terkadang memang tutorial-tutorial tersebut sudah banyak yang mempublikasikan tapi kalau untuk mensearch lagi bagi saya akan membutuhkan waktu yang lebih banyak lagi. Jadi saya simpan sendiri saja di blog pribadi :D Barangkali kamu juga membutuhkannya ;)

Seperti yang sudah saya omongin di postingan sebelumnya, kali ini saya akan mempostingnya (eh sudah diposting ya) bagaimana cara membuat kotak kode script di postingan blogspot kita.

Caranya klik HTML dulu, jangan yang compose.


Lalu masukkan kode berikut ini.

<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
<div style="background-color: #eaeaea;">
Taruh Kode Script di sini</div>
</div>
</div>

Tulis seperti itu apa ada adanya lalu klik kembali Compose. Baru deh ganti tulisan "Taruh Kode Script di sini" dengan kode script yang sudah kamu siapkan.

Hasilnya akan seperti ini.

Taruh Kode Script di sini


Di mode compose, kamu bisa modifikasi tulisan tersebut dengan front colour lainnya maupun tulisan besar kecil.

Jika kamu bosan dengan tampilan umum di atas, silakan masukkan kode script yang lain di bawah ini.




<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;">.Taruh Kode Script di sini.</div>


<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Taruh Kode Script di sini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Taruh Kode Script di sini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Taruh Kode Script di sini</div>

Silakan diganti juga warna background dengan : background-color: #codewarna
Merubah ketebalan border : border: 4px

Okey, silakan diaplikasikan, kalau sudah berhasil colek saya ya ;)

comments

7 komentar:

  1. oke saya nanti kalau gagal terus, nyamperin ke rumah ya mbaa..hhehe

    BalasHapus
  2. Kalau pakai acara copy paste kode kayak gini ini kadang masih sering takut mau ganti2 hehe...harus pelan2. Salam kenal mbak rani:)

    BalasHapus
    Balasan
    1. sebelum diganti-ganti dibackup dulu buat jaga-jaga biar aman..
      Salam kenal kembali Mbak Sulis, trims sudah mampir ke blog ini

      Hapus
  3. Kalau pakai acara copy paste kode kayak gini ini kadang masih sering takut mau ganti2 hehe...harus pelan2. Salam kenal mbak rani:)

    BalasHapus
  4. aku ga pernah nagsih kode script sih karena ngga pernah ngasih tutorial semacam ini. tapi makasih ya jadi tahu

    BalasHapus
    Balasan
    1. suatu saat pasti akan butuh juga :D

      Hapus

Komentarnya sementara dimoderasi ya 😁 dan jangan tinggalkan link hidup. Nanti BW baliknya lewat profil teman-teman. Terima kasih untuk tidak menggunakan "ANONIM".

Recommendations by Engageya