Marquee with Javascript

Walowwwww...... semuanya. Nongol lagi nih, setelah beberapa hari absen dari nge-blog. Yups... karena kemarin kantorku abis ngadain Tour ke kampung halamanku Bandung. Acyiiiik... banget, makan-makan di kampung daun trus lihat kawah tangkuban perahu, and then berendem air panas di sari ater, pokonya ga inget deh ama yang namanya blog apalagi sama yang ngajuin pertanyaan lewat Shoutbox kaciaaaaaan deh lho ga ada yang nanggepin

( saya lagi jahat nih )



OK sobat, setelah enak tertawa, kita kembali ke...... blog tutorial.... tentunya bukan laptop emangnya saya tukul arwana apa? Yoi... pada kesempatan
kali ini saya mau membicarakan tentang pembuatan fungsi teks berjalan yang sering menggunakan perintah marquee, akan tetapi tentu saja bukan memakai
fungsi marquee biasa seperti yang saya terangkan di sini, karena sama-sama kita ketahui bahwa fungsi marquee tidak bekerja dengan baik pada browser Mozilla atau firefox. Artikel ini saya tulis di sebabkan ada beberapa sobat yang komplain akibat perintah marquee tidak berjalan dengan baik pada Mozilla

Untuk membuat sebuah fungsi marquee agar terlihat bekerja dengan baik pada banyak browser, kali ini saya menggunakan javascript sebagai adaptor nya. Prinsip dasar dari yang akan saya terangkan adalah seperti ini :

Kode CSS untuk patokan kode marquee yang ingin di tampilkan

Javascript sebagai adaptor agar fungsi marquee dapat bekerja dengan baik pada berbagai browser

isi yang ingin di tampilkan

Nah kira-kira seperti itu deh kalau menurut saya sih. Bentuk variasi dari marquee ini tentunya bisa berbagai macam bentuk serta ragam yang dapat di ciptakan, akan tetapi kali ini akan saya terangkan satu contoh saja sebagai acuan dasar.

Untuk Template klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode HTML yang ada, kemudian paste notepad lalu save sebagai backup





5. Copy paste kode berikut di atas kode </style>










<br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br /><br />








6. Copy kode berikut, lalu paste di atas kode </head>











<br /><script type="text/javascript"><br /><br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br /></script><br />







7. Copy kode berikut lalu paste pada tempat yang sobat inginkan (biasanya di simpan di sidebar)











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







8. Klik tombol Simpan Perubahan template





9. Selesai.

Untuk Template baru

1. Sign in di blogger





2. Klik menu Layout





3. KLik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>
   
   
   
   
   
   
   
   

   
   <br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br />

   
   
   
   
   
   
6. Copy kode berikut lalu paste di atas kode </head>











<br /><script type="text/javascript"><br />//<![CDATA[ <br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br />//]]><br /></script><br />







7. Klik tombol SIMPAN TEMPLATE





8. Klik menu Elemen Halaman





9. Klik tulisan Tambah sebuah Elemen Halaman





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





11. Copy paste kode berikut pada elemen yang muncul











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, <br />atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







12. Klik tombol SIMPAN PERUBAHAN





13. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)





14. Klik tombol SIMPAN





15. Selesai.

Pada kode marquee yang di terangkan di atas adalah memuat contoh kata-kata yang saya buat, silahkan sobat ganti sendiri sesuai dengan keinginan sobat. Karena fungsi ini adalah mirip dengan kode marquee biasa, maka untuk menciptakan variasi lainnya maka silahkan sobat bandingkan dengan artikel saya lainnya yang memuat pembuatan kode marquee.



Untuk melihat contoh hasil dari yang saya terangkan di atas, silahkan sobat klik di sini !



Selamat mencoba !

Text marquee in The Image

Dulu.... pernah muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah Marquee, dan untuk pertanyaan ini sudah saya jawab di sini. Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :



Mas, bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?



Wedewww.... pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengansalah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu
untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.

Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya
beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.



Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar. Untuk contoh saja, alamat yang saya gunakan untuk contoh adalah sebagai berikut :



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg



photo anak saya nih... lagi acik-aciknya bermain..



Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :



•  untuk template klasik

1. Sigin di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut diatas kode <style>










<br />#gambar {<br />background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */<br />height:300px; /* untuk mengatur tinggi gambar */<br />width:500px; /* untuk mengatur lebar gambar */<br />}<br /> <br />#tulisan {<br /> font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */<br /> font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */<br /> color:#ffffff; /* ini kode warna untuk hurup */<br /> }<br /><br />







6. Copy paste kode berikut pada tempat yang sobat inginkan










<br /><br /><table border="10" cellpadding="3" height="135" width="500"/><br /><tr><br /><td><br /><div id="gambar"><br /><br /><br /><div id="tulisan"><br /><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> <br /><br />Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.<br /><br /></marquee> <br /><br /></div><br /></div><br /><br /></td><br /></tr><br /></table><br />









7. Klik tombol Simpan Perubahan Template





8. Selesai.

•  Untuk Template Baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>
   
   
   
   
   
   
   

   
   <br />#gambar {<br />background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */<br />height:300px; /* untuk mengatur tinggi gambar */<br />width:500px; /* untuk mengatur lebar gambar */<br />}<br /> <br />#tulisan {<br /> font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */<br /> font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */<br /> color:#ffffff; /* ini kode warna untuk hurup */<br /> }<br /><br />

   
   
   
   
   
6. Klik tombol SIMPAN TEMPLATE





7. Klik menu Elemen Halaman





8. Klik tulisan Tambah sebuah Elemen Halaman





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





10. Copy paste kode berikut pada elemen yang muncul













<br /><table border="10" cellpadding="3" height="135" width="500"/><br /><tr><br /><td><br /><div id="gambar"><br /><br /><br /><div id="tulisan"><br /><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> <br /><br />Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.<br /><br /></marquee> <br /><br /></div><br /></div><br /><br /></td><br /></tr><br /></table><br />






11. Klik tombol SIMPAN PERUBAHAN





12. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)





13. Klik tombol SIMPAN





14. Selesai.

Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.



Agar lebih yakin dengan hasil dari kode-kode yang saya buat di atas, coba lihat saja contohnya, silahkan klik di sini !



Selamat berkreasi !

Gray Lover Template (XML)

Like I promised yesterday, that is template that could download. This tamplate was given the name Gray Lover. For you that
liked would the grey colour, you could download him afterwards upload him back to blogger.



Please Click at the image below to see screenshoot from this template!

Some that were important to be paid attention to was before you in place of template, you must back up all the available datas in old template like the shoutbox code, accessories, link et cetera. For that still was confused about the method of backing up the data in your old template, please followed the step along with this:

1. Sigin





2. Click the Layout menu





3. Click the Page Element menu





4. Click the Edit in each available element. Copy all the available code,
   afterwards paste in notepad to later in input again if has replaced template





5. finished.

I feeling was enough, to download the Gray Lover template, please Click here !



Akhirnya kelar juga deh, cape kalo nulis beginian terus. ni gara-gara adsense ga pernah mau mampir di blog ini, terpaksa deh mulai sekarang di selang dikit-dikit ama bahasa orang bule

Horizontal Dropdown Menu

Beberapa hari tidak ada tulisan baru, bukan karena kehabisan bahan untuk menulis, tapi terlalu sibuk dengan kode-kode template. Yups, akhirnya ada juga template yang sudah jadi walaupun sekilas masih mirip dengan pendahulunya. Jika ada yang mau lihat templatenya seperti apa, bisa sobat Klik di sini !. Tapi maaf nih, bagi sobat yang suka akan template ini belum bisa di download sekarang karena datanya masih belum saya upload, jadi sabar deh mungkin besok atau lusa sudah bisa di download.



Yo'i sobat tadi adalah hanya sekilas info saja, yang akan saya bahas sekarang adalah
menyoal tentang pernak-pernik blog, ada satu lagi nih yang bisa sobat pasang. kali ini tentang cara pembuatan menu dropdown dengan javascript dalam bentuk
horizontal alias mendatar. Sekilas tentang menu dropdown ini yaitu menu navigasi yang apabila di sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di dalamnya. Contoh gampang yaitu silahkan sobat sorot menu-menu yang ada pada bagian atas blog ini, tentunya nanti akan keluar berupa sub-sub menu. Ingin tahu cara membuatnya? silahkan baca tutorialnya sampai selesai !

Untuk membuat menu dropdown seperti di atas, bisa menggunakan bantuan image ataupun cukup hanya warna background biasa. Untuk saat ini saya mau menerangkan menu dropdown tanpa bantuan image, dan untuk yang menggunakan latar belakang image, akan di bahas pada pembahasan selanjutnya.




Script yang saya pakai kali ini adalah di ambil dari http://www.dynamicdrive.com akan tetapi saya modifikasi pada bagian css agar tampil lebih menarik. Ada beberapa tahapan yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang akan di tampilkan. Contoh pada blog saya adalah Home, Free Blog Tamplate, Rubrik Elektronik, Obral lus, How to make a Website, serta Contuct Us. Yang kedua adalah mempersiapkan sub menu dari menu utama yang di tampilkan. Contoh blog saya yaitu Link-link postingan yang ada pada blog tersebut, untuk template unik dan rubrik elektronik yaitu menampilkan judul-judul dari postingan semisal About Battery Electronic shopping, Minima 3 column, dan lain sebagainya. Nah sudah barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang.



Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka yang saya terangkan adalah template minima dengan pemasangan menu dropdown di bagian header



•  Untuk template minima klasik

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>








#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px verdana;

line-height:18px;

z-index:100;

}


#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

color:#ffffff;


}


#dropmenudiv a:hover{ /*hover background color*/

background-color: #e7f4fd;

color:#000000;

}




/* menu dropdown

----------------------------------------------- */


#menu{

text-align: center;

background:#c4e1ff;

height:20px;

}


#menu a{

margin:0;

font-size:1em;

font-weight:normal;

padding-left:20px;

padding-right:20px;

letter-spacing:-1px;

color: #000000;

font-family:georgia,verdana,arial;

text-decoration:none;


}


#menu a:hover{

color: #ffffff;

background: #140E7E;

}








6. Copy paste kode berikut di atas kode </head>








<script type='text/javascript'>

//<![CDATA[

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/


//isi dari menu 1, silahkan ubah dengan link milik sobat

var menu1=new Array()

menu1[0]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column (classic)</a>'

menu1[1]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima 3 column (beta)</a>'

menu1[2]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column (classic)</a>'

menu1[3]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe 3 column (new)</a>'

menu1[4]='<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St Template Unik (new)</a>'

menu1[5]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim 3 column (new)</a>'

menu1[6]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue Lover (new)</a>'


//isi dari menu 2, silahkan ubah dengan link milik sobat

var menu2=new Array()

menu2[0]='<a href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html ">About Television</a>'

menu2[1]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About Battery</a>'

menu2[2]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About Progressive</a>'

menu2[3]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic Shopping</a>'

menu2[4]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html"> About Mp3 Player</a>'

menu2[5]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About Handy Cam</a>'


 


//isi dari menu 3, silahkan ubah dengan link milik sobat

var menu3=new Array()

menu3[0]='<a href="http://www.obralplus.com/?id=rohman" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>'


//isi dari for menu 4, and so on

var menu4=new Array()

menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Resep Bisnis.com</a>'



var menuwidth='200px' //default menu width

var menubgcolor='#4B4D52' //menu bgcolor

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?


/////No further editting needed


var ie4=document.all

var ns6=document.getElementById&&!document.all


if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}




function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}


function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}




function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)


if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)


dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}


return clickreturnvalue()

}


function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}


function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}


function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}


function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}


function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}


function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}


if (hidemenu_onclick=="yes")

document.onclick=hidemenu

//]]>

</script>








7. Copy paste kode berikut persis di bawah kode :
   
   
   

   </h1>
   
   <p id="description"><$BlogDescription$></p>




 







<div id="menu">




<a href="http://kolom-tutorial.blogspot.com" title="back to home">Home</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="free download blogger template">Free Template</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Rubrik Elektronik</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Belajar website</a>




</div>








8. Klik tombol Simpan Perubahan Template





9. Selesai.

Yang di atas tadi merupakan pemasangan untuk template minima klasik, untuk template minima baru, silahkan ikuti langkah berikut !



•  Untuk template minima baru

1. Sigin di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>








#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px verdana;

line-height:18px;

z-index:100;

}


#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

color:#ffffff;


}


#dropmenudiv a:hover{ /*hover background color*/

background-color: #e7f4fd;

color:#000000;

}




/* menu dropdown

----------------------------------------------- */


#menu{

text-align: center;

background:#c4e1ff;

height:20px;

}


#menu a{

margin:0;

font-size:1em;

font-weight:normal;

padding-left:20px;

padding-right:20px;

letter-spacing:-1px;

color: #000000;

font-family:georgia,verdana,arial;

text-decoration:none;


}


#menu a:hover{

color: #ffffff;

background: #140E7E;

}








6. Copy paste kode berikut di atas kode </head>








<script type='text/javascript'>

//<![CDATA[

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/


//isi dari menu 1, silahkan ubah dengan link milik sobat

var menu1=new Array()

menu1[0]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column (classic)</a>'

menu1[1]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima 3 column (beta)</a>'

menu1[2]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column (classic)</a>'

menu1[3]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe 3 column (new)</a>'

menu1[4]='<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St Template Unik (new)</a>'

menu1[5]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim 3 column (new)</a>'

menu1[6]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue Lover (new)</a>'


//isi dari menu 2, silahkan ubah dengan link milik sobat

var menu2=new Array()

menu2[0]='<a href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html ">About Television</a>'

menu2[1]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About Battery</a>'

menu2[2]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About Progressive</a>'

menu2[3]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic Shopping</a>'

menu2[4]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html"> About Mp3 Player</a>'

menu2[5]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About Handy Cam</a>'


 


//isi dari menu 3, silahkan ubah dengan link milik sobat

var menu3=new Array()

menu3[0]='<a href="http://www.obralplus.com/?id=rohman" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>'


//isi dari for menu 4, and so on

var menu4=new Array()

menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Resep Bisnis.com</a>'



var menuwidth='200px' //default menu width

var menubgcolor='#4B4D52' //menu bgcolor

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?


/////No further editting needed


var ie4=document.all

var ns6=document.getElementById&&!document.all


if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}




function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}


function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}




function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)


if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)


dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}


return clickreturnvalue()

}


function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}


function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}


function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}


function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}


function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}


function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}


if (hidemenu_onclick=="yes")

document.onclick=hidemenu

//]]>

</script>








7. Copy paste kode berikut persis di bawah kode :
   
   
   

   <div class='descriptionwrapper'>
   
   <p class='description'><span><data:description/></span></p>
   
   </div>
   
   </div>
   
   </b:if>
   
   </b:includable>
   
   </b:widget>
   
   </b:section>

   
   



 






<div id="menu">




<a href="http://kolom-tutorial.blogspot.com" title="back to home">Home</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="free download blogger template">Free Template</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Rubrik Elektronik</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Belajar website</a>




</div>










8. Klik tombol Simpan Template





9. Selesai.

Untuk melihat seperti apa hasilnya kode-kode yang barusan di terangkan, coba sobat klik di sini !, silahkan sorot pada menu navigasi yang ada pada header.



Panjang banget yah, pasti cape deh baca nya, ya udah sekarang ketik P spasi D jadi Cappe Dehhhh.....




Selamat mencoba !

Make a Magazine Style Drop Caps

Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari bahagia ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).



Saya rasa cukup deh ngomong seriusnya ya, soalnya kalau terus-terusan serius otak ku menjadi beku, jari-jari ku menjadi kaku, lidah ku menjadi kelu, mulutku menjadi bisu, asa ku menjadi layu (keterusan deh). Oke.... sobat, kita kembali ke.... blog tutorial tentunya. Sebelum mulai, saya mau ngadain kuiz dulu, tolong jawab yang jujur ya, Apakah sobat pernah membaca koran atau surat kabar? jawabannya pasti sudah pernah. benarkan? yeeeehh jawabannya ketebak deh , lalu apa hubungannya dengan tutorial blog? ceritanya seperti ini, di dalam tulisan sebuah koran, hampir menjadi suatu kewajiban bahwa hurup awal dari sebuah artikel di cetak lebih besar di banding dengan tulisan lainnya. Nah bagi sobat yang mempunyai keinginan untuk membuat tulisan yang bergaya seperti tulisan dalam koran, maka teruslah membaca sampai akhir postingan.

Untuk membuat huruf awal di cetak lebih besar, maka sobat perlu membubuhkan kode css ke dalam style sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah
berikut ini !

Untuk Template Klasik

1. Sigin di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga apabila terjadi kesalahan melakukan editting





5. Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style>
   dan kalau sobat merasa bingung, maka tempatkan saja di atas kode </style>





 






/* kode untuk hurup awal

----------------------------------------------- */

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}







6. Klik tombol Simpan Perubahan Template





7. Selesai

Untuk Template Baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>






 






/* kode untuk hurup awal

----------------------------------------------- */

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}









6. Klik Tombol Simpan Template





7. Selesai.

Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf awal artikel pada kode berikut <span class="awal">hurup awal </span>.
Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak
ada masalah. Contoh penulisan artikelnya seperti ini :



<span class="awal">S</span>ebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa
tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa
indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).



Maka hasilnya nanti akan seperti ini :



Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).





Bagaimana sobat, menarik bukan? bukan. ah ko gitu sih
Agar sobat menjadi lebih faham tentang kode-kode diatas tadi, maka akan saya bahas.

/* kode untuk hurup awal

----------------------------------------------- */

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

.awal    --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.



float:left;    --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.



color: #000000;    --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika sobat ingin warna yang lain maka silahkan saja di ganti.



background:#ffffff;    --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.



line-height:80px;    --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.



padding-top:1px;    --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.



padding-right:5px;    --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika sobat berniat
mengganti jaraknya, silahkan ganti nilainya saja.



font-family:times;    --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.



font-size:100px;    --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.



Sudah jelaskah? nah jika sobat ingin berkreasi dengan yang namanya warna tapi tidak mengetahui kodenya, jangan khawatir, kawan saya bang iwan sangat kreatif, yakni menuliskan kode warna sekalian bentuk warnanya pada bagian footer blog beliau, jika sobat minat silahkan kunjungi blog beliau di http://free-7.blogspot.com



satu lagi yang terakhir yaitu apabila sobat ingin melihat blog yang memakai sistem ini dengan warna lain, silahkan sobat klik di sini !



Selamat berkreasi !

New Blogger Label Cloud

Update : Tutorial ini sudah tidak berlaku lagi, silahkan baca tutorial terbaru, klik di sini!

Setelah kemarin mudik ke bandung selama dua hari nengokin si kembar yang semakin hari
semakin gemesin aja, akhirnya saya balik lagi deh ke jakarta untuk mencari rezeki buat membiayai istri tercinta serta si kembar yang sudah mulai pintar jajan. Yups, tidak usah lama-lama curhatnya, ntar jadi malah garing. OK, kita kembali ke......blog tutorial tentunya. Tutorial kali ini saya ingin membahas tentang pemasangan label Cloud atau Tag Cloud pada template baru/new blogger template.



What's the meaning of Label Cloud?



Label cloud adalah pemasangan label (kategori) dalam bentuk cloud.... ( desiiig kalau gitu doang ga usah di terangin atuh... abis ga tau definisinya jadi ya asalan-asalan deh), seperti yang sobat lihat pada sidebar sebelah kanan blog ini yaitu di bawah tulisan Kategori
di sana terdapat beberapa label (kategori) yang pada ujungnya tertera berapa jumlah kategori yang terpasang pada kateori tersebut.

Nah itu adalah label yang umum di pakai di blogger, bila ingin sedikit yang berbeda, sobat bisa memasang label cloud. Dengan label cloud, label (kategori) akan di tulis dalam ukuran font yang berbeda sesuai dengan banyaknya kategori yang di pasang, semakin sering kategori tersebut maka semakin besar pula font nya akan tercetak.



Untuk memasang label cloud, tehnik yang saya pakai kali ini adalah buah karya dari phydeaux.
Silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template





5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang.





6. Tunggu beberapa saat sampai proses selesai





7. Simpan kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>







/* Label Cloud Styles

----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}









8. Copy paste kode berikut sesudah kode ]]></b:skin> dan sebelum kode </head>
   atau jika bingung simpan saja persis di atas kode </head>
   
   
   
   
   
   
<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>



   
   
   
   
   
   
   
9. Cari kode berikut di dalam kode template sobat







<b:widget id='Label1' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>










10. Ganti kode di atas dengan kode berikut ini :







<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>



<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>



// Don't change anything past this point --------------

// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

if(a&gt;b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}

return v

}





var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>



for (t in ts){

if (!labelCount[ts[t]]){

labelCount[ts[t]] = new Array(ts[t])

}

}

var ta=cloudMin-1;

tz = labelCount.length - cloudMin;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){

if(ts[t] &lt; cloudMin){

continue;

}

for (var i=0;3 &gt; i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>



<noscript>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>



</b:includable>

</b:widget>








11. Klik tombol Simpan template





12. Selesai.

Bagaimana sobat, berhasilkah? mudah-mudahan tidak menemui kendala apapun. Untuk melihat contohnya, silahkan sobat klik di sini !

Membuat Navbar

Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat muhhib yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.



Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.

Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :








atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :








2. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :




http://favatar.myfavatar.com/amen24.png



http://amen24.googlepages.com/TandaTangan_03.gif




3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :





/* kode untuk navbar

--------------------------------------- */



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}








4. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>



Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.



Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :



Untuk Template Klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data





5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>.
   atau jika bingung, simpan saja persis di atas kode </style>





/* kode untuk navbar

--------------------------------------- */



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}











6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>








7. Klik tombol Simpan Perubahan Template





8. Selesai.

Untuk Template baru (new blogger template)

1. Sign in di blogger





2. Klik menu layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template





5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>





/* kode untuk navbar

--------------------------------------- */



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;










6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>








7. Klik tombol Simpan Template





8. Selesai.

Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger. Agar lebih cepat melihat contoh hasilnya silahkan sobat klik di sini !



Selamat mencoba !

Blue Lover Template (XML)

Template lagiii.....iiiii setelah semalaman kutak-katik kode, akhirnya ada juga yang jadi nih. Nama nya Blue Lover, yo'i karena secara default nya template ini dominan berwarna biru walaupun untuk masalah warna sebenarnya bisa saja di ubah. Agar lebih menarik, coba deh di klik gambar di bawah untuk melihat contoh blog yang memakai template Blue Lover :

Berbeda dengan template-template sebelumnya, template ini sengaja tidak saya masukan fungsi Readmore, ini di maksudkan memberi kebebasan terhadap pemakainya apakah mau memakai Read more versi lama atau yang baru. Tentunya bagi sobat yang menginginkan kecepatan, sobat lebih baik memakai sistem yang baru, tapi bagi sobat yang mempunyai iklan Google Adsense sebaiknya memakai Read more versi yang lama. Untuk memasang fungsi Read more dengan versi yang lama, silahkan sobat baca di sini !
dan bagi yang mau memasang Read more dengan versi baru, silahkan sobat baca di sini !



Dalam hal pewarnaan, saya telah membubuhkan banyak variable warna, sehingga sobat lebih leluasa mengubah warna sesuai keinginan. Tentunya untuk mengubah warna, sobat bisa jumpai di menu Font dan Warna. Bagi sobat yang berminat, silahkan download template nya, kemudian jangan lupa untuk mengekstraknya terlebih dahulu dengan program Winzip sebelum di upload ke blogger.



Jika ada yang bertanya, apakah boleh mengotak-atik template ini sesuai keinginan sobat? jawaban saya yaitu silahkan saja, akan tetapi saya harap sobat tidak menghapus banner untuk blog Template Unik dan kalau berkenan silahkan untuk membuat link ke blog ini, nanti akan saya linkback kalau untuk yang ke blog ini.



Satu hal yang penting untuk di ketahui apabila sobat mau mengganti template, sebaiknya sobat mengcopy terlebih dahulu seluruh aksesori ataupun link yang ada
agar tidak pusing lagi mencari kode-kodenya. Caranya silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger





2. Klik menu layout





3. Klik menu Elemen Halaman





4. Klik tulisan Edit pada setiap elemen





5. Copy seluruh kode yang ada, kemudian paste pada notepad untuk nanti di masukan lagi apabila sudah mengganti template





6. Selesai

Apabila sobat tidak mengcopy kode-kode yang sudah di pasang, maka niscaya nanti akan kerepotan dalam hal mendapatkan kembali kode yang sudah dipasang.



Agar tidak terlalu lama membaca, untuk mendownload template Blue Lover, silahkan sobat klik di sini !



Selamat mempunyai wajah baru !