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

Menambah menu dropdown pada Tabs Horisontal Blogger Standar

Blogger semakin hebat saja, tidak kalah dengan pesaingnya disana. Kini siapa pun dapat memiliki blog dengan penampilan yang menarik.

Ditambah lagi sekarang banyak bermunculan pebloger hebat di tanah air. Sebuah widget blogspot yang satu ini ( Tabs horisontal )boleh dikatakan wajib untuk dimiliki dan dipasang pada blog.

Dengan adanya Navigasi ini maka pengunjung menjadi terbantu dalam mengeksplorasi konten yang ada dalam sebuah blog. Blogger memberi nama navigasi itu dengan sebutan Tabs Horisontal. Blogger menyediakan widget Tabs horisontal yang letaknya berada di bawah Header.  Akan tetapi Tabs horisontal ini tidak akan muncul sebelum kita mengaktifkannya.

Tetapi sayangnya Tabs horisontal bawaan blogger standar tidak dilengkapi dengan submenu atau menu di bawah menu utama, alias dropdown menu, sehingga masih kurang begitu menarik.
Selama ini yang kita tahu untuk dapat membuat navigasi horisontal plus menu dropdown adalah dengan menambahkan banyak css maupun js yang begitu ribed.  Belum lagi setelah diterapkan malah merusak konstruksi template.

Jika saat ini anda sedang mencari tips tentang cara Menambah menu dropdown pada Tabs Horisontal sedangkan template yang dipakai adalah template Blogger yang masih standar, maka anda termasuk orang yang beruntung karena pada kesempatan ini akan saya berikan rahasianya.

Silahkan perhatikan dan ikuti langkah berikut ini :
1. Pastikan bahwa anda memakai template blogger standar (Template bawaan blogger)
2. Pastikan anda telah mengaktifkan fitur Laman.

Kalau belum silahkan aktifkan dulu, caranya lihat gambar di bawah ini :

3. Klik Simpan Setelan
4. Setelah itu masuk ke Edit HTML template
5. Klik Expand Template Widget
6. Cari kode ini ]]></b:skin>
7. Setelah ketemu, masukkan kode berikut ini, tepat di atas kode pada langkah no.6

.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;}

8. cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah kode <b:/loop>.

<li><a href='#'>Menu</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
</ul>
</li>

9. Simpan Template
Jika anda melakukannya dengan benar maka hasilnya seperti pada blog demo berikut ini:
LIHAT DEMO