June 2012 -Education for all

Home »Archives forJune 2012

Cara Mengganti Background Kategory dengan Background Animasi

Posted byTeacher's Message

Hello, Sobat blogger mania, menanggapi pertanyaan dari salah satu sahabat pembaca blog education for all, yang telah membaca artikel tentang cara membuat label, dan memberikan komen diblog education for all, dia komen seperti ini " Kok nggak sama seperti gambar diatas ya...mas begitu kira kira komenya" ,bertolak dari komen tersebut maka pada postingan kali ini EFA akan posting artikel tentang Cara Mengganti Background Kategory dengan Background Animasi. Hal ini sangat mudah dibuat diblog sobat blogger mania, Nah apa bila sobat blogger mania pemula yang masih seperti EFA ini ingin menerapkanya coba saja ikuti langkah langkah berikut ini:

Cara membuat dan memasang kategori dengan background animasi :

D E M O : Arahkan mata sobat blogger mania ke kanan-atas blog ini pada kategori. Itulah live D E M Onya
Login : Login to BloGGer (Login ke BloGGeR).
Dasboard (Dasbor) : KLIK link "Layout (Tata Letak)".
Layot (Tata letak) (Dasbor) : KLIK link "Edit HTML".
CSS code (Kode CSS) : Cari kode "]]></b:skin> (di atas tag <head>. Gunakan Ctrl +F untuk mencari kode tersebut. .
Copy Paste : copy dan simpan kode css berikut dan letakkan di atas kode ]]></b:skin>
SAVE Template (Simpan Template) : KLIK SAVE Template (Simpan Template).

CSS Code (KODE CSS) :

#Label1 h2{color:transparent;
        background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/efaanimacategories.gif) no-repeat 10px 50%;}
#Label1 .widget-content li{list-style:none;padding-left:40px;
        background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/efaArrow_animacategories.gif) no-repeat 0 6px;}

NOTE :

Agar Memasangnya Mudah:

Bagi sobat Blogger mania yang mempunyai widget label lebih dari satu, sebaiknya dihapus dulu semua. Setelah hapus lakukan penambahan widget label yang dari blogger, baru kemudian pasang kode css tadi.

Untuk sobat blogger yang hanya mempunyai satu widget label kepunyaan blogspot (seperti punya Education For All yang sudah terpasang animasi di atas), silahkan langsung lakukan prosedur yang sudah tersedia di atas.

Semoga Bermanfaat...........

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 «

About The Author

Posted byTeacher's Message

Fajar Mardiyanto
Founder and author of Education For All's Blog

Fajar is an only villager who was born and grew up in a remote area. a human living on earth. he is a certificated teacher in International Design School in one of Lampung Provinces. He has great motivation and ambitions in life. he never gives up, things he likes to do, is caring poor students who are not able to continoe their study after graduating from their elementary school. as Goverment said that Indonesian children could finish their education at least nine years or equal to Junior Hight School.

In 2010/2011 Fajar M started Blogging, He learned by himself, He realized that knowledge must be shared with others that's why he named his Blog Education For All. He uses his blog not only for sharing about tutorial, blogger, template,modification, tips, trik, tricks, otomotif, widget, seo, spam,rpp,ktsp,download,perangkat,silabus, template polesan efa but also for announcing his students marks, and also assigments. Althought his blog is not so famous among others indonesian's blogger but at least it has morethan one hundred visitors a day. because his blog cover anything including teachers need like silabus, RPP, and KTSP. beside students need like SOAL SNMPTN, Latihan TOEFL and etc.

Another blog that can visitors visit from Education For All's Blog are, Berbagi untuk Anak Negeri, Healthy Life Style and Template Modification visitor can visit them to find another tips and trick blogging

Fajar Mardiyanto's Advice to New Bloggers

" When you intend to do something innovative in life, people will tell you that you can not do it but when you prove that you can, the same person would ask you: How you did it? So don't give up and keep blogging humbly.

Blogging requires a little hard work but a lot of patience. It lets you to communicate with a multicultural online world of 2.2 Billion people, each of them is eager to find out, what have you got to share. So respect this opportunity and work hard with sincerity. Blog only to spread knowledge and love. Treat everyone with kindness and equity. Treat everyone as a friend and help him the best you can. Give more value to Quality content, respect Copyrights, your Readers and hate Blogging for money alone. I am blogging since three years but I still feel like a newbie and this is what that keeps me pushing to do more.

Please remember to be thankful to GOD Almighty for gifting you with the ability to read and write. Everyone of you is a born genius, you just need to recognize your God gifted potentials. Wishing you all a happing Blogging career. Stay blessed and be happy always. Peace and blessings be upon you all. "

» Selamat Berkreasi - E F A «

Cara Memasang Recommended Post Slide out diBlogger

Posted byTeacher's Message

Keep the visitors atau readers diblog kita untuk tetap berlama lama diblog kita bukanlah suatu pekerjaan yang mudah, tetapi hal itulah yang diharapkan oleh semua pemilik blog tak terkecuali, termasuk pemilik blog Education For All sendiri. Oleh sebab itu education for all akan sharing dengan sobat blogger mania tentang Cara Memasang Recommended Post Slide out diBlogger. Ini adalah semacam invitation kepada reader untuk tetap berada diblog kita dan mau membaca artikel artikel kita. sobat blogger mania mungkin sudah banyak melihat widget widget semacam ini di website website terkenal seperti New York Times, Mashable, Times of India etc.

Education for all, mencoba untuk membuat modifikasi snippet sehingga loadingnya singkron tanpa mempengaruhi loading page. Slide out ini akan menunjukan random posts dari blog sobat blogger mania. Random posts diproses dariBlog sobat blogger mania menggunakan Feed Ajax. Bila sobat blogger mania berminat untuk memasangnya diblog sobat ikuti langkah langkah berikut ini, tapi sebelumya coba lihat demo

D E M O

Cara Memasang Recommended Post Slide Widget

Ada dua cara untuk memasang widget ini ke blog sobat blogger mania, Agar tidak terlalu ribet. Cara yang pertama Klik installer. Silahkan klik pada gambar dibawah ini, secara otomatis sobat blogger mania akan dibawa kehalam import

Customizing the Recommended Slide out

1. End Of Post marker – Slide comes out ini akan muncul dipojok bawah kanan halaman blog sobat blogger mania. Jadi akan terlihat ketika Reader sobat blogger mania menyekrol kebawh.

Cara yang kedua ikuti langkah langkah berikut ini:

=> Login ke Blogger
=> Klik Design/Rancangan
=> Klik Add gadget kemudian Scroll kebawah dan pilih HTML/Javascript. Lalu pastekan kode ini didamnya

Pastekan kode ini dihalaman HTML/Javascript

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://fajar7siblings.googlecode.com/files/fajar-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9SjR3I3FQljdkwnWOtTHeOvu7eTjljMQEo6MZ0nWnzjffz44NaGR-8MqVtVFPST7MdEgye_fF7UAv9pbp7x_2OFiRx75AZzLvAFjpFrGFFjCzjEEeBttLMxzPJk8NuE8H8bxyNTjRGk/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

Terakhir dan paling utama SAVE

Selesai.......Semoga bermanfaat...

» Selamat Berkreasi - E F A «

Meta Tag Generator Tool untuk Blogger

Posted byTeacher's Message

Meta description and meta keywords adalah meta tag html yang paling populer yang masih direkomendasikan meskipun banyak argumen oleh beberapa ahli SEO. Hal pertama yang setiap blogger harus lakukan setelah membuat blog adalah dengan mengoptimalkan Templatenya dengan cara mengirimkan ke mesin pencari dan dengan menambahkan meta tag penting di dalam template. Untuk membuat pekerjaan sobat blogger mania mudah Education For All telah membuat sebuah Meta Tag Generator Alat sederhana di bawah ini yang akan membantu sobat blogger mania membuat tag penting dalam hitungan detik tanpa pengetahuan SEO yang dibutuhkan sama sekali!

Ikuti tips untuk menulis deskripsi blog terbaik dan untuk memilih kata kunci yang paling relevan untuk blog sobat blogger mania

Meta Description:

Deskripsikan blog sobat blogger mania maksimal 150 huruf. Sebagai contoh EFA telah memilih kata-kata berikut untuk menggambarkan blog sebuah Blog,

Blog tentang Blogger Tricks, Blogger Templates, Widgets, SEO, Bisnis Online, CSS and HTML Tricks dan lain lain.

Sobat blogger mania bisa memilih format yang sama untuk mendeskripsikan blog sobat blogger mania dengan kata kata yang paling relevan dengan blog sobat

Note:- EFA telah menyertakan meta description di dalam tag HTML yang dinamis untuk menghindari masalah duplikat konten. Bingung? Mari EFA jelaskan. Jika Meta description muncul untuk semua halaman di blog Sobat Blogger mania maka robot search engine akan berpikir bahwa semua halaman Sobat Blogger mania memiliki deskripsi yang sama. Karena robot menangani setiap halaman sebagai situs web yang terpisah karena itu blog Sobat Blogger mania bisa mendapatkan sanksi untuk menggunakan meta description yang sama berulang-ulang. Untuk menghindari hal ini EFA telah menambahkan dua potong kode sebelum dan sesudah meta description sehingga mungkin tampak robot di homepage saja. Berikut ini adalah dua kode ditambahkan ke alat ini secara default,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <META NAME="Description" CONTENT="Your Blog description">
    </b:if>

Meta Keywords:

Pilih kata kata yang menjelaskan topik inti dari blog sobat blogger mania. Kata kunci adalah kata yang ditargetkan lalu lintas yang mendefinisikan konten blog sobat blogger mania. Kebanyakan orang menggunakan puluhan kata kunci yang paling kompetitif tetapi melakukan hal ini adalah efek yang tidak perlu Pilih beberapa kata kunci tapi cerdas yang dapat mencerminkan keseluruhan isi blog sobat blogger mania. Cara terbaik adalah dengan menggunakan kata kunci yang mirip seperti yang digunakan oleh pesaing sobat blogger mania. sobat blogger mania dapat menekan Ctrl + U untuk membuka file sumber pesaing sobat blogger mania saat sobat blogger mania berada di blog-nya. Melalui file sumber sobat blogger mania dapat dengan mudah melihat apa kata kunci dan deskripsi pesaing sobat blogger mania.

Menulis maksimal tiga kata per kata kunci dan memisahkan setiap kata kunci menggunakan koma. Lihat kata kunci sebagai contoh,

Blogger tricks,blogger tips, SEO guide, Bisnis Online, blogger widgets, css html tricks

Meta Author:

Ini bukan tag yang sangat penting tapi tetap semua orang suka untuk melampirkan namanya ke website-nya jadi mengapa harus Anda tinggalkan! Cukup menulis nama lengkap sobat blogger mania dan hindari menggunakan nama panggilan atau simbol khusus.

Jika sobat blogger mania tidak ingin menambahkan nama sobat blogger mania maka kosongkan saja pada alat di bawah ini.

Meta Robot:

Kadang-kadang sobat blogger mania tidak ingin robot search engine untuk menjelajah dan indeks blog sobat blogger mania sehingga sobat blogger mania dapat menceritakan robot menggunakan No follow tag atau No index tag. jika sobat blogger mania tidak ingin pusing dengan hal ini maka kosongkan saja pada tool dibawah ini

Meta Tag Generator Tool

Demikian aja semoga bermanfaat.......

» Selamat Berkreasi - E F A «

Cara Memasang Energy Saving Mode CSS3 dengan Kode CSS3

Posted byTeacher's Message

Pada halaman posting yang ini Education For All, akan posting artikel tentang Cara Memasang Energy Saving Mode CSS3 dengan Kode CSS3.Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana, nah bila sobat blogger mania berminat untuk membuatnya silahkan ikuti saja langkah langkah dibawah ini, Energy saving barang kali perlu dipasang pada blog sobat blogger mania, untuk emlindungi blog sobat blogger mania dari panas dan hujan, termasuk badai dan ntusnami hee..he..he...selain itu mungkin juga bisa memperindah blog. Banyak sekali pertanyaan dari sobat blogger mania, berat nggak? loadingnya. dijamin tidak. Nah sebelum mempraktekanya alangkah lebih baiknya kalau melihat D E M O dibawah ini,

D E M O

Cara Memasang Energy Saving Mode CSS3

Login ke Blogger.
Halaman Dasbor/Dasboard : Klik "Rancangan/Design".
Klik "Edit HTML".
Lakukan Backup Template.
Cari Kode ]]></b:skin>
Copy kode CSS dibawah ini dan letakkan di atas ]]></b:skin>

Kode CSS

*, body .bgsEFA_esm{
      margin:0;
      padding:0;
}
body .bgsEFA_esm{
      position:fixed;
      width:98%;
      top:0;
      left:0; /* original code by: fajar7siblings.blogspot.com */
      height:97%;
      opacity:.99;
      filter:alpha(opacity=99);
      -ms-filter:alpha(opacity=99);
      background:#000;
      border:10px solid #666;
      border-bottom:30px solid #666;
      z-index:99999999;
      transition:all 6s ease-in-out 60s;
      -o-transition:all 6s ease-in-out 60s;
      -moz-transition:all 6s ease-in-out 60s;
      -webkit-transition:all 6s ease-in-out 60s;
      -ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsEFA_esm{
      border-color:#F00;
      background:#930;
      width:50%;
      height:3%;
      left:25%;
      top:40%; /* original code by: fajar7siblings.blogspot.com */
      transition:3.5s ease-out;
      -o-transition:3.5s ease-out;
      -moz-transition:3.5s ease-out;
      -webkit-transition:3.5s ease-out;
      -ms-transition:3.5s ease-out;
}
body:hover .bgsEFA_esm,body:hover .bgsEFA_esm p.esm1,body:hover .bgsEFA_esm p span.esm2,body:hover .bgsEFA_esm p span.esm3,body:hover .bgsEFA_esm .by_EFA{
      transition:3s;
      -o-transition:3s;
      -moz-transition:3s;
      -webkit-transition:3s;
      -ms-transition:3s;
      z-index:-10;
      opacity:.0;
      filter:alpha(opacity=0);
      -ms-filter:alpha(opacity=0);
}
body .bgsEFA_esm p.esm1{
      margin:0; /* original code by: efa */
      padding:0;
      width:92%;
      height:100%;
      background:transparent;
      font-size:100px;
      font-family:Serif,Times New Roman;
      color:#333;
      text-shadow:1px 1px 2px #ccc;
      position:relative;
      margin-top:200px;
      line-height:20px;
      font-weight:bold;
      text-align:center;
      display:block;
      margin-left:auto;
      margin-right:auto;
}
.bgsEFA_esm p span.esm2{
      font-size:18px;
      opacity:.5;
      filter:alpha(opacity=50);
      -ms-filter:alpha(opacity=50);
      display:block;
      text-align:center;
      margin:-10px auto;
      font-weight:normal;
      padding:2px 8px;
      background:#000;
      border:1px solid #333;
      color:#00f;
      text-shadow:none;
      font-family:Arial,Helvetica,sans-serif;
}
.bgsEFA_esm p span.esm3{
      color:#ccc;
      font-family:Tahoma,Arial,Helvetica;
      display:block;
      margin:10px auto;
      background:#111;
      background:-moz-linear-gradient(top,#111 0,#666 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
      background:-webkit-linear-gradient(top,#111 0,#666 100%);
      background:-o-linear-gradient(top,#111 0,#666 100%);
      background:-ms-linear-gradient(top,#111 0,#666 100%);
      background:linear-gradient(top,#111 0,#666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
      opacity:.6;
      filter:alpha(opacity=60);
      -ms-filter:alpha(opacity=60);
      width:250px;
      text-shadow:1px 1px 1px #000;
      border:1px solid #333;
      border-radius:4px;
      padding:2px 10px;
      font-size:12px;
      font-weight:normal;
      line-height:16px;
}
.bgsEFA_esm .by_efa{
      margin-left:30px;
      text-align:left;
      color:#015828;
      font-size:12px;
      font-weight:normal;
      position:absolute;
      top:550px;
      width:100%;
      height:20px;
      left:0;
}
.bgsEFA_esm .by_efa span.esm4{
      color:#aaa;
      font-style:italic;
}

Selanjutnya cari kode seperti dibawah ini:

<body> , atau <body expr:class='"loading" + data:blog.mobileClass'>

Lalu coppy dan pastekan kode xHTML dibawah ini tepat dibawah kode diatas.

Kode xHTML

<div class='bgsEFA_esm'><p class='esm1'>E F A<br/><span class='esm2'>Energy Saving Friends</span><br/><br/><span class='esm3'>Visit http://fajar7siblings.blogspot.com!<br/>Kunjungi Link di atas untuk mengikuti tutorial menarik lainya!</span></p><div class='by_efa'>Copyright * june 2012 * <span class='esm4'>fajar7siblings.blogspot.com</span> - All rights reserved</div></div>

Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsEFA_esm(kode paling atas!):

all 6s ease-in-out 60s;

nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
Ganti Teks E F A yang ber-warna merah dengan nama blog anda atau teks lain.

Selamat Mencob Semoga Berhasil.........

» Selamat Berkreasi - E F A «

Cara membuat Entry Atau Halaman Ucapan Selamat Datang Sebelum Masuk Blog

Posted byTeacher's Message

Sebelum membaca lebih lanjut artkel ini sebaiknya arahkan kursor sobat blogger mania pada gambar dan klik DEMO yang ada dibawah Ok deh.. Pada postingan kali ini Education For All akan posting artikel tentang Cara Memasang entry atau welcome page sebelum masuk blog. Jadi para tamu blogger sobat harus klik "ENTER" sebelum masuk blog. hal ini tentunya akan lebih menarik, sebenarnya hampir sama dengan alert, tetapi yang ini lebih cool, dan menarik. nah bila sobat berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

Halaman Ucapan Selamat Datang Sebelum Masuk Blog ini, hanya muncul sekali dan akan menghilang jika tamu blogger sobat mania menekan "ENTER" dan masuk Blog untuk lebih jelasnya silahkan klik link demo ini

D E M O - 1 D E M O - 2

Kita tidak akan menambahkan widget di halaman page element. Kita akan menambahkanya dengan cara menambahkan kode dihalaman EDIT HTML template Blog Sobat Blogger Mania. dengan cara ini nantinya halaman Page Elemen akan secara otomatis bertambah dengan sendirinya. Yaitu terdapat dua widget tambahan. Widget pertama adalah TEXT widget, yang kita gunakan untuk memasukan pesan ucapan selamat datang dan sebagianya tergantung keinginan sobat. sedangkan yang satunya lagi yaitu HTML/JAVASCRIPT gadget untuk melakukan KODE yang akan ditransfer ke Text Gadget kehalaman ucapan selamat datang.

Cara Membuat Entry Atau Halaman Ucapan Selamat Datang Sebelum Masuk Blog

=> Login ke Blogger
=> Back Up Template
=> Dihalaman "Dashboard Klik Design/Rancangan => Klik Edit HTML
=> Cari Kode <body> Dihalaman template sobat blogger mania jika sobat blogger mania menggunakan Lay Out Template
=> Cari Kode <body expr:class='"loading" + data:blog.mobileClass'> jika sobat Blogger mania menggunakan Template Designer

Copy Code dibawah ini lalu pastekan setelah kode diatas/dibawahnya.

Kode :

<!-- Welcome page Start -->
<div id='welcome-wrapper'> 
<b:section class='welcome' id='welcome' showaddelement='no'> 
<b:widget id='Text88' locked='false' title='' type='Text'/> 
<b:widget id='HTML88' locked='false' title='' type='HTML'/> 
</b:section> 
</div>
<!-- Welcome page End -->

Selanjunya aadalah "Cara Menambahkan Isi Gadget"

=> Kembali lagi kehalaman Page Elemen, dan perhatikan pada gambar dibawah ini. Bila gambar kurang jelas arahkan kursor sobat blogger mania pada gambar

=> Klik edit pada text gadget dan masukan text ucapan selamat datang atau apa saja sesuai selera sobat
=> Selanjutnya proses HTML/Javascript Gadget (HTML88) pastekan kode dibawah ini didalam content box

Kode :

<!-- Welcome page Start (c) 2010 Education For All. Original code by http://fajar7siblings.blogspot.com/. Please do not remove this credit and the â��Get this widgetâ�� link at the bottom of the widget. -->
<!-- HTML part -->
<div style="padding-top:5px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">KLIK ENTER MASUK BLOG</a>
</div>
<div id="EPGrab"><a href="http://fajar7siblings.blogspot.com/" target="_blank">Get this widget</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:80%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {:background:transparent;
font-size:40px;
font-family:Serif,Times New Roman;
color:lawngreen;
text-shadow:1px 1px 2px #ccc;
position:fix;
line-height:35px;
font-weight:bold;
text-align:center;
display:block;
margin-left:auto;
margin-right:auto;
background:-moz-linear-gradient(top,#111 0,#666 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
background:-webkit-linear-gradient(top,#111 0,#666 100%);
background:-o-linear-gradient(top,#111 0,#666 100%);
background:-ms-linear-gradient(top,#111 0,#666 100%);
background:linear-gradient(top,#111 0,#666 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
opacity:.6;
filter:alpha(opacity=60);
-ms-filter:alpha(opacity=60);
;border:10px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background:#000;
border:10px solid #666;
border-bottom:30px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;
opacity:.99;
filter:alpha(opacity=99);
-ms-filter:alpha(opacity=99);
top:0px;left:0px;/*bs-aewp*/z-index:500;
position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:solid 2px #fff;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!-- Javascript part -->
<script type="text/javascript">
YourBlogUrl="http://smpmuhda.blogspot.com/"; //enter your blog url here
fromInternal=document.referrer.search(YourBlogUrl); //check come from where
getDarkLayer=document.getElementById("EPDarkLayer").style;
getText88=document.getElementById("Text88").style;
getHTML88=document.getElementById("HTML88").style;
if (fromInternal == -1)
{ //if visitor comes from external page
getDarkLayer.width=screen.availWidth+"px"; //set DarkLayer width
getDarkLayer.height=screen.availHeight*2+"px"; //set DarkLayer height
getHTML88.display="block"; //show DarkLayer
getText88.display="block"; //show message
}
else
{ //if visitor comes from internal page
getHTML88.display="none"; //hide HTML gadget
getText88.display="none"; //hide message
}
</script>
<!-- Welcome page End -->

Note:

=> Ganti URL http://smpmuhda.blogspot.com dengan URL Blog sobat Blogger mania
=> Width:80% bisa dirubah sesuai selera
=> opacity scale 0 sampai 1 filter alpha opacity scale 0 dari 100.

Untuk Bahan Percobaan Silahkan Coppy pastekan text dibawah ini di Add gadget text, Kalau OK silahkan dirubah sesuai Selera

Text percobaan :

<div class="widget-content">
<div style="text-align: center; font-size: 40px; color: rgb(51, 51, 51); text-shadow: 1px 1px 2px rgb(204, 204, 204);">Welcome to Blogger Berbagi Untuk Anak Negeri</div></div><div class="widget-content"><div style="text-align: justify;"><p style="font-variant: normal; text-align: justify; font-size: 20px; color: lawngreen;">Selamat Datang di Blog Berbagi Untuk Anak Negeri. Blog tentang berbagai tip-trik Blogging untuk Blogger pemula seperti BUAN. Silahkan nikmati artikel artikel di Blog ini. Bila Bermanfaat silahkan disebar luaskan. Jangan lupa Comment, Sebelum Meninggalkan Blog BERBAGI UNTUK ANAK NEGERI</p></div></div>

Selamat Mencoba Semoga Berhasil.

Source : Sumber : Modified By Fajarsvensiblings

» Selamat Berkreasi - E F A «

Cara Memasang Follow By Email Pop Out Widget di Blogger / Blogspot

Posted byTeacher's Message

Pada postingan kali ini Education For All akan posting artikel tentang Cara Memasang Follow By Email Pop Out Widget di Blogger / Blogspot. Static follow by Email Widget adalah Widget baru untuk blogger/blogspot. Widget ini sebenarnya adalah WordPress Plugin tetapi sekarang juga tersedia untuk blogger. Widget ini berdasarkan atas Jquiry widget dengan efek pop out. Sobat blogger mania akan mendapatkan lebih banyak pelanggan dengan widget ini. dan cara pemasangannyapun sangat mudah dan sederhana. Silahkan lihat demonya dengan mengeklik link demo dibawah ini:

Cara Memasang Follow By Email Pop Out Widget di Blogger / Blogspot

Login ke blogger.
KLIK "Design/Rancangan".
Setelah masuk di "Page Elements/Elemen Laman", klik "Edit HTML"

Karena widget ini berdasarkan atas jQuery plugin, Pertama yang harus sobat blogger mania lakukan adalah ,sobat blogger mania harus memasang kode Jquiry plugin dibawah ini ditemolate sobat blogger mania. Namun bila template sobat blogger mania sudah memiliki Jquiry plug in ini, sobat blogger mania tidak perlu memasangnya.

Pastekan Kode ini diatas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Sobat blogger mania harus mengaktifkan dulu widget follow by email/ikuti leawat email dengan cara :

* Login ke blogger.
* KLIK "Design/Rancangan".
* Setelah masuk di "Page Elements/Elemen Laman", klik "Add a Gadget" (dan pilih follow by email/ikuti leawat email).bila telah selesai, kembali lagi kehalaman edit HTML kemudia cari kode </head> dan pastekan kode dibawah ini tepat diatasnya:

Pastekan Kode dibawah ini diatas </head>

<style type="text/css">
/*<![CDATA[*/
 .FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
 .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
 .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
 .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwavIaNXf4rHqCxN7ICYDAUMWEDcSatBzyJndVJOcEuUdr1dZyz0iVjcTqoglDTenW808InKVSDTxJuyKFBjR4IvM2oeEY1zlYgFt4uB_JjNl7Eyaw6y30n2XZX_YGRT78wsATQ4vkN6R0/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .w2bfollowButton:hover,.followActive {color: #fff !important;}
 .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .follow-by-email-inner {padding: 15px;}
 .FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .follow-by-email-inner p {margin: 0 0 10px;}
 .follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
 .follow-by-email-inner form {text-align: center;}
 .follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
 .follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
 .follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
 .follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
 .follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
 .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class=\"w2bfollowButton\" href=\"#\"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href=\"http://feedburner.google.com\" target=\"_blank\">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

Terakhir dan yang paling utama Save Template...Selesai
Source: Sumber

Bila artikel ini bermanfaat silahkan disebar luaskan Bila Sobat menyukai artikel ini silahkan Klik LIKE

» Selamat Berkreasi - E F A «

Cara Mudah Memasang Flash Animated Label Cloud Widget diBlogger

Posted byTeacher's Message

Untuk halaman posting yang ini, Education For All akan sharing artikel tentang Cara Mudah Memasang Flash Animated Label Cloud Widget diBlogger seperti kita ketahui bahwasanya Flash Animated Label Cloud Widget ini sudah sangat terkenal atau popular bagi pengguna blogger ataupun Wordpress. Cara memasangnya pun sangat mudah dan tidak ribet karena kita tidak perlu masuk kehalaman edit HTML, Nah bila sobat blogger mania berminat untuk memasangnya silahkan saja ikuti langkah langkah berikut ini. Nah untuk demonya sobat blogger mania bisa lihat dihalaman sidebar EFA yang sebelah kanan itu. Nah langsung saja ke pokok permasalahan kita,

CARA MEMASANG FLASH ANIMATED LABEL CLOUD DIBLOG

Step I, Loggin ke Blogger dan secara otomatis sobat blogger mania akan dibawa kehalaman DASHBOARD

Step II, Klik RANCANGAN/DESIGN

Step III, Pilih Add Gadget, Setelah halaman terbuka scroll kebawah dan pilih EDIT HTML javascript, Lalu pastekan script dibawah ini dan SAVE TEMPLATE

Kode :

<div class="bgsGR_CommBox-cumulus">
<div class="menuTitle"></div>
<div class="box4" style="background:#222; width:323px;border:8px solid #333;margin:20px 4px 20px 4px;">
<div class="box3" style="background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbort12ChTKg-B2KthnNumBkq6Z1piIfCi4SVsGSIVGSkQEgrSIz4QfiZP8TO0ENnTIEEFpKqzitU06mUUrKDIUeGH7-CZfp19yjapDhDkuLt6burbWNbKjG5IMoO0REI99OpkzhR7z30/s400/AA0Tagcloud.png) center repeat-x;border:3px solid #555;width:317px;">
<div class="box2" style="background:transparent;width:311px;border:3px solid #777;"> 
<div class="box1" style="background:#999; width:295px; background:transparent url(none) center no-repeat;border:3px solid #999;padding:0  5px">

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://fajar7siblings.blogspot.com",
    color          : "0000FF",
    hoverColor     : "FFFF00",
    backgroundColor: "F5A9F2",
    size           : 12,
    speed          : 100,
    width          : 292,
    height         : 200,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

</div>

CATATAN PENTING:

Ganti Alamat URL yang berwarna MERAH dengan alamat URL Blog sobat.
Silahkan atur ketinggian dan lebarnya 292 dan 200
Selesai, Semoga bermanfaat... Bila artikel ini bermanfaat silahkan disebar luaskan

Source: Sumber

» Selamat Berkreasi - E F A «

Cara Membuat Slide Open Heart Bookmarking Gadget di Blogspot

Posted byTeacher's Message

Hello, Sobat blogger mania pada postingan kali ini EFA akan posting artikel tentang Cara Membuat Slide Open Heart Bookmarking Gadget di Blogger.Gadget yang dimaksud adalah logo cinta hati hal ini tentunya akan terlihat awesome dan efek slidenya sangat dingin dan practis.apa bila logo cinta hati tersentuh mouse maka akan muncul ikon untuk Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email dan Berbagai dan hal ini tentunya akan menarik perhatian pengunjung dan menghasilkan banyak lagi shares.Jadi dalam tutorial ini lah yang akan kita bahas.

D E M O

jika sobat berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:
Step 1. Login ke Blogger dan otomatis sobat akan dibawa kehalaman "dashboard " lanjutkan Klick 'Design/Rancangan > 'Lanjutkan dngan Klik "Edit HTML" Kemudian cari kode dengan cara tekan CTRL + F kemudian ketik </head>
Step 2. Copy and Pastekan kode berikut tepat diatas </head>

Kode :

<!-- Start Heart Bookmarking Gadget Code From http://fajar7siblings.blogspot.com / -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://fajar7siblings.blogspot.com / -->

Step 3. Masih dihalaman edit HTML cari kode </body> Copy And Pastekan kode dibawah ini tepat diatas </body>

Kode :

<!-- Start Heart Share Code From http://fajar7siblings.blogspot.com / -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://fajar7siblings.blogspot.com /">Blogger Wordpress Gadgets</a>
<!-- End Heart Share Code From http://fajar7siblings.blogspot.com / -->

Step 5 Save Template.

Catatan: Gadget berada dipojok bawah bagian bawah blog sobat tapi sobat juga bisa menggantinya sesuai selera sobat dengan cara merubah bottom: 2%; left: 2%;.pokonya diutakatik aja. bagian itu.

Semoga Bermanfaat, Bila artikel ini bermanfaat silahkan disebar luaskan

» Selamat Berkreasi - E F A «

Download Kalender Pendidikan 2012/2013 Lengkap dengan Analisis Hari dan pekan Efektif

Posted byTeacher's Message

Dalam menyambut tahun ajaran baru para pahlawan tanpa tanda jasa pasti disibukan dengan perangkat pembelajaran, dalam menyusun perangkat pembelajaran para pahlawan ini tentu tidak bisa dipisahkan dengan yang namanya kalender pendidikan bserta dengan banyaknya hari efektif, pekan efektif dan juga analisisnya. untuk itu Education For All akan sharing tentang Kalender Pendidikan Lengkap dengan Analisis Hari dan pekan Efektif. Namun dari pada itu tentunya kalender dan analisis ini tidak sama dengan daerah dimana para pahlawan mengabdi, oleh sebab itu setelah didownload silahkan di update sesuai kebutuhan. Nah untuk melihat image previewnya silahkan arahkan kursor pada gambar yang ada disebelah kanan atas, bila benar benar dah cocok silahkan didownload melalui link link dibawah ini.

==> Download Kalender pendidikan 2012/2013 silahkan klik DISINI

==> Download Perhitungan Banyaknya pekan Tahun Pelajaran 2012/2013 klik DISINI

==> Download analisis Banyaknya Hari efektif Tahun Pelajaran 2012/2013 klik DISINI

==> Download Pekan efektif dan tidak efektif Tahun Pelajaran 2012/2013 klik DISINI

Untuk Mendownload silabus RPP KTSP SMP silahkan klik DISINI

Untuk SD silahkan Klik DISINI

Demikian semoga bermanfaat dan sedikit membantu

» 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

CSS Code (KODE CSS) :

Pastekan kode ini dihalaman HTML/Javascript

Meta Tag Generator Tool

Kode CSS

Kode xHTML

Kode :

Kode :

Text percobaan :

Pastekan Kode ini diatas </head>

Pastekan Kode dibawah ini diatas </head>

Kode :

Kode :

Kode :