Education for all: Tutorial Blog pemula

Home »Posts filed underTutorial Blog pemula

Showing posts with label Tutorial Blog pemula. Show all posts

Cara Membuat Read More dan Nama Author di atas Posting

Posted byTeacher's Message

kali ini Education for all nggak akan posting pakai kode CSS segala. Education for all akan posting yang simple-simple saja. Education for all hanya akan pakai sederet xHTML yang bisa langsung di simpan di bagian body. Sederhana, cepat, gampang dan hasilnya... Hmmmmm. Tapi tidak menutup kemungkinan, lhoh ... Jika sampeyan mau, buat saja menggunakan kode CSS, kemudian padukan dengan CSS3. Pasti akan jauh lebih josh!

Buat Read More di atas Posting plus read more lama tetap dipakai

Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
Design/Rancangan : Cari dan klik "Edit HTML".
Edit HTML-1 : KLIK "Download Template Lengkap" untuk melakukan "back-up" templates. Tunggu beberapa saat kemudian simpan file template di folder PC.
KLIK "Expand Widget Templates".
Tetap di Edit HTMl, kemudian Cari kode <div class='post-body entry-content'>. Gunakan Ctrl+F untuk memudahkan pencarian kode!
Copy-Paste : Copy dan ganti kode di atas dengan kode HTMl di bawah.
SAVE Templates/Simpan Template : KLIK SAVE Templates dan lanjutkan dengan membuat posting menggunakan read more.
Buka hasilnya di halaman utama untuk mengetahui tampilan read more baru sampeyan!

<div class='post-body entry-content'>
<div style='border-bottom:1px dotted #444;margin-bottom:10px;padding:1px 0;height:25px;text-shadow:1px 1px 1px #000;'>
<span style='font-style:italic;color:yellow;'>posted by: <span style='color:blue;'>gubhug reyot</span></span>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link' style='float:right;'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title' style='text-decoration:none;'>
<span style='font-family:Cataneo BT;font-weight:normal;font-size:16px;padding-right:20px; background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/blueloop.gif) right center no-repeat;'>Read More ....</span>
<!-- <data:post.jumpText/> -->
                </a>
      </div>
    </b:if>
</div>
<div style='clear:both;'/>

Buat Read More di atas Posting - Read More Lama di hilangkan

Caranya sama dengan cara di atas. Kode HTML dan penempatan kode juga sama, tetapi tolong cari dan hapus kode HTML yang seperti terlihat di bawah ini! Kode di bawah adalah kode read more lama yang selama ini di gunakan.

<b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
         <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
             <data:post.jumpText/>
         </a>
     </div>
</b:if>

Untuk memudahkan dalam mencari kode di atas, cari dulu satu kode misalnya :

<data:post.jumpText/>

Setelah ditemukan maka di atas dan di bawahnya akan terlihat seluruh kode yang dimaksud di atas.

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 «

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...........

» Selamat Berkreasi - E F A «

Cara meringankan blog dengan jQuery Lazy Load

Posted byTeacher's Message

Lazy Loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading untuk image yang terdapat pada blog. Efek Lazy load hanya akan berfungsi apabila page di scroll. Image setelah page yang di scroll akan terbuka dengan menggunakan efek jQuery Lazy Load.

D E M O

Lazy Load membantu meringankan blog dengan mengurangi tempomasa proses loading page pada sebuah blog terutama pada blog yang banyak memuat image gambar ataupun image yang berukuran besar.

Untuk memasang jQuery Lazy Load di blogspot, ikut beberapa langkah di bawah.

Login Blogger Dashboard
Klik Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kode di bawah pada content HTML/Javascript. Jika gambar kurang jelas arahkan kursor pada gambar...

dan inilah scriptnya
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script> <script type='text/javascript' src='http://javscript-code.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0'></script> <script type="text/javascript"> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrFYn4sKwTucriXuXT0L9fc9f-x4MCBTgt9mPHRZJQ3g_XcmkoM0Q6PeDB8hr9a0bhjYFVPHm5fAKwFKnQqZZysGdRB2WMPuKUKPA5RHjZVZ4re2GdicgJG5EPoDE3gUrbDmQGiy2HVU/s1600/grey.gif" }); }); </script>

dan inilah scriptnya

Terakhir dan yang paling utama, klik Save.

NOTE:

1. Jika tidak ada perubahan, silahkan paste kode tersebut di atas kode </body> pada script template.
2. Jika tidak ada perubahan juga, maka silahkan dicoba lagi dengan cara paste di atas kode </head>

Demikian semoga bermanfaat....

» Selamat Berkreasi - E F A «

Cara pasang Recent Posts Slider di Blogspot

Posted byTeacher's Message

Sungguh tiada habisnya bila kita ingin mempercantik tampilan blog kita, Nah untuk itu Education For All akan sharing lagi dengan para sobat blogger mania pemula seperti EFA ini. Nah sharing kali ini EFA akan posting artikel tentang Cara pasang Recent Posts Slider di Blogspot. Seperti apa kira kira tampilanya?? silahkan sobat blogger mania arahkan kursor sobat blogger mania pada gambar disebelah kanan postingan ini. Widget tersebut akan menjelaskan post terbaru beserta thumbnail (image) yang berefek slider.Untuk memasang widget recent post slider ini pada blog sobat blogger mania silahkan, ikut beberapa langkah di bawah.

Pertama : Login ke Blog
Kedua : klik Design ==> Klik add Gadget
Ketiga : Pilih klik pada HTML/Javascript lalu Copy paste kode dibawah ini pada halaman HTML/Javascript

JUDUL ARTIKEL
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function(){ var first = 0; var speed = 700; var pause = 4500; function removeFirst(){ first = $('ul#listticker li:first').html(); $('ul#listticker li:first') .animate({opacity: 0}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('ul#listticker').append(last) $('ul#listticker li:last') .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); </script> <style type="text/css"> #listticker{ height:277px; width:280px; margin-bottom:15px; padding:0px; overflow:hidden; } #listticker li{ background:#FDE1E1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIQfnIe9BjaVdhdhGVR7zqqtzFLGsigaS39wu8vbHfEsh9ZEGiI6tBP0R1nMkxm7x5aGywlRuaiIbWcCJFZAHer5OKqwiaBzYEtgmBOoOhDoBZZXY87f5XqRSfnCR8kIZJsXCyVDYlwN5/s320/gradient.png) repeat-x 0 -100px!important; border: 1px solid #C6C6C6; list-style:none; line-height:0.90em; height:46px; margin:3px; padding:2px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); } #listticker li a{ font-family: 'arial'; text-transform:normal; text-shadow:0 1px 2px rgba(0,0,0,0.6); letter-spacing:0.05em; overflow:hidden; } #listticker img{ float:left; margin:3px 3px 4px -7px; padding:0px; border:#EAE7E7 solid thin;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.6); box-shadow: 1px 1px 2px rgba(0,0,0,0.6); -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } #listticker img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); } </style> <script language="JavaScript"> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPM-f7YskI054knmmkmCGAqK3AONBN9jiWdTlPSipZBK-ktsRbqmIB_XZCZUBJj5ZKbz_BaZ_2MhfpxifjZZnYwBfVejq_3dFOh9j7JCUx-xzTxRTJp73mFzNjH8q2vC-FUfDSIRuwjXd/"; showRandomImg = true; tablewidth = 250; cellspacing = 0; borderColor = ""; bgTD = "#"; imgwidth = 35; imgheight = 35; fntsize = 12; acolor = "#262626"; aBold = true; icon = ""; text = "no"; showPostDate = false; summaryPost = 0; summaryFontsize = 0; summaryColor = "#"; icon2 = ""; numposts = 15; home_page = "http://fajar7siblings.blogspot.com/"; </script> <script src="http://javscript-code.googlecode.com/files/recent_posts_slider.js" type="text/javascript"></script>

JUDUL ARTIKEL

Silahkan edit kode yang berwarna biru sesuai blog sobat blogger mania.
width:280px; (lebar kotak)
tablewidth = 250 (lebar teks pada kotak)
background:# FDE1E1; ( background kotak)
acolor = "#262626"; (Warna teks)
numposts = 15; (jumlah post yang ingin ditampilkan)
home_page = "http://fajar7siblings.blogspot.com/"; ( URL blog sobat blogger mania)

Akhir sekali, klik Preview dan jika tiada pesan error, klik saja Save.

Selamat mencoba Semoga bermanfaat.......

» Selamat Berkreasi - E F A «

Cara pasang Recent posts floating bar widget di Blogspot

Posted byTeacher's Message

Pada postingan kali ini Education for all akan posting artikel tentang cara membuat Recent posts floating bar. Nah apa sebenarnya yang dimaksud dengan Recent posts floating bar, recent post floating bar adalah, dimana setiap posting baru yang sobat blogger mania buat akan muncul dibar sobat blogger mania seperti stiker, hal ini tentunya akan mempermudah tamu sobat blogger mania dalam melihat posting terbaru dari blog sobat blogger mania. Bila sobat blogger mania berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:

1. Silahkan login ke Blogger terlebih dahulu.
2. Kemudian masuk kehalaman Edit HTML..
3. Seterusnya tick "Expand Widget Templates dan cari kode </head> .
4. Letakkan kode css berikut ini, tepat diatas kode </head>

paste kod css ini, di atas kode </head>
<style type='text/css'> #bd { float:bottom; font-family:Arial, Helvetica, sans-serif; line-height:1.5; margin-top:5px; font-size:12px } .text { color:#98BF2F; margin-left:8px } div#news-1 .gk_news_highlighter { font-family:Verdana, Arial; font-size:11px; color:#666 } div#news-1 { width:960px; height:24px; margin-left: -10px; display:scroll; position:fixed; bottom:1px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIQfnIe9BjaVdhdhGVR7zqqtzFLGsigaS39wu8vbHfEsh9ZEGiI6tBP0R1nMkxm7x5aGywlRuaiIbWcCJFZAHer5OKqwiaBzYEtgmBOoOhDoBZZXY87f5XqRSfnCR8kIZJsXCyVDYlwN5/s320/gradient.png) repeat-x 0 -100px; clear:both; overflow:hidden } div#news-1 .gk_news_highlighter_wrapper { float:left; width:820px; height:24px; line-height:24px; overflow:hidden; position:relative } div#news-1 .gk_news_highlighter_item { width:auto; height:24px; padding-left:20px; display:none; position:absolute } div#news-1 .nowrap { white-space:nowrap } div#news-1 .gk_news_highlighter_title { padding-left:5px } div#news-1 .gk_news_highlighter_desc { padding-right:5px } div#news-1 .gk_news_highlighter_interface { float:left; width:120px; height:24px; text-align:right; line-height:24px; z-index:1000 } div#news-1 .gk_news_highlighter_interface .text { float:left; display:block; width:auto; padding-left:5px; font-weight:700 } div#news-1 .gk_news_highlighter_interface div { width:30px; float:right } div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next { cursor:pointer; width:13px; height:24px; display:block; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFie0yxdbkHQeH7Edi2pOATyanlp7A5Mxih4CcaO7yZoaXKfWgxlvPSa9s9dFiIenfzhj0AeTldj1L4KvyXDFBnX-SHLgvxC-joICn9lXu5Mx9zzLt_3JB6WjGI3FuIbVDPkvz0kniho/s1600/play.png') no-repeat 0 50%; float:left } div#news-1 .gk_news_highlighter_interface a:hover.prev { background-position:-13px 50% } div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus { color:#FFF } div#news-1 .gk_news_highlighter_interface a.next { float:right; background-position:-26px 50% } div#news-1 .gk_news_highlighter_interface a:hover.next { background-position:-39px 50% } </style>

paste kod css ini, di atas kode </head>

5. Selanjutnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari kode <div id='content-wrapper'>

Bagi blog yang menggunakan template dari template designer, cari kod </footer>

6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>

Copy paste kode ini, dibawah <div id='content-wrapper'>
<div id='bd'> <div class='gk_news_highlighter' id='news-1'> <div class='gk_news_highlighter_interface'> <span class='text'>HOT NEWS</span> <div> <a class='prev' href='#'/> <a class='next' href='#'/> </div> </div> <div class='gk_news_highlighter_wrapper'> <script language='JavaScript'> imgr = new Array(); showRandomImg = false; aBold = true; text = "no"; showPostDate = false; summaryPost = 200; summaryFontsize = 12; summaryColor = "#000"; icon = " » "; label = ""; numposts = 30; home_page = "http://fajar7siblings.blogspot.com/"; </script> <script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/> </div> </div> </div> <script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/> <script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/> <script type='text/javascript'> try {$Gavick;}catch(e){$Gavick = {};}; $Gavick["gk_news_highlighternews-1"] = { "animationType" : 3, "animationSpeed" : 200, "animationInterval" : 2000, "animationFun" : Fx.Transitions.linear, "mouseover" : 1}; </script>

Copy paste kode ini, dibawah <div id='content-wrapper'>

<div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = "http://fajar7siblings.blogspot.com/";
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>

7. Edit kod yang di bold warna merah dengan menggantikannya URL blog sobat blogger mania dan jumlah postingan terbaru yang akan ditampilkan

8. Seterusnya klik Preview. Jika posisi bar terlalu ke kiri atau ke kanan, silahkan edit nilai pada kode yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)

margin-left: -10px; (Jika posisi bar terlalu ke kanan, edit nilai -10 menjadi 10 dan sebaliknya)

9 . terakhir dan paling utama save template,

Semoga bermanfaat...........

» Selamat Berkreasi - E F A «

Cara pasang widget Recent comments dilengkapi dengan avatar/Foto di Blogspot

Posted byTeacher's Message

Hello, all bloggers around Indonesia and oversea may be...Yep dalam postingan kali ini Education for all akan posting artikel tentang cara pasang widget Recent comments dilengkapi dengan avatar/Foto di Blogspot. Sungguh tiada habisnya bila kita bicara tentang cara memperindah blog yang kita sayangi, betulkan. nah bila sobat blogger mania berminat untuk membuatnya caranyapun cukup gampang and mudah sekali nggak seribet yang kita bayangkan. ikuti saja langkah langkah sederhana ini. Oh ya, kalau mau lihat demonya lihat aja dikolom recent coment EFA disidebar sebelah kanan atau arahkan kursor sobat blogger mania pada gambar dibawah ini

Oke dah jelas kan, kalau dah jelas mari kita praktekan bersama sama.

Cara Membuat

Login : Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".
Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!
Design (Rancangan) : KLIK link "Add gadget".
Pilih Edit HTML : Setelah halaman ini terbuka, Pastekan script dibawah ini kedalamnya

#recentcomment {

width:98%;

margin-left:5px;

}

img.recentcomment-avatar {

background:#000;

float:right;

padding:2px;

margin:2px -2px 0px 0px;

height:30px;

width:30px;

border:solid #ddd 1px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);

-moz-box-shadow: 0px 2px 5px 0px #000;

box-shadow: 0px 2px 5px 0px #fff;

}

td div.recentcomment-content a,td div.recentcomment-content a:hover{

font-family: 'trebuchet ms';

font-size:1.00em!important;

color:yellow;

text-decoration:none;

}

div.recentcomment-content{

font-size:1.00em!important;

text-decoration:none;

line-height:1.45em;

letter-spacing:0.03em;

background: #02022b;

padding:4px;

border:1px solid #ddd;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);

-moz-box-shadow: 0px 2px 5px 0px #000;

box-shadow: 0px 2px 5px 0px #fff;

}

</style>

ava_mode = "all";

var cm_num = 10;

var cm_desc = 13;

var homepage = "http://fajar7siblings.blogspot.com/";

var cm_ava = new Array();

cm_ava['openid'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['livej'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['wp'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['typepad'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['aim'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['url'] = "http://img1.blogblog.com/img/anon36.png";

cm_ava['anon'] = "http://img1.blogblog.com/img/anon36.png";

</script>

Ganti tulisan berwarna merah dengan alamat URL blog sobat blogger mania.

Sedangkan angka 10 jumlah recent komment yang akan ditampilan.

Terakhir dan paling utama simpan/ SAVE

SELESAI, SEMOGA BERMANFAAT..........

» Selamat Berkreasi - E F A «

Menampilkan Avatar / Foto Komentator Blogger

Posted byTeacher's Message

Hello, all newbie blogger all around Inonesia and oversea may be. Yaa.. kenapa saya EFA sebut newbie?? karena para blogger master sudah tentu tidak akan membutuhkan artkel artikel gurem seperti ini. Ok pada halaman ini Education for All akan sharing artikel tentang " Menampilkan Avatar / Foto Komentator Blogger" melalui tutorial ini sobat blogger mania bisa menampilkan foto / avatar para komentator di samping isi komentar atau dibawah. Jika para komentator memberi komentar dengan akun atau profil Blogger mereka, maka foto dari profil tersebut akan langsung muncul disamping isi komentar. Untuk lebih jelasnya arahkan kursor sobat blogger mania pada gambar dipojok samping atas. jika sobat blogger mania berminat untuk membuatnya diblog sobat blogger mania silahkan ikuti langkah langkah berikut ini:

Pertama Login ke akun sobat blogger mania
kedua Plih Layout => Edit HTML, lalu centang Expand Widget Template
Ketiga cari kode yang seperti ini <dl id='comments-block'> ganti kode tersebut dengan kode di bawah ini:

Jika di template sobat blogger mania kode comments-block berada dalam tag div, maka ganti tag dl pada <dl expr:class='data:post.avatarIndentClass' id='comments-block'/> dengan tag div. Hasilnya: <div expr:class='data:post.avatarIndentClass' id='comments-block'/>.

Selanjtunya, cari kode <a expr:name='data:comment.anchorName'/>, lalu paste kode dibawah ini di atasnya:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' />
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Yang terakhir dan yang paling utama SAVE template, SELESAI.

» Selamat Berkreasi - E F A «

Cara Memasang Warning... !!! Blog Sedang di Maintenance

Posted byTeacher's Message

Dalam postingan kali ini EFA akan sharing tentang Cara Memasang Warning... !!! Blog Sedang di Maintenance

Maintenance adalah perbaikan sebuag web/blog sehingga tidak memungkinkan untuk di kunjungi ,nah jika sobat blogger mania ingin memperbaiki Blog sobat blogger mania sebaiknya maintenance-kan blog sobat blogger mania dulu, Kalau tidak visitor / pengunjung akan mengira blog sobat blogger mania blog kumuh karena masih dalam perbaikan. Lalu bagimana Cara Buat Blog Menjadi Maintenance, ikuti langkah berikut :

1.Login blog tentunya menggunakan akun sobat blogger mania
2. Buka rancangan >> edit HTML
3. Taruh kode dibawah ini diatas kode ]]></b:skin>

html {
height: 100%;
background: url(http://www.freecomputermaintenance.com/wp-content/uploads/2011/09/Closed_for_Maintenance_JPG.jpg) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

Sobat blogger mania bisa mengganti alamat url gambar yang berwarna merah, sesuai dengan selera sobat blogger mania.

» Selamat Berkreasi - E F A «

Cara Memasang Contact us di Blog

Posted byTeacher's Message

Apakah sobat blogger mania sedang mencari artikel tentang "Cara Memasang Contact us di Blog" ??? jika jawabanya,..Yess..maka sobat blogger mania come to the right place EFA rasa semua blogger mania pasti memberikan menu contact us pada blog mereka, mungkin ada sebagian yang kesulitan dalam membuat menu contact us seperti efa ini. nah untuk membuatnya pun EFA kira tidak terlalu sulit sobat blogger mania hanya perlu mengikuti tutorial dibawah ini. Oke mari kita ke TKP.

Pertama sobat blogger mania harus mempunyai akun email untuk proses pendaftaran
kedua silahkan Kunjungi http://123contactform.com
dan lakukan pendaftaran disana, ingat pilihlah yang gartis.bisa juga langsung sign in mith google.

Selanjutnya klik => my form"+newform" => klik contact form
beri judul pada menu contact sobat blogger mania lalu edit sesuka sobat blogger mania. untuk lebih jelasnya coba perhatikan pada gambar ini kalau gambarnya kurang jelas silahkan arahkan kursor sobat blogger mania pada gambar.

Apabila sobat blogger mania telah menyelesaikanya, silahkan sobat blogger mania klik publish form dan tentunya pilih blogger apabila ingin dipasang diblog sobat blogger mania. Untuk lebih jelasnya lihat pada gambar berikut. kalau gambarnya kurang jelas silahkan arahkan kursor sobat blogger mania pada gambar.

Ambil sriptnya kemudian pastekan pada postingan atau laman sobat blogger mania. SELESAI

D E M O

Selamat Mencoba semoga berhasil.......

» Selamat Berkreasi - E F A «

Halaman Contact Education For All

Posted byTeacher's Message

I am only villager who was born and grew up in a remote area. my favorite telesion program is: Bedah warung, Orang pinggiran, Jika aku menjadi, Kick Andy, and Mario Teguh. The news I hate so much is KISS, Silet and other bad infotaiment. thanks

If you really wanna share somethings with me, just use this colum to tell everythhing. I will be good listener.

Free forms powered by 123ContactForm.com | Report abuse

» Selamat Berkreasi - E F A «

Cara Membuat Tooltip gambar dengan jquery

Posted byTeacher's Message

kali ini EFA akan sharing jquery lagi, karena Tooltip kali ini di buat dengan bantuan jquery, dan sedikit berbeda dengan Tooltip - Tooltip biasanya, seperti apa bentuk Tooltip gambar dengan jquery, ini silahkan di lihat demo nya dibawah ini, ngak usah kemana mana, jadi coba sobat blogger mania sorot saja gambar ini, mereka pada telanjang sepertikita dulu.

kita lanjut ke tahap pembuatannya :

Log in ( masuk di blog anda )
Klik Rancangan
Klik Edit HTML
Cari Kode </head>
Setelah ketemu silahkan anda simpan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'></script>
<script>
this.imagePreview = function(){ /* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast"); },
function(){
this.title = this.t; $("#preview").remove();
}); $("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
}); };

// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</script>

sekarang cari kode ]]></b:skin>

setelah ketemu silahkan anda simpan kode di bawah ini di atas kode ]]></b:skin>

#preview{
position:absolute;
border:2px solid #0e0;
background:#0B0;
padding:5px;
display:none;
color:#fff;
}

Ok sekarang silahkan klik SIMPAN TEMPLATE
dan kode pemanggilannya / penggunaannya ada di bawah ini,

<a href="Disini URL gambar Tooltip" class="preview"><img src="Disini url gambar" width="100" height="150"></a>

Atur ketinggian dan lebar gambar lihat kode
width = Lebar, [ silahkan sesuaikan dengan keinginan anda ]
height = Tinggi [ silahkan sesuaikan dengan keinginan anda ]
Disini URL gambar Tooltip, Disini url gambar = silahkan ganti dengan url gambarnya.

Untuk menggunakannya di sidebar silahkan Tambah gadget ► html/javascript
Kalau di postingan silahkan beralih dari mode Compose ke ► Edit html
Mungkin hanya itu yang bisa saya share semoga bermanfaat.

» Selamat Berkreasi - E F A «

Cara Membuat Page Peel Efek menggunakan jQuery & CSS

Posted byTeacher's Message

Hello, Sobat blogger mania, Sungguh tiada habisnya bila kita berbicara tentang, bagaimana cara memperindah blog. Nah kali ini Eucation For All akan sharing tentang cara Membuat Page Peel Efek menggunakan jQuery & CSS. Apa sih Page peel itu?? yah barangkali sobat blogger mania pernah berkunjung kesalah satu blog sahabat dan melihat dipojok kanan atas seolah olah ada kertas yang melipat. itulah yang dinamakan page peel, barang kali bisa kita terjemahkan kedalam bahasa indonesia "Page" berarti halaman sedangkan "Peel" artinya mengupas. tapi mungkin makna yang sebenarnya adalah kertas yang melipat,...Mungkin EFA sendiri juga kurang begitu jelas. Nah without further a do. mari kita coba praktekan

D E M O

log in ke blog
Klick design/rancangan
Pilih Edit HTML
Cari kode <b:skin><![CDATA]
Jika sudah menemukan code <b:skin><![CDATA] Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA]

Kemudian carilah kode ]]></b:skin> letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Selanjutnya cari <body> Letakan kode dibawah ini, dibawah tag <body>

Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, Sobat blogger maniabisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba

EFA kira penjelasanya sudah sangat jelas. apabila sobat blogger mania belum mengerti juga sebaiknya sobat blogger mania langsung saja mematikan komputer ambil sarung terus tidur.

» Selamat Berkreasi - E F A «

Cara Membuat Tooltip Zigzag Effect diblog

Posted byTeacher's Message

Hello,..All bloggers all around Indonesia, in this nice opportunity Education for All would like to share an article about how to make Tooltip Zigzag Effect in a blog. there are many ways how to beauty your blog. one of the by putting Tooltip Zigzag Effect in your blog. I promise that your blog will look cute if you wanna put this one. and even will make your guest stay at home when visiting your blog. trust me. You wanna try it?? well, without further a do just some of the hints bellow. it's very easy.

log in to your blog
Click design
Choose Edit HTML
Find the code </head>
If you've found it, put the code bellow above the code </head>

The next step is, find the code </body> and put the code bellow above the code </body>

And now the explanation how to use Tooltip , if you wanna to use tooltip code in a posting area, please move mode Compose to mode EDIT HTML,

if you wanna to use tooltip code in sidebar please click ,
Design ► Add Gadget ► Choose HTML/Javscript

here is the code ▼
1. the code Tooltip in link form

<div id="jqtips">
<a href="your link here" title="Write down tooltip text here!">your tittle link here</a>
</div>

2. The Tooltip Code in link and picture form

3. The Tooltip Code in picture form

For the CSS code please create by yourself.

Source / Sumber

» Selamat Berkreasi - E F A «

Cara memasang Status loading diblogger

Posted byTeacher's Message

Hello, sobat blogger mania pada kesempatan kali ini EDUCATION FOR ALL akan memposting artikel tentang Cara memasang Status loading diblogger. cara untuk memasangnyapun cukup mudah. sobat blogger mania cukup mengikuti langkah langkah berikut ini:

Langkah Pembuatan dan Pemasangan

Login to Blogger (Login ke BloGGer) : Tuliskan User Name (Nama Pengguna) atau Email Address , kemudian lanjutkan dengan menuliskan Password (Sandi).
Dasboard (Dasbor) : Ketika halaman dasbor sudah terbuka (sesaat setelah login), KLIK link Layout/Tata Letak atau Design/Rancangan.
Layout (Design) : KLIK Edit HTML.
Edit HTML : Backup template (amankan template dengan cara :
- KLIK Download Full Template (Download Template Lengkap)
- Simpan file template di folder PC.
Cari kode : <head> Gunakan Ctrl+F untuk mencarinya (posisi di bagian teratas template). Letakkan link javascript di bawah ini diatas kode <head> dalam bentuk seperti ini :

<head>

Selanjutnya cari kode <body> kemudian ganti kode tersebut dengan kode HTML dibawah ini

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

Yang terakhir dan paling utama save template dan lihat hasilnya.
Semoga berhasil dan selamat mencoba.......

» Selamat Berkreasi - E F A «

Cara membuat Efek ZOOM pada gambar diblog

Posted byTeacher's Message

Ho..Hoi..Hello sobat blogger mania sebangsa dan setanah air termasuk yang diluar negeri, he..he..he,..pada postingan kali ini education for all akan memposting artikel tentang cara membuat efek ZOOM pada gambar diblog, untuk mempermudah sobat blogger mania mempraktekanya education for all sekaligus akan sharing dua cara dalam membuat efek ZOOM diblog.

Cara yang pertama dengan cara OTOMATIS, kenapa EFA sebutkan otomatis??? karena dengan sekali pasang script ini semua gambar yang ada dipostingan akan membesar jika tersentuh mouse.

coba saja arahkan mouse sobat blogger mania ke gambar dibawah ini

Cara memasang scrpitnyapun gampang, ikuti langkah-langkah berikut.?

1. Silahkan login ke Blogger terlebih dahulu.
2. Kemudian klik Tata Letak.
3. Edit HTML.
4. Letakkan kode css berikut ini, tepat diatas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
-webkit-transform: scale(1.9); }

Jangan lupa Simpan Template.

Nah, untuk cara yang kedua tunggu postingan berikutnya.

Nah, sobat blogger mania EFA kira sudah sangat jelas. apabila sobat blogger mania tidak jelas juga sebaiknya sobat blogger mania ambil sarung terus tidur

SELAMAT BERKREASI...

» Selamat Berkreasi - E F A «

Cara Mudah Membagi Kolom Header

Posted byTeacher's Message

Kalau pada postingan sebelumya pada tutorial Education For All, membahas tentang cara membuat kolom dibawah header atau diatas header, maka pada tutorial blog pemula kali ini EFA akan membahas tentang Cara Mudah Membagi Kolom Header. kolom header ini bisa demanfaatkan untuk keperluan banyak hal, sperti misalnya untuk iklan dan sebagainya. namun karena EFA sendiri tidak memasang iklan pada blog ini maka EFA manfaatkan untuk memasang gambar animasi. contohnya ya ...bisa sobat blogger mania lihat pada kolom header EFA yang ada disebelah kanan itu. Apabila sobat blogger mania berminat memasang slide show photo seperti pada header EFA silahkan baca tutorialnya dengan cara klik DISINI nah jika template sobat blogger mania memang headernya belum terbagi silahkan saja ikuti langkah langkah berikut ini:

Pertama :Login ke blogger dengan ID anda
Kedua : Klik Layout
Ketiga : Klik tab elemen Halaman , kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Hapus Kode diatas lalu ganti dengan kode script dibawah ini

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Kemudian scroll lagi kebawah dan cari kode script yang seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Hapus kode diatas lalu ganti dengan kode dibawah ini

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>





Terakhir dan yang paling utama simpan.

Selamat mencoba semoga berhasil. apabila ada yang kurang jelas silahkan tulis dikom komentar

Selamat berkarya melalui Blogger...................

» 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) :