Membuat menu drop down

Menu dropdown sepertinya sudah tidak asing lagi ya ditelinga kita, itu lho yang sudah ada aplikasinya disediakan oleh blogspot, jadi jika berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.
seperti ini :



- Archives - January 2010 February 2010 Mart 2010 April 2010


Tapi karena yang ini mungkin sobat sudah pada tahu ya cara nampilkannya gm, sudah tahu kan?? dashboard-layout-page elements-add a gadget, cari blog archives.

Yang ini tentunya hanya untuk arsip, dan sekarang yang akan dibahas yaitu menu dropdown yang di dalamnya ada link.
Code nya seperti berikut:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blog Tutorial -</option>

<option value="http://zoelf.blogspot.com">Membuat Blog</option>

<option value="http://zoelf.blogspot.com">my profil</option>

<option value="http://zoelf.blogspot.com">free template</option>

<option value="http://zoelf.blogspot.com">kode warna</option>

<option value="http://zoelf.blogspot.com">Posting Artikel</option>

<option value="http://zoelf.blogspot.com">Text area</option>

<option value="http://zoelf.blogspot.com">Blogger Emoticons</option>

<option value="http://zoelf.blogspot.com">Download Gratis</option>

</select></form>

Ket: code yang berwarna merah merupakan kalimat awal yang nantinya akan tampil pertama, warna biru merupakan link dari suatu tempat yang dituju, sedangkan warna orange adalah sebuah penamaan dari link yang sobat cantumkan pada warna biru.

Maka hasilnya akan seperti ini :

- Blog Tutorial - Membuat Blog my profil free template kode warna Posting Artikel Text area Blogger Emoticons Download Gratis

Gimana apa mau di coba?? silahkan:
Login-setelah masuk dashboard, layout-page elements-add a gadget-tambahkan kotak yang bernama HTML/javascript, setelah itu masukan code diatas tadi..

Selesai deh tutorialnya...

Tampilkan kupu-kupu di blog

Sobat pernah melihat ada kupu-kupu yang berterbangan di blog?? kalau belum pernah apa sobat ingin punya?? nih ayo dilanjutin bacanya, pelan-pelan saja ya,, jangan kedip loh,, hehe...

Sebenarnya ini cukup mudah, karena kupu-kupu ini dipanggil di blog hanya cantumin java script saja, memang java scriptnya cukup banyak, tapi masih bisa cari cara lain dengan memilih tempat hosting, seperti yang pernah zoel posting disini.

dan ini code java scriptnya secara keseluruhan,

<script type='text/javascript'>
var Ymax=8;                                //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8;                                //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000;                        //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';
floatimages[1]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep :  -IDs[num].Xstep , (IDs[num].Ydir)?  IDs[num].Ystep:  -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
</script>

Nb: merah= alamat gambar
Jangan kaget dulu, itu mentahannya, kalau mau praktis dan simpel zoel sudah siapkan javascript yang telah di hosting di google code,
<script src="http://zulfiantea.googlecode.com/files/kupu.js" type="text/javascript">

Nah code diatas sisipkan sebelum code </head>
(tinggal pilih mau yang langsung mentahannya, atau javascript yang telah di hosting, masing-masing ada kelebihan dan kekurangannya, jadi silahkan sobat pikirkan mana yang lebih suka.)

Oia untuk sobat yang masih bingung tentang letak penempatannya,
Dashboard->layout->edit HTML>cari code </head>>letakan java scriptnya sebelum code </head>

Ada sedikit tambahan, untuk sobat yang ingin ganti gambarnya dari kupu-kupu jadi kelelawar, tinggal ganti alamat gambarnya yang ada di java script di atas dengan warna merah sobat tinggal ganti dengan alamat ini, http://i363.photobucket.com/albums/oo72/herisys/kampret.gif


Good luck ya sob,..

(sumber=forantum) 

Tulisan bergaya koran (drop caps)

Sudah tahu kan sobat bagaimana tulisan yang bergaya seperti koran?? Biasanya kalau tulisan dikoran huruf yang paling awal ditulis itu akan menjadi besar,,

Seperti ini

caranya seperti ini:
1. login di blogspot sobat

2. pada tampilan dashboard cari tab bertuliskan layout -> edit HTML

3. Setelah masuk pada code HTML, sobat tinggal copas code CSS di bawah ini di atas code ]]></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 save

 Sobat sudah selesai meng-edit code CSS nya, dan sekarang tinggal penempatan sedikit code lagi untuk memanggil code yang tadi telah kita tulis di halaman CSS.
Untuk pemanggilan code ini dilakukan apabila sobat mau posting, codenya akan seperti ini <span class="awal">huruf awal</span>, dan di lakukan tentunya di tab Edit HTML bukan di compose.
Maka nantinya tulisan tersebut akan tampak huruf depan/awal lebih besar seperti tulisan koran.

Adapun penjelasan dari code CSS di atas sebagai berikut:

.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, lebih banyak warna disini.

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.

Selesai deh..

(sumber:kolom-tutorial.blogspot.com)

Comment owner berbeda dengan pengunjung

comments owner

Mungkin beberapa diantara sobat, sudah mengetahui cara bagaimana membuat comment owner berbeda dengan pengunjung, jadi kalau yang sudah tahu ga usah di lanjutin deh bacanya,, hehe.. tapi untuk yang tidak tahu mari simak tutorialnya, sebelumnya, apa sih comment owner berbeda dengan pengunjung?? maksudnya yaitu, komentar yang ditulis oleh pemilik blognya sendiri akan berbeda dengan komentar pengunjung, jadi maksud owner disini adalah istilah dari pemilik blog.
Oke sedikit pemahaman tentang judul sudah tahu kan?


Sekarang langsung saja ke caranya ya:
Login dulu di blog sobat ---> setelah masuk dashboard --> Layout --> edit HTML, kemudian centang kotak kecil bertuliskan "expand widget templates",

Kemudian sisipkan kode dibawah ini diatas code ]]></b:skin
(untuk memudahkan pencarian gunakan ctrl+f)

 .comment-body-author {
    background: #FFFF29; /* Warna Background */
    border:1px dotted #FF2929; /*Border*/
    margin:0;
    padding:0 0 0 20px;
    }

Silahkan edit code CSS di atas sesuai kreasi sobat..
Langkah selanjutnya, expand widget templates masih dalam keadaan di centang, kemudian cari code seperti di bawah:

       <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    </b:if>

    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

Code yang diberi warna biru, itu merupakan code yang harus sobat sisipkan diantara code yang berwarna merah.

Bagaimana, apa sudah berhasil?? kalau masih ada yang kurang paham, mari kita sharing di kotak komentar di bawah.

Análise do poema Buscando a Cristo