Membuat Tooltip dengan CSS Manual

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.






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.

Membuat Convert Text To ASCII Generator

Membuat Convert Text To ASCII Generator - Dengan Text To Ascii generator kamu bisa dengan mudah mengubah text biasa menjadi bentuk ASCII atau bentuk tulisan Alay lainya. Membuat Convert Text To ASCII Generator manfaatnya sangat banyak sekali bagi orang yang suka dengan ciri perbedaan. 

Seperti apa sebenarnya Text To ASCII itu..?? Berikut ini contoh gambarnya.

Membuat Convert Text To ASCII Generator
Convert Text To ASCII Generator













Sekarang kamu sudah tahukan maksut dari judul diatas, oke mungkin anda yang belum tahu banyak bertanya-tanya bagaimana cara membutanya. Dulu saya berpikir caranya adalah dengan manual mendesain di Notepad, ehh ternyata salah besar.

Oke langsung saja kaliah menuju Text To ASCII Generator.

Ref.

CSS Membuat Pop Up Button Image

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 :



~ 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="http://1.bp.blogspot.com/_JF_sg2YH9vk/TCyxSgAEFKI/AAAAAAAAAOE/vRbVF9LMN4M/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.

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.

Jasa Maintenance Blog Gratis

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
++++++++++++++++++++++++++++++++++++++++++++++++++

Download Adobe Photoshop CS 6 Mediafire

Download Adobe Photoshop CS 6 Mediafire
Download Adobe Photoshop CS 6
Download Adobe Photoshop CS6 Mediafire - Adobe Photoshop CS3 CS4 atau CS5 sebagai software design yang sangat handal dan paling banyak digunakan tentunya juga tidak asing lagi bagi kalian semua yang hobinya nge-Design.

Download Adobe Photosop CS 6 Mediafire kamu bisa mendownloadnya FREE disini melalui Mediafire dan kamu wajib menggunakan IDM karena yang kalian download adalah file idm sehingga nantinya kamu hanya tinggal me-Resume saja.





Jika kamu sudah menginstal adobe Photosop CS 5 bisa kamu langsung menginstall CS6 atau meng Uninstall dulu supaya kompi kamu tidak lelet karena memang cukup berat menjalan Photoshop CS6 untuk Kompi-kompi yang speknya terbatas.

Silahkan Download Adobe Photoshop CS 6 Mediafire
Cara Install File Download Klik Disini


Download Adobe EDGE CS 6 Mediafire

Download Adobe EDGE CS 6 Mediafire
Download Adobe EDGE CS 6
Download Adobe EDGE CS 6 Mediafire - Adobe EDGE menurut beberapa web yang saya baca di beberapa Web master kegunaannya adalah untuk memudahkan kita dalam membuat file CSS 3 dan HTML 5Download Adobe EDGE CS 6 Mediafire tentunya sangat mudah bagi anda dalam proses mendownload karena bisa lewat idm.

HTML 5 Designer yang sekarang lagi booming dan sedang banyak di gandrungi oleh para pecinta web master dan juga bagi orang-orang yang suka nge-Blog seperti saya, heee.


Silahkan Anda coba untuk mendownload dan menggunakan Adobe Edge ini.
Berikut ini link Download Mediafire yang bisa anda tuju.

Download Adobe EDGE

Untuk cara Install File Download silahkan lihat disini.

Triks Membuat Cursor Bertabur Bintang

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.


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.

Download Template Online Shopping Cart

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.

Download Template Online Shopping Cart


















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="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="http://3.bp.blogspot.com/-k1EQIca2tCw/TdtZUjHTeGI/AAAAAAAACAs/vNwQwZAVkaI/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'/>

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
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.



Radio Streaming Jogja [Jogja Streamers]

Radio Streaming Jogja [Jogja Streamers] - bagi anda yang sibuk dan ingin sejenak melepas penat dengan mendengar kan musik, ini bisa menjadi alternative anda. banyak Informasi dan lagu yang siap bikin kamu tenang dan terhibur. Radio Streaming Jogja [Jogja Streamers] adalah kumpulan stasiun Radio yang ada di Jogja. Terdiri dari puluhan radio yang dijadikan menjadi satu tempat Jogja Streamers banyak menjadi favorit bagi warga jogja dan luar jogja yang gemar mendengar kan radio Streaming.

Radio Streaming Jogja [Jogja Streamers]
Radio Streaming Jogja [Jogja Streamers]
Ada sekitar kurang lebih 30 Stasiun radio Online yang ada di list Jogja streamers ini. Mulai dari radio-radio favorit dan juga yang nonstop 24 Jam.

Ada radio yang khusus lagu jawa/daerah ada juga radio yang online 24 jam dan hampir tanpa jeda iklan seperti Jiz FM. 








Jika anda tertarik untuk juga mendengarkan nya ada syarat yang harus anda penuhi.
beberapa diantaranya :
- Laptop yang terkoneksi dengan Internet 
- Browser harus sudah kamu install Flash Flayer
- Sound Agar lebih mantab, hee

Langsung saja anda menuju TKP jika ingin mendengarkannya. Jogja streamers

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 :
Cara Meremove Garis Dotted Outline







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.

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.


CSS Cara Membuat Efek Melengkung Image
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.

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.

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.


CSS Membuat Text Shadow

CSS Membuat Text ShadowCSS 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
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
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
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...

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!!!

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.


Membuat Berbagai Shapes Dengan CSS

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...


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.