Membuat Kotak script alternatif Syntax highlighter

membuat Syntax highlighter alternatip

Tentu saja maksud dari membuat kotak script ini untuk membedakan antara posting biasa dengan source kode / script baik itu java script , html , css, php, menampilkan posting script berwarna warni biasa di gunakan kotak untuk menampilkan script pada posting blog biasa para webmaster menyebutnya dengan syntaxhighlighter . Namun karena neng bukan web master maka bukan akan membahas cara membuat highlighter
kenapa demikian,karena menurut neng penggunaan syntak ini malah malah menambah berat loading ... Blog karena menggunakan java script. Apalagi .js yang menggunakan htpp request haduhh.. Bahkan ada salah satu tutorial yang menggunakan file .js yang sangat bertumpuk.. Hmm gilee , bisa nambah berat saja loading blog neng apalagi isi blog 50% isinya file java script lantas adakah cara supaya posting script tetap menarik tapi tidak membuat loading blog makin berat? Jawabannya tentu saja ada, yaitu...

membuat kotak script dengan menggunakan variasi div style

berikut akan neng jelaskan tentang cara membuat kotak ini , dan tanpa memakai syntax highlighter sama sekali..lihat saja textbox di bawah ini. Nampak sekilas seperti mmakai syntaxhighlighter kan

menu

kode html untuk membuat kotak script dengan div style lihat di bawah ini
<div style="width:95%;border:1px solid #900;background:#ddd;padding:2px;margin:0 auto"><div style="font-size:100%;border:1px solid white;background:#888;color:#fff;padding:2px;text-align:center;margin:2px"><b> menu</b></div></div>

<div style="width:95%;border:1px solid #900;background:#ddd;padding:2px;margin:0 auto"><div style="font-size:100%;border:1px solid white;background:#888;color:#fff;padding:2px;text-align:center;margin:2px"><b> menu</b>;</div></div>

Menampilkan posting script berwarna warni

Membuat kotak untuk menampilkan script pada posting blog biasa ...biasa para webmaster menyebutnya dengan syntaxhighlighter . Namun karena neng bukan web master maka bukan akan membahas cara membuat highlighter pada posting blog

Arti dari width,border,dan solid

kode	penjelasannya
arti'width'95%	dalam bahasa indonesia artinya adalah lebar karena nilainya dinyatakan dengan % maka kita dapat mengatur lebar dari halaman yang akan di buat adalah 95% masih menyisakan 5% untuk jarak dari sisi post fungsi width untuk mengatur lebar dari textbox tampilan script sahabat bisa mengatur merubah angkanya sesuai keinginan bila sahabat webtool31 merubah angka 100% = lebar posting full halaman 75%= lebar post script tiga perempat halaman 50%=lebar post setengahnya saja ;
border:1px	pengertian border adalah ketebalan garis satuan ukurannya dinyatakan px artinya adalah pixel , semakin tinggi angka pixelnya maka garisnya akan semakin tebal
solid #900	secara harfiah sih artinya kompak namun untuk arti solid dalam pembuatan seperti css di atas artinya adalah garis pembatas sahabat webtool yang neng hormati nilai dari #900 artinya bahwa garis pembatas tersebut berwarna merah silahkan sahabat lihat kode warna untuk merubah garis pembatas tersebut sesuai dengan keinginan dan selera dari sahabat webtool

Arti dari background,padding,dan margin

kode	penjelasannya
background:#ddd	Arti dari kata tersebut adalah latar belakang dalam kaitannya dengan pembuatan textbox untuk menampilkan posting script ini adalah .. Bahwa latar belakang dari garis tersebut adalah berwarna #ddd lihat kode warna yang tadi
padding:2px	artinya hampir sama dengan border yang membedakannya adalah kalau border adalah ketebalan suatu garis dari luar.. Sedangkan padding ini adalah jarak suatu garis dalam pembuatam css dari dalam .. Dan nilainya biasa dinyatakan dengan px (pixel) semakin tinggi nominal angkanya maka akan membuat garis tersebut semakin lebar atau semakin tebal silahkan atur sesuai selera anda yaa.. Hanya saja neng mengatur lebar paddingnya sebesar 2 pixel
margin:0	pengertian margin adalah jarak ruang kosong dari kotak yang satu ke kotak lainnya

Penjelasan tentang font size, text align dan keterangan

Kode	Penjelasannya
font-size:100%	Dalam penjelasan tentang cara membuat kotak berwarna untuk menampilkan posting dalam sebuah posting pengaturan font ini dapat di sesuaikan besar atau kecilnya font (hurup)
border:1px	Karena pengertian border sudah dijelaskan di atas maka tidak akan menjelaskan secara rinci dari border ini hanya saja border yang ini adalah garis yang berada di dalam kotak posting yang pertama neng mengatur nya dengan ketebalan 1pixel
solid white;	Solid ini sudah di jelaskan di atas
background:#888	background yang pada textbox yang kedua di beri warna gelap
color:#fff	arti dari color #fff ini adalah bahwa warna huruf script dalam kolom warna ini adalah putih
padding:2px;	padding 2px artinya mempunyai jarak 2pixel dari warna ke1
text-align:center;	penjelasanya text align . Untuk menentukan letak dari text yang akan di tampilkan.. Bisa di kiri =text align left , bisa di letakkan di tengah = text align center, bisa di letakkan di kanan .. = kode nya di rubah saja menjadi text align right
margin:2px	Penjelasannya tentang margin ini sudah di jelaskan di atas eaa yaitu untuk membuat garis tentunya
<b> menu</b>	ini yang akan dirubah
</div></div>	karena kotak ini memakai div style maka di tutup dengan kode < / div > < / div > ingat.. Ingat... Kode penutupnya. / tanda div slash..

setelah di rubah beberapa para meternya

<div style="width:95%;border:2px solid #900;background:#055A85;padding:3px;margin:2 auto"><div style="font-size:100%;border:2px solid white;background:#C2EAFE;color:#000;padding:3px;text-align:left;margin:3px"> ¤¤ </div></div>

Setelah memahami beberapa kode untuk membuat kotak script silahkan pariasikan sendiri

membuat kotak higlighter script dengan variasi double border

Setelah memahami beberapa kode untuk membuat kotak script

Share this post