Warung Bebas
Tampilkan postingan dengan label Tips Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tips Blogger. Tampilkan semua postingan

Senin, 29 Oktober 2012

Cara Memasang Box Subscribe di Blog



1. Login ke Blogger
2. Kemudian Rancangan -> Edit HTML ( Tampilan Lama )
2. Kemudian Masuk ke Template -> Edit HTML ( Tampilan Baru )
3. Kemudian Letakan kode Berikut di atas </head>

.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}

4. Kemudian Save Template

5. Silahkan Copy kode Ini dan Pastekan di Add Gadget

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUdAUcz7872bj8_DMQ8ntU3REdjO8XgsdZoLjAQgu9DK-9r235TydQi5LBSbW3-qh7C2KUohh-rE88VggKxOPOAHSe6h99BZt48zWm6jbC31tZoZ0XbvkcPaJkTkzCLMMLeHy20gDxoro/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79QQBqNzDU8KpgC240JEcaWcsjf85B9UwVFUknTUeBMa2cMPHVPtUjkg9QWSE6YZvg1Yw0zFaSPgxCebJWnqdrz4wswf85kmH0Z0vOGVvsP_MFS7DA1DvfpIzH4_WVKr5zsOMX-N8tlKq/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhbqAyT7KR2ZSapEd8VRbWoGBNX3Fgu86anJhn_yroC3WzGdwpSE0zhEbyxz_pC6HdXhAnZXSWefuydx3qpE4b8JIEmdurRpPG7XReTlklqTil9MzdP4tSP2Yipzkz7MrYVqC1QmE9yAN/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPFuatHFpY9c1qj8i0g_9C4WZxlAp__-7traFsK3_J22FfD47tT3GSqeRbj8g3xoLLqXr8tHkj_UY5BDJed0xMjiv_-Z2EEMh3vayKP6BzWcicw0M9mwNdm6y8TD4k8zt7xAwxZ8JVnxs/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-igEwb84Oydy-bsq2hbLtsTRNKwsjQmp7w2xNaqnru9v3ZBeUv18_WwoKdyssCECbjyUEijVM1RFlmJ4TrVik194FZYy4nv3fj48lUvqkzX86lRTkkJwDdNSrqPzMUEThWDRFQpayuM/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqidpjzgy3hDt1A6buRPqDv1UkvwaJkuHvuWvoAop1sT7EMbYGL9NfnmZbuy3qU1fEAYTm1GNIPQzmMAMO2orm3vF1dqz5yfy7gJ_8PhRNyrlX9y4hXV66zkzjrwHtNNfamu1Os9BJx3g/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHoKgUTSRX-EsKRfSQzH5aiodp1IFU9nmzfve6yysP67ET45MS_ElmomqixlpD6yJf-Q_VjDjWVzamaYwfjJwZcJqyJv5ocKDKX6zGT_GomHoHG6RFF5C2NCBixUflER-HB79JOCo3FQ/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtnv6bP8VcpyNE0VQIl62ZXQ7weaRQIU7BU8HV0RQnAIjOBSpMZIFta-Pkud-O7mUBNXTmZsVuOErh1LwnkYTRTPpaFOejYoDczRMfeVtGteyX51Efavc0x9DX2iOLUjV8JA_0Ya7zRc/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixKrOswMRGVh2jzm-ntlfEhkDdQ2WPlUYNwlVS1lCBFFH-d1YSgEtWoTKSJamq_DHXMZHrqu-UnYNYHxWjB9GBw9Al_VafjpoInrtO57nru817__i_aO6nwgUmkMjn45XjFv7gDoeyhso/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiy9GMgFIbfhfWLD2uL4ap96cRpKXSLUjsxMtTGxtCKcy-gXhLC0MR8fKbYy8W7QooSOIvFKb21RXFULSC0HpUg0HkY-uwTqaOlkrzQxWU2U5jgze5L_BiZR_FHzTu4dnMGf6DJUeDus/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2Qo6zZ8ipyFUKOUs0CdYbEQ_MmSZaAvtHQDb5T5hshMsnbqO63s1WXuN8ExO3QNNGUHm_K_PdBj-eo4O6TXdouJKRPI8SqdwfEo-Wponxq3KRehIeFy2lfRsBZD54hQ2t9MZM3pHnck/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>


Keterangan :
Jangan lupa ganti Semua dengan ID Sobat ...

Jumat, 26 Oktober 2012

Cara mengganti poskan komentar dengan gambar


Apabila sobat ingin mengganti tulisan "poskan komentar" dengan gambar, agar lebih ekspresif
berikut ini caranya:

1. login blog sobat
2. rancangan, edit html dan centang expand widget
3. ganti kode <data:postCommentMsg/>
dengan kode gambar di bawah ini:
<img alt='Beri Komentar' src='http://dl8.glitter-graphics.net/pub/1023/1023808rprqnnmxis.png'/>
 Ganti url gambar sesuai keinginan sobat.
 catatan:
pada template tertentu beda2,  di pencarian kode <data:postCommentMsg/> ada 3
pilih yg kodenya mirip seperti ini
<h4 id='comment-post-message'><data:postCommentMsg/></h4> 
sehingga menjadi seperti ini
<h4 id='comment-post-message'><img alt='Beri Komentar' src='http://sl.glitter-graphics.net/pub/1023/1023808rprqnnmxis.png'/></h4>
Selamat mencoba dan berkreasi.
Semoga tutorial cara mengganti tulisan poskan komentar dengan gambar mudah di mengerti
dan infonya bermanfaat.

Selasa, 23 Oktober 2012

Tutorial Make Tooltip Otomatis In Blogspot

Tutorial Make Tooltip Otomatis In Blogspot
Tutorial Make Tooltip Otomatis In Blogspot
Tutorial Make Tooltip Otomatis In Blogspot ~ Tooltip berjalan otomatis diblog yang mempunyai link baik link text maupun gambar. Tutorial ini saya tidak tahu persis siapa yang mempunyai awalnya karena ketika diketik dengan kata kunci tersebut sudah bejibun yang tampil dan semua nya sama.
Tutorial Make Tooltip Otomatis In Blogspot jadi saya disini hanya sekedar share juga dan pengingat untuk jika sewaktu-waktu saya butuh juga.
Caranya untuk membuat tooltip Otomatis.
Taruh script berikut dibawah <body>
<script src='http://javascript-share.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting = {func : "Tooltip", top : 5, left : 5,maxw : 300,speed : 20, timer : 40, endalpha : 95, alpha : 0, style_plus : "#tt{border:0} #ttcont{background:#000;color:#fff}"};  /*silahkan dimodif*///]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/> <script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/>
<div id='warungbebasautotooltip'>
Kemudian Taruh diatas </body>
</div><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script> 
Oke simpan template anda.

Cara Membuat Text Shadow CSS Efek Blur

Membuat Text Shadow Efek Blur
Membuat Text Shadow Efek Blur
Cara Membuat Text Shadow Efek Blur ~ Tutorial CSS 3 Efek Shadow Text On Mouse Blur sekarang kita belajar lagi menggunakan CSS dengan memanfaatkan fasilitas Text Shadow menjadi Blur. Efek Shadow ini banyak digunakan pada Blogazine untuk lebih menghidupkan Blog / Web mereka.
Tutorial CSS 3 Efek Text Shadow On Mouse Blur ini akan menjadi berubah ketika cursor didekatkan ke Text. Memanfaatkan Hover yang ada pada CSS Tutorial ini bagus untuk Blog bercitra Dark atau Gelap sehingga kelihatan menyala. Namun tidak menutup kemungkinkan untuk dipasang pada Blog bergaya simple dengan dasar putih.
Anda bisa melihat contohnya seperti pada gambar diatas, tulisan yang menyamping dengan aturan kemiringan dan efek shadow juga Blur yang terkombinasi dengan baik.
Demo klik [+]
HTML 
<div id="wrapper" contenteditable="true" spellcheck="false">      
        <p>Where</p>
        <p>are the</p>
        <p>trees</p>
</div>
​CSS

/* Wrapper ------------------------------------------------------ */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
 
    background-color: hsla(30,20%,95%,.9);
 
    /* Pixel pattern only enabled for WebKit because of performance */  
    background-size: 2px 3px;
    background: hsla(30,20%,95%,.9) -webkit-linear-gradient(45deg, hsla(0,0%,0%,0)  0px,
                                                                    hsla(0,0%,0%,0)  1px,
                                                                    hsla(0,0%,0%,.1) 2px,
                                                                    hsla(0,0%,0%,.1)  3px);
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;
 
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-box-align: center;
         -o-box-align: center;
            box-align: center;
 
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-box-pack: center;
         -o-box-pack: center;
            box-pack: center;
    }
#wrapper {
    position: relative;
    background :#333;
    /z-index: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 0 auto;
    width: 600px;
    padding: 7em 0;
    background: url(bg.jpg) no-repeat center center;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0  hsla(0,0%,0%,.2), 0 21px 8px -12px rgba(0,0,0,.2);
 
    -webkit-perspective: 350;
       -moz-perspective: 350;
        -ms-perspective: 350;
         -o-perspective: 350;
            perspective: 350;
    }
 
    #wrapper:focus {
        outline: none;
        }

#wrapper p {
    font-size: 10em;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-shadow:     rgba(0,0,0,0.1) 0 20px 80px;
    -webkit-transition: -webkit-transform .1s ease-in; /* only WebKit because of performance */
    }

/* Hover ------------------------------------------------------ */
#wrapper:hover p {
    color: hsla(0,0%,0%,0);
 
    -webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
       -moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
        -ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
         -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
            transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
 
    -webkit-transition: -webkit-transform .1s ease-out; /* only WebKit because of performance */
    }
#wrapper:hover p:nth-child(1) {
    font-size: 9em;
    text-shadow:     #fff 0 0 10px,
                    #fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    text-indent: 0.3em;
    }
#wrapper:hover p:nth-child(2) {
    font-size: 10em;
    text-shadow:     #fff 0 0 1px,
                    #eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px,
                    rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }
#wrapper:hover p:nth-child(3) {
    font-size: 11em;
    text-shadow:     #fff 0 0 2px,
                    #fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px,
                    rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,100,0.2) 0 15px 80px;
    }

/* Middle ------------------------------------------------------ */
#wrapper p:nth-child(2):hover {
    text-shadow:     #fff 0 -5px 1px,
                    #eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px,
                    rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
 
#wrapper p:nth-child(2):active {
    text-shadow:     rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
                    rgba(0,0,0,0.2) 0 15px 80px;
    }
/*effand bocah nozh*/
#wrapper p::selection {
    background-color: red;
    }
Silahkan dicomot dan dimodifikasi gan

Kamis, 18 Oktober 2012

Menu Sliding Vertikal Dengan CSS

Masih dalam pembahasan Cara Membuat Menu, sekarang Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :

Langkah 1
Masuk ke akun Blogger anda
Langkah 2
Masuk Ke Menu Rancangan atau Design
Langkah 3
Masuk ke EDIT HTML
Langkah 4
Silahkan Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin>


h2.slideInfoa {normal font:18px/25px georgia, serif; color:#000;}
h2.slideInfoa span {padding:0 80px;}

.slideHolder {height:498px; width:250px; margin:0 40px; padding:2px;
font-family:georgia, serif; border:1px solid #888; float:left;}

.slideOuter {height:498px; width:250px; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;
height:800px; width:250px; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:98px;
border-bottom:2px solid #fff; width:250px; overflow:hidden;
background:red;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.slideOuter .slide li.p5 {height:318px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:318px;}
.slideOuter .slide.current li.p5 {height:318px;}

.slideOuter .slide li.p1
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeXtLuCHg50vkFes9FAvVGYyhV1hLPDfJhMdiCiNVIrUMJOirMGsElUKy9P0SX3o7ILMcCHRZfs_cfaHab7iIjFHbXxjxESWbe1mDFCxrP5V0QrS3aN1VRi5SdOsEf-X6ECwOy7V7069c/s400/pic1.jpg);}
.slideOuter .slide li.p2
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBLYJr10EZ-zUsZmESGXsqe3VuexciUhayuBa6XN7bGZMPbhm47TXRe1TdnMSQNx_uMtx4xwgMTgsKdj7HjSaxUVpDq06CUp2mRve22my84wv5KA8uazj_S6xFtVTwMUhdS3-PzK7EFQ/s400/pic2.jpg);}
.slideOuter .slide li.p3
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WWhhP9rQQaWMeTj2Nu8gO36EIxVYHLIP5WcuUIdyUnXzmQKOHFbYw1DJfZYi6bdc9SJp6-kCvzfOy9vbkgMLhaitDchHN0ar4mP3Dfh8r0gM6M-ByeAL6Ko2JPq2j6PupcLDLd40qO8/s400/pic3.jpg);}
.slideOuter .slide li.p4
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5f6phdxyF8VeVm05COMzBxi6iz7JRw8MLKfPDx-sWomFUDQ7Od5WfebxCRH1OAk_QVnLkXGBM8gg5_LMgeqkzg-2YMi-EocPXQRZQoVBXlELDcXvRrtjacOn9ZcBTsHF0bvvhM-gWK_U/s400/pic4.jpg);}
.slideOuter .slide li.p5
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZaYcnpwl5T9_Y3UWS3FT8A6XqKxe19xLZJQSUyO5UsgrRSTUhLUwGkJ5FBVIgGiyDKgaSx-z5wBcj3oPPWMrkwvyBVxGknAW2J2C2o-WUeEhKRMlZClCVktpyO4S4SxEGx-vtb320cvQ/s400/pic5.jpg);}

.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
.slideOuter .slide:hover li.p4 {height:43px;}

.slideOuter .slide:hover li.p1:hover,
.slideOuter .slide:hover li.p2:hover,
.slideOuter .slide:hover li.p3:hover,
.slideOuter .slide:hover li.p4:hover {height:318px;}

.slideOuter .slide li h1 {padding:0 15px; margin:0; font-size:24px;
line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 h1 {color:#c60;}
.slideOuter .slide li.p3 h1 {color:#040;}
.slideOuter .slide li.p4 h1 {color:#400;}
.slideOuter .slide li.p5 h1 {color:#000;}

.slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;
margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px
rgba(0, 0, 0, 0.6);}
.slideOuter .slide li a {display:block; color:#fff; padding:0 15px;
margin:0; font-size:14px; line-height:25px; width:230px;
font-weight:bold; text-decoration:none;}
.slideOuter .slide li a:hover {text-decoration:underline;}
.clear {clear:left;}


Langkah 5
Setelah anda selesai memasukkan kode diatas. Sekarang memasukkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript.


<div id="infoa">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<h1>Landscapes</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>

<a href="#url">Sed placerat leo vel</a>
<a href="#url">Curabitur ac bibendum</a>
<a href="#url">Duis nec diam</a>
<a href="#url">Sed quis massa</a>
</div>
</li>
<li class="p2 current">
<div>

<h1>Portraits</h1>
<p>Vestibulum scelerisque quam a dui interdum semper.</p>
<a href="#url">Quisque tincidunt</a>
<a href="#url">Donec tempor</a>
<a href="#url">Curabitur aliquet</a>
<a href="#url">Curabitur</a>

<a href="#url">Class aptent</a>
<a href="#url">Vestibulum</a>
</div>
</li>
<li class="p3">
<div>
<h1>Flowers</h1>
<p>Mauris pellentesque, ligula eget molestie suscipit.</p>

<a href="#url">Nunc accumsan</a>
<a href="#url">Sed varius</a>
<a href="#url">Vestibulum</a>
<a href="#url">Phasellus quis</a>
<a href="#url">Maecenas</a>
<a href="#url">Nullam ligula</a>

</div>
</li>
<li class="p4">
<div>
<h1>Abstracts</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<a href="#url">Duis nec diam</a>
<a href="#url">Ut sagittis</a>

<a href="#url">Sed a lorem</a>
<a href="#url">Mauris id mi</a>
<a href="#url">Donec sit amet</a>
<a href="#url">Aliquam placerat</a>
</div>
</li>
<li class="p5">
<div>

<h1>Seascapes</h1>
<p>Aenean quis lacus id eros lobortis dapibus sed non nisi.</p>
<a href="#url">Donec fringilla</a>
<a href="#url">Quisque vel</a>
<a href="#url">Duis at magna</a>
<a href="#url">Maecenas rutrum</a>

<a href="#url">Ut iaculis tristique</a>
<a href="#url">Suspendisse</a>
</div>
</li>
</ul>
</div>
</div>

</div> <!-- end of infoa -->


Langkah 6
Simpan template anda dan lihat hasilnya. Sekian terima kasih trik kali ini.

Menu Drop Down Multi Level CSS3

Menu yang ke 4 adalah Menu Drop Down Multi Level CSS3, Langsung saja masuk ke tutorialnya :


Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode ]]></b:skin> dan masukkan dan letakkan kode CSS dibawah ini tepat diatasnya.


#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav ul li {
float:left;
}

#nav ul li a {
float: left;
color:#d4d4d4;
padding: 10px 20px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}


#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li:hover ul {
left: auto;
}

#nav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}

#nav li li:hover ul {
visibility:visible;
}


#nav ul ul li:last-child > a {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
-moz-border-radius:0 10px 0 0;
-webkit-border-radius:0 10px 0 0;
border-radius:0 10px 0 0;
}


Langkah 5
Silahkan tambahkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript


<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a>
<ul>
<li><a href="#">Level 2.3.1</a></li>
<li><a href="#">Level 2.3.2</a></li>
<li><a href="#">Level 2.3.3</a></li>
<li><a href="#">Level 2.3.4</a></li>
<li><a href="#">Level 2.3.5</a></li>
<li><a href="#">Level 2.3.6</a></li>
<li><a href="#">Level 2.3.7</a></li>
</ul>
</li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Langkah 6
Silahkan simpan template anda lihat hasilnya. Sekian dulu trik kali ini semoga bermanfaat buat kita semua.

Selasa, 09 Oktober 2012

Memasang gadget tweet terbaru di Blog

Widget ini adalah untuk menampilkan tweet terakhir dari postingan blog, yaa semacam update status di facebook lah. Sebetulnya widget ini bisa saja kita dapatkan di twitter namun buat sobat yang belum tau caranya dan gak mau repot silahkan memakai kode-kode dibawah ini untuk menampilkan streaming tweet di blognya.

memasang menambah status atau tweet twitter terakhir postingan blog


Cara menambahkan update tweet ini sebagai berikut:

1. Masuk ke blogger

2. Dasbor > Tata Letak > Tambahkan gadget > HTML/Javascript

3. Copy dan paste kode berikut ini di dalam form yang tersedia.



<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="http://julak-project.googlecode.com/files/blogbelajar2tweet1.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">My Tweets</h2></div><div id="tweet-container"><img id="loading" src="http://julak-project.googlecode.com/files/loadingtweetblogbelajar2.gif" width="16" height="11" alt="Loading.." /></div><div id="scroll"></div></div><style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 400px;background: url(http://julak-project.googlecode.com/files/blogbelajar2.blogspot.comtweet2.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(http://julak-project.googlecode.com/files/blogbelajar2.blogspot.comtweet3.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(http://julak-project.googlecode.com/files/blogbelajar2transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2tw%20.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2twittertick2%20.js"></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/blogbelajar2twitterticker3%20.js"></script><script type="text/javascript">var tweetUsers=['SCS'];</script>

Silakan ganti username akun twitter SCS dengan username twitter Anda sendiri
Yang mau lihat live demonya di sini

Monggo yang pengen coba...

Senin, 08 Oktober 2012

Slide down random post



Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil secara random.

Secara tampilan memang sederhana, tapi Slide down random post ini menurut saya tetap tampil menarik. Dan yang terpenting Slide down random post ini sangat praktis dan efisien.
Jadi sekali pasang, fitur ini tetap menampilkan gambar-gambar dari setiap posting terbaru anda. Dengan catatan, setiap posting anda harus memberi gambar yang nantinya muncul di Slide down random post ini.

Secara ideal untuk Slide down random post ini, dianjurkan gambar yang anda gunakan pada setiap posting berukuran " 600px X 300px " atau  skala " 6 : 3 ". Hal ini dimaksudkan agar gambar tampil sesuai dengan aslinya.

Trik ini termotifasi oleh sobat-sobat saya masih merasa kesulitan ketika edit HTML dan masalah itu juga pernah saya alami dulu. Ketika kita sangat menginginkan slide show dipasang di blog yang kita memiliki, kitapun harus lama-lama bergelut dengn kode-kode yang terkadang hasilnya tidak sesuai dengan yang kita inginkan atau bahkan terkadang malah rusak dan tidak bekerja.

Nah..., akhirnya sekarang andapun bisa memanfaatkan  Slide down random post ini. Dan anda tidak harus ribet lagi dengan edit ini dan itu.... Anda hanya tinggal memasukkan ULR blog anda, maka sudah siap langsung dipasang pada gadget blog anda.


OK..., bila anda berminat, Langsung saja silahkan anda copy kode dibawah ini, dan anda masukkan pada gadget anda.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
thumbwidth = 60;
thumbheight = 60;
acolor = "#012EB0";
aBold = false;
text = "comments";
showPostDate = true;
numposts = 10;
home_page = "DISINI URL BLOG ANDA";
limitnoer=2
intervalnoer=4000
</script>

<div id="cbwg-slide-show-random-post">
<div id="noerlist">
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){jQuery("ul.noer").simplenoer(limitnoer,intervalnoer).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simplenoer=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="noerWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="noer">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">'+f+" "+text+"</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var xy=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=xy[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'">'+u+" "+h+" "+t+"</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/><div class="noerlink"><a href="'+p+'" class="recent-link">'+g+'</a></div><div class="postsummary"><i>'+s+'</i></div><div class="noerdate">'+n+'</div><span class="noercomment">'+cmtext+"</span>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');//]]></script>
</div>
</div>


<style type="text/css" media="screen">
<!--
#cbwg-slide-show-random-post {
overflow:hidden;
margin-top:5px;
margin:auto;
padding: 0px;
width:600px;
height:326px;
border:1px solid #000;
background:#fff;
}

#noerlist {
overflow:hidden;
margin:2px;
padding: 0px;
float:left;

}

#noerlist ul{
float:left;
width:100%;
height:322px;
overflow:hidden;
list-style-type: none;
padding: 0px;
margin:0px;
background:#000;
}
#noerlist li {
width:100%;
height:322px;
padding: 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
overflow: hidden;
background:#000;

}

#noerlist li:hover a{
color:orange;
}

#noerlist li #span info{
background:#fff;
text-decoration:none;
color:#fff;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:5px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

#noerlist img {
float:left;
width:592px;
height:293px;
margin-right:0px;
margin-left:0px;
background:#fff;
cursor:pointer;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}

#noerlist li:hover img {
float:left;
width:592px;
height:220px;
margin-right:0px;
margin-left:0px;
background:#fff;
cursor:pointer;
transition: all 1s ease-in-out;
}

#noerlist .recent-link{
float:left;
width:100%;
height:25px;
text-decoration:none;
color:#fff;
font-size:17px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:5px;
font-family:Tahoma,Arial,verdana, sans-serif;
cursor:pointer;
z-index:200;
}

#noerlist .recent-link:hover{
background:#bbb;
text-shadow: 1px 3px 3px #000;
}

#noerlist .postsummary{
display:block;
width:580px;
height:55px;
background:#000;
margin:0 auto;
text-decoration:none;
color:#fff;
font-size:12px;
font-weight:normal;
font-style:normal;
line-height:18px;
text-shadow: 1px 3px 3px #fff;
border-top:1px solid #ccc;
overflow:hidden;
padding-top:0px;
padding-left:5px;
padding-bottom:0px;
padding-right:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

#noerlist li .postsummary .separator{
display:none;
}

.noerdate{
display:none;
overflow:hidden;
font-size:10px;
text-shadow: 1px 2px 2px #8EABFF;
color:#455D95;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.noercomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>

Catatan:
  • Ganti teks "DISINI URL BLOG ANDA", dengan URL blog anda.
  • Fitur ini menggunakan jquery 1.3.2, yang bentuknya seperti berikut:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Biasanya bila template anda sudah ada atau sudah menggunakan script tersebut, maka kemungkinan besar Slide down random post ini tidak bekerja.
Bila terjadi masalah tersebut, ada solusi lain yang mungkin bisa anda gunakan, yaitu gunakan satu saja jquery 1.3.2 tersebut dan letakkan didalam atau diantara tag head.


OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Cara memasang kamera CCTV pada blogger

Nah kali ini saya akan membagikan trik yg keren sekali yaitu kamera CCTV di blog, langsung saja kita ke topek pembahasan, widget ini sebetulnya hanya hiasan untuk mempercantik blog kita, mungkin saja para copaser akan takut karena gerak geriknya diawasi lewat kamera CCTV kwkwkwkwkwkwkwk, jadinya aman postingan kamu :D


Memasang Kamera CCTV diBlog

DEMO KLIK DISINI
1.Login Ke akun blog kalian.
2.Klik tata letak
3.Add Gadget/Tambah Gadget
4.Pilih HTML
5.Lalu Tambahkan Kode ini di dalamnya
<script language="JavaScript" src="http://onlyx-45-blogspot-com.googlecode.com/files/onlyx-45-cmr-cctv.js.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4uYeMf9_xiCQL7HoIQVdqXLeAXQe4pg6pULTmRPKkkEqRNNepepcQT5nLYOXSin1qY2-bHv26loSGc3TOLijDr8bvu3CMdFfoamORMUdy0ic-cVPbwETjLW-6VcN5_wrht4s5hPrmpZw/s1600/cctv.gif")</script>
Mudahkan ?

Cara Membuat Animasi Daun Berjatuhan Pada Blogger


Pada tutorial blogger kali ini saya akan menuliskan panduan bagaimana cara memasang efek daun berjatuhan pada blogger. Walaupun sebenarnya script efek daun jatuh ini bisa digunakan untuk blog maupun situs apa saja, tapi di sini saya akan menuliskan tutorial untuk blogger saja.
Sebelum saya meneruskan panduan membuat efek daun berjatuhan ini saya ingin menegaskan bahwa ini tidak bersifat wajib, karena cuma hiasan blog saja, dan mungkin saja script efek daun jatuh ini bisa membuat loading blog kamu menjadi lebih berat (Jika kamu sudah menggunakan script lainnya).
Jadi berat atau tidaknya blog kamu nanti tergantung dari banyak atau tidaknya script yang sudah kamu gunakan sebelum menggunakan script ini.

Langkah-langkahnya :

1. Klik Tata Letak
2. Klik Tambah Gadget / Add A Gadget
3. Pilih Gadget Html/JavaScript

4. Masukkan kode efek daun jatuh berikut di dalamnya

5. Simpan deh...

Selamat Mencoba......... Semoga bermanfaat............ 

jangang lupa like ya......

Sabtu, 29 September 2012

Cara Membuat Kotak Like FB Melayang Dengan Timer

Hai Sobat Blogger kali ini saya akan share Cara Membuat Kotak Like FB Melayang Dengan Timer, kalau Sobat pernah membuat kotak facebook like melayang dengan versi tanpa timer ada baiknya mencoba trik yang berikut ini.Biar jelas coba Sobat lihat Screenshotnya dibawah ini :


Kotak FB melayang dengan timer


Berikut ini adalah cara membuat Kotak Like FB melayang dengan timer :

1.Copy kode dibawah ini :

<style>#fblikepop { background-color: #fff;
display: none;
position: fixed;
top: 200px;
_position: absolute;
/* hack for IE 6*/
width: 450px;
border: 10px solid #6F6F6F;
z-index: 200;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin: 0pt;
padding: 0pt;
color: #333333;
text-align: left;
font-family: arial,sans-serif;
font-size: 13px;
}#fblikepop body {
background: #fff none repeat scroll 0%;
line-height: 1;
margin: 0pt;
height: 100%;
}

.fbflush {
cursor: pointer;
font-size: 11px !important;
color: #FFF !important;
text-decoration: none !important;
border: 0 !important;
}
#fblikebg {
display: none;
position: fixed;
_position: absolute;
/* hack for IE 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 100;
}#fblikepop #closeable {
float: right;
margin: 7px 15px 0 0;
}#fblikepop h1 {
background: #6D84B4 none repeat scroll 0 0;
border-top: 1px solid #3B5998;
border-left: 1px solid #3B5998;
border-right: 1px solid #3B5998;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: normal !important;
padding: 5px !important;
margin: 0 !important;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}#fblikepop #actionHolder {
height: 30px;
overflow: hidden;
}#fblikepop #buttonArea {
background: #F2F2F2;
border-top: 1px solid #CCCCCC;
padding: 10px;
min-height: 50px;
}#fblikepop #buttonArea a {
color: #999999 !important;
text-decoration: none !important;
border: 0 !important;
font-size: 10px !important;
}#fblikepop #buttonArea a:hover {
color: #333 !important;
text-decoration: none !important;
border: 0 !important;
}#fblikepop #popupMessage {
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px;
padding: 8px;
background: #fff !important;
}#fblikepop #counter-display {
float: right;
font-size: 11px !important;
font-weight: normal !important;
margin: 5px 0 0 0;
text-align: right;
line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
username="www.suryacomunityseven.blogspot.com",
judulatas="LIKE THIS YOOO !!!",
warna="1",
waktuhabis="20",
tunggu="0",
bahasa="id"

//]]>
</script>
<script type="text/javascript" src="http://skin-fb-melayang.googlecode.com/files/fanspage_FB.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kenadehdotcom({ closeable: true });});
//]]>
</script>

2.Masuk ke Rancangan > > Elemen Laman > > Tambahkan Gadget
3.Paste kode di atas
4.Simpan dan lihat hasilnya


Keterangan :

1.Untuk username silahkan isi sesuai dengan kotak like FB Sobat.

2.Untuk judulatas silahkan ganti dengan tulisan apa saja.

3.Untuk warna hanya ada 2 pilihan, kalian bisa menggantinya dengan angka 1 dan 2 saja, insya alloh lain waktu saya akan tambahkan dengan beberapa pilihan menarik lainnya.

4.Untuk waktuhabis bisa Sobat ganti dengan selera Sobat, contoh : 20,15, 10, 5 dan sebagainya.

5.Untuk tunggu biarkan saja dengan angka 0

6.Untuk bahasa bisa diganti en untuk bahasa inggris dan id untuk bahasa Indonesia.


Penting : Jangan mengganti

username
judulatas
warna
waktuhabis
tunggu
bahasa

karena jika Sobat ganti akan error, kalian tinggal mengganti tulisan yang berwarna merah saja.

Kamis, 27 September 2012

Cara Memasang Live Traffic Feed

Live Traffic Feed dari situs feedjit.com diperlukan bagi sebuah blog yang berguna menjadi history untuk mengetahui dari mana datangnya pengunjung blog kita. dan lebih hebatnya lagi kita bisa melihat keyword atau kata-kata apa yang dituliskan di mesin pencari seperti google search engine, atau yahoo search dll. yang berakhir di blog kita secara live (secara langsung) dengan cara mengklik Watch in Real-Time yang ada di bawah widget live traffic feed tersebut.
sebagai contoh klik Watch in Real-Time itu live traffic punya ade he...he...he...

Untuk anda yang ingin menambahkan widget diatas, ikuti langkah-langkah berikut ini.
  • Kunjungi link : http://feedjit.com
  • Klik widgets setelah anda berada di situs tersebut.
  • Klik salah satu pilihan Javascript widget yang anda perlukan.
  • Setelah memilih salah satu dari 4 pilihan disana lalu anda klick "Click here to Customize It!" itu berguna untuk menentukan warna agar sesuai pada blog kita.
  • Selesai mengotak-atik warna, Copy dan Paste ke blog anda dengan cara berikut dibawah ini.
  • ~> Login ke Blogger lalu ke Elemen Halaman dan Tambah gadget di sisi sidebar atau di footer terserah pemilik blog setelah itu pilih HTML/JavaScriptHTML/JavaScript setelah itu paste di dalamnya kode yang telah di copy di atas.
  • Klik simpan dan selesai.
  • Silahkan anda lihat blog anda sekarang

Semoga Berhasil...!!

Cara Membuat Tulisan Berjalan

Mungkin diantara anda ada yang ingin tau Bagaimana Cara membuat tulisan berjalan - atau tulisan yang bisa bergerak kekanan/kekiri dan keatas/kebawah ? .Tulisan ini saya bikin saat saya dulu mencoba membuat beberapa tulisan di blog saya bisa bergerak keatas atau kekanan.

Dan saya berfikir : Jika saya saja dulu bingung cara membuat tulisan bergerak,maka pasti banyak juga orang lain yang juga tidak tau caranya.Oleh sebab itu saya mencoba menuliskan artikel cara membuat tulisan bergerak ini ,khusus untuk anda yang belum mengetahui nya.

Apa sih tujuan atau manfaat Tulisan Yang bisa berjalan di Blog?

Saya melihat dibeberapa blog,menggunakan teknik tulisan bergeser kekanan atau kekiri  untuk menarik perhatian pengunjung (dan memang teknik ini mampu membuat saya melirik ke tulisan yang berjalan tsb).

Meskipun ada webmaster guru, yang menghindari trik tulisan berjalan ini ,dengan alasan : "Membuat Pusing..!" . Tapi menurut saya trik ini memang cukup ampuh kok. Agar tdk membuat pusing sebagian orang tertentu ( Ada lho beberapa org yang memliki gangguan penglihatan pada barang/tulisan/objek yang bergerak2..), kita bisa membuat tulisan yang bergerak tsb untuk diam sesaat ketika kursor mouse diarahkan ke tulisan bergerak itu. -- Lihat aja yah contohnya dibawah. --

Mana sih Contoh Tulisan Berjalan Di blogspot


Bergerak kekanan ! cara membuat tulisan berjalan di blog

Bergerak kekiri ! cara membuat tulisan bergerak

Ke Kanan dan Kekiri ? - cara membuat tulisan bergerak

Bergerak kekanan Perlahan !

Ke Kanan dan Kekiri Dan Bisa Di stop??


Bergerak Ke Atas



Bergerak Ke Atas dan Ke bawah


Tulisan bergerak atau MARQUE ini, pada beberapa pengaturannya : Misal : align;behavior;haspace; dll :  ada yang tidak kompatible ( tidak berfungsi ) di beberapa browser,terutama di browser kuno.Untuk melihat semua fungsi marque berfungsi semua fitur2 nya, coba buka blog yang ada marque nya dengan mozila firefox

Lalu mana Kode HTML Tulisan Berjalan nya ?


Oke ini kode nya :

Kode HTML Untuk Tulisan Yang bergerak kekanan

<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (ganti dgn tulisan anda)</span></marquee>

Kode HTML Untuk Tulisan Yang Bergerak kekiri : Lihat pada kode tulisan bergerak kekanan diatas,tinggal ganti kata "right" menjadi "left"


Kode HTML Untuk Tulisan Yang Ke Kanan dan Kekiri

<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (ganti dgn tulisan anda)</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak

<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (ganti dgn tulisan anda</span></marquee>


Kode HTML Untuk Tulisan Tulisan Yang Bisa Bergerak  Ke Kanan dan Kekiri Dan Bisa Di stop

<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak Ke Atas

<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak Ke Atas dan Ke bawah

<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah</span></marquee>

Note : Anda bisa merubah warna tulisan dengan kode warna HTML :

red = warna merah
blue= warna biru
yellow = warna Kuning
white = warna putih
black = warna hitam

Kode warna HTML, pada contoh diatas seperti ini:

<span style="color:red; font-weight: bold;">

Bisa diganti dengan seperti ini :

<span style="color:#f00; font-weight: bold;">

#f00; = warna merah ;

#00f; = Warna Biru ;

#0f0; = Warna Hijau ;

#f0f; = Warna Ungu ;

Atau dikombinasi....Coba-coba aja ya....

Senin, 24 September 2012

Cara Membuat Live Chat di Blog seperti Chat Facebook

Bingung juga mau memberi judul apa. Intinya kita akan membuat live chat blog seperti yang ada di facebook. Lihat yang ada di pojok kanan bawah blog saya ini, itulah live chat ala facebook yang ada di blog. Kamu pun juga bisa memasangnya dengan bantuan pihak ketiga yaitu envolve.com


1. Caranya yang pertama kamu daftar dulu di envolve.com
2. Setelah itu verivikasi akun envolve pada akun emailmu
3. Kemudian masuk ke my sites - add new sites. Perlu diingat saat kamu isikan url blogmu pada add new site sebaiknya kamu sedang tidak membuka akun bloggermu, atau logout dulu akun bloggermu. Karena waktu itu saat saya sedang add new site bersamaan dengan akun blogger malah terjadi eror.
4. Setelah sukses menambahkan url blog mu di envolve , nanti akan disuruh memilih platform blog kamu seperti wordpress, joomla, tumblr. Karena tidak ada platorm blogger disana kamu bisa pilih yang other.
5. Setelah itu coppy kodenya.
6. Lalu sign in ke akun blogger kamu
7. Masuk template - edit html - centang pada expand template widget
8. cari kode <head> ,gunakan ctrl+f  untuk mempermudah pencarian
9. setelah itu pastekan kode envolve tadi diatas kode <head> pada html tempate kamu
10. selesai..!!

Semoga sukses.. Mohon maaf tidak disertakan tutorial gambar karena menurut saya tutorial ini mudah dilakukan, sekalipun tanpa tutorial disini :)

Source

Sabtu, 22 September 2012

Membuat Efek Bayangan Teks Dengan CSS3

Kadang pengunjung kita bosan melihat tulisan atau gambar yang biasa saja (polos) tanpa hiasan apapun. Untuk lebih memikat pengunjung kadang kita harus memberikan efek-efek tertentu pada gambar atau tulisan, tersebut sehingga lebih indah dan lebih menarik. Salah satunya dengan memberikan efek bayangan pada tulisan  atau gambar yang ada di blog kita. Memberi efek bayangan pada gambar merupakan salah satu teknik yang sering digunakan oleh para designer grafis karena dapat membuat gambar terlihat lebih hidup dan menarik. Untuk membuat efek bayangan pada gambar mungkin sudah menjadi hal yang biasa karena dengan menggunakan software pengolah gambar seperti Photoshop atau Coreldraw. Anda dapat dengan mudah memberi efek bayangan pada gambar. Lalu bagaimana dengan tulisan?

Nah pada postingan ini saya akan menjelaskan cara membuat efek bayangan pada teks seperti yang dapat anda lihat pada judul postingan blog ini. Untuk membuat efek ini sangat mudah, anda tidak perlu memakai tool apapun hanya memberi sedikit sentuhan kode CSS3 pada template blog anda maka efek bayangan akan muncul di teks blog anda.

Agar lebih jelas silahkan ikuti langkah-langkah berikut:

Catatan:
Efek ini hanya mendukung browser Firefox, Google Chrome, Safari dan Opera sedangkan IE efek ini tidak akan tampak. Sehingga bagi anda yang menggunakan browser IE silahkan diganti dulu dengan browser lain yang saya sebutkan diatas sebelum mengikuti tutorial ini.

1. Pada menu dashboard blogger. Klik menu Design -> Edit HTML

2. Letakkan kode text-shadow: 2px 2px 2px #ccc; dimana anda ingin memberi efek bayangan pada teks

3. Sebagai contoh anda ingin memberi efek bayangan pada judul postingan maka cari kode seperti ini.
. h3{
margin:0px;
font-weight:bold;
font-size:25px;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Setiap template tentu memiliki kode yang berbeda-beda. Jika anda tidak menemukan kode css seperti diatas maka cari kode di template anda yang mewakili judul postingan kemudian letakkan text-shadow property seperti berikut:
.h3{
margin:0px;
font-weight:bold;
font-size:25px;
text-shadow: 2px 2px 2px #ccc;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Keterangan text shadow property


4. Silahkan diatur nilai propertynya untuk mendapat efek shadow yang anda inginkan. Setelah itu simpan template anda.

Efek ini juga bisa ditambahkan pada teks di bagian sidebar, form komentar, footer, dan lain-lain. Selamat mencoba.

Di akhir artikel ini saya bingung mau ngomong apa, yah pokoknya semoga dapat bermanfaat bagi kita semua. Bagi teman-teman yang masih bingung, tanya aja ke kolom komentar dibawah siapa tau saya bisa jawab.

Cara Membuat Teks Berjalan di Menu Bar

Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu disini. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.


Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>
<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";
msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Semoga bermanfaat

Membuat Efek Gradiasi Dengan CSS3 di Blog

Bagi temen-temen yang senang mengutak-atik template, kali ini saya akan berikut tutorial tentang membuat efek gradasi dengan CSS3. Di postingan sebelumnya, saya sudah sempat menyinggung tentang salah satu fitur dari CSS3 yaitu text-shadow yang berguna untuk membuat efek bayangan pada teks. Jadi kali ini saya akan menjelaskan tentang fitur lain dari CSS3 yaitu efek gradiasi. Pada umumnya untuk membuat efek gradiasi, orang akan menggunakan program image editing seperti Photoshop, Coreldraw, dan lain-lain untuk menghasilkan gambar gradiasi. Kelemahan dari cara ini tentu saja dapat memperlambat loading blog. Apalagi gambar yang digunakan berukuran besar bisa-bisa pengunjung sudah kabur sebelum blog anda berhasil kebuka.

Nah untuk mengatasi hal ini anda dapat menggunakan fitur gradiasi dari CSS3. Dengan menggunakan fitur ini anda dapat membuat efek gradiasi hanya dengan menambahkan kode css pada template blog anda sehingga tidak memperlambat loading blog.

Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), dan Google Chrome. Berikut adalah kode CSS3 untuk membuat efek gradiasi:
background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
Keterangan:
background: #ffa45a;
merupakan warna background yang akan muncul apabila browser tidak mendukung
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.

Cara peletakan kode gradiasi di blog
Ganti property background pada template blog anda yang ingin dipasang efek gradiasi. Sebagai contoh anda ingin memasang efek gradiasi di bagian menu navigasi maka cari kode css untuk menu navigasi di template blog anda. Contohnya:
#nav{
background: #403f3f url(http://lh3.ggpht.com/15FopxVONSo/nav-bg.gif) left repeat-x;
height:35px;
margin-left:10px;
margin-right:10px;
}
Ganti teks berwarna merah dengan kode efek gradiasi sehingga hasilnya menjadi seperti ini.
#nav{
background: #ffa45a; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d'); background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d)); background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
height:35px;
margin-left:10px;
margin-right:10px;
}
Untuk mendapatkan efek gradiasi yang lebih bervariasi sebenarnya anda juga bisa menambahkan property 'color-stop' untuk mengatur scale warna seperti yang terdapat pada Photoshop Tapi karena pengaturannya agak ribet maka tidak saya jelaskan disini.

Sebagai penggantinya anda bisa membuat efek gradiasi yang lebih bervariasi dengan menggunakan CSS3 Gradient Generator yang beralamat di http://gradients.glrzad.com/

css3 gradient generator
Demikian tadi tutorial membuat efek gradasi dengan CSS3, jika temen-temen tertarik silahkan dicoba. Semoga bermanfaat
 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger