Membuat Tooltip dengan CSS Manual

Membuat Tooltip dengan CSS Manual - Tooltip Otomatis dengan CSS sebenarnya juga tidak sulit kita buat hanya saja sekarang saya masih ingin memposting Membuat Tooltip dengan CSS Manual Aregnoz Blog, Sharing Your Imagination.

DEMOIni demo Tooltip secara Manual

Script HTML

<a class="tooltip" href="#">Test Demo <span>Blog tutorial CSS dan HTML 5</span></a>

Script Class

a.tooltip {
position:relative;
color:#cf2c2c;
text-decoration:none;
}
a.tooltip span {
padding:5px 10px;
background:#555;
border:1px solid #555;
min-width:140px;
position:absolute;
top:5px;
left:5px;
color:#FFF;
text-align:center;
opacity:0;
-moz-transition: opacity 1s ease,top 1s ease;
-webkit-transition: opacity 1s ease,top 1s ease;
-o-transition:opacity 1s ease,top 1s ease;
transition: opacity 1s ease,top 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip span:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
z-index:5;
content: " ";
position:absolute;
top:-7px;
left:11%;
}
a.tooltip span:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
display:block;
content: " ";
position:absolute;
top:-8px;
left:11%;
}
a.tooltip:hover span {
opacity:1;
top:25px;

Tooltip ini bekerja secara manual namun sangat ringan sekali dan lebih variatif dibandingkan dengan kebanyakan tooltip yang sudah ada dan umum sekali.

Continue

CSS Membuat Pop Up Button Image

CSS Membuat Pop Up Button Image 

Tutorial CSS Membuat Pop Up Button mengeluarkan Image Variatif Zooming dengan CSS 3 pasti anda bingung dengan judul yang saya buat dipostingan ini. Saya juga bingung mau ngasih judul apa, hee. Intinya ketika Button diklik maka akan menampilkan image dengan efek hover zooming. 

Tutorial CSS Membuat Pop Up Button Image ini bisa kamu terapkan di blog kamu dengan sedikit modifikasi sesuain dengan kebutuhan di web/blog kamu.

Jika kamu masih bingung silahkan lihat demo di bawah ini :

Hot Panas

~ bagaimana Hot Bukan ~
Seperti itulah demonya, sangat sesuai judulnya yang aneh, hee..
Oke lanjut gan, jika memang anda tertarik silahkan embed script bawah ini :

<input class="popUpControl" id="popup" type="checkbox" />
<label class="elboton" for="popup">
  <span class="click">Gadis Hot</span>
  <span class="hiddenbox">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9PXqMNgqoUIUtHDpDfQ4Ifw0VqTfaLUyujH-LjmC1g8xwC_Xv5mOo4tMVHSyAPaj6JQHMnvD_inNw9sdEaqRDbEF2N80Hr60nTEAK1oUQxZwrvFmMab2h4otvMH4WT_3JKYLuyjy71f0I/s1600/FMI201070104.jpg" />
  </span>
</label>
<style>
  .elboton {
    background-color: #f90e;
    border-radius: 10px;
    box-shadow: 0 0 10px #222 inset;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    margin: 0;
    padding: 5px 15px;
    position: relative;
    text-shadow: 1px 1px 1px #000;
  }

  .elboton br {display:none;}
   .hiddenbox {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 15px #000 inset;
    left: 0;
    line-height: 0;
    margin: 25px 0;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: center;
    top: 100%;
    z-index: 100;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
  }

  .popUpControl:checked ~ label > .hiddenbox {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
  }

  .popUpControl {display: none;}
  .popUpControl:checked ~ label > span.click {display: none;}
  .popUpControl:checked ~ label:before {content: "Cabe Bugil";}
</style>

Silahkan disesuaikan dengan kebutuhan ente agan-agan.. ^_^

Salam Blogger Donomulyo.

Continue

CSS Membuat Caption Image Atraktif

CSS Membuat Caption Image lebih Atraktif dan Gaya dengan CSS sebagian orang akan senang ketika blog atau Web nya bisa memberikan perbedaan dengan blog/web lainnya. Sekarang kita akan coba membuat tampilan image dalam blog kita lebih variatif dan atraktif dengan bantuan CSS.

Lihat Contohnya dibawah ini :

Adobe CS6

Download
Adobe EDGE CS 6

Sudah lihat kan contohnya.

Jika tertarik kamu bisa mengambil scriptnya dibawah ini sob.
1. HTML

<div class="view">
  <img src="URL_IMAGE" />
  <div class="mask">
    <h4> Title </h4>
    <p> Caption </p>
    <a href="#" class="info"> Text Button </a>
</div>
</div>

2. CSS

<style>
.view {
    border: 10px solid #FFF;
    cursor: pointer;
    height: 188px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img {
    display: block;
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view:hover img {
    -moz-transform: rotate(720deg) scale(0);
    -webkit-transform: rotate(720deg) scale(0);
    -o-transform: rotate(720deg) scale(0);
    -ms-transform: rotate(720deg) scale(0);
    transform: rotate(720deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view .mask {
    background-color: #ABC;
    height: 188px;
    left: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 300px;
    -moz-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .view:hover .mask {
    -moz-transform: translateY(0px) rotate(0deg);
    -webkit-transform: translateY(0px) rotate(0deg);
    -o-transform: translateY(0px) rotate(0deg);
    -ms-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .view h4 {
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
    text-align: center;
    position: relative;
    font-family: Georgia;
    font-size: 20px;
    margin: 20px 0 0 0;
    padding: 5px 0;
    text-shadow: 0 3px 1px #000;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover h4 {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
  }
  .view p {
    color: #000;
    font-family: Tahoma;
    font-size: 13px;
    margin: 0;
    padding: 15px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view:hover p {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }
  .view a.info {
    background-color: #456;
    border-radius: 5px;
    box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
    color: #FFF;
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    -moz-transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  .view a.info:hover {
    box-shadow: 0 0 5px #FFF;
  }
  .view:hover a.info {
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
</style>

 Oke silahkan dicoba dan disesuaikan dengan kebutuhan masing-masing hee.
^_^


Salam Blogger Donomulyo.

Continue

Jasa Maintenance Blog Gratis

Jasa Maintenance Blog Gratis

Jasa Maintenance Blog Gratis - Jasa Desain Blog dan Pembenahan Blog Gratis 2012 saya dedikasikan untuk keluarga saya yang telah memberikan saya motivasi dan saling tolong menolong kepada sesama. Bagi Anda yang berminat dengan penawaran saya untuk Jasa Maintenance Blog Gratis ini silahkan Contact saya.

Jasa Maintenance Blog Gratis ini benar-benar gratis Free 90% yang 10% biaya Kopi Om, hee... dan bukan saya menyombongkan diri atau apalah, hanya saja jika memang benar-benar butuh saya akan memberikan jasa maintenance gratis ini. Hanya untuk sekedar berbagi sedikit ilmu yang sudah saya pelajari selama ini, jadi tetep keep positif thinking gan.

Tidak semua yang request akan saya layani, hanya yang benar-benar niat menurut saya pribadi dan benar-benar butuh saja. Fasilitas meliputi redesign dan penataan tata letak serta pemilihan warna yang mungkin bisa disesuaikan dengan keinginan yang request.

Jasa Maintenance Blog Gratis ini sepenuhnya saya dedikasikan untuk keluarga saya dan sahabat-sahabat saya yang terus mendukungku dalam segala keadaan. Thanks a lot of my family and All my friends.

Contact Me :  Effand  [085649905055]
Personal Blog : Mas Effand

Periode : experied 30 November 2012
++++++++++++++++++++++++++++++++++++++++++++++++++

Continue

Triks Membuat Cursor Bertabur Bintang

Triks Membuat Cursor Bertabur Bintang - Cara membuat Cursor bertabur bintang saat digerakkan ini adalah cara agar Cursor kita selalu bertaburan Bintang ketika di gerakkan. Cara ini biasanya untuk menghias blog yang mempunyai warna-warna gelap atau selain putih karena akan terlihat lebih bagus dalam keadaan gelap.

Anda bisa mensetting Warna bintang nya dengan mengganti kode warna dalam script Javascript dibawah ini yang diberi warna berbeda.

Triks Membuat Cursor Bertabur Bintang dengan menggunakan script javascript ini bisa anda langsung praktekan sekarang juga dengan menaruh script dibawah ini di atas </head>

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF"; /*ganti dengan warna sesukamu*/
var sparkles=40;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

 Setelah anda copy diatas </head> silahkan save template dan lihat hasilnya.

Continue

Download Template Toko Online Shopping Cart

Download Template Online Shopping Cart - Template ini sudah lama di share oleh empunya sehingga saya hanya menulisnya ulang dengan bahasa saya. Dan silahkan Download dengan bebas karena memang template Toko Online ini tidak dijual alias GRATIS 100%.

Download Template Online Shopping Cart Template toko online yang simple tapi sangat mudah untuk para customer menggunakannya.

Bagi Anda yang ingin menggunakan Template ini silahkan Ikuti cara menggunakan template ini :

Blogging platform lainnya seperti Wordpress memiliki "Custom Fields" pilihan yang memungkinkan kita untuk menambahkan deskripsi tambahan seperti harga dan thumbnail tanpa harus menambahkan kode HTML di editor posting. Tapi, Blogger tidak memiliki fitur itu. Jadi, kita akan coba untuk membuat item posting semudah mungkin dengan menggunakan metode tabel. 

Berikut adalah bagaimana tabel terlihat di editor posting.

Langkahnya adalah silahkan agan-agan menuju custome post Template yang ada di blog anda.

Kemudian paste script berikut ini :

<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYhvwvn1PJSimD5BeEBLTk8N510_4iQLbX8bzcWV26DyCpmo6DMwbWp7sQp16-ePKPzwoPjA5n-5iaGlRdoUlwjmNfRUqwnyGxGYEy9486CncM7ajQMauQ2yk7jP4DPFVpZUUW3zLsHEL/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYhvwvn1PJSimD5BeEBLTk8N510_4iQLbX8bzcWV26DyCpmo6DMwbWp7sQp16-ePKPzwoPjA5n-5iaGlRdoUlwjmNfRUqwnyGxGYEy9486CncM7ajQMauQ2yk7jP4DPFVpZUUW3zLsHEL/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th>
  <td><input class="item_add" type="button" value="Add to Cart" /></td>
</tr>
<tr>
  <th><b>Item Name</b></th>
  <td class="item_name">Tulis Nama Produk Disini</td>
</tr>
<tr>
  <th><b>Price</b></th>
  <td class="item_price">$99.99</td>
 </tr>
<tr>
  <th><b>Description</b></th>
  <td class="item_Description">Deskripsi Produkmi Disini</td>
 </tr>
<tr>
  <th><b>Stock</b></th>
  <td>Jumlah Stock</td>
</tr>
<tr>
  <th><b>Misc</b></th>
  <td>Tambahkan extra gambar/image lainnya bisa disini</td>
</tr>
</tbody>
</table>

Untuk Setting Paypal

Langsung ke Desain> HTML. Carian simpleCart gunakan CTRL + F. Anda akan menemukan potongan kode ini.

<script type='text/javascript'>
simpleCart.email = &quot;bocahnoz@gmail.com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];</script>

Ganti alamat email diatas.

Sekarang, pergi ke Desain> Edit HTML. Tambahkan kode di bawah ini tepat sebelum penutup </ head>.

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

Kemudian silahkan anda daftar di Contacr.com
jika sudah daftar kamu perlu mengganti salah satu kode di edit html, cari :- id=39662; kemudian replace dengan Codemu yang sudah kamu daftarkan tadi.


Cari Code :

input.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}

Replace dengan ini :

span.item_add{
    bottom: 9px;
    font-size: 11px;
    position: absolute;
    right: 15px;
    width: 90px;
}

Cari lagi kode berikut :

input.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
}

Replace dengan ini :

span.item_add {
    font-size: 17px;
    height: 40px;
    margin: 5px 0 0 140px;
    position: relative;
    width: 120px;
} 

NB : Cari script berikut
<script src='http://introbloggerscripts.googlecode.com/files/cart.js' type='text/javascript'/>
Replace dengan ini :
<script src='http://shopppingcart.googlecode.com/files/simplecart.js' type='text/javascript'/>

Demo | Download

Continue

Membuat Description Perposting di Blog

Membuat Description Per Posting pada Blog - Description sangatlah penting dalam sebuah artikel karena ini merupakan hal untuk media penarik orang untuk mau melihat web/blog kita. Kali ini kita akan Membuat Description Secara Perposting pada Blog. Cara ini sangat manual dan mudah sekali karema kita memanfaatkan service bawaan dari blogger sendiri.

Berikut ini cara untuk Membuat Description Per Posting pada Blog. Silahkan anda menuliskan Artikel anda seperti biasanya dan untuk membuat deskripsi penelusuran anda bisa menuju ke samping kiri bawah layar Anda.

Membuat Description Perposting di Blog

Anda bisa langsung membuatnya sebelum anda mem publikasikan tulisan anda di blog. Walau ini sangat mudah namun saya harap tidak mengecewakan yang telah membaca ini.

Continue

Cara Meremove Garis Dotted Outline

Cara Meremove Garis Dotted Outline - Dotted pada blog atau web biasanya di pakai untuk menandai suatu link, button dll namun terkadang itu sangat mengganggu jika dotted ini tampil pada seluruh link dan button blog kita. 

Jika kamu masih belum paham berikut ini contoh nya :

Berikut ini beberapa cara untuk menghilangkannya.

Gunakan CSS reset berikut ini :

a {
   outline: 0;
}

Untuk File Flash

object, embed {
  outline: 0;
}

Untuk di FireFox

 input::-moz-focus-inner { border: 0; }

Atau kamu bisa mencoba mencari scripnya dengan bentuk "dotted", cara manualnya adalah dengan memberi parameter "0" atau menghapusnya.

Cara ini sederhana tetapi mungkin berguna bagi yang masih belajar seperti saya.

Continue

CSS Cara Membuat Efek Melengkung pada Image

CSS Cara Membuat Efek Melengkung Pada Image - Melanjutkan Tutorial CSS sebelumnya, pagi ini kita akan mencoba membuat efek melengkung pada image ketika disorot atau didekati oleh Cursor. Kode CSS yang kita terapkan adalah dengan memanfaatkan Radius. Dengan script Radius kita bisa membuat sudut melengkung baik pada button maupun pada image.

CSS Cara Membuat Efek Melengkung Pada Image kita mencobanya dengan memanfaatkan fasilitas hover juga sehingga image akan melengkung ketika disorot oleh cursor.

Anda bisa melihat Demo diatas untuk CSS Cara Membuat Efek Melengkung Image.

#round img {
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#round img:hover {
border-radius: 0% 50%;
box-shadow: 0px 0px 15px #fff;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
<div id="round">
URL IMAGE</div>

 Anda bisa membuat gambar melengkung seperti gambar diatas, hanya dengan mengganti URL IMAGE yang berwarna merah itu, gamti dengan url gambarmu.

Salam Blogger Donomulyo.

Continue

CSS Layout Fixed 1 Colomn No Navigation

CSS Layout Fixed 1 Colomn No Navigation - Oke saya akan coba share sedikit hal yang saya tahu, sekarang kita akan mencoba membuat layout blog super fast dan simple. Ini hanya sebagai dasarnya saja. CSS Layout Fixed 1 Colomn No Navigation adalah membuat sebuat gambaran template tanpa Navigation sehingga hanya ada header, main-wrapper dan footer saja. jadi hanya 1 colomn saja.

Berikut ini gambaran dari CSS Layout Fixed 1 Colomn No Navigation :

Pasti anda sudah punya gambarannya kan.

Sehingga script yang bisa kamu pake adalah seperti ini :

body {
width:750px;
margin:0 auto;
margin-top:30px;
}
/* ----- HEADER ----- */
#header {
width:750px;
height:150px;
background-color:#333333;
}
/* ----- MAIN CONTENT ----- */
#content {
width:750px;
background-color:#333333;
margin-top:10px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
/* ----- FOOTER ----- */
#footer {
width:750px;
height:100px;
background-color:#333333;
margin-top:10px;
}

Silahkan anda sesuaikan ukuran dengan size yang anda inginkan di blog anda, warna juga bisa anda ganti dan menyesuaikan dengan selera anda.

Selamat berekperimen.

Continue

Tempat Hosting File Flash Free

Tempat Hosting File Flash Free - Hosting yang satu ini benar-benar free (update 17 juni 2012). Ketika saya mencobanya pertama kali agag sedikit bingung namun ternyata mudah juga kok kalau sudah tau. Hosting benar-benar Gratis Free. Tempat Hosting File Flash Free. 


Untuk files yang bisa anda upload berupa image dan file flash (.jpg dan .swf)






Oke langsung saja silahkan kamu menuju TKP gan.

http://www.swfstore.co.uk/

Selamat berupload ria dan memasang file flash anda.
Salam Blogger Donomulyo.

Continue

CSS Membuat Text Shadow

CSS Membuat Text Shadow - Habis jumatan ngenes liat blogku ini, udah sebulan ini gag keurus dan cukup tragis melihat template ku yang semrawut, dan akhirnya kuputuskan untuk merubah templatenya. Walau dengan segala resiko yang ada.

Oke langsung kembali kemateri awal, untuk posting pertama di template baru ini aku coba share untuk membuat CSS dengan Text Shadow.

CSS Membuat Text Shadow

Code :

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

INI CONTOHNYA YA INI CONTOHNYA

Masih bingung dengan hasilnya, kurang lebih tulisan akan menjadi seperti ini jika anda ingin memberikan shadow pada artikel anda, cukup baguskan untuk dibuat dalam sebuah postingan. Pastikan saja jika kamu membuat ini di postingan tertentu dengan mengeditnya di HTML postingan kamu.

CSS Membuat Text Shadow NEON

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Oke lanjut ke Variasi Text Shadow lainnya.

CSS Membuat Text Shadow Inset

Code :

text-shadow: 0px 2px 3px #666;

Coba juga versi lainnya untuk pembeda dan experimen :
Code : 
color: #000;
background: #fff;
text-shadow: 2px 2px #000;


Hasilnya :

DEMO TEXT SHADOW

Text Efek Shadow Glow :

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

Glow Versi 2 :

color: #fff;
background: #666;
text-shadow: 0px 0px 3px #fff;

Text Efek Multiple Shadow :

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Anda bisa memodifikasinya lebih bagus lagi...

Continue

CSS Membuat Box Shadow

CSS Membuat Box Shadow - CSS kita akan coba untuk membuat Shadow efek pada kotak/box. Tutorial ini hanya lanjutan dari tutorial CSS sebelumnya sehingga anda bisa bisa nyambung dengan code CSS berikut ini dan ini sangat sederhana atau dalam tingkat Basic.

Script CSS :

-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;

Anda bisa lihat contoh aslinya dibawah ini :

CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow CSS Membuat Box Shadow 

Selesai, Monggo di Coba!!!

Continue

CSS Membuat Border Radius

CSS Membuat Border Radius - CSS lagi nich, kali ini kita membuat Border Radius yang bisa kalian modifikasi dengan hanya mengganti nilainya saja. Menurut beberapa pendapat "border-radius" adalah anak emas CSS3 - properti baru pertama untuk penggunaan secara luas di masyarakat. Apa ini berarti termasuk Internet Explorer 8 dan di bawah ini, semua browser dapat menampilkan sudut dibulatkan. Kurang lebih begitu. 

Sebelumnya, hal itu perlu menggunakan awalan vendor untuk kedua WebKit dan Mozilla, agar gaya yang akan diterapkan dengan benar dan bisa sesuai dengan yang kita harapkan ketika ditampilkan pada Web Browser User.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

Pada kode diatas, menetapkan  border-top-right-radius  dan  border-bottom-left-radius nol akan berlebihan, kecuali unsur ini harus diatur kembali nilai-nilainya.

Oke sekian dulu, silahkan dicoba.

Continue

Membuat Berbagai Shapes Dengan CSS

Membuat Berbagai Shapes Dengan CSS

Membuat Berbagai Shapes Dengan CSS - Shapes Dari CSS bisa kita buat dengan script CSS yang cukup simple. Shapes bisa berbentuk macam-macam seperti Bintang, lingkaran, ying-yang, love, Segitiga dll.

The Shapes of CSS

Shapes mempunyai peranan penting dalam pengaplikasian CSS, seperti button yang dibuat dari retangle dan masih banyak lagi Shapes-shapes yang lainnya masih sering digunakan pada Web.Blog.

The Shapes of CSS

1. Square atau Kotak

#square {
width: 100px;
height: 100px;
background: red;
}

2. Rectangle atau Persegi Panjang

#rectangle {
width: 200px;
height: 100px;
background: red;
} 

3. Circle atau Lingkaran 

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

4. Oval atau Lonjong

#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */

5. Triangle Up atau Segitiga Sama Kaki

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

6. TriAngle Top Left

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent; }

7. Curver Trail Arrow / Panah Kesamping

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

8. Parallelogram

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: red;
}

9. Invinity

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;  
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Oke, Selamat Mencoba Kawan...

Continue

CSS Membuat Outline

CSS Membuat Outline - CSS tutorial kali ini kita akan membuat Outline. Outline adalah properties yang bisa kita manfaatkan untuk pembatas dalam susunan blog kita baik di gadget ataupun pada postingan. Outline sendiri juga mempunyai struktur basic yang sederhana sehingga anda mudah mengingatnya.

Script CSS Outline :

.box {   border: 5px solid #292929;   outline: 5px solid #e3e3e3;}

Hasilnya : 

TEXT OUTLINE

Box Shadow Bertingkat

.box1 {    border: 5px solid red;     box-shadow:       0 0 0 5px green,       0 0 0 10px yellow,       0 0 0 15px orange;}

Hasilnya :

Tingkat 3

Selesai, lanjut ditutorial lainnya.

Continue