2013-04-10

Template Blogger Untuk Sekolah

TEMPLATE INFORMATIONS
Template NameCekula Blogger Template
Author By Us / Templatemaxs.com
Descriptions
Cekula blogger template yaitu sebuah template blogger untuk sekolah yang secara cuma-cuma dibagikan untuk dipakai, template ini juga bebas untuk di sebar luaskan, dibagikan dan di modifikasi dengan catatan tidak mengilangkan Tautan pembuat aslinya.
Dengan tampilan Template yang rapi beserta Halaman Tata letak yang rapi agar enak untuk dipandang.

Fitur :
- Logo gambar atau logo teks.
- Navigasi menu tanpa edit code
- Easy slideshow dengan Coin Slider tanpa edit kode
- Auto readmore diperbarui
- Artikel berhubungan dengan gambar
- 2 Kolom Layout
- 2 Block Sidebar dan 2 Kolom sidebar kecil
- Tata letak Blog dan Tata letak Admin layout Rapi

Cara Setting Cekula Template
Silahkan install dulu templatenya, panduan install template ada disini.

A. Setting Logo / Judul Blog
1. Buatlah sebuah logo dengan format PNG,JPEG atau GIF (PNG disarankan). ukuran logo idealnya yaitu 275px X 75px.
2. Lalu Masuk ke tata letak
3. Pada bagian (Header) klik Edit (lihat gambar dibawah ini)

- klik tombol browser untuk memilih logo yang akan diunggah
- klik juga "selain judul dan keterangan"
4. Jika sudah klik Simpan

B. Mengatur Menu

  1. Masih di halaman tata letak
  2. Klik edit pada bagian "Daftar Link"
  3. Masukkan link beserta nama link satu persatu
  4. Kalau sudah klik Simpan

C. Mengatur Tampilan Slideshow

  1. Buatlah gambar dengan ukuran Lebar 935px X 300px, dengan format PNG, JPG atau GIF
  2. Masih di halaman tata letak
  3. Klik edit pada bagian widget "Slide 1, Slide 2 dan seterusnya" akan mncul halaman seperti dibawah ini

    - Keterangan Gambar / Caption : Isilah dengan informasi tentang gambar
    - Hubungan / Link : Masukkan Link dimana gambar akan diarahkan
    - Dari Komputer anda : Klik "Browser" untuk memilih gambar
    - Hilangkan tanda cek pada "Susutkan agar sesuai"
  4. Simpan
  5. Slide dapat menampilkan hingga 7 gambar slide dan minimal 2 gambar harus diunggah untuk dapat dapat menjalankan slideshow gambar
Untuk penambahan Gadget lainnya silahkan isi dengan gadget yang sekiranya menarik, dan berguna bagi pengunjung blog.
Pengatuan lainnya yaitu penambahan Daftar link dan juga Teks Manual sebagai informasi tentang blog pada bagian Bawah atau Footer .

Template ini akan Insyaallah akan di cek dan diperbaiki setiap 1 bulan sekali, untuk mendapatkan update mengenai Template Blogger Sekolah diatas anda bisa membookmark halaman ini atau berlangganan melalui email dibawah posting ini.
Ada pertanyaan mengenai Cekula Template silahkan tinggalkan komentar.

2013-04-03

Seperti yang sedikit pernah saya bahas di halaman Syntaxs CSS, baik classs ataupun ID yang ditetapkan pengguna untuk selector.

Penggunaan / Penerapan Class
Class ditentukan dengan memasukkan periode (.) tanda titik Sebelum nama selector/pemilih. Syntaxs untuk mendeklarasikan selector Class, dan sebagai contoh dibawah ini :

.[nama Class] {  
properti: value;  
...
}
Misalnya,
.contohnavbar { 
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Agar fungsi dari Class dapat digunakan dan bisa berfungsi, Class harus dipanggil dari THML area, dalam pemanggilan Class ini nama class harus benar-benar sama dengan karakter penulisan Class yang dibuat, apabila berbeda maka fungsi dari class tidak akan berjalan, perhatikan teks warna merah contohnavbar maka berikut contoh pemanggilan Class CSS ke HTML:

<div class="contohnavbar"> Ini adalah contoh menggunakan selector Class. </div>

Maka hasilnya sebagai berikut :

Ini adalah contoh menggunakan selector Class.


Penggunaan / Penerapan ID
ID ditentukan oleh tanda pagar (#) sebelum nama selector. Syntaxs untuk mendeklarasikan selector ID adalah sebagai berikut:

.[nama Class] {  
properti: value;  
...
}
Misalnya,
#footer-contoh {
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Untuk memanggil nama ID diatas dapat digunakan dengan kode HTML berikut
<div id="footer-contoh"> Ini adalah contoh menggunakan ID selector. </div>
Maka hasilnya sebagai berikut


Diatas merupakan contoh sederhana atau contoh yang simple tentang penggunaan Class CSS dan juga ID CSS.

Devinisi Class vs ID
Perbedaan antar Class dengan ID yaitu.

ID : ID hanya boleh digunakan dalam satu halaman saja dan tidak boleh dipanggil / digunakan ulang dalam satu halaman untuk element yang lain.  misalnya sebuah nama ID #sidebar-wrapper maka ID #sidebar-wrapper tidak boleh digunakan lagi didalam satu halaman. kalaupun bisa halaman website/blog anda akan dianggap tidak valid HTML.

Class : Berbeda dengan ID, Class css dapat digunakan untuk mengatur banyak element html sebanyak mungkin walaupun dalam satu halaman.

2013-03-27

Photoshop Spot Blogger Template
TEMPLATE INFORMATIONS
Template NamePhotoshop Spot
Author By Us / Templatemaxs.com
Descriptions Template Type : Photoshop Spot is a free blogger template design for template  personal blog and have feature  

2013-03-20

Advanced CSS3 Menu Genrator, sebuah tamplate untuk blogger yang memiliki fitur Online Generator yaitu css3 Navigasi Menu Generator, tool ini saya buat pada blog platform Blogger sehingga mudah dalam penginstallan karena tidak membutuhkan hosting sendiri untuk menjalankan tool menu generator ini.

Apakah fungsi dasar dari template ini dihilangkan? :
Tidak. Saya tidak menghilangkan fungsi asli daripada template ini, template ini berfungsi sebagaimana mestinya yang lain bisa melakukan posting menambahkan widget dll, Template ini memang beda dari template lain yang pernah ada dan yang saya buat sebelumnya, seperti saya jelaskan diatas bahwa template ini memiliki fungsi layaknya sebuah Website yaitu Online Menu Generator dengan CSS3 yang  saya digabungkan kedalam template Blogspot.

Tool Menu Generator sengaja saya buat bagi siapa saja yang ingin membuat blog yang memiliki fitur Generator, Tool ini saya buat menggunakan kode Javascript. dan selanjutnya juga akan saya tambahkan fitur generator lainnya seperti Button Generator, Color Picker Generator dan fungsi-fungsi lain yang mungkin untuk ditambahkan atau diconvert ke blogger.

Secreen shoot : klik gambar utk memperbesar!

Nama Project : Csstools Blogger Template
Platform : Blogspot
Versi : 1.0 beta
Demo homepage : Csstools Blogger Template
Tool demo : Menu Maker Demo
Fitur : 
  • Advanced CSS3 Generator
  • Page tabview
  • Easy Color Picker by Stefan Petre
  • Radio Slider dngan jquery ui
  • Full Control setting
  • Grab CSS code dan HTML code
  • Easy control
  • Button Maker (coming soon)
  • Color Gradient generator (coming soon)
  • Rounded corner generator (coming soon)
  • Box shadow generator (coming soon)
  • dll
Untuk informasi mengenai tool diatas silahkan Hubungi Saya disini

Deskripsi :
Tools generator berplatform blogspot yang sangat mudah digunakan dengan pengaturan-pengaturan menu seperti merubah warna, model menu, ataupun dropdown model.




2013-03-17

Blogsilve Blogger Template


TEMPLATE INFORMATIONS
Descriptions
Blogsilve Blogger Template Gratis , merupakan template untuk blogger yang khusus saya desain menyesuaikan untuk blog bertemakan blog personal. Blogsilve Blogger Template memiliki tampilan yang sederhana agar nampak rapi dan user friendly, dengan warna silver 3 kolom beranda dan 2 kolom di halaman posting, juga 4 kolom pada bagian footer.
Fitur lain seperti iklan di header dan sidebar juga sudah siap tinggal anda pasang kode iklan saja, cukup mudah untuk memasangnya / Template Adsense Ready

Author U-sup / Templatemaxs.
Lisensi Template ini gratis untuk dipakai, dan bebas disebar luaskan juga dimodifikasi atau dikembangkan, akan tetapi dilarang menghilangkan credit tautan / link dibagian footer.
Penghapusan link hanya diijinkan kepada Donatur saja...!
Terima kasih.

2013-03-10

Kemarin saya posting tentang Pengertian apa itu CSS beserta sejarah CSS yang bisa disimak disini --> , sekarang sedikit tulisan tentang mulai menggunakan CSS, perli diketahui bahwa CSS tidak masuk dalam kategori "Bahasa Pemograman" melainkan untuk pengatur dan pengendalikan tampilan sebuah element saja yang beda dengan PHP dan sejenisnya.

Secara dasar CSS dibagi menjadi 3 bagian yaitu :

  1. Selector : Ini merupkan sebuah elemen pada HTML yang akan kita kendalikan atau yang akan diatur tampilan / style-nya.
  2. Property : Property ini merupakan jenis atau atribut untuk menentukan tingkah laku element.
  3. Value  : Value merupakan isi daripada Property, dan setiap Property harus memiliki Value.
Contoh dasar CSS :


H1 {font-size:18px; text-align:center;color:red;}

  1. CSS dapat diawali dengan : H1, table, body,dll
  2. dilanjutkan dengan kurawal pembuka {
  3. Lalu deklarasi: property:value
  4. Titik koma ;
  5. terakhir yaitu kurawal penutup }
Contoh percobaan :

<html> 
  <head> 

<style>
h1 { 
   font:size:18px;
   color:red; 
   text-align:center; 

</style>

 </head> 
   <body> 

    <h1>Contoh CSS teks di Tengah Warna Merah</h1> 

   </body> 
</html>

- Untuk melihat hasilnya salin kode diatas pada Notepad
- Lalu Save as
- Beri saja nama cssdasar.html
- Save as type : All files
- dan Save

Sekarang bukalah di browser chrome, firefox atau opera dan lihat hasilnya,
Berikutnya akan saya tulis mengenai Penggunaan id/class


Apa itu CSS / Cascading Style Sheet  
CSS - Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam tentunya tanpa CSS website tidak akan memiliki tampilan yang rapi.
CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS 
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Versi Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer.  Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga dapat melakukan atau menampilkan animasi pada halaman website / blog, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Sedikit Contoh CSS :


body {
background-color:#d0e4fe;
font-size:12px;
color:#000000;
}

h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
Seperti itulah sekiranya pengertian CSS dan Sedikit tentang sejarah CSS.
Tag : pengertian css, apa itu css, sejarah css, versi css, css1, css2, css3, definisi css, contoh css, penggunaan css.