Monday, March 18, 2013

Tutorial Oprek Header CMS Formulasi

5 comments

CMS Formulasi merupakan cms favorit saya. Sejak kemunculannya, cms yang terinstal dalam web madrasah tempat saya mengajar, langsung saya ganti dengan cms formulasi. Sekedar informasi, sebelumnya web MTs Muhammadiyah 10 Purbalingga yang beralamat http://www.mtsmuh10pbg.sch.id/, menggunakan cms Wordpress dan kemudian cms Balitbang.

CMS Formulasi benar-benar memenuhi keinginan saya, yaitu cms yang simple, ringan dan mudah dioperasikan. Terlebih lagi, CMS Formulasi sudah sangat SEO friendly.

Meskipun demikian, agar tampak lebih menarik dan sesuai dengan karakter MTs Muhammadiyah 10 Purbalingga, ada beberapa bagian yang perlu diedit. Salah satunya adalah bagian header. Header asli bawaan cms formulasi dengan tema premium3 tampak seperti gambar berikut:

clip_image002[4]

Dan setelah dioprek maka menjadi seperti :

clip_image004[4]

Agar tampilan header berubah menjadi seperti gambar no.2, ada 4 elemen yang perlu di“face off”. Keempat elemen tersebut adalah:

1. mengganti logo

2. mengganti teks nama sekolah dengan gambar

3. mengganti background header

4. menghilangkan header flash.

Langkah-langkah oprek header cms formulasi

1. Untuk mengganti logo:

  • sediakan logo sekolah Anda
  • masuk ke adminpanel cms formulasi
  • klik menu Informasi Sekolah >> Informasi Sekolah>>Ganti Logo>>Browse>>Update
  • Jika ingin merubah ukuran logo, Anda dapat melakukannya dengan cara :
    • Masuk ke cpanel hosting
    • Cari file header.php pada tema yang Anda gunakan
    • Klik kanan header.php dan pilih edit
    • Temukan script :

echo "<a href='index.php' title='Halaman Depan'><img src='images/$l[isi_pengaturan]' width='70px' alt='Logo sekolah'></a>"

    • Ganti angka ‘70px’ dengan ukuran yang Anda kehendaki.
    • Terakhir, save changes.

2. Mengganti Teks Nama Sekolah dengan Gambar

Default, nama sekolah berbentuk taks lengkap dengan alamat. Tulisan nama sekolah tersebut otomatis muncul sesuai dengan nama sekolah yang ditulis di adminpanel.

Jika Anda ingin teks tersebut tampak lebih artistik, Anda dapat menggantinya dengan image atau gambar yang telah Anda persiapkan. Langkahnya :

  • Persiapkan gambar dengan background transparent (berformat .gif atau .png yang dibuat dengan photoshop atau coreldraw) dengan ukuran yang sama dengan tulisan header tersebut. Sebagai contoh, ukuran yang digunakan pada tema premium3 adalah 468px X 60px.
  • Upload gambar tersebut di folder img pada tema yang Anda gunakan (misal : public_html/file/tema/formulasi_sltp/css/img
  • Cari file header.php pada tema yang Anda gunakan
  • Klik kanan header.php dan pilih edit
  • Temukan script :

<h1 style="float:left;margin-top:8px;margin-bottom:0px;"><a href="index.php" title="Kembali ke halaman utama"><?php echo "$ns[isi_pengaturan]";?></a> </h1>

<p style="float:left;margin-left:5px;"><b><?php echo "$a[isi_pengaturan]";?></b></p>

  • Ganti script berwarna merah dengan <img src=”http://www.situssekolahanda.sch.id/file/tema/formulasi_sltp/css/img/namafile.png”> (sesuaikan alamat situs, folder tempat menyimpan gambar untuk header dan nama file gambar)
  • Hapus script yang berwarna biru
  • Terakhir, save changes.

3. Mengganti background header

Bandingkan dua gambar di atas. Gambar asli cms formulasi, menunjukkan background tanpa gambar dan hanya berwarna putih. Sedangkan gambar kedua terdapat background gambar aktifitas siswa.

Anda dapat merubah background header tema yang Anda gunakan dengan gambar yang sesuai karakter sekolah/ madrasah Anda. Berikut ini langkah-langkahnya :

  • Persiapkan gambar dengan format .gif, .png atau .jpg dan sesuaikan dengan ukuran lebar header. Jika tidak salah, ukuran lebar header cms formulasi adalah 960px.
  • Upload gambar tersebut di folder img tema yang Anda gunakan. Misal di public_html/file/tema/premium3/css/img/
  • Cari file header.php pada tema yang Anda gunakan
  • Klik kanan header.php dan pilih edit
  • Temukan script : <div id="header">
  • Selanjutnya edit script tersebut dengan menambahkan : style="background:url(http://www.websitesekolah.sch.id/file/tema/premium3/css/img/namafile.png)no-repeat;height:126px;margin-bottom:-12px;" Sehingga menjadi : <div id="header" style="background:url(http://www. websitesekolah.sch.id/file/tema/premium3/css/img/namafile.png)no-repeat;height:126px;margin-bottom:-12px;">
  • Terakhir, save changes.
  • Catatan :
    • Langkah f : height:126px adalah untuk mengatur tinggi header dengan menyesuaikan tinggi gambar background Anda. Sedangkan margin-bottom:-12px adalah untuk mengatur jarak header dengan bagian di bawahnya.
    • Pada langkah c, jika Anda menggunakan tema sltp (atau paud, sd, slta) maka yang harus Anda edit adalah script css-nya. File tersebut terletak pada folder public_html/file/tema/formulasi_sltp/css/style.css
    • Dalam file style.css tersebut temukan script : #header { background:#f3f3f3 url(img/header.jpg) repeat-x; dan ganti header.jpg dengan nama file gambar header Anda.

4. Menyembunyikan header flash

Jika Anda menggunakan cms formulasi dengan header flash, padahal Anda tidak menginginkannya, Anda dapat menyembunyikannya. Caranya :

  • Cari file header.php pada tema yang Anda gunakan
  • Klik kanan header.php dan pilih edit
  • Temukan script : <div class="fl_right">
  • Tambahkan script berikut : style="visibility:hidden;"
  • ehingga menjadi <div class="fl_right" style="visibility:hidden;">
  • Terakhir : save changes.

Demikian tutorial sederhana oprek header cms formulasi. Semoga bermanfaat.

 

clip_image001Penulis :

Nama : Sodikin, S.Ag.

Kepala MTs Muhammadiyah 10 Purbalingga

Pengelola blog : http://www.pak-sodikin.com

: http://www.gurumts.com

Baca Selengkapnya ►