SSIAGA TRANS
Rabu, 11 Mei 2016

Mengganti Background Template CMS Balitbang Diknas Melalui File Style.css dan Images

Sebelum anda mengotak atik template cms balitbang diknas, ada baiknya anda mengenali bagian-bagian dari template cms balitbang diknas.


1. Nav.png, berupa image format png. Anda bisa mengubah warna image dengan bantuan photoshop dan mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

2. MenuItem.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

3. BlockHeader.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

4. Block-v.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

5. Background Sidebar, untuk menyesuaikan warna nomor 4, anda bisa menggantinya melalui file Style.css di direktori root\public_html\temp\nama_folder-template_anda. Cari kode ini .art-Block-cc, kemudian di bagian background-color di bagian bawahnya, silahkan ganti kode warnanya menyesuaikan warna nomor 4.

6. Block-s.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

7. Block-h.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images. Point 4, 5, 6, dan 7 harus memiliki satu kode warna yang sama agar tampilan Sidebar bisa tampak seperti gambar di atas.

8. Post-s.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

9. Post-h.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

10. Post-v.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

11.  Button.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

12. Background Artikel Wrapper, untuk menyesuaikan warna nomor 8, 9, dan 10, anda bisa menggantinya melalui file Style.css di direktori root\public_html\temp\nama_folder-template_anda. Cari kode ini .art-Post-cc, kemudian di bagian background-color di bagian bawahnya, silahkan ganti kode warnanya menyesuaikan warna nomor 8, 9, dan 10.

Point 8, 9, 10, dan 12 harus memiliki kode warna yang sama agar tampilannya tampak seperti gambar di atas. Jika anda punya kreasi yang lain, silahkan dilanjutkan.

13. Sheet-v.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

14. Sheet-h.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

15. Footer.png, anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images.

16. Sheet-s.png dan Background Outer Wrapper, Untuk Sheet-s.png anda bisa mengganti atau mereplace image di direktori file manajer hostingan anda root\public_html\temp\nama_folder-template_anda\images, dan untuk Background Outer Wrapper anda bisa menggantinya melalui file Style.css di direktori root\public_html\temp\nama_folder-template_anda. Cari kode ini .art-Sheet-cc, kemudian di bagian background-color di bagian bawahnya, silahkan ganti kode warnanya menyesuaikan warna nomor 13 dan 14.

Point 13, 14, dan 16 juga harus memiliki kode warna yang sama agar tampilannya tampak seperti gambar di atas.

Secara garis besar, template CMS Balitbang Diknas yang diperlihatkan dari halaman yang dihasilkan, dan selain antara tag <head> dan </head>, template CMS Balitbang Diknas terdiri dari beberapa bagian, yaitu:
1. Header dan Footer
2. Menu Bar dan Sub Menu (Nav, MenuItem, dan Subitem)
3. Outer Wrapper (Sheet)
4. Main Wrapper atau Artikel Wrapper (Post), dan
5. Sidebar (Block)

Dari point 1 sampai 16 di atas, memberikan sedikit gambaran kepada anda tentang template Website Sekolah CMS Balitbang Diknas. Dan ini merupakan point yang sangat penting untuk membantu anda menciptakan template-template CMS Balitbang Diknas dengan nuansa yang lebih dinamis dan elegan, sedap dipandang mata dan semakin betah mengelola website sekolahnya.

Anda juga bisa melihat-lihat template CMS Balitbang Diknas karya Widiyanto sebagai bahan rujukan bersama dengan tutorial ini anda bisa belajar membuat template sendiri. Uppz, template karya Widiyanto mempunyai Password, jika anda menginginkannya silahkan request sendiri ke orangnya.

Sampai di sini anda telah berhasil mengganti background template CMS balitbang Diknas sesuai dengan selera anda sendiri.