ASMAUL HUSNA

22/02/10

HURUF BESAR TAMPIL PADA AWAL POSTINGAN

 Postingan suatu artikel dapat ditampilkan dengan gaya yang berbeda dan masing-masing gaya tersebut memiliki kelebihannya sendiri.
Salah satu gaya dari penulisan artikel adalah huruf besar tampil pada awal kalimat suatu postingan/seperti gaya penulisan pada koran. Sebagai contoh adalah tulisan yang sedang anda baca ini. Huruf P dibuat sedemikian rupa sehingga terlihat lebih besar dari huruf-huruf lainnya
Ingin membuat postingan seperti contoh diatas ?
Sign in ke Blogger dengan ID anda

Klik Layout

Klik Edit HTML

Jangan lupa Download Full Template, lalu simpan data tersebut data tersebut. Hal ini untuk menjaga kemungkinan anda gagal dalam mengedit template

Cari kode ]]> </b:skin> kemudian copy kode-kode dibawah ini dan paste tepat diatas tadi.

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}


Klik Tombol Simpan Template


Setelah langkah-langkah tadi anda lakukan dengan dengan baik, sekarang coba membuat postingan artkel dengan menggunakan gaya yang baru anda lakukan.
Jangan lupa, pada saat melakukan postingan harus pada edit HTML bukan pada Tulis.
Ketiklah kode ini <span class="awal">huruf awal</span> . Masukanlah satu huruf menggantikan kata huruf awal. Setelah huruf awal anda ketik, kelanjutannya anda boleh pada edit HTML atau pada Tulis.

Contoh :

<span class="awal">P</span> ada akhir semester genap Tahun Pelajaran 2008/2009,OSIS SMP Negeri 1 Sambas akan mengadakan kegiatan perlombaan antar kelas. Jenis-jenis perlombaan tersebut meliputi beberapa macam cabang seperti olahraga, kesenian, lomba mata pelajaran, lomba kebersikan dan lain-lain.

Tulisan tersebut akan terlihat seperti ini

Pada akhir semester genap Tahun Pelajaran 2008/2009,OSIS SMP Negeri 1 Sambas akan mengadakan kegiatan perlombaan antar kelas. Jenis-jenis perlombaan tersebut meliputi beberapa macam cabang seperti olahraga, kesenian, lomba mata pelajaran, lomba kebersikan dan lain-lain.

Agar warna huruf maupun warna latar belakang sesuai dengan warna postingan pada blog anda, ubahlah kode-kode warna dibawah ini dengan kode warna yang sesuai

color: #000000;
background:#ffffff;

Color : untuk warna huruf
background : untuk warna latar belakang.

21/02/10

MEMBUAT KURSOR DIIKUTI TEKS

Judulnya kok aneh...??! Sengaja dibuat seperti itu agar timbul rasa penasaran dari pengunjung, mungkin termasuk anda.
Maksud dari judul postingan ini adalah : Kemanapun kursor anda gerakan, selalu ada teks yang dengan setia mengikutinya.
Anda ingin menampilkan pada blog kesayangan anda...??Ikuti langkah-langkahnya :


  • Sign ke Blogger.
  • Pilih Tata Letak, Edit HTML, HTML/JavaScript.
  • Copy seluruh kode dibawah ini dan paste pada kolom yang tersedia.
  • Klik Tombol Simpan.
  • Selesai.



KODE YANG HARUS ANDA COPY





<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='EPG STUDIO BERBAGI ILMU DAN PENGALAMAN'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>



kode yang bercetak merah dapat anda ganti sesuai keinginan dan keperluan anda sendiri.

MENAMBAH GADGET DIATAS HEADER

Sambil menunggu waktu untuk menjemput istri yang ikut senam aerobik (daripada ngantuk), coba-coba buat post yang membahas cara menambah gadget diatas header.
Gadget diatas header bisa difungsikan untuk pemasangan koleksi image atau apa saja yang anda suka, bahkan dapat juga untuk pemasangan iklan, karena tempatnya startegis, terdapat dibagian paling atas yang secara langsung loadingnya paling duluan dan yang pertama dilihat oleh pengunjung blog anda.
Hanya dengan sedikit penambahan kode, blog anda memiliki tempat widget diatas header. Simak cara-caranya :
  • Masuk ke Blogger dengan ID anda
  • Pilih Tata letak
  • Pilih Edit HTML
  • Backup dulu templatenya kalau anda takut gagal
  • Beri tanda contreng pada kotak disamping Expland Widget Template
  • Cari kode yang mirip dengan kode dibawah ini pada template anda

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
    </b:section>
  • Perhatikan yang berwarna merah. Angka 1 ganti dengan jumlah gadget yang ingin anda tampilkan (disarankan angka 1 jangan diubah) dan kata no anda ganti dengan kata yes  Setelah anda ubah kata yang berwarna merah, copy kode dibawah ini dan letakan tepat dibawah kode <div id='header-wrapper'>

    <b:section class='header' id='topheader' preferred='yes'/>

  • Setelah digabungkan kodenya menjadi seperti ini :


    <div id='header-wrapper'>
    <b:section class='header' id='topheader' preferred='yes'/>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='TITLE BLOG ANDA (Header)' type='Header'>
    </b:section>
  • Klik tombol Simpan Template
  • Lihat pada Elemen Halaman 
  • Setelah muncul Tambah gadget diatas header, sekarang cobalah anda tambah widget atau apa saja yang ingin anda tampilkan diatas header
  • Selesai
  • Selamat mencoba .....semoga bermanfaat.

ELEMEN HALAMAN MEMILIKI SCROLL

Mudah dan sederhana cara untuk meenampilkan elemen halaman yang memiliki scroll seperti pada elemen halaman EPG Studio (lihat :ARSIP EPG STUDIO . Elemen halaman yang memiliki vertical scroll dapat menghemat tempat pada sidebar terutama jika isi tulisannya berjumlah banyak.
Caranya anda tinggal menambah kode HTML seperti dibawah ini :

<style="overflow:auto;width:300px;
height:200px;padding:10px;
border:1px solid #eee">
isi halaman
</div>

Contoh : lihat yang berwarna merah
<div style="overflow:auto;width:250px;height:100px;padding:5px;border:1px solid blue"><div>
1.<a href="http://epg-studio.blogspot.com/2009/01/software-anak-anak-gratis.html" target="new">Software Menggambar untuk Anak</a>

2.<a href="http://epg-studio.blogspot.com/2009/01/download-mp3-slow-rock-barat.html" target="new">MP3 Lagu Barat Campur</a>

3.<a href="http://epg-studio.blogspot.com/2009/02/rgam-huruf.html" target="new">Ragam Huruf Latin</a>

4.<a href="http://epg-studio.blogspot.com/2009/02/deep-freeze-si-penangkal-virus.html" target="new">Deep Freeze si Penangkal Virus</a>

5.<a href="http://epg-studio.blogspot.com/2009/02/dinas-pendidikan-pusat-memberikan.html" target="new">Buku Sekolah Elektronik (BSE)</a>

6.<a href="http://epg-studio.blogspot.com/2009/02/mp3-musik-pop-indonesia_13.html" target="new">MP3 Lagu Pop Indonesia</a>

7.<a href="http://epg-studio.blogspot.com/2009/02/software-islam.html" target="new">Software Islam</a>

8.<a href="http://epg-studio.blogspot.com/2009/03/kumpulan-soal-ujian-tingkat-smp.html" target="new">Kumpulan Soal Ujian Tingkat SMP Bagian 1</a>

9.<a href="http://epg-studio.blogspot.com/2009/03/mp3-lagu-lagu-perjuangan_08.html" target="new">MP3 Lagu Perjuangan</a>

10.<a href="http://epg-studio.blogspot.com/2009/03/mp3-lagu-daerah-sambas.html" target="new">MP3 Lagu Daerah Sambas</a>
</div>
</div>

Contoh diatas jadinya akan seperti ini :

Jika anda ingin mengubah beberapa karakter tinggal mengubah pada bagian ini

<div style="overflow:auto;width:250px;height:100px;padding:5px;border:1px solid blue"><div>
isi halaman
</div>

1. width ganti angkanya dengan lebar yang anda inginkan.
2. Height ganti angkanya dengan tinggi yang anda inginkan.
3. Padding ganti angkanya dengan jarak antara batas tepi dengan awal tulisan.
4. Border garis pinggir
5. Solid #eee merupakan kode dari warna biru, anda bisa ganti dengan kata white, black atau apa saja.
Agar isi halaman yang satu dengan yang lainnya tidak berhimpitan beri kode <br/> diantara isi halaman.

MENGHILANGKAN ICON QUICK EDIT (ICON TANG DAN OBENG)

Icon tang dan obeng mrupakan icon yang berfungsi untuk pengeditan widget secara langsung dari blog tanpa harus masuk ke Elemen Halaman. Sebenarnya icon itu untuk memudahkan anda dalam melakukan pengeditan/memanage blog. Bentuknya seperti dibawah ini :



Mungkin diantara anda ada yang merasa kurang enak jika pada blog mucul icon tersebut pada setiap Elemen Halaman. Bagi anda yang berpandangan seperti itu ada solusi untuk menghilangkannya.
Silahkan anda simak :

  • Sign ke Blogger.
  • Pilih Tata Letak.
  • Pilih Edit HTML.
  • Backup dulu templatenya, untuk menjaga jika terjadi kegagalan.
  • Beri tanda contreng pada Expand Widgets Templates.
  • Cari kode <b:include name='quickedit'/>
  • Hapus/delete kode tersebut.
  • Kode <b:include name='quickedit'/> lebih dari satu, jadi anda harus mencari yang lainnya kemudian hapus/delete.
  • Setelah selesai ,klik tombol Simpan Template. Lihat hasilnya.
  • Jika masih ada yang muncul icon tang dan obengnya, berarti anda belum menghapus seluruh kode <b:include name='quickedit'/>
  • Lakukan langkah seperti diatas untuk mencari kode <b:include name='quickedit'/> yang belum terhapus. Hapus semuanya.



TIPS PENCARIAN KODE SECARA CEPAT


  • Klik meu Edit pada menu Browser atau tekan Ctrl + F. Muncul kotak Find seperti ini :

  • Copy kode yang akan dicari kemudian paste pada kotak yang tersedia.
  • Klik tombol Find Next.

CARA MENGGANTI TITLE BLOG DENGAN JUDUL POST

Jika anda membuka salah satu judul post pada sebuah blog, secara umum yang tampil dibagian title blog adalah nama dari blog itu sendiri baru setelah itu diikuti dengan judul dari post yang sedang anda buka.
Tetapi pada sebagian blog lainnya, begitu anda membuka sebuah post, yang muncul pada title blog hanya judul dari postnya saja.
Menurut para pakar SEO, gaya kedua yaitu judul post tampil menggantikan title blog, dapat menjadikan post anda masuk ke jajaran terdepan dari suatu search enggine karena cara tersebut dapat menjadikan blog anda lebih Search Engine Friendly.
Namun, walaupun anda telah mengganti title blog dengan judul post, jika anda membuka halaman utama, maka yang tampil tetap judul/title dari blog anda. Jadi anda tidak perlu khawatir akan kehilangan judul atau nama dari blog anda.
Bagi anda yang ingin mecoba trik ini, silahkan ikuti langkah-langkah dibawah ini :
  • Masuk ke Blogger dengan ID anda
  • Pilih Tata Letak, Klik menu Edit HTML.
  • Cari kode ini : <title><data:blog.title/></title> (terdapat dibagian atas template blog anda).
  • Ganti kode diatas dengan kode dibawah ini :

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>
  • Klik tombol Simpan Template.
  • Sekarang coba anda buka salah satu post anda dan lihat perbedaannya.
  • Selesai.

CARA MEMBUAT VARIASI HURUF DENGAN KODE MARQUEE

Tehnik pembuatan huruf berjalan seperti pada contoh diatas, merupakan variasi dari CARA MEMBUAT TEXT/IMAGE BERJALAN (MARQUEE). Jadi intinya, anda harus menguasai dulu tentang efek marquee kemudian tambahkan beberapa kode untuk menampilkan huruf baik dalam pewarnaan maupun jenis huruf.
Perlu diketahui juga jenis huruf yang dapat ditampilkan pada sebuah blog terdiri dari : Georgia, Verdana, Arial, Times, Courier dan Trebuchet ( ini hanya pendapat dari admin ERG Studio berdasarkan dari tab Font dan Warna pada Tata Letak). Silahkan anda pilih huruf apa yang ingin anda gunakan.
Tulisan Selamat datang di EPG Studio terdiri dari kode-kode sebagai berikut. Silahkan anda perhatikan.

<div align="left"><marquee scrollamount="3" direction="left" width="100%" bgcolor="blue"><span style=";font-family:georgia;font-size:40px;font-style:italic;color:yellow;">Selamat datang di</span><span style=";font-family:Verdana;font-size:60px;color:red;"> "EPG Studio"</span></marquee></div>

Keterangan :
  • <div align="left">...</div> merupakan kode untuk penempatan perataan teks. Anda dapat mengganti dengan kata left, center atau justify.
  • <marquee scrollamount="3"...</marquee> merupakan kode awal dan akhir dari marquee serta kode pengatur kecepatan pergerakan huruf. Semakin besar angkanya, gerakan huruf akan semakin cepat.
  • direction="left" merupkan kode pengatur gerakan huruf. Anda dapat mengganti dengan : right, up atau down.
  • Kode direction="left" dapat anda ganti dengan Behavior="scroll/slide/alternate" untuk mengganti dengan gerakan dalam bentuk lain :
    1. Scroll = teks bergerak sambil berputar.
    2. Slide = teks bergerak sekali lalu berhenti.
    3. Alternate = teks bergerak bolak-balik kekiri dan kekanan.
  • width="100%" merupakan kode untuk mengatur lebar dari penampilan blok text.
  • bgcolor="blue" merupakan kode untuk latar belakang.
  • <span style=";font-family:georgia;font-size:40px;font-style:italic;color:yellow;">Selamat datang di</span> merupakan kode untuk tampilah huruf. Dapat anda lihat bahwa tulisan Selamat datang di diatur dengan jenis huruf Georgia, ukuran huruf 40px, huruf tampil miring, dan warna huruf kuning.
  • <span style=";font-family:Verdana;font-size:60px;color:red;"> "EPG Studio</span>" merupakan kode untuk penampilan tulisan EPG Studio yaitu diatur dengan jenis huruf Verdana, ukuran huruf 40px, warna huruf merah