2011 -Education for all

Home »Archives for2011

Template Manis Polesan Education for all

Posted byTeacher's Message

Ho..ho..hoi,..Hello, Sobat blogger mania all around the world..he..he.., I'm not a template designer but I am a template breaker...he..he..he..satu guru satu ilmu dilarang mengganggu..ya itulah mungkin bahasa yang bisa EFA gunakan, karena EFA bukan perancang template tapi EFA perusak template..he..he.., Yep sebagian para blogger beranggapan bahwa penampilan template itu tidak penting yang penting adalah isinya..he..he..ada juga ungkapan yang mengatakan "jangan lihat siapa yang bicara tapi lihatlah isi pembicaraanya" tapi menurut EFA kedua-duanya sangatlah penting. karena penampilan blog yang bagus dan rapi akan membuat pengunjung blog akan betah berlama lama ditempat kita. benarkan....

So, praise to God Allah SWT, due to his blessing charity EFA was able to edit two cute templates, nah tidak usah panjang lebar. lihat saja kedua gambar template dibawah ini. kalau penasaran silahkan lihat demonya. kalau berminat memakainya, silahkan tingggalkan dikolom komentar. kalau nggak bisa memasangnya "EFA" siap memasangnya karena ada sebagian widget yang harus dipasang manual, he..he...

TEMPLATE I

D E M O

Nah, Template ini aslinya namanya simple template by Josh Peterson, tapi dah EFA obrak abrik, terdapat sat u sidebar kiri dan tiga widget diatas footer, kayaknya cocok untuk sobat blogger yang mau memasarkan produknya. Nah untuk lebih jelasnya silahkan klik demo

TEMPLATE II

D E M O

Nah, untuk template yang kedua ini nama aslinya Juga Simple BLOGGER Template tampilanya udah beda juga, terdapat dua kolom sidebar disebelah kanan untuk lebih jelasnya silahkan saja klik pada demo. sekali lagi yang berminat memakainya silahkan saja tinggalkan pesan sobat dikolom komentar. bila sobat juga belum mempunyai blog EDUCATION FOR ALL, juga bersedia membuatnya. apabila sobat menghendaki tampilan lain, misalnya yang dua kolom EFA akan coba membuatnya, he..he..he...,

TEMPLATE III

D E M O

Ok EFA kira begitu saja, semoga bisa menginspirasi para blogger mania yang lainya

Selamat Berkreasi.... melaui blog...

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

» Selamat Berkreasi - E F A «

Download Template Keren

Posted byTeacher's Message

Bila sobat blogger mania bosan dengan tampilan template sobat blogger mania dan berminat untuk mengubahnya silahkan download template keren ini. scriptnya EFA coppy di microsoft word. cara pemasanganyapun cukup mudah. sobat blogger mania hanya cukup mengcopy scriptnya kemudian pastekan pada halaman edit HTML sobat. mudahkan nah ini gambar templatenya.

TEMPLATE I FBTMaGVI.

DOWNLOAD

TEMPLATE II NEW STYLE MODIFICATION

DOWNLOAD

TEMPLATE III NEW STYLE MODIFICATION

DOWNLOAD

Demikian dulu yang bisa EFA postingkan untuk kali ini, bila sobat blogger mania berminat menggunkanya silahkan tinggalkan dikolom komentar untuk template II dan III. untuk segera ditindak lanjuti.

Selamat Berkarya...

» Selamat Berkreasi - E F A «

Cara Copas Gambar UntukPosting di Blog

Posted byTeacher's Message

Ho..ho..hai sobat blogger mania pemula, yang ilmunya masih cetek seperti EDUCATION FOR ALL, dalam postingan kali ini EFA akan berbagi sedikit ilmu dengan para sobat blogger pemula seperti saya. yaitu tentang Cara Copas Gambar UntukPosting di Blog. kalau kita suka ngeblog kita harus pandai membuat blog kita rapi dan menarik, juga dalam menulis artikel pada saat posting untuk page blog kita bisa menambahkan gambar dengan upload dari data kita dan bisa juga dengan copy paste gambar yang banyak ragamnya di dunia internet, namun pada kesempatan ini EFA hanya akan membahas tips trik cara copy gambar untuk kita paste pada posting di blog saat menulis artikel.

Oke …… kita akan coba langkah sederhana cara copy paste gambar untuk posting di blog kita. Bila di screen layar computer anda sudah ada gambar yang akan anda ambil, anda bisa melakukan beberapa langkah sederhana seperti di bawah ini :

1.    PRINT SCREEN ( tekan tombol “ prt sc “di sebelah kanan atas pada keyboard sobat blogger mania )
2.    PAINT ( masuk ke menu paint, klik tombol star di pojok kiri bawah lalu cari paint dan klik masuk ke   paint )
3.    PASTE ( klik menu EDIT lalu klik PASTE, nah …….. sekarang hasil dari print screen anda sudah Nampak )
4.    PILIH BAGIAN dari GAMBAR ( beri tanda pada gambar yang anda inginkan unuk di copy dengan cara klik pada menu kotak bertitik-titik atau selec. Lalu klik pada pojok gambar tersebut dan tarik, maka bagian gambar yang di inginkan sudah terlihat garis batasnya )
5.    COPY GAMBAR YANG DIPILIH ( lalu klik menu EDIT lalu klic COPY, setelah itu sobat blogger mania bisa langsung keluar dari menu paint. Akan tampil perintah untuk save atau tidak, anda klik aja No )
6.    PASTE GAMBAR KE POSTINGAN BLOG ( setelah kembali ke postingan,letakkan krusor pada tempat yang akan ditaruh gambar, klik tombol EDIT lalu klik PASTE, nah gambar yang sobat blogger mania inginkan sudah ada dalam postingan, sobat blogger mania tinggal mengatur letak dengan menyeret gambar tersebut ketempat yang di inginkan )

EFA kira cukup itu aja dulu yang bisa EFA share,...Selamat Berkarya.

» Selamat Berkreasi - E F A «

Cara Membuat Tombol Share Facebook, Twitter, Google Plus (+) Di Blog

Posted byTeacher's Message

Jika pada postingan terdahulu EFA memposting artikel tentang Cara membuat facebook like button maka Pada postingan kali ini EFA akan memposting artikel yang menurut EFA cukup bermanfaat yaitu Cara Membuat Tombol Share Facebook, Twitter, Google Plus (+) Di Blog.

Dengan mempunyai tombol share di blog sobat blogger mania, maka akan memberikan kesempatan para pengunjung / visitor blog agar mereka bisa berbagi dengan teman atau jaringan mereka melalui fitur share yang tersedia pada blog anda. Tentunya ini sangat penting, untuk Optimasi SEO blog sobat blogger mania Bila sobat blogger mania berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini

Pertama silahkan login ke blog sobat blogger mania
Klik menu Design > Edit HTML > centang expand widget templates
Selanjutnya cari kode yang mirip dengan ini: <div class='post-body entry-content'> atau class='post-body entry-content' , bisa dipilih salah satu.

Apabila sobat blogger mania dah menemukanya maka kopy dan pastekan kode dibawah ini tepat diatas salah satu kode diatas

<b:if cond='data:blog.pageType == "item"'>

<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc;

padding:8px 0px;margin:5px 0px 5px

0px;width:100%;float:left;height:20px;'>

<div style='float:left;padding-left:0px;font:normal 12px

Georgia;'>

Share on :

</div>

type='text/javascript'>

</script></div>

(function() {

var s = document.createElement('SCRIPT'), s1 =

document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

</div>

<a class='twitter-share-button' data-count='horizontal'

data-via='User Name'

href='http://twitter.com/share'>Tweet</a><script

src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

<g:plusone size="medium"></g:plusone>

(function() {

var po = document.createElement('script'); po.type =

'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

})();

</script>

</div>

</b:if>

Demian yang bisa EFA share,..

» Selamat Berkreasi - E F A «

Cara Membuat Box dg Outline dan CSS3 Outline Offset Property

Posted byTeacher's Message

Pada postingan kali ini Education for all akan memposting artikel tentang Box dg Outline dan CSS3 Outline Offset Property Secara sederhana bisa digambarkan bahwa outline adalah garis terluar sebuah box. Jadi outline ini posisinya di sebelah luar border, sedang outline offset merupakan jarak (bidang) antara border dan garis terluar (outline).

Contoh Penulisan Box dg Outline dan CSS3 Outline Offset Property

Keterangan/Catatan:

Outline dituliskan seperti halnya ketika menuliskan border.
- Outline-style terdiri atas : solid, inset, outset, dashed, dotted … dst.
- Tebal Outline (outline-width) biasa dituliskan dalam px (pixel)
- Warna outline (outline-color) bisa dalam bentuk teks (seperti : black, red … dst) atau kode warna seperti halnya #000 (untuk warna hitam) dan rgba color (contoh: rgba(0,0,0,0.5)).
Penulisan dasar outline sbb: outline:[outline-style] [outline-color] [outline-width];
outline-offset : dituliskan dalam satuan px (pixel) (semakin besar maka jarak border dan outline akan semakin lebar).
Outline-radius sementara ini hanya kompatibel di Mozilla Firefox dan dituliskan dengan kode sbb: -moz-outline-radius:…px;

Semoga bisa dipahami dan bermanfaat...

» Selamat Berkreasi - E F A «

Cara Mengembalikan Account Google Yang Di Nonaktifkan/Diblokir

Posted byTeacher's Message

Ingatkah sobat blogger mania ketika pertama kali membuat sebuah akun di google? cukup mudah bukan? dari kemudahan itu ternyata google bisa marah alias ngamuk. EFA cukup dibuat stress dengan kejadian itu. mula mula EFA membuka salah satu artikel EFA. dan apa yang terjadi, BLOGGER TIDAK DITEMUKAN/ TELAH DIHAPUS itulah yang terbuka pada halaman blog. EFA berfikir mungkin karena EFA salah dalam menuliskan alamat karena EFA menggunakan daftar isi manual. kemudian EFA coba lagi dengan artikel yang lainya ternyata hasilnyapun sama BLOGGER TIDAK DITEMUKAN/TELAH DIHAPUS. ada apa ini??? EFA coba artikel artikel yang lainya ternyata hsilnya sama. Kemudian EFA coba membuka E-mail. dan ternyata E-mail EFA dinonaktifkan alias diblokir dengan alasan yang tidak EFA mengerti. EFA coba telusuri dan ada satu indikasi bahwa EFA telah melanggar satu kesepakatan dengan google sehingga pihak google berhak memutuskakan hubungan. EFA tutup blog dan beramsumsi bahwa blog EFA memang sudah hilang. dan betapa sedihnya blog yang sudah EFA bangun kurang lebih satu tahun harus hilang begitu saja. Namun EFA tidak putus asa dan terus mencari cari bagaimana cara mengembalikan alamat e-mail yang di nonaktifkan. dan EFA pun menenukan petunjuk keesokan harinya, dari petunjuk petunjuk googlelah akhirnya blog EFA bisa dibuka kembali. Berikut adalah caranya

Pertama Login ke account google sobat blogger mania
Setelah sobat blogger mania memasukkan data akun email dan sandi kemudian klik tombol masuk dan seketika itu juga sobat blogger mania akan di hadapkan pada halaman “akun dinonaktifkan untuk sementara”
Perhatikan halaman tersebut dan baca dengan seksama dan cermat yang nantinya sobat blogger mania akan menemukan tulisan yang bertujuan untuk bantuan langsung, masukkan nomor ponsel sobat blogger mania di bawah dan kami akan mengirimkan Anda SMS berisi kode verifikasi.Maksud dari tulisan ini bahwa pihak google dapat menerima klaim langsung melalui nomor handphone dari pengguna google akun untuk segera mengaktifkan kembali akun google milik pengguna yang telah terhapus. Sekedar konfirmasi kepemilikan akun google sepertinya. Mengingat bahwa sebelumnya buat daftar akun google itu sangat gampang seperti yang EFA tuliskan diatas dan setiap orang bisa saja menggunakan layanan dari akun google. Oleh karena itu mungkin saat seperti inilah google mulai mendata kembali para penggunanya melalui konfirmasi kepemilikan akun google tersebut.
Untuk mengkonfirmasi verifikasi dengan menggunakan nomor handphone pribadi sobat blogger mania silahkan ketikkan nomor handphone sobat blogger mania pada form yang tampak pada layar google akun seperti pada gambar dibawah :
Pilih negara indonesia dan pada kolom isian nomor ponsel isikan dengan nomor ponsel anda. Format penulisan nomor ponsel : ganti angka 08 pada angka paling depan nomor handphone anda menjadi +62. misal nomor hp anda : 08136907 xxxx ketikkan menjadi +62136907xxxx

Kemudian tekan tombol kirim kode verifikasi ke ponsel saya. selanjutnya anda akan tertuju pada halaman form seperti tampak pada gambar dibawah.
Tunggu kode verifikasi muncul melalui sms dari google ke handphone anda. Kalau sms belum juga muncul dalam waktu 5 menit silahkan klik tautan coba kirim ulang seperti pada gambar diatas.
Setelah sms dari pihak google yang berisi kode verifikasi muncul ke hp anda kemudian ketikkan kode verifikasi tersebut ke kolom yang tersedia untuk masukkan kode.
Setelah memasukkan kode kemudian tekan tombol verifikasi. Dan selanjutnya selamat akun anda telah diaktifkan kembali Sobat blogger mania bisa login kembali ke akun google Sobat blogger mania.

Selamat mencoba cara diatas apabila akun sobat blogger mania dinonaktifkan. Semoga berhasil...

» Selamat Berkreasi - E F A «

Cara Download Film dari You tube

Posted byTeacher's Message

Barangkali saja diantara sobat blogger mania pemula seperti EFA ini masih ada yang belum paham bagaimana cara download film/file dari you tube. nah oleh sebab itu Education for all akan sharing, dengan sobat blogger mania pemula. silahkan saja ikuti sharing EFA kali ini

1. pertama silahkan buka youtube
2. cari video yang akan anda download setelah ketemu silahkan kopy urlnya
3. buka web untuk mendownloadnya ada disini keedvid

silahkan paste di kolom ini, jgn langsung klik download, pilih setelah itu pilih mpg , klik download, selesai mudah kan.. tapi tidak menutup kemungkinan untuk gagal, maka bisa pakai jurus yang lainnya tapi tidak kami jelaskan secara detail, yang intinya hampir sama

Real Player Gold

Untuk mendownload Video Youtube via komputer, bisa kita lakukan langsung jika kita memiliki program Real Player Gold. Jika kita memiliki program tersebut di komputer kita, kapanpun ada video berbasis flash di situs apapun, cukup menggunakan klik kanan diatas video yang akan kita download dan pilih “Download Video”
Easy YouTube Video Downloader

Jika Anda menggunakan browser Firefox, silahkan install plugin Easy YouTube Video Downloader yang membuat Firefox mampu mendownload video semudah klik kanan saja.

Download Video dari Video Downloader

Downloader9

Situs video downloader ini merupakan situs yang cukup mudah dan sederhana. Anda hanya perlu meng-copy paste URL Video dari Youtube, Metacafe, DailyMotion, dll dan langsung mendownload videonya. Jangan lupa, anda harus memberikan ekstensi .FLV ketika mendownload video, agar bisa diputar di FLV Player Anda.
KeepVid

Mirip dengan situs Downloader9, situs ini juga bisa membantu mendownload video dari beberapa portal video. KeepVid juga membantu mengkonversikannya ke format FLV atau MP4.
Vixy

Vixy membantu download video dengan mengkonversikannya ke format AVI, MOV, MP4, dan 3GP. Situs ini cukup mudah digunakan, dengan beberapa iklan yang cukup banyak.
VideoDownloadX

Situs gratis ini juga bagus, cuma memang cukup banyak iklannya. Jadi jangan terkecoh mengklik iklan disana ketika mau download atau mau melakukan rename terhadap video.
SaveTube
Ini merupakan situs video downloader yang cukup simpel. Cukup copy paste dan download.
VideoGetting

Situs ini gratis dan menyediakan fasilitas konversi langsung ke format video lain seperti WMV, MP3, MP4, MOV, 3GP, AVI, MPG, dll. Walau multi fungsi, situs ini cukup mengganggu karena iklan-iklan pop-upnya.

Demikian dulu untuk sementara yang bisa EFA share, Selamat berkreativitas...

» Selamat Berkreasi - E F A «

Download Gratis Template New Style Modification

Posted byTeacher's Message

Pada Postingan kali ini Education for all memposting tentang "Download Gratis Template New Style Modification" Template ini dikhususkan buat para sahabat blogger mania yang masih kesulitan memasang foto pada header blog. dengan mendownload template ini, sobat blogger pemula seperti saya ini sudah sudah tidak perlu pusing lagi bagaimana cara memasang foto pada blog yang dilengkapi dengan efek opacity. nah untuk menambahkan element dibawah header sobat blogger mania pemula cukup mencari kode seperti dibawah ini:

Kemudian letakan kode dibawah ini tepat dibawah kode yang diatas

Kemudian untuk mengganti gambar/ logo Education For All dan foto disamping logo pada header carilah kode berikut ini

#header h1{background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/joe.jpg)
#header h1:hover{background:transparent url(http://i1128.photobucket.com/albums/m493/wonglampung1/Foto005.jpg)

Ganti alamat url yang berwarna kuning dengan alamat url sobat.

dan inilah gambar templatenya namun jangan dilihat buramnya, tetapi lihat dulu demonya, baru silahkan didownload kalau berminat menggunakanya

DEMO DOWNLOAD

Demikian yang bisa EFA share, semoga bermanfaat. jika ada kesulitan silahkan konsultasikan.

Selamat berkreasi......................

» Selamat Berkreasi - E F A «

Cara Memasang Gadget Pengikut Atau Follower dengan Script di Blogger

Posted byTeacher's Message

Menanggapi pertanyaan dari beberapa sahabat tentang bagaimana cara membuat widget follower efek gelap terang seperti yang diterapkan pada blog education for all, maka EFA akan memposting artikel tentang Cara Memasang Gadget Pengikut Atau Follower dengan Script di Blogger, karena hal ini ada kaitanya dengan cara membuat widget follower efek gelap terang, Kenapa begitu, sebelum membuat gadget follower dengan efek gelap terang sobat blogger mania harus mempunyai skriptnya dulu baru diterapkan dalam gadget follower dengan efek gelap terang.

Dengan script ini kita dapat mengatur tampilan widget Pengikut atau Follower sesuai dengan selera kita. Bagaimana cara mendapatkan script widget atau gadget Pengikut ini? Silakan ikuti langkah-langkahnya berikut ini.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di halaman Dasbor, silakan klik menu Akunku.

3. Pada Produk Saya, klik Google Jalinan Teman (Google Friend Connect).

4. Klik menu Gadget. ARAHKAN KURSOR PADA GAMBAR JIKA GAMBARNYA KURANG JELAS

5. Klik Members atau Dapatkan gadget ini.

6. Silakan tentukan lebar widget sesuai lebar sidebar blog Anda dan atur banyaknya baris foto yang ingin ditampilkan.

7. Silakan pilih serangkaian warna untuk gadget Pengikut Anda dan jenis font.

8. Klik tombol Buat kode untuk mendapatkan kode HTML.

9. Copy kode HTML yang tersedia.

10. Silakan menuju halaman Dasbor blog Anda kembali

11. Klik Rancangan > Elemen Laman > Tambah Gadget.

12. Pilih HTML/JavaScript.

13. Berikan judul sesuai keinginan Anda.

14. Paste kode HTML yang tadi di-copy di kolom Konten.

15. Klik tombol SIMPAN/SAVE.

16. Pindahkan elemen ke tempat yang Anda inginkan.

17. Klik tombol SIMPAN/SAVE.

18. Selesai.

» Selamat Berkreasi - E F A «

Cara Membuat Background Pada Judul Sidebar

Posted byTeacher's Message

Beberapa template tidak menyediakan background pada sidebar, sehingga biasanya blogger pemula seperti education for all, kadang kadang juga merasa kebingungan, bagimana sih membuat background pada judul sidebar. nah pada kesempatan kali ini EFA akan mencoba memposting suatu artikel yang tentunya ditujukan buat blogger blogger pemula seperti EFA ini nah judulnya yaitu : Cara Membuat Background Pada Judul Sidebar .Caranyapun relative cukup mudah. sobat blogger mania cukup mengikuti langkah langkah berikut ini

oke langsung caranya

=> Loggin ke Blogger

=> Layout / rancangan

=> Edit HTML

=> centang expand template widget

kemudian cari kode ini

.sidebar h2 {

Lalu anda tambahkan kode ini di bawah nya

background:url(alamat image anda disini)repeat-x;

dan jadinya seperti ini

.sidebar h2 {

background:url(alamat image anda disini)repeat-x;

ganti kode berwarna merah dengan URL gambar anda

Apabila dalam tempalte sobat blogger tidak mempunyai kode .sidebar h2 {

anda copy paste kode di bawah ini dan simpan di atas kode ]]></b:skin>

.sidebar h2 {

background:url(URL gambar anda disini)repeat-x;

color: #FFFF66;

font-size: 11px;

font-family:

Georgia

;

font-weight: strong;

margin: 0px 0px 5px 0px;

padding: 3px 0px 3px 10px;

text-align:center;

}

dan jadi nya seperti ini

.sidebar h2 {

background:url(URL gambar anda disini)repeat-x;

color: #FFFF66;

font-size: 11px;

font-family:

Georgia

;

font-weight: strong;

margin: 0px 0px 5px 0px;

padding: 3px 0px 3px 10px;

text-align:center;

}

]]></b:skin>

jangan lupa ganti kode berwarna biru dengan URL gambar anda oke sob

anda juga bisa ganti kode berwarna hijau

#FFFF66; adalah kode warna anda bisa cari kode warna di blog saya ini silahkan KODE WARNA

11px; adalah ukuran huruf makin besar px nya maka semakin besar huruf nya

Georgia

; adalah font nya anda bisa ganti dengan font yang anda suka

Begitu saja kok repot....................

Selamat Mencoba semoga berhasil

» Selamat Berkreasi - E F A «

Cara Membuat Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Posted byTeacher's Message

Pada postingan kali ini education for all akan mencoba sharing tentang bagaimana Cara Membuat Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition, ada sebagian sobat blogger mania yang berminat untuk memasangnya karena bisa mempercantik tampilan blog tapi sebaliknya justru ada beberapa sobat blogger mania yang tidak menyukainya tapi justru pernah mengejek blog Education for all dikolom komentar dengan mengatakan bahwa blog education for al seperti blog anak TK tapi tidak apalah, memang orang itu lebih banyak yang tidak suka ketimbang yang suka.

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS adalah sebagai berikut:

Penulisan opacity property di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}

Penulisan opacity property dan hover effects di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Opacity di Internet Explorer dituliskan dalam bentuk kode:
filter:alpha(opacity=...);
Nilai opacity (tanda titik-titik) sebesar 0 s/100.
Nilai opacity di browser yang lain menggunakan nilai 0 s/d 1.0
Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas.

Menggabungkan opacity property dan CSS3 Transition

Saat ini banyak browser sudah support terhadap CSS3 hingga berbagai efek baru dapat ditambahkan dalam sebuah desain termasuk saat kita mendayagunakan opacity property. Penggunaan CSS3 transition akan mampu menciptakan sebuah transisi dalam waktu yang bisa diatur saat terjadi perubahan efek gelap menjadi terang atau terang menjadi gelap. Transisi ini tentunya akan membuat efek transparansi yang tercipta menjadi semakin menarik, karena kecepatan waktunya bisa diatur sesuai selera.

Kode CSS: Efek Gabungan opacity dan CSS3 Transition

.efekblur {
      opacity: 0.7;
      filter: alpha(opacity=70);
     -o-transition:opacity ease-in 700ms;
     -moz-transition: opacity ease-in 700ms;
     -webkit-transition: opacity ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
     -o-transition: all ease-in 700ms;
     -moz-transition: all ease-in 700ms;
     -webkit-transition: all ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Kode CSS di atas karena menggunakan CSS3, maka hanya akan bekerja secara sempurna di browser yang sudah support CSS3 seperti Mozilla, Opera, Safari dan Google Chrome serta beberapa browser tertentu yang lain.

Box dengan Efek Gelap Terang

Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;   
      padding: 15px 8px;
      background: #111;
      color: #666; 
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

Untuk menggunakan box tersebut, Sobat blogger mania harus menggunakan kode xHTML seperti di bawah ini:

<div class="boxwidget">
Di sini widget atau Teks diletakkan!
</div>

Simpan kode CSS di atas kode ]]></b:skin>
Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka dan tag penutup .

Selamat Mencoba semoga berhaail, dan Selamat berkarya melalui blog....

» Selamat Berkreasi - E F A «

Download Gratis Template cantik

Posted byTeacher's Message

Bagi rekan rekan sobat blogger mania yang mungkin sudah bosan dengan tampilan templatenya, dibawah ini EFA coba upload beberapa template yang mungkin saja sobat blogger mania berminat untuk menggunakannya, nah untuk mendapat hasil yang maksimal tentu saja perlu sedikit sentuhan untuk mengedit kode HTML nya, sehingga bisa sesuai dengan harapan sobat semua. Barang kali saja sobat blogger mania kurang cocok dengan tampilan warnanya, sobat bisa mengganti sesuai selera. Nah untuk melihat kode warna silahkan sobat klik saja pada blog ini ngk usah kemana mana disini alamatnya:

Cara Merubah penampilan blog dank ode warna

Silahkan saja klik disini untuk melihat Cara Merubah penampilan blog dank ode warna

Untuk download templatenya silahkan dipilih:

AMOEBANO BLOGGER TEMPLATE

DOWNLOAD

FALKNERPRESS BLOGGER TEMPLATE

DOWNLOAD

INMEDIO BLOGGER TEMPLATE

DOWNLOAD

COVER BLOGGER TEMPLATE

DOWNLOAD

Demikian dulu yang bisa EFA sharing kalau ada permasalahan segera konsultasikan dengan yang bersangkutan, he..he..he.. contohnya seperti dengan Ki. Joko Bodo

Selamat mencoba semoga berhasil, dan tidak bingung....

» Selamat Berkreasi - E F A «

Pengetahuan Template dan Elemen Pembentuknya

Posted byTeacher's Message

Pada postingan yang berjudul Pengetahuan Template dan Elemen Pembentuknya ini saya kira sangat bermnfaat sekali terutama bagi para pemula yang mau mencoba coba untuk mengutak atik template Kembali kita akan mengupas isi dalamnya blog. Saat ini kita akan mencoba memahami lebih dalam soal template, terutama apa saja yang terdapat di dalamnya sehingga kita dapat melakukan aktivitas sebagai seorang blogger. Membicarakan template tak akan lepas dari HTML (Hyper Text Markup Language). HTML merupakan file teks murni yang dapat dibuat dengan editor teks sesuai selera (sembarang/bebas) dan dikenal sebagai web page. Dokumen HTML umumnya berisi informasi ataupun interface aplikasi di dalam internet.
Secara sederhana dapat dikatakan, bahwa template dibangun oleh paduan/kumpulan KODE yang disebut sebagai:

KODE CSS (diletakkan di bagian head).
KODE HTML (di letakkan di bagian body), dan
KODE berupa script yang kita kenal sebagai javascript (bisa di bagian head atau body).

Secara umum Elemen pembentuk template yang berupa dokumen HTML dinyatakan dengan tag : <html> , <head> dan <body>

Dokumen ini mempunyai dua section utama : section head dan section body

Pola dasarnya sebagai berikut :

<html>
<head>
...informasi tentang dokumen html (berisi KODE CSS)
</head>
<body>
...informasi yang ditampilkan dalam browser web (berisi KODE HTML)
</body>
</html>

Bagian yang menjadi elemen dasar sebuah template :

Header atau kepala blog (yang berisi nama blog)
Main (berisi halaman posting)
Sidebar (umumnya berisi kategori/label, arsip, about me/identitas blogger)
Footer (pengikut)

Meskipun gambaran secara umumnya seperti di atas, blog masih dapat dikembangkan lagi dengan cara menambah elemen baru.
Masing-masing blog ini mempunyai widget yang berfungsi sebagai sarana menambah gadget sehingga blog bisa dikembangkan elemen penyusunya sesuai kebutuhan blogger.
Penambahan gadget, disamping untuk melengkapi fasilitas layanan bagi pengguna blog, juga dapat dipergunakan sebagai alat untuk memperindah tampilan blog.
Penulisan setiap dokumen HTML selalu di awali dengan tag dan di akhiri dengan tag
Setiap penulisan dokumen dalam template biasanya selalu menggunakan tag yang berpasangan. Tag pembuka berbentuk tanda < (kurung buka) dan > (kurung tutup>, sedang tag penutup berupa tanda < (kb) dan > (kt) yang disisipi tanda / (garis miring).

Semoga bisa menambah sedikit pengetahuan kita

» Selamat Berkreasi - E F A «

Langkah-langkah dan Cara membuat Google site

Posted byTeacher's Message

Langkah-langkah dan Cara membuat situs dari Google site

Artikel ini merupakan sambungan dari artikel sebelumnya Google Site, File Hosting Gratis Server Indonesia. Berikut ini adalah langkah-langkah cara membuat google site, upload file, download, dan menggunakan filenya.

1. Buka link http://sites.google.com
2. Login dengan Google akun Anda. Kalo belum punya, silahkan daftar terlebih dahulu.
3. Klik menu Setelan Pengguna (User Setting). Ubah bahasa menjadi Bahasa Indoenesia dan Zona waktu GMT+7 (Ini untuk membantu menyimpan file Anda di server google Indonesia). Simpan perubahan!
4. Klik tombol Buat Situs.
5. Pilih template sesuai selera Anda, isi nama situs, URL, kode chaptcha. Klik tombol Buat situs. Dan situs Anda sudah jadi sekarang.

pengaturan Berbagi pakai file di google sites untuk pribadi atau umum

6. Klik menu Tindakan Lainnya -> Berbagi pakai situs ini seperti gambar disamping. Ceklist pada pengaturan izin tingkat lanjut yaitu Setiap orang di dunia dapat melihat situs ini (tampilkan untuk umum). Biar file yang kita upload bisa diakses oleh semua orang.

Untuk menyimpan/upload file [MP3, MP4, FLV, SWF, JPG, GIF, PNG, DOC, PPT, XLS, PDF, JS, CSS, dll.] Agar bisa di download dan digunakan.
1. Klik tombol Buat laman.
2. Pilih template Lemari Berkas.
3. Isi Nama halamannya. dan klik tombol Buat Laman
4. Klik tombol Tambahkan berkas. Dan silahkan untuk mengupload file Anda.

Untuk mendapatkan link downloadnya, klik kanan pada tulisan download/unduh dan copy link location.

Contoh File Video (FLV).

Download this video | Embed this Video Player

Contoh File MP3

Download this MP3 | Embed this MP3 Player

Semoga bermanfaat ,,,...,,......
Selamat berkreasi.............

» Selamat Berkreasi - E F A «

Cara Mengamankan Template di Halaman Edit HTML

Posted byTeacher's Message

Seorang sahabat di sulawesi mendownload salah satu template di artikel education for all, kemudian dia bertanya bagaimana caranya mengembalikan widget yang terhapus setelah mengganti template. nah lau saya jelaskan, pada saat menyimpan template kan ada warning sperti ini. Template baru anda tidak berisi widget berikut..bla..bla..bla..begitu biasanya, ada dua pilihan dipertahankan widget atau menghapus widget, kalau pilihanya menghapus widget tentunya widgetnya akan terhapus, kemudian saya menjawab kembalikan dulu sobat ke template lama, tapi dia menjawab, wah dak disimpan gan. dari pengalaman sahabat tersebut, education for all merasa perlu untuk memposting artkel tentang

Cara mengamankan template dihalaman edit html

Amankanlah template anda sebelum anda mengutak atik template sebelum anda menyesal

artikel ini dimaksudkan untuk menjaga seandainya terjadi kegagalan pada saat dilakukan modifikasi terhadap template. Dengan diamankannya desain awal blog, maka pengguna blog tidak akan kesulitan untuk mengembalikan lagi desain blog ke bentuk awal sebelum dilakukan perubahan.
Langkah yang harus di tempuh untuk mengamankan template adalah sebagai berikut :

LOGGIN
BLOGGER

====>

TATA
LETAK

====>

EDIT
HTML

===>

Lanjutkan dengan :

DOWNLOAD TEMPLATE
LENGKAP

========>

SIMPAN di
FOLDER PC

NOTE :

Login ke Blogger Merupakan langkah awal untuk masuk ke ruang Edit Template setelah membuka http://www.blogger.com kemudian dilanjutkan dengan memasukkan User Name (Nama Pengguna) atau Alamat Email serta jangan lupa tuliskan code number/kode rahasia
Setelah masuk di DASHBOARD/DASBOR teruskan dengan KLIK pada Layout/Design atau TATA LETAK/Rancangan.
Anda akan masuk di Page Element/Elemen Laman. KLIK pada Edit HTML !
Tunggu beberapa saat! KLIK Download Template Lengkap (kanan tengah dengan teks warna biru).
Simpan Desain template anda di folder PC.
Desain awal template yang sudah tersimpan dengan aman di folder PC bisa digunakan untuk mengembalikan desain template ke bentuk semula (sebelum perubahan) apabila saat mengadakan perubahan pada desain template terjadi kegagalan karena kesalahan teknik atau kegagalan KODE HTML yang tidak kompatibel dengan blog.
Untuk mengembalikan desain template blog ke bentuk semula (sebelum dilakukan perubahan), anda tinggal KLIK pada CHOOSE kemudian cari file desain template blog yang sebelumnya sudah tersimpan di folder PC (file berekstensi .xml). Lanjutkan KLIK pada Unggah.
Blog sudah dipulihkan kembali! Silahkan cek dengan membuka blog!

Demikian dulu dan semoga bermanfaat

» Selamat Berkreasi - E F A «

Subscribe to:Posts (RSS)

Download Browser

TEMPLATE EFA

Tutorial Bloger

Fasilitas Chating

Google Problem

Otomotive

RPP KTSP SMP

RPP KTSP SD

SEO

Soal CPNS

Latihan Toefl

Soal SNMPTN

Tipu Daya

E-mail Sahabat

BUSSINESS INTERNET

Education

BLOGGER BARU

WIDGET

Contact

E F A

Search here

Type a word related to the post'n'click search button!

Labels

Arsip Blog

Followers

TUKAR LINK

Keterangan/Catatan: