Cara Pasang kotak bordiran di postingan Blog

Share on :

Tweet

Dalam mempublikasikan postingan di dalam suatu blog, tentunya kita menginginkan postingan dengan aneka variasi tampilan yang menarik. Agar tampilan postingan lebih bervariasi dan menarik, salah satunya dengan menambahkan kotak bordir atau bingkai pada kata-kata tertentu atau script tertentu.

Beberapa contoh bordiran / bingkai :

MASUKAN TEKS DISINI

Tulisan Anda...

MASUKAN TEKS DISINI

Apakah anda belum tahu tentang cara menambahkan Bordir /bigkai pada Postingan yang ingin anda terapkan. Berikut ini langkah-langkah yang harus diikuti :

1. Login ke blogger.com
2. Klik Entri baru
3. Tulis apa yang mau anda tulis, jika ingin memasang bordir di antara tulisan yang anda buat, maka copy kode dibawah ini (jangan lupa edit pada HTML)
   
   MEMBUAT BORDIR BLOG
   BERGARIS GARIS PUTUS-PUTUS
   <div style="border: 4px #345d15 dashed; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
   GARIS LURUS
   <div style="border: 4px #345d15 ridge; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
   TITIK TITIK
   <div style="border: 4px #345d15 dotted; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
   GARIS LURUS TEBAL
   <div style="border: 4px #345d15 solid; padding: 10px; background-color: #eaeaea; text-align: left"> MASUKAN TEKS DISINI </div>
   LAIN LAIN
   <div style="border: 4px #345d15 inset; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
   
   <div style="border: 4px #345d15 outset; padding: 10px; background-color: #eaeaea; text-align: left;"> MASUKAN TEKS DISINI </div>
   
   BORDIR SCROLL
   <div style="border: 4px #345d15 solid; padding: 10px; background-color: #eaeaea; overflow: auto; height: 60px; width: 260px; text-align: left;"> TULIS MASUKAN TEKS DISINI </div>
   
   
   
   BINGKAY
   
   <div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 1px dashed #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
   
   <div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
   Tulisan Anda...
   </div>
4. Setelah di paste pada edit HTML, kemudian untuk melihatnya ganti pada edit Compose
5. Jika Postingan sudah selesai dibuat maka simpanlah hasil kerja anda.
6. Sebelum dipublikasikan ada baiknya Pratinjau terlebih dulu.

Selamat mencoba...Jangan lupa klik like ya...

Artikel Terkait: