• Latest Posts

    26/07/14

    [Tutorial] Cara Membuat Kotak Teks/Script Pada Postingan Blog

    [Tutorial] Cara Membuat Kotak Teks/Script Pada Postingan Blog - Kali ini BiteBrands akan menyajikan tutorial atau cara membuat kotak teks yang biasanya sering dipakai untuk menampilkan kode atau script. Kotak teks sangat diperlukan terutama untuk memisahkan dan membedakan kode dengan teks lainnya. Dengan kotak teks, kode tidak tercampur dengan teks lain sehingga postingan tutorial sobat akan terlihat rapi dan bersih.

    Tutorial cara membuat teks dalam kotak ini cepat dipahami dan mudah dipraktikkan oleh sobat yang ingin membuat postingan di Blospot. Umumnya teks dalam kotak sering dipakai pada postingan tutorial blogging dan sobat pun bisa langsung mencobanya. Kotak teks akan menampilkan garis bagian luar atau border yang berwarna dan bisa diatur tampilannya.

    Turorial Membuat Kotak Teks

    1.Masuk ke akun Blogger, klik Entri Baru
    2. Masuk ke dalam HTML pada form postingan


    3. Kopi kode/script berikut ini ke bagian dalam HTML pada postingan

    <div style="border: 3px #1780dd inset; padding: 10px;background-color:#ffffff;
    text-align: left;">
    Klik di Sini.</div>

    4.Masuk ke dalam Compose, dan lihat perbedaannya, klik dalam teks, lalu hapus Klik di Sini, dan   ganti dengan teks yang sobat inginkan

    Keterangan:
    border: 3px  = Ketebalan kotak teks
    inset  = Tampilan kotak bagian luar atau border
    selain inset ada pula: dashed, dotted, Double, groove, solid, outset, ridge
    padding: 10px = Panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting
    background-color:#ffffff = Warna garis luar kotak atau border

    text-align: left = Perataan teks, selain left bisa sobat ganti dengan center atau right

    Jika kode yang dipasang pada postingan terlalu panjang, maka sobat perlu membuat kotak teks yang mempunyai scroll agar postingan terlihat ringkas. Untuk membuat kotak teks dengan scroll, lakukan langkah-langkah seperti di atas, namun dengan kode berikut ini.

    <div style="background-color: white; border: 3px #1780dd inset; height: 30px; overflow: auto; padding: 10px; text-align: left; width: 400px;"> Klik di sini, Ganti dengan teks yang sobat inginkan</div>

    Demikian, tutorial cara mudah dan cepat membuat kotak teks atau kode script pada postingan Blogger. Silakan mencoba dan semoga bermanfaat bagi sobat sekalian. (bitebrands)





    Artikel Menarik:
    • Blogger Comments
    • Facebook Comments

    0 komentar:

    Poskan Komentar

    Item Reviewed: [Tutorial] Cara Membuat Kotak Teks/Script Pada Postingan Blog Rating: 5 Reviewed By: biteb rands
    Scroll to Top