Panduan dan fungsi Menu Admin Web CMS Sekolahku

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini saya akan shere mengenai Fungsi-fungsi menu Admin Panel CMS Sekolahku.

A. Pengertian
     CMS sekolahku adalah (Content Management System) dan PPDB Online GRATIS untuk sekolah SD, SMP/Sederajat, SMA/Sederajat yang diberi nama CMS Sekolahku. CMS ini dibuat dengan konsep jangka panjang dengan pengembangan yang cepat dan kemudahan dalam pengelolaannya.

B. Penjelasan
    Untuk masuk ke admin panel, gunakan username dan password administrator, Itu adalah username dan password default yang dipakai oleh CMS sekolahku. Di bawah ini adalah tampilan admin panel CMS Nya.

Berikut adalah Fungsi-fungsi Menu yang ada di Admin Panel.

Sekian dari saya bila ada kurang dan salah saya mohon ma'af, Terimakasih.

Wassalamu'alikum Wr Wb.

Read More

Workshop PHP Indonesia di BLC Telkom Klaten

Assalamu'alaikum Wr Wb.

Hari Minggu, 23 Oktober 2016, Hari ini adalah hari yang sangat berharga bagi saya karena saya dan teman-teman mendapat kesempatan langsung untuk mengikuti Workshop PHP Indonesia yang kedua kalinya di BLC Telkom Klaten, dan kami mendapat materi langsung dari para master PHP Indonesia, dan juga kami di ajarkan untuk membuat kalkulator/mesin hitung.

A. Pengertian
    Mesin hitung atau Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika  tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone bahkan sampai  jam tangan.

Berikut Dokumetasi saat mengikuti, Workshop PHP Indonesia.

B. Materi

1. Pertama-tama saya dan teman-teman disuruh untuk membuat folder, dan membuat file index.php, di /var/www/html. dan berisi script-script dibawah ini.

 Lalu jalankan di browser, dan jika tidak error maka tampilannya akan seperti di bawah ini.

2. Kemudian buat file dengan nama tambah.php, di folder yang sama.

 Lalu jalankan di browser, dan tampilannya akan seperti di bawah ini.

C. Kesimpulan
    Kita bisa membuat Kalkulator sendiri dengan menggunakan script script.

Sekian dari saya semoga bermanfaat dan selamat mencoba.

Wassalamu'alaikum Wr Wb. 

Read More

Langkah membuat Sub Menu di CMS Sekolahku

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini saya akan shering mengenai langkah membuat sub menu pada cms sekolahku. Langsung saja penjelasannya.

A. Pengertian
    CMS adalah aplikasi komputer yang mendukung penciptaan dan modifikasi konten digital menggunakan antarmuka sederhana untuk abstrak pergi rincian tingkat rendah kecuali diperlukan, biasanya mendukung beberapa pengguna bekerja di lingkungan kolaboratif.

B. Latar Belakang
    Latar Belakangnya adalah agar tampilan CMS sekolahku lebih menarik, dan tidak membosankan.

C. Maksud dan Tujuan
    Agar menunya lebih banyak, dan jurusannya sesuai dengan jurusan yang ada di sekolah saya

D. Jangka Waktu
    Saya membutuhkan waktu sekitar kurang lebih 20 Menit.

E. Alat dan Bahan

• Laptop/PC
• CMS Sekolahku

F. Tahap Pelaksanaan

1. Pertama-tama masuk ke halaman administrator/Dashboard CMS Sekolahku.

2. Kemudian klik Menu "pages, Add New" dan buat nama menunya, di sini saya membuat nama menunya dengan nama "Kejuruan"

3. Lalu buat menu yang ada di dalam menu Kejuruan, saya membuat menu kejuruan sesuai dengan kejuruan yang ada di sekolah saya, yaitu Mutimedia dan Rekayasa Perangkat Lunak.
4. Selanjutnya kita buat menu Rekayasa Perangkat Lunak.

5. dan buat menu lagi dengan nama Multimedia.

6. Selanjutnya kita lihat, dan hasilnya seperti di bawah ini.

G. Hasil dan Kesimpulan
    Kita bisa membuat sub menu sesuai dengan keinginan kita sendiri.

H. Referensi

• http://sekolahku.web.id/ 

Sekian dari saya bila ada salah dan kurang saya mohon maaf, terimakasih selamat mencoba.

Wassalamu'alikum Wr Wb.

Read More

Pengertian Komputer

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini saya akan shering mengenai Komputer. Langsung saja penjelasannya.

A. Pengertian
    Komputer adalah alat yang dipakai untuk mengolah data menurut prosedur yang telah dirumuskan. Kata computer pada awalnya dipergunakan untuk menggambarkan orang yang perkerjaannya melakukan perhitungan Aritmatika dengan atau tanpa alat bantu, tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri. Asal mulanya, pengolahan informasi hampir eksklusif berhubungan dengan masalah aritmetika, tetapi komputer modern dipakai untuk banyak tugas yang tidak berhubungan dengan Matematika
Dalam arti seperti itu terdapat alat seperti slide rule, jenis kalkulator mekanik mulai dari abakus dan seterusnya, sampai semua komputer elektronik yang kontemporer. Istilah lebih baik yang cocok untuk arti luas seperti "komputer" adalah "yang mengolah informasi" atau "sistem pengolah informasi." Selama bertahun-tahun sudah ada beberapa arti yang berbeda dalam kata "komputer", dan beberapa kata yang berbeda tersebut sekarang disebut sebagai komputer.
Kata computer secara umum pernah dipergunakan untuk mendefiniskan orang yang melakukan perhitungan aritmetika, dengan atau tanpa mesin pembantu. Menurut Barnhart Concise Dictionary of Etymology, kata tersebut digunakan dalam bahasa Inggris pada tahun 1646 sebagai kata untuk "orang yang menghitung" kemudian menjelang 1897 juga digunakan sebagai "alat hitung mekanis". Selama Perang Dunia II kata tersebut menunjuk kepada para pekerja wanita Amerika serikat dan Inggris yang pekerjaannya menghitung jalan artileri perang dengan mesin hitung.
Charles Babbage mendesain salah satu mesin hitung pertama yang disebut mesin analitikal. Selain itu, berbagai alat mesin sederhana seperti slide rule juga sudah dapat dikatakan sebagai komputer.

B. Jenis Komputer

1. Komputer Benam.
 Sekitar 20 tahun yang lalu, banyak alat rumah tangga, khususnya panel dari permainan vidio juga mencakup telepon genggam, perekam kaset video, PDA dan banyak sekali dalam rumahtangga, industri, otomotif, dan alat elektronik lain, semua berisi sirkuit elektronik seperti komputer yang memenuhi syarat Turing-lengkap di atas (dengan catatan bahwa program dari alat ini seringkali dibuat secara langsung di dalam chip ROM yang akan perlu diganti untuk mengubah program mesin). Maksud khusus komputer yang lain secara umum dikenal sebagai "mikrokontroler" atau "komputer benam" (embedded computer). Oleh karena itu, banyak yang membatasi definisi komputer kepada alat yang maksud pokoknya adalah pengolahan informasi, daripada menjadi bagian dari sistem yang lebih besar seperti telepon, oven mikrowave, atau pesawat terbang, dan dapat diubah untuk berbagai maksud oleh pengguna tanpa modifikasi fisik. Komputer kerangka utama, minikomputer, dan komputer pribadi (PC) adalah macam utama komputer yang mendapat definisi ini.

2. Komputer pribadi
    Komputer pribadi atau personal computer (PC) adalah istilah untuk komputer yang banyak diketahui orang pada umumnya sehingga banyak orang yang tak akrab dengan bentuk komputer selain komputer pribadi. Hanya orang-orang tertentu saja yang memakai istilah ini secara eksklusif untuk menunjukkan istilah yang lebih spesifik dan tepat.
Komputer pribadi diperkenalkan pertama kali di Indonesia pada tahun 1980 oleh almarhum Eddy Liew, pendiri Dragon Computer & Communication melalui merek Sinclair yang berasal dari Inggris.

C. Komponen - komponen Komputer

1. Processor
2. Memory
3. Motherboard
4. Casing
5. Power Suplay
6. CDRom
7. Monitor
8. VGA
9. Hardisk

D. Kinerja Komputer
    Saat teknologi yang dipakai pada komputer digital  sudah berganti secara dramatis sejak komputer pertama pada tahun 1940 -an (lihat Sejarah perangkat keras menghitung untuk lebih banyak detail), komputer kebanyakan masih menggunakan arsitektur Von Neumann, yang diusulkan pada awal 1940-an oleh John von Neumann.

1. Memori
    Di sistem ini, memori adalah urutan byte yang dinomori (seperti "sel" atau "lubang burung dara"), masing-masing berisi sepotong kecil informasi. Informasi ini mungkin menjadi perintah untuk mengatakan pada komputer apa yang harus dilakukan. Sel mungkin berisi data yang diperlukan komputer untuk melakukan suatu perintah. Setiap slot mungkin berisi salah satu, dan apa yang sekarang menjadi data mungkin saja kemudian menjadi perintah.
Memori menyimpan berbagai bentuk informasi sebagai angka biner. Informasi yang belum berbentuk biner akan dipecahkan (encoded) dengan sejumlah instruksi yang mengubahnya menjadi sebuah angka atau urutan angka-angka. Sebagai contoh: Huruf F disimpan sebagai angka desimal 70 (atau angka biner) menggunakan salah satu metode pemecahan. Instruksi yang lebih kompleks bisa digunakan untuk menyimpan gambar, suara, video, dan berbagai macam informasi. Informasi yang bisa disimpan dalam satu sell dinamakan sebuah byte.

2. Pemrosesan
    Unit Pengolah Pusat atau CPU  (Central processing Unit) berperan untuk memproses perintah yang diberikan oleh pengguna komputer, mengelolanya bersama data-data yang ada di komputer. Unit atau peranti pemprosesan juga akan berkomunikasi dengan peranti input , output dan storage untuk melaksanakan instruksi yang saling terkait.

Dalam arsitektur von Neumann yang asli, ia menjelaskan sebuah Unit Aritmetika dan Logika, dan sebuah Unit Kontrol. Dalam komputer-komputer modern, kedua unit ini terletak dalam satu sirkuit terpadu (IC - Integrated Circuit), yang biasanya disebut CPU (Central Processing Unit).
Unit Aritmatika dan Logika, atau Arithmetic Logic Unit (ALU), adalah alat yang melakukan pelaksanaan dasar seperti pelaksanaan aritmetika (tambahan, pengurangan, dan semacamnya), pelaksanaan logis (AND, OR, NOT), dan pelaksanaan perbandingan (misalnya, membandingkan isi sebanyak dua slot untuk kesetaraan). Pada unit inilah dilakukan "kerja" yang sebenarnya.
UNIT CONTROL menyimpan perintah saat ini yang dilakukan oleh komputer, memerintahkan ALU untuk melaksanaan dan mendapatkan kembali informasi (dari memori) yang diperlukan untuk melaksanakan perintah itu, dan memindahkan kembali hasil ke lokasi memori yang sesuai. Unit ini berfungsi mengontrol pembacaan instruksi program komputer.

3. Masukan dan Hasil
    Membolehkan komputer mendapatkan informasi dari dunia luar, dan menaruh hasil kerjanya di sana, dapat berbentuk fisik (hardcopy) atau non fisik (softcopy). Ada berbagai macam alat I/O, dari yang akrab keyboard, monitor  dan disk  drive, ke yang lebih tidak biasa seperti webcam (kamera web, pencetak, pemindai, dan sebagainya.
Yang dimiliki oleh semua alat masukan biasa ialah bahwa mereka meng-encode (mengubah) informasi dari suatu macam ke dalam data yang bisa diolah lebih lanjut oleh sistem komputer digital. Alat output, men-decode data ke dalam informasi yang bisa dimengerti oleh pemakai komputer. Dalam pengertian ini, sistem komputer digital adalah contoh sistem pengolah data.

4. Instruksi
    Perintah yang dibicarakan di atas bukan perintah seperti bahasa manusiawi. Komputer hanya mempunyai perintah sederhana dalam jumlah terbatas yang dirumuskan dengan baik. Perintah biasa yang dipahami kebanyakan komputer ialah "menyalin isi sel 123, dan tempat tiruan di sel 456", "menambahkan isi sel 666 ke sel 042, dan tempat akibat di sel 013", dan "jika isi sel 999 adalah 0, perintah berikutnya anda di sel 345".
Instruksi diwakili dalam komputer sebagai nomor - kode untuk "menyalin" mungkin menjadi 001, misalnya. Suatu himpunan perintah khusus yang didukung oleh komputer tertentu diketahui sebagai bahasa mesin komputer. Dalam praktiknya, orang biasanya tidak menulis perintah untuk komputer secara langsung di bahasa mesin tetapi memakai bahasa pemrograman "tingkat tinggi" yang kemudian diterjemahkan ke dalam bahasa mesin secara otomatis oleh program komputer khusus (interpreter dan kompiler). Beberapa bahasa pemrograman berhubungan erat dengan bahasa mesin, seperti assembler (bahasa tingkat rendah); di sisi lain, bahasa seperti Prolog didasarkan pada prinsip abstrak yang jauh dari detail pelaksanaan sebenarnya oleh mesin (bahasa tingkat tinggi)

5. Arsitektur
    Komputer kontemporer menaruh ALU dan unit kontrol ke dalam satu sirkuit terpadu yang dikenal sebagai Unit Pemroses Sentral atau CPU. Biasanya, memori komputer ditempatkan di atas beberapa sirkuit terpadu yang kecil dekat UPS. Alat yang menempati sebagian besar ruangan dalam komputer adalah ancilliary sistem (misalnya, untuk menyediakan tenaga listrik) atau alat I/O.
Beberapa komputer yang lebih besar berbeda dari model di atas di satu hal utama - mereka mempunyai beberapa UPS dan unit kontrol yang bekerja secara bersamaan. Terlebih lagi, beberapa komputer, yang dipakai sebagian besar untuk maksud penelitian dan perkomputeran ilmiah, sudah berbeda secara signifikan dari model di atas, tetapi mereka sudah menemukan sedikit penggunaan komersial.
Fungsi dari komputer secara prinsip sebenarnya cukup sederhana. Komputer mencapai perintah dan data dari memorinya. Perintah dilakukan, hasil disimpan, dan perintah berikutnya dicapai. Prosedur ini berulang sampai komputer dimatikan.

6. Sistem Operasi
    Sistem Operasi adalah semacam gabungan dari potongan kode yang berguna. Ketika semacam kode komputer dapat dipakai secara bersama oleh beraneka-ragam program komputer, setelah bertahun-tahun, pemrogram (programmer) akhirnya memindahkannya ke dalam sistem operasi.
Sistem operasi, menentukan program mana yang akan dijalankan, kapan, dan alat yang mana (seperti memori atau I/O) yang mereka gunakan. Sistem operasi juga memberikan layanan (service) kepada program lain, seperti kode yang membolehkan pemrogram untuk menulis program untuk suatu mesin tanpa perlu mengetahui detail dari semua alat elektronik yang terhubung pada komputer.

E. Penggunaan Komputer
     Komputer digital pertama, memiliki ukuran yang besar dan membutuhkan biaya besar untuk pembuatannya. Komputer pada masa itu umumnya digunakan untuk mengerjakan perhitungan ilmiah. ENIAC, komputer awal AS awalnya dibuat untuk memperhitungkan tabel ilmu balistik untuk persenjataan (artileri), menghitung kerapatan penampang neutron untuk melihat jika bom hidrogen akan bekerja dengan semestinya (perhitungan ini, yang dilakukan pada Desember 1945 sampai Januari 1946 dan melibatkan dala dalam lebih dari satu juta kartu punch memperlihatkan bentuk lalu di bawah pertimbangan akan gagal). CSIR Mk 1/CSIRAC, komputer pertama Australia, mengevaluasi pola curah hujan untuk tempat penampungan dari Snowy Mountains, suatu proyek pembangkit Hidroelektrik besar. Selain itu juga dipakai dalam kriptanalisis, misalnya komputer elektronik digital yang pertama, Colossus, dibuat selama Perang Dunia II. Akan tetapi, visionaris awal juga menyangka bahwa pemrograman itu akan dapat memainkan catur, memindahkan gambar dan penggunaan lain.

F. Bagian-bagian komputer
    Komputer terdiri atas 2 bagian yaitu perangkat lunak (software) dan perangkat keras (hardware)

1. Perangkat keras (hardware)

• Pemroses atau CPU sebagai unit pengolah data 
• Memori RAM, tempat penyimpanan data sementara
• Hard drive, media penyimpanan data semi permanen
• Perangkat masukan, media yang digunakan untuk memasukkan data untuk diproses oleh CPU, seperti mouse, keyboard, dan tablet
• Perangkat keluaran, media yang digunakan untuk menampilkan hasil keluaran pemrosesan CPU, seperti monitor, speaker, headset, plotter, proyektor, dan printer.

2. Perangkat lunak (software)

a. Sistem operasi
Program dasar pada komputer yang menghubungkan pengguna dengan hardware komputer. Sistem operasi yang biasa digunakan adalah Linux, Windows, dan Mac OS. Tugas sistem operasi termasuk (namun tidak hanya) mengatur eksekusi program di atasnya, koordinasi input, output, pemrosesan, memori, serta instalasi software.

b. Program komputer
 Merupakan aplikasi tambahan yang dipasang sesuai dengan sistem operasinya

 G. Slot pada komputer

1. ISA/PCI, slot untuk masukan kartu tambahan non-grafis
2. AGP/PCLe,  slot untuk masukan kartu tambahan grafis
3. IDE/SCSI/SATA, slot untuk hard drive/ODD
4. USB, slot untuk masukan media plug-and-play (colok dan mainkan, artinya perangkat yang dapat dihubungkan ke komputer dan langsung dapat digunakan)

H. Referensi 

• https://id.wikipedia.org/wiki/komputer

Sekian dari dari saya bila ada salah dan kurang saya mohon maaf, terimakasih semoga bermanfaat.

Wassalamu'alaikum Wr Wb.

Read More

Memodifikasi Tampilan CMS Sekolahku

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini say akan shere mengenai Memodifikasi Tampilan CMS Sekolahku.

A. Pengertian
    CMS adalah aplikasi komputer yang mendukung penciptaan dan modifikasi konten digital menggunakan antarmuka sederhana untuk abstrak pergi rincian tingkat rendah kecuali diperlukan, biasanya mendukung beberapa pengguna bekerja di lingkungan kolaboratif.

B. Latar Belakang
    Latar Belakang saya memodifikasi CMS ini adalah Agar tampilan CMS Sekolah lebih menarik dan berbeda dengan tampilan sebelumnya.

C. Maksud dan Tujuan
    Maksud dan tujuan saya memodifikasi CMS ini adalah supaya tampilannya lebih menarik dan sesuai dengan SMK saya yaitu SMK Hasan Kafrawi.

Dan di bawah ini adalah tampilan awal CMS Sekolahku.

Dan ini adalah tampilan yang sudah saya Edit/modifiasi.

Agar tampilannya berubah, disini kita perlu mengganti Header, supaya sesuai dengan sekolah kita masing-masing, maka kita perlu mengganti logo, dan kita harus mengeditnya di "Custom dan css.style"

D. Tahap Pelaksanaan

1. Pertama-tama yang harus kita lakukan adalah mengedit "Script Custom"
Siapkan Logo Sekolah kita masing-masing untuk mengganti logo yang sudah ada, Kemudian simpan di folder Asset, frontend, img. Kemudian Buka folder Assets, Frontend, Css, Custom.css.

# Custom.css

/* Silahkan atur komposisi warna template CMS Sekolahku dengan mengganti kode warna berikut */

/* 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;
}

/* Pengaturan blok warna background tree menu / dropdown menu */
.tree-menu ul li, .tree-menu li.current, .tree-menu ul ul li, .tree-menu li:hover {
  background: #34495e;
}

/* Pengaturan blok warna background Kata Motivasi */
#sub-bar {
  background: #34495e;
}

/* Pengaturan blok warna background title slide berita */
.slides .content {
  background: #ca1515;
}

/* Pengaturan blok warna copyright */
#copyright-wrapper {
  background: #34495e;
}

/* Pengaturan blok warna footer */
#sub-footer {
  background: #20303f;
}

/* Pengaturan background warna sidebar tengah */
#aside-primary {
  background: #2ecc71;
}

#aside-primary .widget-title h4 {
  background: #34495e;
}

/* Pengaturan background warna sidebar kanan */
#aside-secondary {
  background: #20303f;
}

#aside-secondary .widget-title h4 {
  background: #34495e;
}

/* Pengaturan background warna widget tab (Pengumuman, Agenda, Sekilas Info) */
.tab-content {
  background: #34495e;
}

/* Pengaturan garis warna widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs {
  border-bottom: solid 2px #34495e;
}

/* Pengaturan garis kiri warna title widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs li:first-child {
  border-left: 1px #34495e solid;
}

/* Pengaturan garis atas dan kanan warna title widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs li {
  border-top: 1px #34495e solid;
  border-right: 1px #34495e solid;
}

/* Pengaturan background warna title widget tab (Pengumuman, Agenda, Sekilas Info) yang tidak aktif */
#main-content .widget .tabs li a {
  color: #fff;
  background: #20303f;
}

/* Pengaturan background warna title widget tab (Pengumuman, Agenda, Sekilas Info) yang sedang aktif */
#main-content .widget .tabs li a.selected {
  background:#34495e;
  color: #fff;
  border: 1px solid #34495e;
}

/* Pengaturan background hover warna title widget tab (Pengumuman, Agenda, Sekilas Info) ketika cursor didekatkan */
#main-content .widget .tabs li a:hover {
  background: #34495e;
  color: #fff;
  border: 1px solid #34495e;
}

/* Pengaturan Background jumlah postingan berita */
.ul-list li a span {
background: #20303f;
}

.ul-list li:hover span {
  background: orange
}

Dan gantilah script di atas, dengan script di bawah ini.

/* Silahkan atur komposisi warna template CMS Sekolahku dengan mengganti kode warna berikut */

/* Pengaturan blok warna background body */
body {
  background-image: url(../img/tree.jpg);
}

/* Pengaturan blok warna background top header */
#top-bar {
  background: #22A7F0;
}

/* Pengaturan blok warna background header */
#primary-header {
  background-image: url(../img/ilaa.jpg);
}

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

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

/* Pengaturan blok warna background tree menu / dropdown menu */
.tree-menu ul li, .tree-menu li.current, .tree-menu ul ul li, .tree-menu li:hover {
  background: #34495e;
}

/* Pengaturan blok warna background Kata Motivasi */
#sub-bar {
  background: #34495e;
}

/* Pengaturan blok warna background title slide berita */
.slides .content {
  background: #ca1515;
}

/* Pengaturan blok warna copyright */
#copyright-wrapper {
  background: #34495e;
}

/* Pengaturan blok warna footer */
#sub-footer {
  background: #20303f;
}

/* Pengaturan background warna sidebar tengah */
#aside-primary {
  background-image: url(../img/papann.jpg);
}

#aside-primary .widget-title h4 {
  background: #2C3E50;
}

/* Pengaturan background warna sidebar kanan */
#aside-secondary {
  background: #20303f;
}

#aside-secondary .widget-title h4 {
  background: #34495e;
}

/* Pengaturan background warna widget tab (Pengumuman, Agenda, Sekilas Info) */
.tab-content {
  background: #34495e;
}

/* Pengaturan garis warna widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs {
  border-bottom: solid 2px #34495e;
}

/* Pengaturan garis kiri warna title widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs li:first-child {
  border-left: 1px #34495e solid;
}

/* Pengaturan garis atas dan kanan warna title widget tab (Pengumuman, Agenda, Sekilas Info) */
ul.tabs li {
  border-top: 1px #34495e solid;
  border-right: 1px #34495e solid;
}

/* Pengaturan background warna title widget tab (Pengumuman, Agenda, Sekilas Info) yang tidak aktif */
#main-content .widget .tabs li a {
  color: #fff;
  background: #20303f;
}

/* Pengaturan background warna title widget tab (Pengumuman, Agenda, Sekilas Info) yang sedang aktif */
#main-content .widget .tabs li a.selected {
  background:#34495e;
  color: #fff;
  border: 1px solid #34495e;
}

/* Pengaturan background hover warna title widget tab (Pengumuman, Agenda, Sekilas Info) ketika cursor didekatkan */
#main-content .widget .tabs li a:hover {
  background: #34495e;
  color: #fff;
  border: 1px solid #34495e;
}

/* Pengaturan Background jumlah postingan berita */
.ul-list li a span {
background: #20303f;
}

.ul-list li:hover span {
  background: orange
}

# Dan sekarang Edit Style.css, karena script nya sangat banyak maka scriptnya yang saya perlihatkan hanya script yang sudah saya Edit, seperti di bawah ini.

@import url("typography.css");
@import url("bootstrap.css");
body {
  font: 13px "Arial",  Helvetica;
}

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

#top-nav{
  float: right;
}

#top-nav li{
  float: left;
  list-style: none;
}

#top-nav li:last-child {
  margin-right: 0;
}

#top-nav li a{ display: block;
padding: 7px 8px;
font-size: 9px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
#clock{ position: absolute;
left: 0;
top: 6px;
font-size: 10px;
color: #fff;
text-transform: uppercase;
}
#clock strong { padding: 2px 8px;
margin-right: 3px;
background: #ddd;
border-radius: 10px;
color: #444;
}
#top-nav li a:hover {
  color: yellow;
}

#editor {
  background: url(../img/theme/edit.png) no-repeat 0 7px;
  text-indent: 10px;
}

#logo{ float: left;
width: 230px;
min-height: 90px;
}
#logo a img{ display: block }
.qcAdBlock728X90{ float: right;
width: 728px;
height: 90px;
background: #eee;
}

#fixed-wrapper {
  position: relative;
  width:100%;
  z-index: 999;
}

#fixed-wrapper.fixed {
  position: fixed;
  top: -2px;
}

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

#sub-bar {
  padding: 9px 0;
}

#primary-navigator {
  position: relative;
  width: 100%;
  z-index: 999;
}

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

.tree-menu,
.tree-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-menu li {
  position: relative;
}

.tree-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.tree-menu > li {
 float: left;
  margin-top: 7px;
  padding: 8px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.tree-menu li:hover > ul,
.tree-menu li.sfHover > ul {
  display: block;
}

.tree-menu a {
  display: block;
  position: relative;
}
.tree-menu ul ul {
  top: 0;
  left: 100%;
}

.tree-menu {
  float: left;
}

.tree-menu ul {
  min-width: 16em;
  *width: 16em;
}

.tree-menu a{ padding: 6px 4px;
text-decoration: none;
zoom: 1;
}
.tree-menu a {
  font: 14px/14px 'Patua One', sans-serif;
  color: #fff;
  text-shadow: 1px 1px #000;
}

.tree-menu li {
  white-space: nowrap;
  *white-space: normal;
}
.tree-menu ul li a,
.tree-menu ul ul li a {
  padding: 8px 12px;
  font: 11px/16px 'Patua One', sans-serif;
}

.tree-menu li:hover {
  -webkit-transition: none;
  transition: none;
}
.tree-menu li a:hover {color:yellow}
.tree-menu li ul li a:hover {color:yellow}
.tree-menu ul ul li:hover {color:yellow}

.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em;
}
.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #dFeEFF;
  border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: white;
}
.sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF;
  border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: white;
}

#dd-menu {
  display: none;
}

#sub-bar .label-info, #sub-bar .label-warning, #sub-bar .label-success
{ float: left;
padding: 2px 8px;
margin: 1px 10px;
font-weight: normal;
font-size: 10px;
background: #29a9fc;
border-radius: 10px;
text-shadow: none;
}
#news-ticker,
#breadcrumb{ float: left }
#news-ticker li{ list-style: none;
color: #dcdcdc;
width: 960px;
padding: 0;
}
#breadcrumb{ padding: 2px 10px;
margin: 25px 0 2px 0;
background: #fafafa;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 0 5px #ccc;
-moz-box-shadow: inset 0 0 5px #ccc;
box-shadow: inset 0 0 5px #ccc;
border: 1px #ddd solid;
}
#breadcrumb li{ float: left;
list-style: none;
margin-right: 8px;
color: #666;
text-transform: uppercase;
font-size: 9px;
}
#breadcrumb li:first-child            { margin: 0 10px 0 0;
padding: 9px;
background: url('../img/theme/qcHomeIcon.png') no-repeat;
}
#breadcrumb li a                      { color: #666;
text-decoration: none;
}
#breadcrumb span.arrow                { float: right;
color: #aaa;
margin-left: 8px;
}
#breadcrumb.single                    { margin-top: 25px }
#search-box{ position: absolute;
right: 0;
top: 0;
}
#search-box input                      { width: 180px;
padding: 11px;
margin: 0;
color: #aaa;
background: #444 url('../img/theme/search.png') top right no-repeat;
border: 0;
}
#search-box input:focus                { outline: none }

#content-wrapper {
  display: -webkit-flex;
  display: flex;
  margin-top: 10px;
}
#main-content {
  float: left;
  width: 673px;
  background: #e9eaed;
  border: 1px #d0d1d5 solid;
}
#main-content.home {
  width: 480px;
  margin-right: 3px;
}

#main-content .widget h4,
#main-content .widget-title h4 {
  padding: 5px 0;
  font: 13px/18px 'Patua One', sans-serif;
  border-bottom: none;
  border-top: none;
  text-align: left;
  margin-bottom: 5px;
}
#main-content .widget-title h4 {
  padding: 7px 0;
  background: #d0d1d5;
  text-align: left;
  text-indent: 20px;
  color: #333333;
}

#main-content .ul-list li {
  list-style: none;
  border-bottom: none;
}

.widget .post-list li a {
  color: #171717;
}

.widget .post-list li h4 {
  color: #171717;
}

.widget .post-list li a:hover{
  color: #c51414;
}

.widget .post-list li {
  border-bottom: none;
}

.widget .post-list li p{
  color: #333333;
}

.widget .post-list li span {
  color: #171717;
}

.tab_block .post-list li {
  border-bottom: 1px solid #1e5c71;
}
.tab_block .post-list li p {
  color: #fff;
}

.tab_block .post-list li span {
  color: #ffed8b;
}

.tab_block .post-list li h4, .post-list li h4 a{
  color: #ffed8b;
}
.tab_block .post-list li h4 a:hover{
  color: #fff;
}

.post-list li {
  margin-bottom: 0;
  margin-top: 0;
}
.post-list li p {
  margin: 0 0 8px 0;
  color: #333333;
  font-size: 13px;
  font-family: tahoma,verdana, 'lucida grande', Georgia, arial,sans-serif;
}

.post-list li h4, .post-list li h4 a {
  font-size: 15px;
  font-weight: bold;
}
.post-list li h4 a {
  color: #171717;
}

.post-list li h4 a:hover {
  color: #d21818;
}

.widget-title h4 {
  font-weight: bold;
}

.widget-title { position: relative }
.widget-title .views-all{ margin: 3px 10px 0 0 }

#aside-primary {
  float: left;
  width: 191px;
}

#aside-primary .widget h4,
#aside-primary .widget-title h4 {
  padding: 5px 0;
  font: 13px/18px 'Patua One', sans-serif;
  color: #fff;
  border-bottom: none;
  border-top: none;
  text-align: left;
}

#aside-primary .widget-title h4 {
  padding: 7px 0;
  text-align: left;
  text-indent: 20px;
}

#aside-primary a {
  color: #fff;
}

#aside-primary a:hover {
  color: yellow;
}

#aside-primary .ul-list li {
  list-style: none;
  border-bottom: none;
}

#aside-secondary {
  color: #fff;
}
#aside-secondary .widget h4,
#aside-secondary .widget-title h4 {
  padding: 5px 0;
  font: 13px/18px 'Patua One', sans-serif;
  color: #fff;
  border-bottom: none;
  border-top:none;
  text-align: left;
}

#aside-secondary .widget {
  margin-bottom: 20px;
}

#aside-secondary .widget-title h4 {
  padding: 7px 0;
  text-align: left;
  text-indent: 20px;
}

#aside-secondary a {
  color: #fffd70;
}

#aside-secondary a:hover {
  color: #fff;
}

#aside-secondary .ul-list li {
  list-style: none;
  border-bottom: none;
}

#aside-secondary {
  margin-left: 3px;
  float: left;
  width: 281px;
}

#aside-secondary .post-list li {
  color: #fff;
}

#aside-secondary.single{ width: 30.09%;
background: #fafafa;
box-shadow: inset 0 0 10px #ddd;
}
.qcFeaturedLable{ position: absolute;
width: 106px;
height: 41px;
margin: 35px 0 0 -10px;
background: url('../img/theme/qcfeatured.png') no-repeat;
z-index: 99;
}
#sub-footer {
  margin: 3px auto 10px auto;
  color: #fff;
}

#sub-footer .footer-left{
  float: left;
  width: 229px;
  padding: 20px 0 20px 20px;
  margin: 0;
}

#sub-footer .footer-right{
  float: left;
  width: 690px;
  padding: 20px 0 20px 20px;
  margin: 0;
  border-left: 1px #000 solid;
}

#sub-footer .footer-right { border: 0; }  

#sub-footer .footer-right h4 {
  margin-bottom: 5px;
}

#sub-footer .footer-right img {
  border: 1px solid #eee;
}

#footer-img li {
  list-style: none;
  float: left;
  margin: 2px;
  border: 1px #dcdcdc solid;
  }
#footer-img li img {
  display: block;
  width: 75px;
}

#gallery-photo li {
  list-style: none;
  float: left;
  margin: 2px;
  border: 1px #dcdcdc solid;
  }
#gallery-photo li img {
  display: block;
  width: 104px;
  border: 1px #171717 solid;
}

#post-gallery li           { list-style: none;
float: left;
margin: 3px;
border: 1px #dcdcdc solid;
                }
#post-gallery li img           { display: block;
                } 

#footer {
  width: 959px;
  padding: 4px 0 6px 0;
  text-align: center;
  font-size: 12px;
  color: #fff;
  margin: 5px auto 0 auto;
  }
#footerNav {
  display: block;
  margin-right: 10px;
  width: 100%;
  }
#footerNav ul{ width: 100% }
#footerNav ul li                      { list-style: none;
float: left;
}
#footerNav ul li a                    { padding: 0 12px;
font: 12px/20px 'Patua One', sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
border-right: 1px #123770 solid;
}
#footerNav ul li:first-child a        { padding-left: 0 }
#footerNav ul li:last-child a         { border: 0 }
#scrool-top{ position: absolute;
top: 0;
right: 10px;
padding: 3px 10px;
margin-top: -2px;
color: #fff;
font: 600 10px/18px "Arial",  Helvetica;
text-decoration: none;
background: #000;
border-radius: 3px;
border: 0;
}
#scrool-top:hover                      { background: #444 }
#copyright{ display: block;
margin-top: 12px;
color: #dcdcdc;
line-height: 20px;
}
#copyright a{ color: #fff;
text-decoration: none;
}
#copyright-wrapper {
  clear: both;
  padding: 20px 0 20px 20px;
}
#copyright-wrapper li {
  text-align: center;
  list-style: none;
  font-size: 12px;
}
#copyright-wrapper li:first-child            { font-weight: 600;
color: #d3cbc1;
}
#copyright-wrapper li a {
  color:#d3cbc1;
  text-decoration: none;
}
#copyright-wrapper li:last-child a           { border: 0 }
.pagination ul{ float: right;
background: #eee;
border: 1px #ddd solid;
}
.pagination ul li a                     { border: 0;
color: #666;
border-right: 1px #ddd dotted;
}
.pagination ul li a:hover{
  color: #333333;
}
.pagination ul li:last-child a          { border-right: 0 }
.pagination ul li.active a,
.pagination ul li.active a:hover        { background: transparent;
color: orange;
}
.qcFullwidth{ margin: 15px }
.qcOneColumn{ margin: 10px 0;
width: 100%;
}
.two-column{ float: left;
margin: 10px 20px 10px 0;
width: 455px;
}
.left-columns {
  float: left;
  margin: 10px 20px 10px 0;
  width: 20%;
  min-height:250px;
}

.right-columns {
  margin: 10px 0 10px 0;
  width: 100%;
}
.tree-column                         { float: left;
margin: 10px 20px 10px 0;
width: 296px;
}
.four-column{ float: left;
margin: 10px 20px 10px 0;
width: 217px;
}
.five-column{ float: left;
margin: 10px 20px 10px 0;
width: 170px;
}
.two-column.last,
.tree-column.last,
.four-column.last,
.five-column.last                     { margin-right: 0 }
hr{ border-bottom: 1px dotted #ccc;
height: 1px;
margin: 25px 0;
width: 100%;
}
.the-icons{ list-style: none }
#qcContactMap{ height: 260px;
border-top: 3px #ddd solid;
border-bottom: 3px #ddd solid;
}
#form-wrapper{ margin: 18px 15px 15px 15px }

input[type="submit"]

.form{ margin-top: 20px }
.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form input[type="password"],
.form textarea {
  padding: 9px 10px;
}

.form select{padding: 9px;}
.form .btn-success                    { position: relative;
top: 5px;
padding: 7px;
}
#qcWorldMap img                         { display: block;
width: 100%;
height: auto;
border-bottom: 1px #ddd solid;
}

article.qcBlogEntry                     { margin: 15px }
article.qcBlogEntry .paper-box          {   }
.qcBlogEntry img                        { display: block }
.hover-post-format                      { float: left;
width: 100px;
height: 50px;
border-right: 1px #666 solid;
}
.hover-post-format span                 { position: relative;
top: -5px;
font-family: "Arial", Helvetica;
font-size: 9px;
text-shadow: none;
color: #fff;
}
.hover-post-format-text                 { font-family: "Arial", Helvetica;
font-size: 10px;
text-shadow: none;
color: #fff;
width: 100px;
border-right: 1px #ccc solid;
text-align: center;
padding-top: 5px;
float: left;
margin-top: -4px;
text-transform: uppercase;
}
.hover-post-meta                        { padding: 5px 0;
text-shadow: none;
}
.hover-post-metas                       { float: left;
font-family: "Arial", Helvetica;
font-size: 10px;
padding-right: 4px;
border-right: 1px #ccc solid;
}
.hover-post-meta-like                   { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 22px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -54px no-repeat;
}
.hover-post-meta-like:hover             { color: #ff0000;
background: url('../img/theme/sprite.png') 0px -72px no-repeat;
border: 0;
}
.hover-post-meta-comment                { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 24px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -90px no-repeat;
}
.hover-post-meta-comment:hover          { color: #fff;
border: 0;
background: url('../img/theme/sprite.png') 0px -108px no-repeat;
}
.hover-post-meta-date                   { float: left;
height: 18px;
margin: 1px 5px;
color: #fff;
text-indent: 24px;
text-decoration: none;
background: url('../img/theme/sprite.png') 0px -126px no-repeat;
}
.hover-post-meta-date:hover             { color: #fff;
border: 0;
background: url('../img/theme/sprite.png') 0px -144px no-repeat;
}
.hover-post-format-icon                 { position: relative;
left: 42px;
top: 19px;
float: left;
width: 18px;
height: 18px;
}
.hover-post-title                       { float: left;
padding-left: 15px;
}
.hover-post-head                        { position: relative;
background: #222;
padding: 10px 0 0 0;
overflow: hidden;
}
.hover-post-metas.last                  { border: 0 }
.text-gradient-blog                     { position: absolute;
width: 40px;
height: 60px;
right: 0px;
background: url('../img/theme/gradient-blog.png');
z-index: 99;
}
.blog-meta{ position: relative;
background-color: #239e5d;
}
.blog-meta .pf-heading                  { position: absolute;
width: 100%;
color: #FFFFFF;
overflow: hidden;
font: 15px/42px 'Patua One',sans-serif;
text-transform: uppercase;
}
.blog-meta .pf-heading a                { position: relative;
color: #FFFFFF;
}
.blog-meta .pf-heading a:hover          { color: #ddd;
border: 0;
}
.post-preview{ position: relative }
.post-preview .centered-btns_tabs      { bottom: 20px }
.post-preview .rslides_container       { padding: 0;
border: 0;
}
.post-preview .centered-btns_nav       { z-index: 999 }
.post-preview blockquote               { padding: 20px;
border-left: 5px #ccc solid;
border-right: 1px #ddd solid;
margin: 0;
background: #fff;
-webkit-box-shadow: inset 0 0 20px #ddd;
-moz-box-shadow: inset 0 0 20px #ddd;
box-shadow: inset 0 0 20px #ddd;
}
.post-preview blockquote small         { margin-top: 10px }
.post-preview img                      { width: 100%;
position: relative;
z-index: 9;
}
.exerpt,
.post-content{ padding: 20px 0 }
.post-content img                      { width: auto;
margin: 0 10px 10px 10px;
}
.blog-pf-link{ width: 100%;
border: 0;
}
.clinkable{ height: 40px;
background: #000;
text-shadow: none;
padding: 0px 8px;
font-family: Courier;
font-size: 12px;
}
.clinkable a{ padding-left: 15px;
text-decoration: none;
color: #fff;
}
.absolute-text{ height: 40px;
overflow: hidden;
font-family: Courier;
font-size: 12px;
line-height: 40px;
padding: 0 0 0 15px;
background: #fff;
border-right: 1px #ddd solid;
-webkit-box-shadow: inset 0 0 15px #ddd;
-moz-box-shadow: inset 0 0 15px #ddd;
box-shadow: inset 0 0 15px #ddd;
}
.pf-gallery{ background: url('../img/theme/sprite.png') 0px -162px }
.pf-link{ background: url('../img/theme/sprite.png') 0px -180px }
.pf-image{ background: url('../img/theme/sprite.png') 0px -198px }
.pf-quote{ background: url('../img/theme/sprite.png') 0px -216px }
.pf-status{ background: url('../img/theme/sprite.png') 5px -234px }
.pf-video{ background: url('../img/theme/sprite.png') 0px -252px }
.pf-audio{ background: url('../img/theme/sprite.png') 0px -270px }
.pf-standard{ background: url('../img/theme/sprite.png') 0px -288px }
p.readmore{ padding-top: 20px;
margin-top: 15px;
border-top: 1px #eee solid;
}
.read-more{ color: #666;
position: relative;
top: 1px;
}
p.readmore i{ opacity: 0.6 }

#image-slider {
  position: relative;
  margin: 15px;
  border: 2px #000 solid;
  height: 438px;
}
.slides li{ position: relative;
width: 100%;
}
#image-slider li img {
  width: 446px;
  height: 438px;
}
.slides .content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
}
#main-content .slides .content h4 a {color: yellow}
#main-content .slides .content h4 a:hover {color: #fff}
.slides span{ padding: 3px 5px;
font: 600 10px/10px "Arial", Helvetica;
background: #cccccc;
border-radius: 1;
}
.slides h4{ font: 14px 'Patua One', sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0 25px 5px 0;
padding-right: 10px;
}
.slides h4 a{ color: red;
text-decoration: none;
}
.slides h4 a:hover {
  color: #fff;
}

.slides p{ color: #fff;
margin: 0 25px 10px 0;
font-size: 12px;
}

.carousel{ border: 10px #eee solid;
margin-top: 15px;
min-height: 144px;
}
.carousel li{ cursor: pointer;
margin: 0;
}
.tabs li a{ text-transform: uppercase }
.tabs span.badge                        { position: relative;
top: -2px;
right: -8px;
padding: 1px 8px;
font: 200 10px/10px "Arial", Helvetica;
}

.widget{ position: relative;
margin: 15px 15px 25px 15px;
}
.widget h4,
.widget-title h4                       { padding: 5px 0;
font: 13px/18px 'Patua One', sans-serif;
color: #000;
border-bottom: 2px #eeeeee solid;
border-top: 2px #eeeeee solid;
text-align: left;
}
.widget-title h4                       { padding: 7px 0;
background: #fafafa url('../img/theme/qcTMGrad.png') repeat-x;
text-align: left;
text-indent: 20px;
}
.widget p{ margin-top: 8px }
#aside-primary .widget h4                   { padding: 8px 0;
font: 12px/18px 'Patua One', sans-serif;
}
#aside-secondary .widget h4                   { padding: 8px 0;
font: 12px/18px 'Patua One', sans-serif;
}
#main-content .widget                  { margin: 20px 15px 30px 15px }
#main-content .widget h4               { text-align: left;
text-indent: 10px;
}
#main-content .widget-title h4{
  font-weight: bold;
  margin-bottom: 0px;
}
#sub-footer .widget > .social             { float: left;
width: 310px;
padding: 20px 0 20px 20px;
margin: 0;
border-right: 1px #ddd solid;
}
#sub-footer .widget:last-child         { border: 0 }

.ul-list{ margin: 10px 0 }
.ul-list li{ list-style: none;
border-bottom: 1px #ddd dotted;
}
.ul-list li:last-child                   { border: 0 }
.ul-list li a{ display: block;
padding: 5px 0;
color: #141823;
text-decoration: none;
font-size: 12px;
}
.ul-list li a span                       { float: right;
padding: 0 6px;
background: #123770;
color: #fff;
border-radius: 10px;
}
.ul-list li:hover span                   { background: orange }

.tag-list{ list-style: none;
margin: 15px 0;
}
.tag-list li{ float: left }
.tag-list li a                         { display: block;
padding: 0 8px;
margin: 2px;
font-size: 9px;
color: #fff;
background: #666;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
}
.tag-list li a:hover{ background: #239e5d }

.last-post{ text-align: justify; }
.last-post img                      { position: relative;
margin: 10px 0 0 0;
width: 100%;
border: 1px #ddd solid;
}
.last-post a.btn                    { margin-top: 7px;
text-decoration: none;
}

.post-list{ list-style: none;
padding: 0 0;
}
.post-list li ul, .post-list li ol {
  padding-left: 15px;
}
.post-list li {
  color: #333;
  padding: 5px 10px;
}
.post-list li:last-child               { border: 0 }
.post-list li a {
  display: block;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
}
.post-list li h4                       { border: 0 }
.post-list img                         { float: left;
margin: 10px 10px 10px 0;
border: 1px #171717 solid;
}
.post-list video {
  float: left;
  margin: 5px 10px 10px 0;
  border: 1px #ddd solid;
}

.post-list li img:hover                { opacity: 0.8 }
.timestamp{ float: left;
background: url('../../icon/calendar.png') no-repeat;
height: 21px;
text-indent: 20px;
font-size: 12px;
}
.timestamp-white {
  float: left;
  background: url('../../icon/calendar-white.png') no-repeat;
  height: 21px;
  text-indent: 20px;
  font-size: 12px;
}
.author{ float: left;
background: url('../../icon/author.png') no-repeat;
text-indent: 20px;
margin-left: 10px;
font-size: 12px;
}
.author-white {
  float: left;
  background: url('../../icon/user-white.png') no-repeat;
  text-indent: 20px;
  margin-left: 10px;
  font-size: 12px;
}

.comment-init                         { float: left;
margin-left: 15px;
background: url('../img/theme/comment.png') no-repeat;
text-indent: 22px;
}
.post-list .comment-init a           { font-size: 10px;
color: #666;
}
#main-content .post-list li h4        { text-indent: 0;
  font-size: 18px;
  font-weight: bold;
margin-top: 3px;
}
.views-all{ position: absolute;
right: 10px;
top: 4px;
font-size: 10px;
text-transform: uppercase;
text-indent: 23px;
}
.views-all a{ color: #333333;
text-decoration: none;
}
.views-all a:hover                      { color: #000000 }
.views-all a .badge                     { margin-left: 2px;
padding: 2px 8px;
}

.post-single-list                       { list-style: none;
padding-top: 8px;
}
.post-single-list li                    { border-bottom: 1px #ddd solid;
padding: 20px 10px;
}
.post-single-list li:first-child        { padding-top: 0 }
.post-single-list li a img              { float: left;
width: 190px;
height: 190px;
padding: 5px;
-webkit-box-shadow: 0 0 5px #eee;
-moz-box-shadow: 0 0 5px #eee;
box-shadow: 0 0 5px #eee;
margin-right: 15px;
border: 1px #ddd solid;
}
#main-content .widget .post-single-list h4
{ border : 0;
text-indent: 0;
padding: 0 0 12px 0;
line-height: 24px;
}
.post-single-list h4 a                  { color: #000 }
.post-single-list .comment-init       { float: left;
margin-left: 15px;
}
.post-single-list .exerpt{ margin-top: 30px }
.post-single-list .exerpt .btn          { margin-top: 15px }
.post-single-list .comment-init a     { color: #666 }

.post-col{ list-style: none }
.post-col li{ float: left;
width: 49.8%;
border-right: 1px #ddd dotted;

}
.post-col li:nth-child(even)           { border: 0 }
.post-col li div{ padding: 10px }
.post-col li img{ display: block;
width: 100%;
margin: 0 0 5px 0;
}
.post-col li img:hover                 { opacity: 0.9 }
.post-col li a{ display: block;
font-size: 14px;
color: #000;
border: 0;
text-align: left;
text-decoration: none;
}
#main-content .widget .post-col li h4 { padding-left: 0;
border: 0;
text-indent: 0;
}
.post-col li p{ padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: 1px #ddd solid;
}
.post-col li .comment-init a         { padding-bottom: 5px;
font-size: 10px;
color: #666;
}          

#main-content .widget .tabs {
  margin: 15px 0 0 0;
}

#main-content .widget .tabs li a {
  font: 12px/34px 'Patua One', sans-serif;
  font-weight: bold;
}

.widget .tabs .post-list                { padding-top: 0 }
.widget .tab-content                    { padding-top: 0;
padding-bottom: 0;
}

.widget .banner{ margin: 0 }
ul.tweet_list li{ background: url("../img/theme/twitter-widget-bg.png") no-repeat scroll right bottom;
border-bottom: 1px solid #eee;
font-size: 11px;
line-height: 20px;
list-style: none;
padding: 10px 0;
text-shadow: none;
}
ul.tweet_list li .tweet_time a          { background: none repeat scroll 0 0 #EB4F1E;
color: #fff;
font-size: 10px;
padding: 2px 5px;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
ul.tweet_list li .tweet_text a          { background: none repeat scroll 0 0 #555555;
color: #FFFFFF;
font-size: 10px;
padding: 2px 5px;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
ul.tweet_list li:first-child            { margin-top: 0 }
ul.tweet_list li:last-child             { border: 0 }
ul#tagslide li{ list-style: none outside none }


#flickr{ margin: 12px 0 0 5px }
#flickr li{ list-style: none;
float: left;
margin: 3px;
border: 1px #fff solid;
}
#flickr li:hover                        { border: 1px #333 solid }
#flickr li img{ display: block; width:80px;}

#social-network                       { margin: 10px 0 0 0 }
#social-network li                    { list-style: none;
float: left;
margin: 0 5px 0px 0;
}
#social-network li a:hover            { border: 0;
opacity: 0.8;
}

ul.address{ margin-top: -10px }
ul.address li                         { list-style: none;
padding: 8px 0;
font-size: 11px;
border-bottom: 1px #ddd dotted;
}
ul.address li:first-child             { margin-top: 15px }
ul.address li:last-child              { border: 0 }
ul.address li p                       { margin: -16px 0 3px 20px }
ul.address li i                       { position: relative;
overflow: hidden;
margin: 3px 7px 0 0;
}

.comment-box {
  margin: -20px 15px 45px 15px;
  border: 3px #f5f5f5 solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.comment-box h6 {
  text-align: center;
  font-size: 13px;
  padding: 12px 0;
  color: #666;
  background: #f5f5f5;
}

#comments {
  position: relative;
  padding: 0 20px 20px 20px;
  background: #fafafa;
  border-top: 1px #e5e5e5 solid;
  border-bottom: 1px #ddd solid;
}

#comments .comment.depth-1:first-child  { border: none }
#comments .comment.depth-1:last-child   { border-bottom: none }
#comments .pingbacks li.pingback        { margin: 10px 0 }
#comments .pingbacks li.pingback .reply { display: none }
#comments .comment.bypostauthor         {   }
#comments .cancel-comment-reply         { margin: 10px 0 }
#comments .comment.thread-even          { border-bottom: 1px dashed #dedede }
#comments .comment-entry                { margin: 0 0 0 50px }
#comments .comment-entry p              { margin: 0 0 0 20px }
#comments .comment-head                 { margin: 0 0 15px 50px }
#comments .comment-head .name           { margin: 0;
font-weight: bold;
font-size: 13px;
}
#comments .comment-head .date,
#comments .comment-head .edit,
#comments .comment-head .perma          { color: #666;
font-size: 11px;
}
#comments ul.children{ background: url("../img/comment-child-arrow.html") no-repeat scroll 1.25em 2.5em transparent;
margin: 10px 0 0;
padding: 0 0 0 50px;
}
#comments ul.children li                { border-top: 1px dashed #dedede }
#comments .nocomments{ font-size: 14px;
font-weight: bold;
}
#comments .navigation {}
#comments .navigation a {
  display: block;
  margin: 15px 0 0 0;
  text-decoration: none;
}
#comments .navigation a:hover {}
#comments h3#pings {
  margin-top: 25px;
}

#comments .comment {
  border-top: 1px dashed #dedede;
  width: 100%;
  list-style-type: none;
}

#comments .comment .comment-container {
  position: relative;
  padding: 20px 0 0 0;
}

#comments .avatar {
  float: left;
  margin-right: 20px;
}

#comments .avatar img {
  margin: 0;
  vertical-align: middle;
  padding: 3px;
  border: 1px solid #c2c5ca;
  background: #fff;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

#comments .reply {
  padding-top: 10px;
  position: absolute;
  right: 0;
  top: 5px;
}
#comments .reply a {
  font: 11px/18px sans-serif;
  text-transform: lowercase;
}
#comments .reply a:hover {}
#comments h3 {
  color: #333;
  font-weight: normal;
  margin-bottom: 20px;
}

ol.comment-list {}
ol.comment-list li                       { margin: 10px 0 }
.comment-header-border                  { background-color: #e9ebed;
height: 1px;
margin: 0 auto;
display: block;
width: 200px;
}

#respond {
  text-align: left;
  padding-bottom: 25px;
}

#respond #commentform #submit {
  cursor: pointer;
  float: right;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
}

#respond label {
  font-size: 11px;
  color: #777;
}

#respond h4 {
  color: #555;
  font-size: 13px;
  font-weight: 400;
  padding: 8px 0 5px 0;
}
.respond-inset-wrapper {
  padding: 20px 9px;
}

#commentform {
  margin: 10px 0 0 0;
}

#commentform .field {
  margin: 20px 0;
}

#commentform input.txt {
  background: #f8f8f8;
  border: 1px #ddd solid;
  font-size: 12px;
  margin-right: 6px;
}

#commentform input.txt,
#commentform textarea {
  padding: 10px;
}

#commentform input.txt:focus,
#commentform textarea:focus             { border-color: rgba(82, 168, 236, 0.40) !important;
box-shadow: 0 0 3px rgba(82, 168, 236, 0.5);
}
#commentform textarea                   { background: #f8f8f8;
width: 96% !important;
border: 1px #ddd solid;
font-size: 12px;
margin-bottom: 15px;
}
#commentform label                      { position: relative;
display: inline;
vertical-align: top;
display: inline-block;
margin-top: 5px;
}

a {
  text-decoration: none;
}
.ul-list li:hover a,
.post-list li a:hover,
.slides h4 a:hover,
.post-col li a:hover,
#copyright a:hover,
#footerNav ul li a:hover,
#copyright-wrapper li a:hover,
#breadcrumb li a:hover,
.post-single-list h4 a:hover,
.post-single-list .comment-init a:hover,
.pagination ul li a:hover               { color: #ffed8b }
h1,
h2,
h3,
h4,
h5{ font-family: 'Patua One', sans-serif;
font-weight: 300;
}
h1{ font-size: 24px }
h2{ font-size: 18px }
h3{ font-size: 14px }
h4{ font-size: 12px }
h5{ font-size: 10px }
h6{ font-size: 8px }
.dropcap{ font-size: 30px;
margin: 0 3px 5px 0;
text-transform: uppercase;
}
.post-content ul li{ margin-left: 12px }
.post-content p{ margin: 20px 0 }

.tipsy{ padding: 5px;
font-size: 10px;
position: absolute;
z-index: 100000;
}
.tipsy-inner{ padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
text-shadow: none;
}
.tipsy-inner{ border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.tipsy-arrow{ position: absolute;
background: url(../img/theme/tipsy.gif) no-repeat top left;
width: 9px;
height: 5px;
}
.tipsy-n .tipsy-arrow                   { top: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-nw .tipsy-arrow                  { top: 0;
left: 10px;
}
.tipsy-ne .tipsy-arrow                  { top: 0;
right: 10px;
}
.tipsy-s .tipsy-arrow                   { bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}
.tipsy-sw .tipsy-arrow                  { bottom: 0;
left: 10px;
background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
  bottom: 0;
  right: 10px;
  background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  right: 0;
  width: 5px;
  height: 9px;
  background-position: top right;
}

.tipsy-w .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  left: 0;
  width: 5px;
  height: 9px;
}

#sub-footer .widget.last{
  border: 0;
  width: 320px;
}  
#aside-secondary.border{ border-right: 1px #ddd solid; }
#aside-primary.no-border                    { border: 0; }
.qcPara         { padding: 20px; }
img.about         { width: 100%; }
img.left        { float: left; }
img.right         { float: right; }

.widget form label, .widget form p {
  font-weight: normal;
  font-size: 12px;
}

.login input{
  width: 92%;
  padding: 8px;
  background: #f8f8f8;
  border: 1px #ddd solid;
  font-size: 11px;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, .15);
}
.well-lg {
  padding: 24px;
  border-radius: 6px;
}
.well-sm {
  padding: 9px;
  border-radius: 3px;
}

E. Hasil dan Kesimpulan
    Kita bisa memodifikasi tampilan CMS ini menjadi lebih menarik dan sesuai dengan karakter sekolah kita.

F. Referensi

• http://sekolahku.web.id

Sekian dari saya, bila ada kurang dan salah saya mohon maaf, terimakasih dan selamat mencoba.

Wassalamu'alikum Wr Wb.

Read More

Tips-tips mencari web Referensi Belajar Linux

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini saya akan shering mengenai Tips-tips mencari Web Referensi.

A. Pengertian
    Referensi adalah rujukan suatu informasi yang dilakukan seseorang atau pustakawan untuk membantu seseorang untuk mendapatkan informasi. Referensi banyak digunakan untuk keperluan penelitian atau study. Referensi bisa diartikan sebagai bahan informasi atau bahan rujukan yang mutakhir dan digunakan sebagai acuan untuk lebih maju.
 
B. Maksud dan Tujuan
     Maksud dan tujuan saya adalah supaya kita dalam mencari web referensi untuk belajar linux lebih mudah.

C. Materinya

Berikut adalah tips-tips untuk mencari Web Referensi, untuk Belajar Linux.
1. selalu baca pada Homepage & Documentation/Wiki pada Website resmi sesuai Distro Linuxyang digunakan. Jangan suka mempermasalahkan soal bahasa, gunakan cara cerdas dengan google translate untuk mengatasinya.
2.Gunakan contekan COMMAND LINE (perintah TERMINAL) :https://www.howtoforge.com/
3.Tutorial Vi/Vim Editor :http://www.yolinux.com/TUTORIALS/LinuxTutorialAdvanced_vi.html
4.Tutorial IPTables :http://rootbox.or.id/tips/iptables.html
5.How To Forge :https://www.howtoforge.com/
6.Server World :http://www.server-world.info/en/
7.YoLinux :http://www.yolinux.com/
8.nixCraft :http://www.cyberciti.biz/
9.Unixmen :http://www.unixmen.com/
10.Ubuntu Server Guide :http://ubuntuserverguide.com/
11.Wiki Onno W. Purbo :http://opensource.telkomspeedy.com/wiki/index.php/Main_Page
12.Wiki LINUX :https://en.wikipedia.org/wiki/Linux
13.Pada aplikasi2 berbasis GNU/Linux biasanya disertakan manual.. ketikman "spasi"perintah.misal man "spasi" cowsay.

D. Kesimpulan
    Kesimpulannya adalah kita sudah tidak kebingungan lagi untuk mencari Web Referensi, untuk Belajar Linux.

Sekian bila ada salah dan kurang saya mohon ma'af, terimakasih.

Wassalamu'alaikum Wr Wb.

Read More

Membangun Website Sekolah dengan CMS Sekolahku

Assalamu'alikum Wr Wb.

Hai Teman-teman pada kesempatan kali ini seaya akan shering mengenai Membangun Website Sekolah Menggunakan CMS SEKOLAHKU. Langsung saja penjelasannya.

A. Pengertian
     CMS adalah aplikasi komputer yang mendukung penciptaan dan modifikasi konten digital menggunakan antarmuka sederhana untuk abstrak pergi rincian tingkat rendah kecuali diperlukan, biasanya mendukung beberapa pengguna bekerja di lingkungan kolaboratif.

B. Latar Belakang
     Latar Belakang saya menginstall cms ini adalah untuk membangun website sekolah saya.

C. Maksud dan Tujuan
    Maksud dan tujuannya untuk memudahkan dalam pengelolaan upload, edit, menambahkan dll. Konten dalam sebuah website/blog/aplikasi web tanpa harus dibekali pengetahuan tentang hal-hal yang bersifat teknis tanpa harus memiliki pengetahuan tentang bahasa pemrograman web.

D. Jangka Waktu
    Saya membutuhkan waktu sekitar 30 Menit

E. Alat dan Bahan

• Laptop/PC
• File CMS Sekolahku
• Laptop yang sudah terinstall Lampp Server

F. Tahap Pelaksanaan

1. Pertama-tama masuk diterminal sebagai super user, dan masukkan perintah berikut.

2. Lalu masuk di folder penyimpanan, lalu copy ke directory /var/www/html. lalu masukkan perintah berikut.

3. Kemudian masuk directory /var/www/html, untuk memastikan sudah tercopy atau belum, masukkan perintah "cd /var/www/html" dan "ls"

4. Selanjutnya kita Ekstrak file yang sudah kita copy tadi.

5. di sini kita boleh mengubah namanya, dengan perintah berikut.
# mv cms-sekolahku-v-1.4.3 sekolah

6. Lalu beri hak akses dan hak milik, dengan perintah berikut.

7. Setelah itu buat databasenya dengan nama db_cms_sekolah.

8. Lalu kita import file yang berekstensi.sql

9. Kemudian kita buat koneksi ke databasenya, dengan perintah berikut.
    # nano sekolah/application/config/database.php

10. Setelah itu kita isikan password databasenya, seperti tampilan berikut.

10. Kemudian restart apachenya, dengan memasukkan perintah.
      # service apache2 restart
   

11. Selanjutnya buka browser dan ketikkan di url "localhost/sekolah/login", lalu masukkan username: administrator dan password: admintrator, lalu klik
"Log in",

12. Setelah di klik "Log in" maka akan muncul tampilan seperti berikut, dan berikut adalah tampilan Dashboard.

13. Kemudian buka tab baru ketikkan di URL "localhost/cms_sekolahku". dan akan muncul tampilan seperti di bawah ini. dan ini adalah tampilan pertamanya.

G. Hasil dan Kesimpulan
    Hasilnya CMS Sekolahku sudah terinstall dan dapat login ke administrator tetapi tampilan websitenya masih default dan kita harus mengeditnya, dan Untuk kesimpulannya dalam menginstall CMS sekolah memang sedikit lebih sulit dibandingkan dengan menginstall CMS lainnya. 
    
H. Referensi

• http://sekolahku.web.id/

    Sekian dari saya, bila ada kurang dan salah saya mohon maaf, terimakasih selamat mencoba.

Wassalamu'alikum Wr Wb.

Read More