How to Make a Bullet and Numbering Look Neat on Joomla Website

I've had trouble in posting the article that contains the bullet and numbering neatly on my website "almasentra.com". These difficulties is

1. If the bullet or numbering article copied and paste directly from Microsoft Word, the result are always not as I expected. And getting real messy in article format right justified.
2. If the bullet and numbering created using the command facility available on the website, the results are neat but in a smaller size than the font size article, so it looks out of proportion, and odd.
3. If the article’s font size is reduced to fit the default size of bullet or numbering in website, the article would be too small and would reduce the interest of visitors to read

The problem is now solved, the solution is as follows:

1. Prepare your article in Microsoft Word, the font size such as 16pt.
2. Prepare your article in Microsoft Word, the font size such as 16pt.
3. Turn off all orders bullet / numbering contained in article
4. Please copy your article that are free from bullets and numbering commands  and paste to the loading location article on the website
5. Block section that you want to show in the form of bullet / numbering
6. Click the command bullet / numbering available in the command box
7. Click the save command while
8. Then, Click the blue html command
9. Search code <ol> in article html
10. Insert the following code: style = "font-size: 16.0pt;"
11. So it becomes <ol style="font-size: 16.0pt;">
12. Press Save and see the results
13. If the numbering is not appear, insert the following code: margin-left: 7.5pt;
14. So it becomes <ol style="font-size: 16.0pt; margin-left: 7.5pt;">
15. Press save and view the results

Good luck....

CARA MUDAH MENGATASI TAMPILAN NUMBERING BERANTAKAN DI WEB JOOMLA DLL

Saya tidak pernah mengalami kesulitan untuk memposting artikel pada website almasentra.com ketika seluruh artikel yang saya posting seluruhnya berupa paragrap. Tetapi ketika di dalam artikel tersebut ada yang berupa bullet dan numbering, cukup lama saya mengalami kesulitan sampai dengan akhirnya tahu cara mengatasinya. Kesulitan yang saya alami adalah :

1. Jika semua artikel termasuk bagian bullet dan numberingnya dicopy paste dari microsoftword secara langsung, tampilannya di website menjadi berantakan. Terlebih jika kemudian kita klik perintah rata, kadar berantakannya semakin terlihat nyata.
2. Sebaliknya jika bullet dan numberingnya kita atur melalui klik perintah bullet dan numbering, yang kita temui kemudian adalah munculnya font-size bullet dan numbering bawaan yang berukuran lebih kecil dari font size artikel yang kita gunakan, sehingga meskipun rapih tapi jelas terlihat tidak proporsional dan lucu.
3. Jika font-size artikel kita kecilkan menyesuaikan font-size bawaan dari website, problemnya adalah artikel kita menjadi terlihat lembut dan bisa jadi menulitkan bagi para pembaca.  

Bagaimana langkah penyelesaiannya :

1. Siapkan artikel anda dalam bentuk microsoft word, misal dengan font-size 16pt.
2. Matikan perintah bullet/numbering dibagian yang mengandung perintah itu.
3. Silajkan copy paste artikel anda ke lokasi pemuatan artikel
4. Blok bagian yang anda ingin tampilkan dalam bentuk bullet/numbering
5. Klik perintah bullet/numbering yang tersedia di atas space artikel
6. Klik perintah “save” sementara
7. Klik tombol html warna biru
8. Cari di artikel html kode <ol>
9. Sisipkan kode berikut : style="font-size: 16.0pt;"
10. Sehingga menjadi <ol style="font-size: 16.0pt;">
11. Tekan Save dan lihat hasilnya
12. Jika nomornya tidak terlihat, sisipkan lagi kode berikut : margin-left: 7.5pt;
13. Sehingga menjadi <ol style="font-size: 16.0pt; margin-left: 7.5pt;">
14. Tekan save dan Lihat hasilnya pada tampilan artikel bullet/numbering anda
15. Mudah-mudahan bisa mengurangi kesulitan yang ada.

CARA MEMBUAT BACKGROUND GAMBAR TRANSPARAN DI JOOMLA.

Dalam kehidupan masyarakat dari jaman dulu sampai sekarang, maksud baik saja belumlah cukup. Maksud tersebut perlu disampaikan secara baik pula agar menciptakan kesan positif yang cukup membekas dihati penerima. Ibarat jualan nasi pecel meskipun rasanya enak,  tetapi kalau disajikan di atas piring yang tidak bersih pastilah akan menghilangkan selera makan pelanggan. Demikian pula halnya dengan website / blog, perlu dibuat semenarik mungkin akan memberikan kesan pertama yang positif dan  membuat para pengunjung tertarik untuk membaca artikel yang kita sajikan.

Untuk membuat website/blog dapat tampil menarik, selain dapat disiasati dengan pemilihan template, penyajian gambar header, pemilihan menu dropdown dan penyajian image gallery, dapat pula dilakukan melalui pemilihan background yang menarik, bisa berbentuk warna ataupun gambar/image.  Untuk menyajikan website kita dengan background gambar ternyata sangatlah mudah. Ikutilah langkah-langkah berikut, isya Allah jadi.

1.    Simpanlah gambar (jpg, png, gif) yang anda pilih di sebuah folder. Karena saya menggunakan Joomla, gambar saya simpan di folder C:/Xampp/htdocs/Joomla/Template/Beez-20/images.

2.    Silahkan log in ke website anda

3.    Pilih Extension -> Klik Template Manager -> lihat di kolom template (bukan yang kolom style) -> pilih dan klik Active Template anda.

4.    Pilih dan klik “edit css/personal.css, sehingga akan muncul layar yang menampilkan css template anda.

5.    Dibawah note “general”, lihat kode css bagian “body” berikut

body

{

  background-color: #FFFFFF;

  color: #FFFFFF;

  font-family: arial, helvetica, sans-serif;

}

6.    Gantilah kode css “background-color: #FFFFFF;” dengan kode berikut

{

  background: url(../images/namafile.png);

  color: #FFFFFF;

  font-family: arial, helvetica, sans-serif;

}

7.    Save dan lihatlah efeknya pada tampilan website anda

Jika gambar pilihan anda sudah menjadi background, maka teks artikel anda yang berwarna hitam akan menjadi kurang terang jelas terlihat jika overlap dengan bagian gambar background yang berwarna hitam. Oleh karena itu anda masih perlu menyempurnakan dengan mengubah beberapa kode css untuk menghasilkan kontras antara teks artikel dengan background. Caranya,

8.    Ubah kode css warna teks (color: #444444;) dengan kode warna lain, misalnya #FFFFFF; untuk mendapatkan teks warna putih. Kode css tersebut adanya di bawah bagian “body”

#all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
}

Kode warna teks #....... atau sering disebut kode HEX selengkapnya dapat anda cari di sini.

9.    Save dan lihatlah efeknya pada tampilan website anda.

Kemungkinan besar hasilnya belum memuaskan, karena sulit sekali mendapatkan kontras antara satu warna teks dengan gambar yang warnanya beraneka macam. Untuk itu silahkan lanjutkan dengan membuat layer background pada wilayah isi (content area) dengan warna yang anda sukai dengan menambahkan kode css baru dibawah kode css nomor 8 di atas dengan kode “background: #......; sehingga menjadi :

 #all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
  background: #..............;
}

10. Save dan lihatlah efeknya pada tampilan website anda.

Kemungkinan besar hasilnya juga masih belum memuaskan, karena content area tertutup dengan warna pilihan anda. Ini karena warna sistim HEX adalah warna solid. Demikian pula jika anda menambahkan dengan kode/tulisan “transparent” di belakang kode warna HEX, maka yang muncul adalah tranparan 100%. Untuk itu silahkan ubahlah kode di atas menjadi berikut:

#all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
  background:rgba(0, 0, 0, 0.55);
}

11. Save dan lihatlah efeknya pada tampilan website anda.

Mudah-mudahan anda puas, jika tidak puas silahkan mainkan 3 angka sebagai kode warna dan mainkan angka ke empat/terakhir sebagai kode intensitas opacity/transparansi. Saya kira ini adalah kelebihan dari kode warna sistim RGB. Untuk lebih jelasnya tentang kode RGB silahkan lihat di sini.

12. Silahkan coba-coba sendiri dengan warna teks link, heading dsb. Sehingga tampilan website anda bisa cantik, minimal seperti gambar berikut yang aku punyalah. 

Gambar welcome

Selamat mencoba...............

Salam Wongsamin.