Membuat Gambar Melayang (Float Image) di Pojok Halaman

Kita akan belajar bersama-sama cara membuat gambar atau foto yang bisa melayang, seperti mahluk halus saja :) Apakah seh maksudnya? Lihat pada layar monitar kita saat ini. Di pojok halaman blog saya ada gambar rumah (home) walau kita naik turun tetap saja gambar itu berada di sana (pojok Halaman)

Sebuah blog juga harus kelihatan cantik atau indah supaya orang juga betah untuk berlama-lama di blog kita. Tentu dengan kita membuat gambar melayang atau float image harapan itu akan terwujud. Selain itu kita juga dapat menganti gambar itu dengan sebuah widget, misalnya jam, kalender, atau banner.

Cara Membuat Gambar Melayang (Float Image) di Pojok Halaman
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin> setealah itu, taruh kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

6. Selanjutnya Cari kode </body> jika sudah ketemu, taruk kode berikut ini di atasnya.

<div id='trik_pojok'>
<a href='http://kurniasepta.blogspot.com'>
<img border='0' src='http://homepage1.nifty.com/simachan/simacha/material/image/button/home01.gif'/></a>
</div>

Note : Kita bisa ganti bottom dengan top dan left dengan right. Sesuai dengan letak yang kita inginkan atau mungkin sama dengan itu saja, gak usah diganti :D
Kita juga harus ganti http://kurniasepta.blogspot.com dengan URL kita sendiri, tapi kalau tidak diganti juga terima kasih :z Dan kita juga bisa menganti http://homepage1.nifty.com/simachan/simacha/material/image/button/home01.gif dengan URL gambar yang suka.

7. Simpan Template Kalau sudah selesai.

Membuat Teks yang Berputar Mengelilingi Cursor

Setelah dulu kita telah belajar bersama bagaiamana mengganti cursor yang ada di blog kita dengan gambar, sekarang bagaimana kalau kita belajar yang masih terkait dengan cursor? Setuju :D

Ya kita kali ini akan belajar membuat teks yang berputar-putar mengelilingi cursor kita di blog. Tulisan yang yang mengikuti cursor yang kita gerak-gerakan kemana saja atau bahkan cursor itu diam. Dengan membuat teks yang berputar mengelilingi cursor membuat blog kita semakin indah dan cantik :)

Cara Membuat Teks yang Berputar Mengelilingi Cursor
1. Login ke blogger
2. Pilih tata letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<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='Membuat Teks yang Berputar Mengelilingi Cursor'.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>

5. Sebelum disimpan, ganti tulisan Membuat Teks yang Berputar Mengelilingi Cursor dengan teks/tulisan yang kita inginkan.

Mengubah Cursor Blog dengan Gambar

Kembali membahas untuk mempercantik blog, kali ini kita akan belajar bagaimana mengubah cursor yang ada di blog kita dengan gambar. Ini baik juga untuk blog kita, sehingga akan membuat blog kita menjadi berbeda dengan blog-blog yang lain. Kalau yang lain standart maka blog kita berbeda dan jadi unik :)

Cursor yang ada di blog kita dapat kamu rubah dengan foto atau gambat yang kita suka. Atau kamu yang narsis habis bisa menggantinya dengan foto kamu sendiri. :) Yang jelas, buat saja blog kita menjadi lebih cantik dan menarik :p

Cara Mengubah Cursor Blog dengan Gambar
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>

Kode yang bercetak miring adalah URL gambar yang ingi kita jadikan pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu inginkan.
5. Simpan jika sudah selesai

Kembali membahas untuk mempercantik blog, kali ini kita akan belajar bagaimana mengubah cursor yang ada di blog kita dengan gambar. Ini baik juga untuk blog kita, sehingga akan membuat blog kita menjadi berbeda dengan blog-blog yang lain. Kalau yang lain standart maka blog kita berbeda dan jadi unik :)

Cursor yang ada di blog kita dapat kamu rubah dengan foto atau gambat yang kita suka. Atau kamu yang narsis habis bisa menggantinya dengan foto kamu sendiri. :) Yang jelas, buat saja blog kita menjadi lebih cantik dan menarik :p

Cara Mengubah Cursor Blog dengan Gambar
1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript 
4. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>

Kode yang bercetak miring adalah URL gambar yang ingi kita jadikan pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu inginkan.
5. Simpan jika sudah selesai

Membuat Cursor Bertaburan Bintang

Ada banyak sekali untuk meodifikasi atau membuat pernak-pernaik tentang cursor, yang sudah kita bahas saja ada mengubah cursor dengan gambar, membuat teks yang berputar mengelilingi cursor. Dan kali ini belajar membuat cursor yang bertaburan bintang. jadi saat cursor kita bergerak akan turun bintang-bintang dari cursor. Ada beberapa warna bintang yang bisa kita pilih untuk ditampilkan di blog kita.

Cara Membuat Cursor Bertaburan Bintang
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:

<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

5. Kita warnan biru dengan, hijau, merah, ungu, silver, kuning, hitam
6. Simpan jika sudah selesai

Cara Membuat Efek Hati Bertaburan di Blog

Ada yang hatinya sedang berbunga-bunga dan mengekspresikannya di blog? Tidak usah bingung untuk membuat efek hati bertaburan di blog personalmu. Kali ini Belajar Ngeblog di BLOG akan berbagi script memberikan efek hati berjatuhan di blog.

Sama seperti efek-efek bertaburan sebelumnya, seperti efek salju, efek bintang, dan efek gelembung. Untuk membuat efek ikon hati bertebaran di blog kita juga sama mudahnya, kita tinggal memasukkan script efek hati ke template blog kita.

Cara Membuat Efek Hati Bertaburan di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </body>
4. Taruh kode berikut di atasnya

<script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>

5. Simpan Template jika sudah selesai.

Bagaimana, mudah bukan untuk memberikan efek hati yang bertaburan di blog? Gambar-gambar hati berwarna merah muda akan menghiasi di blog kamu.

Memasang Widget Random Ayat Al-Quran di Blog

Blog memiliki banyak fungsi tetapi fungsi utamanya adalah untuk menyampaikan pesan ke masyarakat luas melalui internet. Bagi blogger yang beragama islam dapat memasang atau menambahkan widget yang menampilkan kutipan-kutipan ayat Al-Quran di blognya. Widget ini akan menampilkan secara acak kutipan arti ayat-ayat Al-Quran.

Setiap kali blog kita dibuka atau direload ke halaman baru maka widget ini menampilkan ayat-ayat Al-Quran secara random. Ada baiknya blog juga dimanfaatkan untuk menyebarkan ayat-ayat Allah kepada khalayak ramai. Untuk memasang widget random kutipan ayat Al-Quran ini tidaklah sulit, seperti inilah langkahnya.

Cara Memasang Widget Random Ayat Al-Quran di Blog
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<img src="http://www.mahesajenar.com/scripts/ayatimg.php?&amp;text=000000&amp;bg=eeeeee&amp;border=cccccc&amp;sc=00008B&amp;c=40" />

5. Simpan jika sudah selesai

Oh ya, tampilan widget yang menampilkan ayat Al-Quran secara radom ini bisa disesuaikan. 000000 adalah kode warna teks, eeeeee adalah kode warna background, cccccc adalah warna border, dan 40 adalah ukuran widget. Jika sudah terpasang, tampilannya akan seperti ini;

Membuat Banner Bertaburan

Pernah melihat blog yang terdapat banner bertaburan di halamannya? ingin mengetahui cara membuatnya? jika tertarik silahkan baca artikel di bawah ini sampai selesai !. Untuk membuat banner bertaburan, yang akan saya gunakan adalah memakai perintah marquee. Tentang marquee sudah saya bahas pada postingan terdahulu dan kali ini akan saya bahas variasi lain dari perintah marquee ini. Agar banner yang di gunakan lebih menarik untuk di lihat, maka sebaiknya kita menggunakan banner yang berisifat animasi. Animasi ini bisa berupa putaran, terbalik atau mungkin dalam bentuk terbang. Untuk membuat animasi, sobat bisa menggunakan berbagai software pembuat animasi semisal Ulead cool 3D ataupun program yang lainnya. Sedikit kabar gembira, bagi sobat yang belum mempunyai software Ulead cool 3D sobat bisa mendowload secara gratis di blog miliknya bang iwan yaitu di http://free7.blogspot.com. Bagi sobat yang sudah terbiasa dengan program-program animasi, tentu tidak akan menemui masalah dalam hal membuat banner animasi, akan tetapi bagi sobat yang sama seperti saya ini yakni masih banyak bingungnya kalau membuat animasi maka ada jalan lain yakni kita bisa mencari situs-situs penyedia animasi. Bagaimana cara mencarinya? ini hal yang mudah, pada akhir artikel ini saya sediakan search engine dari google. Tugas sobat hanya mengisi kotak isian dengan keyword yang di inginkan, misal : free animation, animasi gratis, Free banner animation atau keyword lain yang sekiranya bisa memunculkan berbagai situs penyedia animasi gratis, kemudian setelah kotak isian di tulis silahkan klik tombol search maka nanti akan keluar ratusan atau bahkan ribuan situs penyedia animasi, silahkan sobat cari sendiri mana yang cocok. OK kita kembali ke.....topik bahasan tentunya. Sebagai contoh saya telah mendapatkan sebuah file banner animasi, tugas selanjutnya adalah mengupload file tersebut ke hosting penyimpan gambar. Ambil contoh, saya telah mengupload banner animasi di google pages dan mempunyai alamat seperti ini : http://amen24.googlepages.com/face5.gif Untuk membuat gambar ini bisa tampil kodenya seperti ini : <img src="http://amen24.googlepages.com/face5.gif"> hasilnya seperti ini : Atau sobat bisa memperbesar atau memperkecil animasi ini dengan mengatur tinggi serta lebar gambar, contoh di perbesar : <img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"> hasilnya akan seperti ini : contoh di perkecil : <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30"> hasilnya akan seperti ini : Langkah selanjutnya adalah membuat variasi perintah marquee, saya berikan contoh perintahnya seperti ini : <marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"> <img src="http://amen24.googlepages.com/face5.gif"> </marquee> Agar lebih faham, saya bahas sedikit tentang fungsi-fungsi dari atribut yang saya berikan : behavior="scroll" --> behavior atribut untuk mengatur perilaku gerakan. scroll perilaku yang di pilih yaitu teks atau image bergerak berputar/berulang-ulang. direction="down" --> direction atribut untuk mengatur arah gerakan teks/image. down arah yang di pilih adalah ke bawah, sobat bisa merubah arah ini sesuai keinginan, tinggal ganti dengan Up untuk keatas, Left untuk ke pinggir dan right untuk ke kanan. style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" --> position: absolute; posisi yang di pilih adalah absolut atau tersendiri. right: 1100px; posisi terletak sebesar 1100 pixel diukur dari sebelah kanan layar. top: 52px; posisi juga terletak pada 52 pixel di ukur dari sebelah atas layar. width: 100px; lebar untuk tempat gambar sebesar 100 pixel. height: 900px; tinggi untuk tempat gambar sebesar 900 pixel. scrollamount="14" --> scrollamount atribut untuk mengatur kecepatan gerakan. 14 adalah kecepatan yang dipilih, silahkan ganti nilainya, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat. Contoh di atas merupakan hanya untuk satu gambar animasi saja, biar lebih menarik dan supaya gambarnya banyak bertebaran maka perintah yang di buat harus beberapa perintah, akan tetapi posisinya harus di bedakan agar terlihat bertebaran. Dan ada yang harus di ingat yaitu kita harus membuat posisi yang kira-kira tidak mengganggu pembaca yakni tidak menutupi artikel yang kita posting. Contoh perintahnya seperti ini : <marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"> <img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5"> <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9"> <img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> <marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"> <img src="http://amen24.googlepages.com/face5.gif" /> </marquee> Contoh gambar animasi diatas adalah memakai gambar milik saya, silahkan sobat ganti dengan gambar yang sobat sukai. Cara memasang kode-kode diatas, silahkan ikuti langkah berikut ini : Untuk template klasik :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Simpan kode berikut antara kode <body> ........ </body> :
<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br /><img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />
6. Klik tombol Pratinjau untuk melihat perubahan
7. Jika sudah OK, klik tombol Simpan Perubahan Template
8. Selesai.

Untuk template baru :

1. Sig in di blogger dengan id sobat
2. Klik menu layout
3. Klik menu Elemen Halaman
4. Klik tulisan Tambahkan sebuah Elemen Halaman
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
6. Copy kode di bawah lalu paste pada kotak yg tersedia, jangan lupa ganti alamat gambarnya dengan yang sobat miliki
<br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 1100px; top: 52px; width: 100px; height: 900px;" scrollamount="14"><br /><img src="http://amen24.googlepages.com/face5.gif" width="100" height="100"/><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; left: 358px; top: 2px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 441px; top: 55px; width: 60px; height: 250px;" scrollamount="9"><br /><img src="http://amen24.googlepages.com/face5.gif" width="30" height="30" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 498px; top: 53px; width: 60px; height: 380px;" scrollamount="6"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 800px; top: 51px; width: 60px; height: 350px;" scrollamount="7"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 390px; top: 55px; width: 60px; height: 450px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 749px; top: 54px; width: 60px; height: 250px;" scrollamount="5"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 325px; top: 52px; width: 60px; height: 300px;" scrollamount="10"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 600px; top: 49px; width: 60px; height: 350px;" scrollamount="8"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 873px; top: 52px; width: 60px; height: 400px;" scrollamount="3"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br /><br /><marquee behavior="scroll" direction="down" style="position: absolute; right: 50px; top: 55px; width: 60px; height: 700px;" scrollamount="12"><br /><img src="http://amen24.googlepages.com/face5.gif" /><br /></marquee><br />
7. Klik tulisan Lihat Blog untuk melihat hasilnya
8. Selesai.

Sebagai contoh saya sudah membuat blog dengan perintah ini, silahkan klik disini untuk contoh yang arah ke bawah, dan klik di sini untuk contoh yang arah ke atas. Jangan lupa sobat, untuk mencari situs penyedia animasi, silahkan gunakan search engine di bawah biar saya dapet komisi dari google ya dan yang pasti sobat tidak usah repot-repot buka browser baru bukan Selamat mencoba !

Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini :

"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku"

Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.

Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia.

Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah :

http://kolom-tutorial.blogspot.com/atom.xml

Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat



2. Klik menu layout



3. Klik menu Elemen Halaman



4. Klik tulisan Tambahkan sebuah Elemen Halaman



5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed



6. Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml



7. Klik tombol SIMPAN PERUBAHAN



8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki



9. Klik tombol SIMPAN



10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat



11. Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini !

Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :





Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.

Untuk template klasik :

1. Sign in di blogger dengan id sobat



2. Klik menu Template



3. Klik menu Edit HTML



4. Copy kode berikut, lalu paste pada sidebar





<object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br> <param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial¶m_style_borderColor=000000¶m_style_brandUrl=&" /><br> <param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br> <embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial¶m_style_borderColor=000000¶m_style_brandUrl=&" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br> <div style="font:11px/12px georgia;width:180px;margin-top:2px;"> </div>




Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya seperti ini :

<!-------- Begin#sidebar---------->
<div id="sidebar">


.......................


.......................


.......................


</div>
<!-------- End#sidebar---------->

nah pasang kode tadi diantara kode diatas.


5. Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template



6. Selesai.

Untuk yang template baru :

1. Sign in di blogger



2. Klik menu layout



3. Klik menu Elemen Halaman



4. Klik tulisan Tambahkan sebuah Elemen Halaman



5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript



6. Copy kode berikut, lalu paste pada kotak yang ada :





<center> <object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br> <param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial¶m_style_borderColor=000000¶m_style_brandUrl=&" /><br> <param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br> <embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial¶m_style_borderColor=000000¶m_style_brandUrl=&" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br> <div style="font:11px/12px georgia;width:180px;margin-top:2px;"> </div> </center>





7. Klik tombol SIMPAN PERUBAHAN



8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki



9. Klik tombol SIMPAN



10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat



11. Selesai.

Untuk contoh bisa di lihat di sini !



Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu :

1. Sig in



2. Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)



3. Klik menu Pengaturan



4. Klik menu Feed situs



5. Klik menu dropdown di samping tulisan Ijinkan Feed blog



6. Pilih yang Penuh



7. Klik tombol Simpan Setting



8. Selesai.

Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik sobat sendiri.

Selamat mencoba !!!

Menu Dropdown dengan JavaScript (2)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :








Maka kali ini saya akan memberi contoh banner seperti ini :










Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat


2. Klik menu Template


3. Klik menu Edit HTML


4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template


5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :



<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}

</script>



6. Masukan kode berikut diatas kode ]]></b:skin>



.raden{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #F6E151;
}

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: ##FAF705;
height: 18px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');
text-align:center;
width:175px;
font-family: georgia, Helvetica, sans-serif;
padding-left:5px;
padding-right:5px;
padding-top:8px;
padding-bottom: 5px;
display:block;
text-decoration: none;
color: #0572FA;
height: 18px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand}




7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :



<a class="raden"><font size="5"><b>Navigasi</b></font></a>

<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>

<div id="ogahku1" class="hide">

<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>

</div>

<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>

<div id="ogahku2" class="hide">

<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>

<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>

<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>

<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>

</div>

<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>

<div id="ogahku3" class="hide">

<a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>

<a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a>

<a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>

<a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>

</div>

<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>

<div id="ogahku4" class="hide">

<a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>

<a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>

<a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>

<a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>

</div>







8. Klik tombol Preview untuk melihat perubahan yang baru di buat


9. Jika sudah OK, klik tombol Save Changes Template
10. Selesai.

Keterangan kode-kode diatas :

• kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :


<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}

</script>



• Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
• 
  
  
  .raden
  --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.
  
  background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
  --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.
  
  text-align:center;
  --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.
  
  width:90%;
  --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.
  
  font-family: georgia, Helvetica, sans-serif;
  --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.
  
  padding-left:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-right:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-top:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-bottom: 5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  display:block;
  --> block berarti ditampilkan,jadi jangan dirubah.
  
  text-decoration: none;
  --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.
  
  color: #F6E151;
  --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.
  
  
  
  .ogah
  --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  .ogahniye
  --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  .hide
  display: none;
  --> Pendifinisian untuk .hide disembunyikan (tidak tampil).
  
  
  
  .show
  display: block;
  --> Pendifinisian untuk .show ditampilkan.
  
  
  
  a{cursor: hand}
  Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
  
  
  
• Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.

Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

1. http://copy-copy-copy.blogspot.com
2. http://hackerbpd.blogspot.com
3. http://xtkj2cmuahacker.blogspot.com
4. http://aas111.blogspot.com/
5. http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree


kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
&nbsp;
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
&nbsp;
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
&nbsp;
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
&nbsp;
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik   Free blog template   Rotating banner blog   User Online status   Kode menu d tree

kode &nbsp; yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode &nbsp; adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal &nbsp;&nbsp; , atau &nbsp;&nbsp;&nbsp; , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.


Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

1. http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin
2. http://adry-fx.blogspot.com --> Adryy-fx
3. http://belati.blogspot.com --> Belati
4. http://benhardleroy.blogspot.com --> Benhard Journey
5. http://melileagroup.blogspot.com --> Capunk
6. http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>


Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok


Untuk membuat link yang arah horizontal seperti ini :



<b>:::A:::</b>
&nbsp;&nbsp;
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
&nbsp;&nbsp;
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
&nbsp;&nbsp;

<b>:::B:::</b>
&nbsp;&nbsp;
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
&nbsp;&nbsp;
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
&nbsp;&nbsp;

<b>:::C:::</b>
&nbsp;&nbsp;
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
&nbsp;&nbsp;
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>


maka hasilnya akan seperti ini :

:::A:::    Abu Amin    Adryy-fx    :::B:::    Belati    Benhard Journey    :::C:::    Capunk    Catatan pojok

Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><< A >></b>
<br/>
&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
&bull;&nbsp;<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>


Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<< B >>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok


Untuk arah horizontal :

<b><< A >></b>
&nbsp;
&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
&nbsp;&nbsp;

<b><< B >></b>
&nbsp;
&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
&nbsp;&nbsp;

<b><< C >></b>
&nbsp;
&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>


Hasilnya akan seperti ini :

<< A >>   • Abu Amin    • Adryy-fx    << B >>   • Belati    • Benhard Journey    << C >>   • Capunk    • Catatan pojok


Bagaimana lebih menarik bukan?


Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &bull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :



Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :





Nah, tugas sobat hanya mengganti kode &bull; diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0">&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>


Maka hasilnya akan seperti ini :

 Abu Amin


Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.


Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode &nbsp; di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>
&nbsp;&nbsp;
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a>

Hasilnya akan seperti ini :



  



jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode &nbsp; agar ada jarak antara buttonnya.



Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.


Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

1. Sig in di blogger dengan id sobat
2. Klik menu Layout
3. Klik menu Elemen Halaman
4. Klik tulisan Tambahkan sebuah Elemen Halaman
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link
6. Beri judul link yang sobat kehendaki. contoh : link temanku :
7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia
8. Klik tombol SIMPAN PERUBAHAN
9. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
10. Klik tombol SIMPAN
11. Selesai.

Membuat Penggalan Artikel

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya cuma hiks.... hiks masih dikit yang mau klik iklan aku tapi ga apa-apa berarti belum rezekinya (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?


Maka kode yang kita buat adalah sebagai berikut :


<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>

Kode tersebut hasilnya akan seperti ini :


Electronic Shopping

---

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

---

Biar lebih faham, sedikit saya uraikan :

<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.


Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

Sign in di blogger dengan id sobat

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

Cari kode seperti di bawah ini :

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :


<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Klik tombol Preview untuk melihat perubahan yang baru di lakukan

Apabila sudah OK, klik tombol save Template Changes

Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.


Untuk template baru :

Sign In di blogger dengan id sobat

Klik menu Layout

Klik menu Page Elements

Klik Add a Page Element

Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

Copy paste kode penggalan artikel yang telah kita buat tadi

Klik tombol SAVE CHANGES

Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

Bila sudah OK, klik tombol SAVE

Selesai.

Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !