TUTORIAL BLOG

Tutorial Wordpres : Cara Membuat Text Scroll Box Pada Postingan Blog

Tutorial Wordpres : Cara Membuat Text Scroll Box Pada Postingan Blog
text sroll box pada pastingan blog

Mungkin kalian pernah menjumpai scroll box saat mengunjungi blog orang lain. Dimana scroll box ini biasanya berisi text dengan karakter panjang dan bisa di copy. Atau biasanya berisi script html agar pembaca lebih mudah mengcopy nya dan tidak merusak susunan kode nya html tersebut.

Kali ini kami akan memberikan contoh bagaimana cara membuat text scroll box di wordpress, atau bisa kalian terapkan pada blog lain seperti blogger misalnya.

Mari perhatikan script di bawah ini, akan saya jelaskan perinciannya di bawah nanti bagaimana agar kalian bisa meng-custom sendiri ukurannya, atau warna font dan lain lain.

<div style=”padding: 5px; overflow: auto; width: 500; height: 50px; border: 1px solid #000000;”>www.satuaja.com
test sroll text box</div>
<div></div>

Jika script di atas kita terapkan pada postingan blog kita, maka akan mendapatkan tampilan seperti ini.

www.satuaja.com
test sroll text box
500x50px

Contoh kita ingin mengubah lebar dan panjang box nya menjadi 1000 x 500 px maka cukup ubah script pada bagian width dan height menjadi seperti ini :

<div style=”padding: 5px; overflow: auto; width: 1000; height: 500px; border: 1px solid #000000;”>www.satuaja.com
test sroll text box</div>
<div></div>

Dan tampilannya akan menjadi seperti ini.

www.satuaja.com
test sroll text box
1000x500px

Bagaimana menerapkan script html di atas ke postingan kita ?

Oke, selanjutnya mari kita praktekkan bagaimana cara penerapannya ke postingan blog kita.

Pertama buat postingan baru. Klik tampilan dalam teks (bukan visual)

lalu paste script diatas dan sesuaikan ukuran box nya dengan selera kalian.

Tutorial Wordpres : Cara Membuat Text Scroll Box Pada Postingan Blog
text scroll box pada postingan blog

Untuk menambahkan kalimat postingan diluar box, bisa kembali ke tampilan visual editor nya. Akan tampil scroll box kalian dan silahkan tambahkan isi postingan diatas atau bawah diluar scrooll box untuk membuat postingan lengkap.

Lalu bagaimana jika ingin menambahkan pada postingan yang sudah ada ?

ok, jika kalian mau menambahkan scroll box pada postingan yang sudah ada, maka kalian cukup menyisipkannya di bagian mana yang diinginkan.

Perhatikan postingan saya yang sudah ada seperti gambar ini :

text scroll box pada postingan blog

silahkan klik edit, lalu pada tampilan visual kita blok target dimana kita akan tambahkan, contoh ini saya mau menambahkan di bawah tulisan Tambahkan text postingan disini”

Setelah di blok, kita ubah ke tampilan teks, kita sesuaikan kalimat target, dan paste script scroll box nya di bawahnya (ingat, selalu paste setelah code </div>)

Tutorial Wordpres : Cara Membuat Text Scroll Box Pada Postingan Blog
text scroll box pada postingan blog

untuk melihat tampilannya apakah sudah tepat, silahkan kalian cek kembali di tampilan visual pada editornya.

Gimana, mudah bukan ? Jika artikel ini bermanfaat jangan lupa share. Follow kami terus melalui email untuk mendapatkan update artikel selanjutnya.

Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close