Cara menambahkan gambar kotak script pada postingan blog

Hello sobat blogger, kali ini teknowtek akan membahas cara menambahkan kotak script pada postingan blog. Apa sobat tau kotak scrip ini buat apa? dan emang berguna gitu untuk blog kita? Kotak script adalah kotak yang bergambar dan didalamnya kita bisa menambahakan kata-kata. Manfaat nya kotak script ini sangat berguna terutama pada peningkatan SEO dan berguna untuk mempercantik postingan kita and dapat memperjelas saat kita ingin menyampaikan pesan penting atau menambahkan internal postingan pada blog, dapat ditulis didalam kotak script ini agar lebih jelas. Oke mungkin sobat sudah tidak sabar, langsung saja ke tutorial. Cekidot!.

1. Buat Entri baru/ Postingan baru pada blog sobat
2. Pindahakan dari mode Comprese ke HTML
   
3. Paste kan kode HTML berikut ini sobat bisa memilih sesuai keinginan sobat:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kata/kalimat yang akan Sobat tambahkan Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kata/kalimat yang akan Sobat tambahkan Disini</div>

#Untuk tulisan berwarna merah sobat tinggal isi dengan kata/kalimat yang akan sobat tambahkan kedalam kotak script nya.

Mem-paste-kan kedalam postingan blog, ingat dalam posisi mode HTML di entri blognya lalu klik Compose maka sobat bisa melihat hasilnya.

=>Tambahan jika sobat ingin membuat kotak script yang bisa discrol keatas kebawah contoh seperti ini:

#Untuk tulisan berwarna merah sobat tinggal isi dengan kata/kalimat yang akan sobat tambahkan kedalam kotak script nya.

Diatas adalah kode HTML kotak script, setelah sobat mem-paste-kan kedalam postingan blog, ingat dalam posisi mode HTML di entri blognya lalu klik Compose maka sobat bisa melihat hasilnya.

=>Tambahan jika sobat ingin membuat kotak script yang bisa discrol keatas kebawah contoh seperti ini:

Contoh kode html nya seperti berikut ini:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 100px; width: 520px; overflow: auto;">Kode Script Sobat Disini</div>

#Untuk tulisan berwarna biru itu kode untuk membuat scrol didalam kotak scrift. Sobat bisa menempelkannya pada pilihan kotak scrift yang yang tersedia macam pilihannya diatas. tepatnya pada "left; spasi lalu tempelkan kode bertulisan biru tersebut"

Demikian cara membuat kotak script pada blog. Mudah-mudahan dapat membantu kalian semua sob. Jika artikel ini bermanfaat silahkan like dan share, Agar dapat membantu sahabat blogger yang lain. Terimakasih:)

Tweet

Subscribe to receive free email updates: