Cara Edit Header cmssekolahku Menjadi Tidak Full

Masih dalam edisi modifikasi template cmssekolahku, kali ini saya mulai dari atas dulu yaitu bagian header, karena bagian ini adalah bagian yang pertama kali dilihat oleh pengunjung.  Modifikasi header dalam hal ini akan kita buat agar header tidak full.

Lebar header akan kita rubah ukurannya dari 960px menjadi 980px, jadi ada tambahan 20px .  Ukuran ini menurutku cukup, tidak terlalu lebar atau terlalu sempit.
Ok, langsung saja kita mulai:
1. Buka file custom.css lokasinya di assets\frontend\css\custom.css
Cari kode ini:

/* Pengaturan blok warna background body */
body {
background: #fff;
}
/* Pengaturan blok warna background top header */
#top-bar {
background: #20303f;
}

/* Pengaturan blok warna background header */
#primary-header {
background: #2ecc71;
}

/* Pengaturan blok warna background samping kanan kiri tree menu / dropdown menu */
#fixed-wrapper {
background: #34495e;
}

/* Pengaturan blok warna background menu */
#primary-navigator {
background:#20303f;
}

2. Ganti dengan code ini:

/* Pengaturan blok warna background body */
body {
background: #dddddd;
}
/* Pengaturan blok warna background top header */
#top-bar {
background: transparent;
}

/* Pengaturan blok warna background header */
#primary-header {
background: transparent;
}

/* Pengaturan blok warna background samping kanan kiri tree menu / dropdown menu */
#fixed-wrapper {
background: transparent;
}

/* Pengaturan blok warna background menu */
#primary-navigator {
background:transparent;
}

Kode diatas adalah untuk merubah backround header menjadi transparan.

3. Cari kode ini:

#primary-header .header{
position: relative;
width: 960px;
margin: 0 auto -5px auto;
padding: 0;
}

Ganti dengan kode ini:

#primary-header .header{
position: relative;
width: 980px;
margin: 0 auto -5px auto;
padding: 0;
}

4. Buka file style.css lokasinya di assets\frontend\css\style.css
Cari kode ini:

#top-bar {
width: 100%;
border-bottom: 1px #ddd solid;
}

Ganti dengan kode ini:

#top-bar {
width: 100%;
}
#top-bar .container{
width: 980px;
background: #34495E;
}

Kode di atas bertujuan untuk menghilangkan border bawah top-bar, menambah wadah untuk menu dengan ukuran 980px

5. Cari kode:

#primary-navigator-list {
width: 960px;
}

Ubah menjadi

#primary-navigator-list {
width: 980px;
background:#20303F}

6. Cari kode ini:

#news-ticker li{ list-style: none;
color: #dcdcdc;
width: 960px;
padding: 0;
}

Ganti dengan kode ini:

#news-ticker li{ list-style: none;
color: #dcdcdc;
width: 970px;
padding-left: 10px;
}

7. Cari Kode ini:

#clock{ position: absolute;
left: 0;
top: 6px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
}

Ganti dengan kode ini:

#clock{ position: absolute;
left:10px;
top: 6px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
}

8. Buka file typography.css lokasinya di assets\frontend\css\ typography.css
Cari kode ini:

.container{
position: relative;
width: 960px; margin: 0 auto;
padding: 0; }

Ganti dengan kode ini:

.container{
position: relative; width: 960px;
margin: 0 auto; padding: 0 10px; }

Itulah tadi tutorial Cara Edit Header cmssekolahku Menjadi Tidak Full.
Selamat Berkreasi.

Panduan Modifikasi Template Cmssekolahku Lanjutan

Template cmssekolahku untuk saat ini memang belum tersedia pilihan tema seperti blogspot dan wordpress, yang memungkinkan pengguna dapat dengan mudahnya mengganti template. User hanya cukup dengan mengklik menu tema maka tidak berapa lama tema pun berubah. Atas keterbatasan inilah maka siapapun yang menggunakan cmssekolahku dituntut untuk lebih kreatif apabila ingin memiliki tampilan website sekolahnya terlihat menarik.

Beberapa waktu yang lalu saya telah menulis Panduan Modifikasi Template Cmssekolahku, dan kali ini merupakan lanjutan dari tulisan saya sebelumnya. Baiklah mungkin anda sudah tidak sabar untuk itu langsung saja kita mulai memodifikasi template cmssekolahku.

Pertama anda harus Membackup seluruh file yang berkaitan dengan template. Hal ini menjadi bagian yang sangat penting, karena untuk menghindari hal buruk yang bakal terjadi sehingga nantinya tinggal mengembalikandengan file beckup-an. Jika sudah, lanjutkan dengan langkah berikut ini:

1. Download file modifcms-sekolahku.zip (Link download di akhir postingan)
2. Ekstrak file zip tadi maka anda akan menemukan folder bernama modifcms-sekolahku, yang isinya file custom.css, style.css, typography.css, M_global.php, readmore.php, index.php, dan sebuah gambar png bernama homwit.png.
3. Replace file custom.css yang berada di folder assets\frontend\css\ ganti dengan file custom.css yang tadi anda download.
4. Replace file style.css yang berada di folder assets\frontend\css\ ganti dengan file style.css yang tadi anda download.
5. Replace file typography.css yang berada di folder assets\frontend\css\ ganti dengan file typography.css yang tadi anda download.
6. Replace file M_global.php yang berada di folder application\model\ ganti dengan file M_global.php yang tadi anda download.
7. Replace file readmore.php yang berada di folder application\views\frontend ganti dengan file readmore.php yang tadi anda download.
8. Replace file index.php yang berada di folder application\views\frontend ganti dengan file index.php yang tadi anda download.
9. Masukkan file image homwit.png ke folder assets\frontend\img\theme\

Bila semuanya sudah, sekarang buka web anda, jika belum ada reaksi tunggu satu menit lalu refresh browsernya dan lihat perubahannya, website sekolah cmssekolahku tampak lebih menawan.

Download file modifcms-sekolahku.zip

Password: www.notesku.com

Mencoba Modifikasi Template cmssekolahku

Beberapa waktu yang lalu aku browsing tentang website sekolah ternyata menemukan CMSSEKOLAHKU. Fitur-fiturnya sudah lumayan cukup memenuhi kebutuhan web sekolah. Cmssekolahku ini masih tergolong baru dan masih membutuhkan pengembangan baik dari segi plugin maupun tema atau template, agar ke depan bisa lebih baik lagi.

Sebagai seorang yang sedang belajar, kehadiran cmssekolahku lumayan membantuku dalam mengasah keterampilan me-layout sebuah halaman web. Memang yang namanya belajar pasti butuh pengorbanan terutama waktu dan kuota internet. Namun semua itu akan terbayar manakala bisa menghasilkan karya yang sesuai harapan qolbu.

Dalam memodifikasi template cmssekolahku ada beberapa elemen yang kurubah, terutama pada style.css dan custom.css. Lebar halaman ditambah jadi 980px, ada tambahan 20pixel. Header juga dibuat tidak full, ada ruang di sisi kiri dan kanan header.

Layout Frontpage masih tetap tiga kolom namun ada pengurangan margin di aside-primary, sedangkan ketika buka readmore tampilan berubah menjadi dua kolom yaitu dengan membuang aside-primary. Hal ini dimaksudkan agar ada pebedaan tampilan antara Frontpage dengan halaman Post.

Perubahan lainnya adalah pada nabigasi utama primary-navigator dimana tulisan Home diganti dengan gambar icon rumah putih, sehingga menimbulkan kesan artistik. Hal serupa juga dilakukan pada RSS dan Peta Situs yang dirubah dari text menjadi image.

Dengan sedikit sentuhan seperti yang diuraikan di atas, maka tampilan website sekolah tidak kaku lagi dan akan dapat memanjakan mata pengunjung.

Itulah hal-hal yang aku lakukan dalam Modifikasi Template cmssekolahku. Hasilnya bisa anda lihat pada gambar di bawah ini, Klik Gambarnya biar besar. Sedangkan untuk Panduan cara modifikasinya akan saya share pada postingan berikutnya. Tunggu saja tanggal mainnya. Bersambung kesini...
Selamat Berkarya.

Klik Gambar berikut ini biar jelas

Software Ringan Untuk Menggambar di Laptop

Banyak orang beranggapan bahwa menggambar di laptop adalah sangat sulit, karena media yang digunakan berbeda dengan kebiasaan dalam menggambar pada umumnya. Yah benar apalagi jika menggunakan mouse kalau tidak sabar dan hati-hati tidak akan bisa mendapatkan hasil yang memuaskan.

Sebenarnya ada banyak software untuk menggambar, misalnya Paint bawaan microsoft Windows, PhotoShop, Corel Draw, bahkan PowerPoint pun bisa digunakan untuk menggambar di laptop. Tentu masing-masing mempunyai kekurangan dan kelebihan.

Dari sekian banyak software menggambar setelah saya coba ternyata ada satu sofware untuk menggambar di laptop yang sangat ringan. Sofware ini berasal dari negeri sakura Jepang, namanya “PaintTool SAI”. Awalnya PaintTool SAI diciptakan khusus untuk animator jepang dalam membuat komik, namun kini sudah banyak beredar dan banyak digunakan oleh masyarakat umum.

Saya memang tidak jago banget dalam urusan gambar-menggambar, namun dengan PaintTool SAI ternyata saya bisa membuat gambar seperti ini:

Download MPI Prakarya Alat Penjernih Air

Media Pembelajaran Interaktif memang sangat membantu guru dalam mengajar siswa-siswinya di kelas. Guru tidak capek menulis di papan tulis, cukup dengan menayangkan media pembelajaran di layar proyektor. Bagi siswa juga mendapatkan pengalaman yang tidak membosankan.

MPI Prakarya Alat Penjernih Air ini sengaja saya bagikan kepada bapak/ibu guru agar dapat digunakan dalam pembelajaran di kelas.

Silahkan didownload dan bagikan kepada teman guru se Indonesia. MPI Prakarya Alat Penjernih Air saya buat dengan menggunakan PowerPoint 2010 dengan setingan Page setupnya On-screen Show (19:9) sehingga tampilannya melebar Full Screen layar Laptop. Dan ketika ditayangkan di Proyektor tampilannya landscape seperti layaknya layar lebar cinema.

Pasti dalam MPI Prakarya kelas 7 yang saya buat ini banyak kekurangan untuk itu saya mohon maaf, dan silahkan bapak/ibu kembangkan sendiri agar lebih menarik lagi.

DOWNLOAD MPI Prakarya Alat Penjernih Air

Teknik Menyambung Image Tanpa Terlihat Batasnya

Dalam desain grafis sering kita jumpai poster yang terdiri dari banyak gambar dimana satu dengan lainnya menyatu dan tidak nampak batas sambungannya. Contohnya seperti gambar di bawah ini:

Untuk membuat gambar seperti itu kita bisa menggunakan software namanya Corel Photo-Paint. Software Corel Photo-Paint adalah bagian dari paket program Corel Draw. Jadi jika kita menginstall Corel Draw biasanya secara default akan terinstal pula program Corel Photo-Paint nya.
Baiklah langsung saja kita mulai mempraktekkan menyambung foto:

1. Jalankan Program Corel Photo-Paint
2. Buat File baru
3. Import Image
4. Gunakan tool untuk membuat efek transparan (Object Transparancy)
5. Simpan Gambar tersebut dalam format jpg atau png terserah anda.

Bagaimana,..? masih belum jelas silahkan tonton video tutorialnya berikut ini:

Menggambar Pohon dengan Paint Windows 7

Paint, adalah sebuah program bawaan MS. Windows. Setiap komputer yang menggunakan operating system Windows sudah pasti akan secara otomatis Paint ikut terinstal. Sehingga pengguna tidak akan mengalami kesulitan tentang cara mendapatkan software Paint. Program ringan ini sering dilupakan orang karena toolnya sangat sederhana dan terbatas. Maka wajar saja kalau orang meninggalkannya dan mencari software grafis yang mudah dan lengkap.

Padahal dibalik kesederhanannya ternyata memiliki kemampuan yang tidak kalah dengan program sejenisnya. Berikut ini akan saya beberkan salah satu kemampuan dari software Paint di windows 7, yaitu mampu digunakan untuk menggambar pohon. Yuk ikuti tutorialnya:

1. Jalankan Program Paint, Klik Start >> Accessories >> Paint
2. Buat garis, pilih garis lengkung agar bisa dibuat lengkung dengan bebas
3. Buat sedemikian rupa hingga membentuk seperti layaknya batang pohon
4. Buat daun, pilih gambar shape lalu drag di atas batang pohon
5. Hapus bagian yang tidak diperlukan
6. Beri warna yang sesuai dengan pohon

Untuk lebih jelasnya, silahkan lihat video tutorial Menggambar Pohon dengan Paint Windows berikut ini:

Teknik Menjiplak Foto dengan PowerPoint

Menggambar wajah manusia memang sangat sulit, apalagi jika menggunakan laptop. Tentu diperlukan bakat, kemahiran dan daya imajinasi yang mumpuni untuk dapat menggambar wajah seseorang dengan sempurna.

Kalau ingat masa kecil dulu sewaktu masih di SD disuruh menggambar oleh guru, aku nggak mau ambil pusing, ngapain susah-susah tinggal nyari gambar yang bagus lalu jiplak gambar itu, maka persoalanpun teratasi dengan sempurna hehe.....
Terinspirasi dari itu maka pada kesempatan ini, aku ingin bagikan tips menggambar wajah dengan Teknik Menjiplak Foto dengan menggunakan program PowerPoint.

Bagaimana caranya ? Yuk kita simak tutorial berikut ini:

1. Jalankan MS.PowerPoint (saya memakai PowerPoint 2010)
2. Insert Foto yang akan dijiplak
3. Timpa Foto itu dengan Rectangle dan diberi efek warna background putih transparan, sehingga foto terlihat samar-samar
4. Klik Insert >> Pilih FreeForm
5. Lalu klik mengikuti gambar foto, lakukan secara hati-hati
6. Jika sudah, tinggal diberi warna

Bagimana... Bingung khan...? makanya tonton video tutorial Teknik Menjiplak Foto dengan PowerPoint
berikut ini :