Selamat Berpuasa ^,^

hay hay semua... sekarang kita udah menginjak BULAN RAMADHAN..
Danang mengucapkan SELAMAT BERPUASA , MOHON MAAF LAHIR DAN BATIN
semoga amal ibadah kita di terima olehNYA , amin.

inget.. gak boleh nangis 
dan gak boleh marah ya!
oke.. mohon maaf kalo danang punya salah ya... trimakasih.
chek in here

banner baru blog danang

hay teman teman, ini banner baru blog ini.. hope like it

seorang anak yang ingin berkreasi

membuat menu gambar slide show ala drakon

slider gambar

Oke, langsung saja pada langkah-langkah pembuatannya :

PERTAMA

Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>
#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZ-TMa2WPhnjSxjMFCDmoF32IzmjyDONGfwpM7AwVMmRyYKttTibD10ay14mbGAT4a_8U1ugLaHCdwszSEE9k2TdFuoZgsHbRnLjSwz1vi4xgUgqkBItJGfyii0rsceFlnZiCWtSF5vet/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7aWZoKHtONxg4UDJh3ZyU9wdfJlqFIA0VVYnnzjnnguP9XiEJtFeYkjZyE1ZEtl7TOTpXpI-_nSyXqwWeWjk8dzw0Es6HNNHiVjl2acSRoPoytNm4NX4xi27yk_JIwYxqF2CWSHbWyI/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVeWR5AEKUVQ_KrJ7v0WQkEDy2vOli9iNCmzXUY_99b8ZSptH8JbD46XiEpXcxgOuIwNkrCoFHKho8u-jTrnCRuX6-IzukY2dG__aTL7tSmgMMa-D2VZVDOdNsz9YyiIECUNM-Di-QbE/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

KEDUA

Masih pada posisi Edit HTML. Letakkan kode berikut di bawah kode ]]></b:skin>.atau diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */

jQuery.easing = {
    easein: function(x, t, b, c, d) {
        return c*(t/=d)*t + b; // in
    },
    easeinout: function(x, t, b, c, d) {
        if (t < d/2) return 2*c*t*t/(d*d) + b;
        var ts = t - d/2;
        return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;       
    },
    easeout: function(x, t, b, c, d) {
        return -c*t*t/(d*d) + 2*c*t/d + b;
    },
    expoin: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (Math.exp(Math.log(c)/d * t)) + b;       
    },
    expoout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
    },
    expoinout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
        return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
    },
    bouncein: function(x, t, b, c, d) {
        return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
    },
    bounceout: function(x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    bounceinout: function(x, t, b, c, d) {
        if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
        return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
    },
    elasin: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    elasinout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    },
    backin: function(x, t, b, c, d) {
        var s=1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backout: function(x, t, b, c, d) {
        var s=1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    backinout: function(x, t, b, c, d) {
        var s=1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    linear: function(x, t, b, c, d) {
        return c*t/d + b; //linear
    }
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

KETIGA

Kita akan meletakkan id untuk slider Drakon tepat di bawah header blog. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Langsung saja cari kode <div id='content-wrapper'> Letakkan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>.
<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
 $jx(&quot;.mygallery&quot;).jCarouselLite({
 btnNext: &quot;.nextb&quot;,
        btnPrev: &quot;.prevb&quot;,
    visible: 5,
    speed: 1000,
    easing: &quot;backout&quot;      
    });
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a77qZsrR13LmwUwjgn1KaPIx32J5EIe2EIJGMMROgdPDJV9fIm-Z8qUn2TQR2dUJnUk5QXay9Ccb-5WzU-hBg8oIV2vP9rgMTQxIhR-w3n9cYWwB3EfbWOEmGHGxrWrDZvkR4v_5LRs/s1600/demomaskolis+come+away+with+me+1.jpeg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjha1m1qkC2V6Uvo4NiuvLKinBmGzx5-A-UouGNhQEb8eRoPHhEtP5FhH-EUBhdkBTsHzPqrUz2uyyYybq_4oCShIHUNkwGfX77FJzvFaT-JMujyMZnmVqf3_9IZZVvdcHxZz126ziubM/s1600/demomaskolis+soldier+1.jpeg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sade Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VnNr2npDu4ibVl1_pupXOwWO3XGe2TWWuKqogp7CsNPTHA9FVonvFtboz-VdDbMJ2-BZCkhVx7q6nhOqDdhEk1BaxN-ay-de5dZxVanDyZdnObJJyZCrh2vpAalf_rZMJYnRddpzbGk/s1600/demomaskolis+basia1.jpg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Basia Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc3OvIdCWtWhzYPRAzMmYVuzI0RkIbIWUKinIGWD0DQS5szoUSbdhV8Pkn_0_p6Hv7H10LiWrbVuDUO-3Ypee5HAytCVxb9y-HMFG73zKIXpnIBm3mFwQ1A-zVK2etJXNo-Y1Ka0USREU/s1600/jamiroquai+demomaskolis1.jpeg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamiroquai Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW7ScLwj3_lOAhj8fb3VHEb8R2OwLEeiu826D9cod8XuTLJopD2gGrZ7hl9XjDe_734oYqp0sLwQK7Aurhqw_qpsKy9zeAXm74NYtfwKCMnNBJwvkzpdIXst2qI92ArrwFs0kNRhEDKVg/s1600/jamie+cullum+demomaskolis1.jpg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamie Cullum Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFm6BUjdgnBfcbyXu4wzhiq_1wMLraVj9oqT4jf_1V3irPuix-4SlnKqlJQWqzfAsnDOTp4YG0quEgB3L4C4lZwNXjDkENaEYHkN6W-j-CGYIpHYGt4cmiTcNnkc64kV54DJz90pCIleg/s1600/diana+krall+demomaskolis.jpeg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Diana Krall Lyrics</a></p>
</div>      
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKU8G7C5HGJ8_h2tlYOL1yQZ9WW7Rldwl3kWAfSEyccSg6vwSrpSMV-eqiEG7cJN148CRWdggBtAkPtq3OLxr99ovX39nxvmKawDMQsEunj5cp9GRoVc7APg1_R1OHWaSV4HFrH2Za_60/s1600/demomaskolis+sting.jpg'/>
</a>
<div class='clear'/> 
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sting Lyrics</a></p>
</div>      
</li>
</ul>
<div class='clear'/>   
</div>
</div>
   <a class='prevb' href='#'/>
   <a class='nextb' href='#'/> 
</div>
Kalau sudah klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :
  1. Background slider, anda bisa ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZ-TMa2WPhnjSxjMFCDmoF32IzmjyDONGfwpM7AwVMmRyYKttTibD10ay14mbGAT4a_8U1ugLaHCdwszSEE9k2TdFuoZgsHbRnLjSwz1vi4xgUgqkBItJGfyii0rsceFlnZiCWtSF5vet/s0/header-background.png sesuai dengan background anda sendiri
    2. #slidearea{
    height:150px;
    overflow:hidden;margin:-20px 0px 0 2px;
    position:relative;
    width:965px;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZ-TMa2WPhnjSxjMFCDmoF32IzmjyDONGfwpM7AwVMmRyYKttTibD10ay14mbGAT4a_8U1ugLaHCdwszSEE9k2TdFuoZgsHbRnLjSwz1vi4xgUgqkBItJGfyii0rsceFlnZiCWtSF5vet/s0/header-background.png) repeat-x;
    border:5px ridge #052844;
    }
  2. Pada contoh slider di atas, saya menyertakan link dan teks (tulisan warna merah) dari blog demo saya. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :
    <li>
    <div class='mytext'>
    <a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a77qZsrR13LmwUwjgn1KaPIx32J5EIe2EIJGMMROgdPDJV9fIm-Z8qUn2TQR2dUJnUk5QXay9Ccb-5WzU-hBg8oIV2vP9rgMTQxIhR-w3n9cYWwB3EfbWOEmGHGxrWrDZvkR4v_5LRs/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
    <div class='clear'/>
    <p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
    </div>
    </li>
  3. Jika ingin menambahkan deskripsi singkat di bawah judul gambar, temen-temen bisa rubah menjadi seperti ini
    <li>
    <div class='mytext'>
    <a href='SLIDE-1-LINK-HERE'>
    <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a77qZsrR13LmwUwjgn1KaPIx32J5EIe2EIJGMMROgdPDJV9fIm-Z8qUn2TQR2dUJnUk5QXay9Ccb-5WzU-hBg8oIV2vP9rgMTQxIhR-w3n9cYWwB3EfbWOEmGHGxrWrDZvkR4v_5LRs/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a> <div class='clear'/>
    <h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>  
    <p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
    </div>
    </li>
  4. Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa. 
kali ini danang mau bagi cara bia header bisa dibagi 2..
seperti ini

caranya ikuti tips berikut:
  1. Login ke blogger dengan id anda
  2. Tuju menu Tata Letak
  3. Pada tab menu, klik Edit HTML
  4. Backup template anda, klik Download Template Lengkap
  5. Sekarang cari kode CSS seperti ini :
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }
    Hapus dan ganti semua kode tersebut dengan kode CSS ini :
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;
    height:180px;
    }

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

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

    #r_head{
    width:430px;
    float:left;
    padding-top:10px;
    }
  6. Sekarang cari kode seperti ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    Hapus kode itu dan ganti dengan kode ini :
    <div id='header-wrapper'>
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>
  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai

memodifikasi kotak pencarian pada blog

Sebuah blog sudah pasti sangat membutuhkan kotak pencarian atau search box. Kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya. Dengan kotak pencarian ini juga akan memudahkan pengunjung untuk menemukan artikel pada blog seperti artikel yang sudah lama diposting. Seperti layaknya kotak cari pada google, yahoo dan search engine lainnya, maka anda pun bisa membuatnya sendiri. Blogger sendiri sebenarnya sudah menyediakan fitur kotak cari atau kotak penelusuran ini. .

Pada tutorial blog kali ini saya akan membahas bagaimana membuat kotak penelusuran yang lebih menarik dan bisa anda atur sendiri sesuai template blog anda. Pada umumnya tombol default kotak cari ini berwarna abu-abu seperti yang sering anda temui. Anda bisa merubahnya dengan warna lain serta modifikasi kotak pencarian lainnya. Memodifikasi kotak pencarian tidaklah begitu sulit, hanya membutuhkan sedikit kesabaran untuk mengutak-atik widget ini. Kreatifitas pada kode CSS tentu diperlukan. Selain merubah warna anda pun bisa menghilangkan tombol pencarian dan menggantinya dengan gambar atau icon tertentu. Pilihan kustomisasi lainnya adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian. Dalam posting ini, anda akan melihat beberapa pilihan dan cara kustomisasi kotak pencarian, sehingga anda dapat memilih metode yang paling cocok dengan selera anda serta menyesuaikannya dengan template blog anda.

Untuk kode widget kotak pencarian sederhana untuk blogger yang biasa anda temui adalah seperti ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Bagian yang berwarna merah dengan tulisan "search-box" adalah tempat dimana nantinya akan diketikkan teks yang mau dicari. Sementara pada tulisan "search-btn" adalah tombol yang akan ditekan untuk menyampaikan perintah pencarian ke server. Secara default, kode widget kotak pencarian di atas akan menjadi seperti ini :



Namun dengan beberapa sentuhan teknik sederhana, kita dapat membuat tampilan kotak pencarian menjadi lebih cantik.

Menggunakan kode CSS untuk kustomisasi kotak pencarian
Sebagai contoh, katakanlah kita menginginkan kotak pencarian dengan menambahkan warna latar belakang. Oke, saya pilih latar belakang warna hijau muda dan warna hijau gelap sebagai garis batas. Untuk membuatnya, maka gunakan kode CSS di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Kode di atas akan menghasilkan kotak pencarian seperti di bawah ini :



Nah, kotak pencarian di atas akan kita modifikasi lagi dengan menambahkan warna latar belakang, garis tepi tombol dan warna teks pada tombol. Oke, saya pilih latar belakang warna hijau tua, garis tepi warna merah dan teks ditebalkan berwarna putih :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>
</form>
Saya sengaja membuat garis tepi dengan perintah "solid" agar kotak pencarian terlihat timbul dan bukannya datar atau flat button. Tujuannya agar orang tahu bahwa itu adalah sebuah tombol yang dapat di klik. Nilai ketebalan 1px masih dapat anda ubah lagi. Namun ada banayk blog yang memilih untuk membuat kotak pencarian tombol flat, terserah saja mau pilih yang bagaimana. Hasil kode kotak pencarian di atas seperti ini :



Sesuaikan kode-kode di atas dengan selera dan template anda. Misalnya anda ingin mengganti warna dan tebal garis tepi agar terlihat unik dan menarik. Untuk merubah warna, silahkan lihat kode warnasaya.

Kustomisasi teks pada widget kotak pencarian
Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca . Misalnya anda ingin memasukkan tulisan "cari di blog ini!" atau "ketik untuk mencari". Untuk membuatnya, kita perlu menambahkan kode CSS pada menjadi seperti kode di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Maka hasilnya akan seperti di bawah ini :



Teks pada tombol pencarian juga dapat diganti dengan teks pilihan anda. Pada contoh di atas teks nya adalah "Search". Nah, anda tinggal mengganti teks tersebut pada bagian kode ini :

<input id="search-btn" value="Search" type="submit"/>
Misalnya anda ingin menggantinya dengan teks "Go!" maka kodenya akan menjadi seperti ini :
<input id="search-btn" value="Go!" type="submit"/>

Menggunakan gambar sebagai tombol kotak pencarian

Seperti pengantar di atas, tombol widget dapat anda hilangkan dan menggantinya dengan gambar atau icon tertentu. Ga sulit-sulit amat koq, biasa saja. Untuk membuatnya, kita hanya perlu mengubah jenis input dari "Submit" diarahkan ke "Image" dan menentukan URL untuk gambar atau icon tersebut. Artinya anda harus menyiapkan gambar yang sudah dihosting pada tempat hosting gambar eksternal anda. Sebaiknya gunakan gambar atau ikon kecil dengan ukuran 16x16 pixel atau sedikit lebih besar dari ukuran tersebut agar pas untuk ukuran kotak pencarian. Ada banyak ikon pencarian gratis yang tersedia di internet. Misalnya saya menggunakan icon dari Iconlet tempat mencari icon gratis dengan banyak pilihan menarik. Contohnya seperti gambar icon di bawah ini :


Untuk menggunakan icon tersebut sebagai pengganti tombol kotak pencarian, maka kode yang digunakan adalah seperti di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UfBIdeC80BHjatauK_vrBhXmaEDnc9IeJwuZsB7PQmi9DYea28bM91im9r9cgPuVMCNwLjKSYO35EiKETt1qTMhrbpBDup3Y_vALa9Sy1d749Xlfguzal05xDrjIKB_Rtw4G5TfPPyX_/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>
Pada kode di atas, saya telah mengubah jenis input "submit" ke "image" serta menambahkan URL dari icon yang sudah saya hosting pada baris setelah "image". Agar icon tepat di samping kotak pencarian, maka saya menmbahkan margin-left dan nilai jarak 5 pixel. Hasilnya adalah seperti di bawah ini:



Temen-temen dapat mengganti icon diatas dengan icon milik anda. Yang jelas, pastikan URL icon untuk kotak pencarian anda sudah benar. Anda juga masih dapat menyesuaikan ukuran gambar serta margin yang ada pada kode di atas agar sesuai dengan template blog anda.

Sekarang anda sudah bisa membuat kotak pencarian dengan beberapa pilihan di atas. Untuk menempatkannya di blog blogger saya rasa semuanya sudah bisa kan. Sekian dari saya, selamat berkreasi dengan kotak pencarian. Bagi blogger yang sudah mahir dan punya modifikasi kotak penelusuran yang lain, jika tidak keberatan, dapat berbagi ilmu di sini. Terimakasih, semoga bermanfaat.

membuat menu register/ login di blog

mungkin kamu udah pernah mampir ke WWW.NYUNYU.COM disana, ada login, rigister, di pojok kanan atas.. nah kali ini danang akan mbahas cara buatnya... check ya!

nah kalo kamu mau buat ikutin ini ya.. :

  1. Pertama, kamu mesti login ke blogger.
  2. Kemudian klik Rancangan 
  3. Setelah itu klik Edit Html 
  4. Jangan lupa untuk mencentang Expand Widget Template (saya anjurkan download dahulu template kamu)
  5. Kemudian cari kode berikut ini </head>
  6. Setelah itu letakkan kode Javascript dibawah ini tepat diatasnya
    view plainprint?
    1. <script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>'  type='text/javascript'/><script style='display:none'  type='text/javascript'>$(document).ready(function() {  
    2.   
    3. // Expand Panel  
    4. $(&quot;#open&quot;).click(function(){  
    5. $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);  
    6. });  
    7.   
    8. // Collapse Panel  
    9. $(&quot;#close&quot;).click(function(){  
    10. $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);  
    11. });  
    12.   
    13. // Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click  
    14. $(&quot;#toggle a&quot;).click(function () {  
    15. $(&quot;#toggle a&quot;).toggle();  
    16. });  
    17.   
    18. });  
    19. </script>  
  7. Setelah itu kamu cari kode ]]></b:skin>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelumnya.

/***** clearfix *****/

.clear {clear: both;height: 0;line-height: 0;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

.clearfix {height: 1%;}

.clearfix {display: block;}



/* Panel Tab/button */

.tab {

background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;

height: 42px;

position: relative;

top: 0;

z-index: 999;

}



.tab ul.login {

display: block;

position: relative;

float: right;

clear: right;

height: 42px;

width: auto;

font-weight: bold;

line-height: 42px;

margin: 0;

right: 150px;

color: white;

font-size: 80%;

text-align: center;

}



.tab ul.login li.left {

background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}



.tab ul.login li.right {

background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}



.tab ul.login li {

text-align: left;

padding: 0 6px;

display: block;

float: left;

height: 42px;

background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;

}



.tab ul.login li a {

color: #15ADFF;

}



.tab ul.login li a:hover {

color: white;

}



.tab .sep {color:#414141}



.tab a.open, .tab a.close {

height: 20px;

line-height: 20px !important;

padding-left: 30px !important;

cursor: pointer;

display: block;

width: 100px;

position: relative;

top: 11px;

}



.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}



/* sliding panel */

#toppanel {

position: absolute;

top: 0;

width: 100%;

z-index: 999;

text-align: center;

margin-left: auto;

margin-right: auto;

}



#panel {

width: 100%;

height: 270px;

color: #999999;

background: #272727;

overflow: hidden;

position: relative;

z-index: 3;

display: none;

}



#panel h1 {

font-size: 1.6em;

padding: 5px 0 10px;

margin: 0;

color: white;

}



#panel h2{

font-size: 1.2em;

padding: 10px 0 5px;

margin: 0;

color: white;

}



#panel p {

margin: 5px 0;

padding: 0;

}



#panel a {

text-decoration: none;

color: #15ADFF;

}



#panel a:hover {

color: white;

}



#panel a-lost-pwd {

display: block;

float: left;

}



#panel .content {

width: 960px;

margin: 0 auto;

padding-top: 15px;

text-align: left;

font-size: 0.85em;

}



#panel .content .left {

width: 280px;

float: left;

padding: 0 15px;

border-left: 1px solid #333;

}



#panel .content .right {

border-right: 1px solid #333;

}



#panel .content form {

margin: 0 0 10px 0;

}



#panel .content label {

float: left;

padding-top: 8px;

clear: both;

width: 280px;

display: block;

}



#panel .content input.field {

border: 1px #1A1A1A solid;

background: #414141;

margin-right: 5px;

margin-top: 4px;

width: 200px;

color: white;

height: 16px;

}



#panel .content input:focus.field {

background: #545454;

}



/* BUTTONS */

/* Login and Register buttons */

#panel .content input.bt_login,

#panel .content input.bt_register {

display: block;

float: left;

clear: left;

height: 24px;

text-align: center;

cursor: pointer;

border: none;

font-weight: bold;

margin: 10px 0;

}



#panel .content input.bt_login {

width: 74px;

background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;

}



#panel .content input.bt_register {

width: 94px;

color: white;

background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;

}



#panel .lost-pwd {

display: block;

float:left;

clear: right;

padding: 15px 5px 0;

font-size: 0.95em;

text-decoration: underline;

}



Setelah semuanya sudah kamu masukkan, langkah berikutnya adalah cari kode </body>, kemudian letakkan kode di bawah ini tepat diatasnya :
<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Creating Website</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html' title='Download'>Pencet Sini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->
Pada kode diatas, untuk tulisan warna kuning bisa kamu ganti dengan tulisan yang kamu inginkan, begitu juga tulisan yang berwarna merah bisa kamu ganti dengan Login dan register misalnya. Kemudian klikSave Template kamu dan lihat hasilnya.

Oke, itu tadi pembahasan pada kali ini, bagi yang masih bingung jangan malu-malu untuk mengisi kotak komentar yang ada di bawah ini. Selamat mencoba dan semoga bermanfaat.

Menambah Gadget Memilih Font Blog Kita

Hay hay hay... ini danang langsung aja ngasih ya..
ga pperlu edit edit... tinggal tambah gadget.. gampang kan?
nah ini dia  cara-cara pembuatannya :
  1. Pertama yang mesti dilakukan adalah login ke blogger.
  2. Kemudian menuju Rancangan >> Tambah Gadget
  3. Pilih HTML/Java Script
  4. Lalu masukkan kode berikut ini ke dalam widget anda
    5. view plainprint?
    1. <div class='widget-content'>  
    2. <center><script>  
    3. function go1(){  
    4. if (document.selecter2.select2.options  
    5. [document.selecter2.select2.selectedIndex].value != "none") {  
    6. document.getElementById('main').style.fontSize  
    7. =document.selecter2.select2.options  
    8. [document.selecter2.select2.selectedIndex].value  
    9. }  
    10. }  
    11.   
    12. function go2(){  
    13. if (document.selecter2.select3.options  
    14. [document.selecter2.select3.selectedIndex].value != "none") {  
    15. document.getElementById('main').style.fontFamily  
    16. =document.selecter2.select3.options  
    17. [document.selecter2.select3.selectedIndex].value  
    18. }  
    19. }  
    20. </script>  
    21. <form id="forma" name="selecter2" method="POST">  
    22.   
    23. <select onchange="go2()" style="font-family:verdana;font-size:8pt"  name="select3" size="1">  
    24. <option value="Times New Roman" />Times New Roman  
    25. <option value="Arial" />Arial  
    26. <option selected value="Book Antiqua" />Book Antiqua  
    27. <option value="Bookman Old Style" />Bookman Old Style  
    28. <option value="Century Gothic" />Century Gothic  
    29. <option value="Comic Sans Ms" />Comic Sans Ms  
    30. <option value="Tahoma" />Tahoma  
    31.   
    32. <option selected value="Trebuchet Ms"//>Trebuchet Ms  
    33. <option value="Verdana" />Verdana  
    34. </select>  
    35. <select onchange="go1()" style="font-family:verdana;font-size:8pt"  name="select2" size="1">  
    36. <option value="8px" />8  
    37. <option value="9px" />9  
    38. <option value="10px" />10  
    39. <option value="11px" />11  
    40. <option selected value="12px" />12  
    41. <option value="14px" />14  
    42. <option value="16px" />16  
    43. <option value="18px" />18  
    44. </select></form><center></center></center>  
    45. </div>  
  5. Terakhir Simpan dan lihat hasilnya
komen ya kalo berhasil... SMOGA BERHASIL.
Langganan: Postingan (Atom)