, bisnis internet sukses, uang, rupiah, dollar
Browse » Home » » 2/9 SYSTEM OF BLOG

2/9 SYSTEM OF BLOG

Sponsored By: sharepaste

usahaberhasil.com, bisnis internet sukses, uang, rupiah, dollar usahaberhasil.com, bisnis internet sukses, uang, rupiah, dollar usahaberhasil.com, bisnis internet sukses, uang, rupiah, dollar

2/9 SYSTEM OF BLOG


     
    SYSTEM OF BLOG    
   
Kumpulan Button Keren Css3
February 8, 2012 at 10:44 PM
 
button css3
Assalamualaikum Wr. Wb . . .
Alhamdulilah yah akhirnya bisa update tutorial lagi kali ini saya akan share Kumpulan Button Keren Css3 Button ini di buat dengan Css3 dan saya temukan di css3framework dan anda gak usah pusing2 kalau ingin membuatnya karena disana sudah ada kode nya yang siap di download dan disini akan saya share lagi kodenya agar tidak hilang jika suatu saat nanti lupa, button dengan sentuhan css3 ini membuat suasana button berbeda dari biasanya, namanya jgua css3 hehehe ok dari pada bingung silahkan lihat demo nya
Setelah melihat demo Awesome Button With Css3 sekarang mari kita terapkan di blog abang - eneng semua.
  1. Masuk di blog anda
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari Kode ]]></b:skin>
  5. Lalu Simpan kode Di bawah ini di Atas kode ]]></b:skin>

.button {
    display: inline-block;
    height: 27px;
    border: 2px solid #333;
    outline: 0;
    margin: 4px 6px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 13px;
    line-height: 27px;
    text-shadow: 1px 1px 1px #FFF;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.2), 0 0 4px rgba(255, 255, 255, 0.5);
    background-color: #e0e0e0;
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f7edff), color-stop(1, #b1b1b1));
    background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
    background-image: -o-linear-gradient(top, #f7edff, #b1b1b1);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f7edff, EndColorStr=#b1b1b1)";
    background-image: linear-gradient(top, #f7edff, #b1b1b1);
    -webkit-background-clip: padding;
    background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
    }
.button:link, .button:visited, .button:hover {
    color: #444;
    text-decoration: none
    }
.button:hover, .button:focus {
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-linear-gradient(top, #f5f5ff, #999);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f5ff), color-stop(1, #999));
    background-image: -moz-linear-gradient(top, #f5f5ff, #999);
    background-image: -o-linear-gradient(top, #f5f5ff, #999);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5ff, EndColorStr=#999)";
    background-image: linear-gradient(top, #f5f5ff, #999)
    }
.button:active {
    position: relative;
    top: 1px;
    -webkit-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5);
    -moz-box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5);
    box-shadow: inset 0 0 8px rgba(80, 80, 80, 0.5)
    }
.big {
    font-size: 17px;
    height: 38px;
    line-height: 38px;
    padding-left: 23px;
    padding-right: 23px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
    }
.small {
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #333;
    padding-left: 8px;
    padding-right: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
    }
.disabled {
    border-color: #CCC;
    background: #e0e0e0;
    color: #CCC;
    cursor: default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70)
    }
.disabled:hover, .disabled:active, .disabled:focus {
    top: 0;
    background: #e0e0e0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
    }
.blue:link, .blue:visited, .red:link, .red:visited, .green:link, .green:visited, .orange:link, .orange:visited, .purple:link, .purple:visited, .black:link, .black:visited {
    color: #FFF;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6)
    }
.blue {
    border-color: #003b80;
    background-color: #004ca3;
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-linear-gradient(top, #006ce8, #004ca3);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #004ca3));
    background-image: -moz-linear-gradient(top, #006ce8, #004ca3);
    background-image: -o-linear-gradient(top, #006ce8, #004ca3);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#004ca3)";
    background-image: linear-gradient(top, #006ce8, #004ca3)
    }
.blue:hover, .blue:focus {
    background-color: #003b80;
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-linear-gradient(top, #006ce8, #003b80);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006ce8), color-stop(1, #003b80));
    background-image: -moz-linear-gradient(top, #006ce8, #003b80);
    background-image: -o-linear-gradient(top, #006ce8, #003b80);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#006ce8, EndColorStr=#003b80)";
    background-image: linear-gradient(top, #006ce8, #003b80)
    }
.red {
    border-color: #b50000;
    background-color: #d00000;
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000);
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000);
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000);
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000);
    background-image: -webkit-linear-gradient(top, #F33, #d00000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #d00000));
    background-image: -moz-linear-gradient(top, #F33, #d00000);
    background-image: -o-linear-gradient(top, #F33, #d00000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#d00000)";
    background-image: linear-gradient(top, #F33, #d00000)
    }
.red:hover, .red:focus {
    background-color: #b50000;
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000);
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000);
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000);
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000);
    background-image: -webkit-linear-gradient(top, #F33, #b50000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F33), color-stop(1, #b50000));
    background-image: -moz-linear-gradient(top, #F33, #b50000);
    background-image: -o-linear-gradient(top, #F33, #b50000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#F33, EndColorStr=#b50000)";
    background-image: linear-gradient(top, #F33, #b50000)
    }
.green {
    border-color: #279100;
    background-color: #2ead00;
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-linear-gradient(top, #3fed00, #2ead00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #2ead00));
    background-image: -moz-linear-gradient(top, #3fed00, #2ead00);
    background-image: -o-linear-gradient(top, #3fed00, #2ead00);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#2ead00)";
    background-image: linear-gradient(top, #3fed00, #2ead00)
    }
.green:hover, .green:focus {
    background-color: #279100;
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-linear-gradient(top, #3fed00, #279100);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3fed00), color-stop(1, #279100));
    background-image: -moz-linear-gradient(top, #3fed00, #279100);
    background-image: -o-linear-gradient(top, #3fed00, #279100);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#3fed00, EndColorStr=#279100)";
    background-image: linear-gradient(top, #3fed00, #279100)
    }
.orange {
    border-color: #da7c0c;
    background-color: #faa51a;
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-linear-gradient(top, #faa51a, #f47a20);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #f47a20));
    background-image: -moz-linear-gradient(top, #faa51a, #f47a20);
    background-image: -o-linear-gradient(top, #faa51a, #f47a20);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#f47a20)";
    background-image: linear-gradient(top, #faa51a, #f47a20)
    }
.orange:hover, .orange:focus {
    background-color: #da7c0c;
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #faa51a), color-stop(1, #da7c0c));
    background-image: -moz-linear-gradient(top, #faa51a, #da7c0c);
    background-image: -o-linear-gradient(top, #faa51a, #da7c0c);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#faa51a, EndColorStr=#da7c0c)";
    background-image: linear-gradient(top, #faa51a, #da7c0c)
    }
.purple {
    border-color: #609;
    background-color: #ca00d1;
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #aa00b0));
    background-image: -moz-linear-gradient(top, #ca00d1, #aa00b0);
    background-image: -o-linear-gradient(top, #ca00d1, #aa00b0);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#aa00b0)";
    background-image: linear-gradient(top, #ca00d1, #aa00b0)
    }
.purple:hover, .purple:focus {
    background-color: #609;
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-linear-gradient(top, #ca00d1, #609);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ca00d1), color-stop(1, #609));
    background-image: -moz-linear-gradient(top, #ca00d1, #609);
    background-image: -o-linear-gradient(top, #ca00d1, #609);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#ca00d1, EndColorStr=#609)";
    background-image: linear-gradient(top, #ca00d1, #609)
    }
.black {
    border-color: #000;
    background-color: #333;
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333);
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333);
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333);
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333);
    background-image: -webkit-linear-gradient(top, #666, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #333));
    background-image: -moz-linear-gradient(top, #666, #333);
    background-image: -o-linear-gradient(top, #666, #333);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#333)";
    background-image: linear-gradient(top, #666, #333)
    }
.black:hover, .black:focus {
    background-color: #000;
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000);
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000);
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000);
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000);
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#666, EndColorStr=#000)";
    background-image: linear-gradient(top, #666, #000)
    }
.arrow, .heart, .star {
    padding-left: 12px
    }
.arrow:before, .heart:before, .star:before {
    padding-right: 5px;
    vertical-align: -15%
    }
.arrow:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NpwuZsKD2lCvl_ZWbGyyG2FKZ4LO5h0wTczQA8L5k9risSNGv4PR8gXBuGZ_3QSD4MCrDN70P90IfdyviGeK_cPLWCpxSt34tGOd8SU8HSIqlXqKuSxXc5JCfS7rtIzmW6ytZZeReMw/s1600/up+green.png)
    }
.heart:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPXt6_t13YCWRQ9i03GNZNhQUH0mj-BHISozlKKMI3iYhvIm_3dSiqV3h_r_6tXmwqmKHK7ZQA44RqkWfSIbBs497IaJrO7OIZ8iQ5w2P8vUOz7V6gp3frOmjUyeVwFE9zQbB4R74F5Do/s1600/heart.png)
    }
.star:before {
    content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpW2hd-tT4mI5weXYIPDlTgrkqcXle3X9nT1t1hsjkyY9rc1yahVP5AY7K-NeAmiDlokdk6sOdPzCj3OI81VDR0lP9tXCUFPJIMks-378nZr-ZkYlNK-jWna5emY3ELNSPrlUfdS8dfI8/s1600/star.png)
    }
Ok setelah di Copy silahkan gunakan button nya dengan cara di bawah ini, yaitu dengan menambahkan kode seperti ini
<a href="#" class="button big">Button Besar</a>
Ok silahkan simpan jangan lupa tanda # ( pagar ) ganti dengan URL / Link Anda, dan perhatikan kode yang berwarna merah jika anda ingin mengganti nya misalnya dengan button warna merah silahkan anda ganti tulisan big dengan red mengapa kode CSS nya panjang karena pada kode itu sudah lengkap semua button nya seperti yang ada pada DEMO itu, nah jika anda ingin mengganti style button nya silahkan ganti kode berwarna merah dengan pilihan kode di bawah ini ( ada 12 kode )
  1. big
    2. ( button besar )
  2. small
    3. ( button kecil )
  3. blue
    4. ( button biru )
  4. red
    5. ( button merah )
  5. green
    6. ( button hijau )
  6. orange
    7. ( button oren )
  7. purple
    8. ( button ungu )
  8. disabled
    9. ( button disable )
  9. star
    10. ( button bintang )
  10. heart
    11. ( button love )
  11. arrow
    12. ( button download )
  12. gray
    13. ( button hitam )

Nah itu Dia Style button - button css3 nya jadi silahkan pilih salah satu, atau anda ingin gunakan 2 juga bisa atau semua sekaligus juga bisa, hehehehe jadi kalau anda mau ganti tampilan button nya silahkan ganti kode berwarna Merah dengan 12 style yang sudah di sediakan, dan cara menggunakannya anda bisa gunakan di postingan dan juga di sidebar jika di postingan silahkan beralih dari mode compose ke modem edit html jika di sidebar silahkan klik tambah gadget lalu pilih html/javascript dan ingat kode nya harus seperti di bawah ini
<a href="#" class="button big">Button Besar</a>
karena pada kode itu sudah ada tambahan class nya, jadi kalau classnya hilang ya otomatis button nya tidak akan tampil jadi kodenya harus seperti itu ok segitu saja semoga bermanfaat
Media Files
button-css3.jpg (JPEG Image)
   
   
Tugas kimia materi polimer dan lipid
February 8, 2012 at 2:56 PM
 
smkn 1 bone-bone
Assalamualaikum Wr. Wb . . .
Postingan kali ini saya gak membahas tutorial tapi akan membahas tugas saya yaitu mencari materi kimia polimer dan lipid setelah ubek - ubek Google akhirnya aku temuin juga materinya, nah buat temen - temen saya khusus nya di SMKN1 BONE - BONE, mungkin inilah tugas terakhir kita karena gak lama lagi kita ujian kata guru - guru sih tanggal 16 februari 2012 ini, udah deket banget tuh, nah dari pada bingung nyari materinya kesana kemari kayak Ayu ting ting hahahhahahhaha semoga materi yang saya kumpulkan bermanfaat bagi temen - temen, jadi gak repot - repot lagi ok bro, silahkan download materinya di bawah ini,
Download Materi Polimer

Download Materi Polimer
Hemmmm kadang2 saya suka merenung gimana ya nanti kedepannya karena kelas kita sudah kelas 3 dan pasti sebentar lagi mau Lulus ( Amin ) pasti gak bisa ngumpul - ngumpul lagi nih ma temen2 yang jail, nakal, dll. dan mungkin tulisan ini akan menjadi kenangan masa SMK.
Media Files
logosmk.jpg (JPEG Image)
   
   
Membuat Blogroll Keren Dengan CSS3
February 7, 2012 at 1:03 PM
 
Blogroll cantik css3
Assalamualaikum Wr. Wb . . .
Blogroll Keren Dengan CSS3, dari pada gak ada buat update postingan mending aku share Blogroll yang saya buat iseng - iseng saja buat ngisi waktu setelah di fikir lumayan buat di share siapa tau ada yang mau menggunakannya gak ada juga gak apa - apa dari pada gak update blog hehehhehee Blogroll ini serba CSS3 Karena box shadow, border-radius dan juga background RGBA yang mampu membuat warna transparan Contoh nya sih persis seperti screenshot di atas tapi biar gak penasaran langsung aja liat DEMO nya
Mau di Bilang Widget Blogroll Keren Dengan CSS3 juga gak cocok, kalau menurut yang baca postingan ini cocok gak di bilang widget . . .?? gak cocok kan. . .?? jawab nya di kotak komen aja lah hehehhee ok langsung saja ambil kode nya di bawah ini,
<div class='widgetSystem'>
<div class='nama'>Link List</div>
<div class='kulit'>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
<li><a href='URL anda'>System of blog</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 96%;
    padding: 5px;
    background: #DDD url(http://1.bp.blogspot.com/-reD45_z2_oA/TvxN8wjYa3I/AAAAAAAABLY/Aq5cUurE1F0/s300/7aee702ddd6dd0_full.jpg) no-repeat;
    margin: 5px auto;
    border: 1px solid #00f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #00f;
    -moz-box-shadow: 0 0 1px 1px #00f;
    box-shadow: 0 0 1px 1px #00f
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: #fd64b1;
    background: rgba(255, 0, 128, 0.6);
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem .kulit {
    background: #f379b2;
    background: rgba(255, 0, 128, 0.5);
    height: 250px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 5px;
    background: #C71585;
    background: rgba(199, 21, 133, 0.7);
    padding: 5px;
    display: block;
    color: #BBB;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s
    }
.widgetSystem a:hover {
    background: #1E90FF;
    color: #0000CD
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>
Silahkan sesuaikan sendiri kalau menurut anda kurang menarik mau ganti warnanya silahkan, pokokx ganti aja sepuas - puasnya dah hahhahahaa baca juga Cara membuat Link Keren Dengan CSS semoga bermanfaat
Media Files
widget-link-list.jpg (JPEG Image)
   
   
Membuat Url / Link Lebih Keren Dengan Css
February 6, 2012 at 11:22 PM
 
Assalamualaikum Wr. Wb . . .
Membuat Link Keren Dengan Sentuhan CSS kali ini kita membahas CSS Lagi setelah sebelumnya membahas tentang Rahasia url gambar di blogspot / blogger dan juga Caption image with css3 and jquery, nah sekarang ada yang baru nih meskipun kodenya sudah cukup lama juga sih, tapi belum di bahas oleh para blogger jadi sekarang aku post nih trik nya walaupun hanya trik sederhana sih hehehehe namanya juga belajar semua pelajaran yang saya tau selalu saya sisipkan di blog ini karena sebagai pengingat di saat saya lupa, oklah kita lanjut, maksud dari membuat link keren dengan css ini adalah link yang sudah kita beri nama misalnya system of blog maka tidak akan ada tambahan lain selain nama system of blog nah setelah Link kita modif dengan css ini, maka secara otomatis akan ada di sampingnya URL dari Nama System Of Blog Tersebut, dan urlnya adalah http://sin1aja.blogspot.com/ nah seperti apa modelnya coba lihat screenshot di bawah ini
Cool Link With CSS
Coba anda perhatikan secara detail penjelasan dari gambar di atas, Udah Ngerti belum. . .?? kalau belum aku jelasin lagi, jadi itu url yang http://sin1aja.blogspot.com/ akan tampil otomatis di samping nama Link, jadi anda tidak usah repot - repot lagi kalau mau menuliskan URL secara manual karena dengan kemampuan CSS ini URL nya akan tampil sendiri.
nah jika anda masih bingung juga silahkan cek DEMO nya
Nah udah liat kan DEMO - nya mudah - mudahan anda sudah mengerti ok cara membuatnya mudah banget silahkan paste kode di bawah ini di blog anda
<div class='sin1aja_blogspot_com'>
<a href="http://sin1aja.blogspot.com/">SYSTEM OF BLOG</a><br />
<a href="http://rawamangun18.blogspot.com/">BLOG DEMO</a><br />
<a href="http://blogazine7.blogspot.com/">ZIN - ZINE</a><br />
<a href="http://1000pikiran.blogspot.com/">G-ZINE 7</a><br />
</div>
<style type="text/css">
.sin1aja_blogspot_com {
padding:5px;
}
.sin1aja_blogspot_com a {
color:#eee;
text-decoration:none;
}
.sin1aja_blogspot_com a:after {
content: " ( " attr(href) " )";
color:#ddd;
}
</style>
Jika anda ingin simpan di sidebar silahkan anda klik
Rancangan + Tambah gadget + Pilih HTML/Javascript + paste kodenya di kotak bagian bawah
Jika anda ingin simpan di postingan silahkan anda beralih dari mode Compose ke Mode Edit HTML setelah itu paste kode nya. jangan lupa ganti warna merah dengan URL link anda dan juga jangan lupa judul nya ganti, dan satu lagi itu kode berwarna hijau adalah kode warna link dan juga kode warna URL yg muncul, untuk mengganntinya silahkan lihat kode warna
Media Files
Link-keren.jpg (JPEG Image)
   
   
Caption on image with css3 n jquery
February 4, 2012 at 10:54 PM
 
cewek
Membuat keterangan pada gambar dengan CSS3 dan jquery, pembuatan Caption pada gambar dengan jquery ini, membuat suasana gambar tampak indah dan berbeda dengan sentuhan jquery semua terasa lebih indah apalagi dengan tambahan CSS3 pasti lebih menarik seperti apa bentuk nya silahkan simak demonya
Silahkan sorot gambar yang ada di postingan tersebut dan lihat Effect Caption yang keluar nah seperti itulah efek caption nya, bagus gak menurut agan. . . .? ok setelah puas melihat demo Caption image with css3 and jquery sekarang mari segera terapkan di blog anda masing2
  1. Masuk di blog anda / Log in
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari Kode </head>
  5. Letakan Script / kode di bawah ini di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
    $('div.demo').hover(function() {
       // Set the z-index to 10, so the description will always appear on the top
       $(this).css('z-index', 10).find('div.demohover').delay(200).slideDown('slow');
    }, function() {
        $(this).find('div.demohover').slideUp('slow', function() {
            // Set the z-index to it's default when mouseleave
            $(this).parent().css('z-index', 1);
        });
    });
});
</script>
Nah setelah script nya di simpan silahkan cari kode ]]></b:skin> Lagi Lalu simpan kode di bawah ini di atas kode ]]></b:skin>
.demo {
  position:relative;
  float:left;
  width:180px;
  height:128px;
  margin:10px;
  background-color: #0a0;
  border:1px solid #060;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  box-shadow:0px 1px 2px rgba(0,0,0,0.2);  
}
.demo img {
  width:160px;
  height:109px !important;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;  
}
.demo .demohover {
  width:190px;
  height:auto;
  background-color: #0C0;
  -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  position:absolute;
  top:-5px;
  left:-5px;
  display:none;
}
.demo .demohover h2 {
  font:bold 14px Agency FB,Arial,Sans-Serif;
  color:#222;
  margin:128px 10px 5px;
  text-transform:uppercase;
}
.demo .demohover p {
  margin:0px 10px 10px;
  font:normal 12px Arial,Arial,Sans-Serif;
}
Nah sekarang Langkah terakhir yaitu pemanggilannya caranya cukup mudah anda tinggal pilih mau di letakan dimana jika di postingan maka silahkan anda buat entri baru lalu beralih dari Mode Compose ke Mode Edit HTML lalu jika anda ingin gunakan di sidebar silahkan anda masuk di
  1. Rancangan
  2. Klik Tambah Gadget
  3. Klik HTML/Javascript
  4. paste script / kode di bawah ini,, di kotak ke dua ( kotak bagian bawah )
<div class="demo">
   <div class="demohover">
       <h2>Cewek Semok Abis</h2>
       <p>
<strong>Foto - Foto Seksi ABG,</strong> ABG semok ada yang mau. . .??
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>
<div class="demo">
   <div class="demohover">
       <h2>Koleksi Foto Cewek Imut</h2>
       <p>
<strong>Foto Cewek Cantik Berjilbab</strong> Bagi yang mau lihat koleksi foto lainnya klik <a href='http://sin1aja.blogspot.com/2010/11/cewek-imut-berjilbab.html' target='_blank'>disini</a>
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>
<div class="demo">
   <div class="demohover">
       <h2>Korea Lover's</h2>
       <p>
<strong>Foto Seksi Cewek Korea</strong> Bagi yang mau lihat koleksi foto cewek korea lainnya klik <a href='http://sin1aja.blogspot.com/2010/11/foto-cewek-imut-korea.html' target='_blank'>disini</a>
       </p>
   </div>
   <img src="Disini URL gambar" alt="deskripsi gambar" />
</div>
Sedikit penjelasan lagi, jika anda letakan di sidebar maka gambarnya cukup 2 atau 1 saja karena sidebar kan kecil jadi kalau banyak - banyak gambar yang di muat maka akan kelihatan kurang rapi, nah untuk anda yang ingin menggunakan di postingan silahkan gunakan sebanyak - banyaknya sesuai keinginan anda, nah jika anda ingin menambahkan gambarnya lagi silahkan anda perhatikan kode seperti ini
<div class="demo"> <!--ini kode awal -->
   <div class="demohover">
       <h2>Cewek Semok Abis</h2>
       <p>
<strong>Foto - Foto Seksi ABG,</strong> ABG semok ada yang mau. . .??
       </p>
   </div>
    <img src="Disini URL gambar" alt="deskripsi gambar" />
</div> <!--ini kode akhir atau penutup -->
Jadi jika anda ingin tambahkan image / gambar nya silahkan anda tambahkan kode seperti itu lagi dan jika ingin mengurangi silahkan hapus kode seperti itu, perhatikan kode Awal dan kode penutup nya, karena itu yang sangat penting, nah jika sudah silahkan Anda Simpan dan lihat hasilX,Sumber
Media Files
contoh.jpg (JPEG Image)
   
   
Rahasia URL gambar di blogspot
February 2, 2012 at 7:48 PM
 
rahasia url gambar di blogger / blogspot
Rahasia url gambar di blogspot / blogger, ketika waktu itu selesai meng-upload gambar di blogspot / blogger, aku sedikit heran waktu menCopy URL gambar nya, kenapa kok jadi kecil padahal gambar yang saya upload tadi berukuran besar, sebenarnya blogspot / blogger telah mengubah gambar kita ke berbagai ukuran mulai dari paling kecil yaitu 10 x 8 sampai dengan yang terbesar yaitu ukurang asli dari gambar tersebut nah terus rahasia tentang url gambar di blogger itu yang mana. . . ? tenang gan ini dia rahasia nya,jadi mari kita perhatikan baik - baik url gambar di bawah ini jangan sampai salah ya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1kAgK6xgnr2v_MSy-43XecllSGOPiFmOPZfmQpIbZCUP12PF4S9Ka6YG1Hzk5bN2nQF-d_aj9R49Wl1vzNIakQHEFhEXzbHwnw1jOi4NKU4rJiHLcD0puwq0A8kRcfeeBzGyQdzDX7U/s320/cewek%2Bcantik.jpg

itu adalah url dari gambar di bawah ini
cewek cantik
ok mari kita mulai membuka rahasia nya, coba agan2 lihat kode yang saya beri warna Merah, disana lah letak rahasia nya, awalnya juga saya iseng" dan cuman ngetes aja tapi ternyata berhasil, ok sekarang coba anda buka url tersebut dan lihat ukuran gambarnya yupss ukurannya 320 x 240 bukan. . . .?? nah sekarang coba anda rubah angka 320 dengan angka 120 jadi url nya seperti ini
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1kAgK6xgnr2v_MSy-43XecllSGOPiFmOPZfmQpIbZCUP12PF4S9Ka6YG1Hzk5bN2nQF-d_aj9R49Wl1vzNIakQHEFhEXzbHwnw1jOi4NKU4rJiHLcD0puwq0A8kRcfeeBzGyQdzDX7U/s120/cewek%2Bcantik.jpg
Nah maka gambar nya akan mengecil lagi kan. . .? itu ukuran kecil nya, anda juga bisa merubahnya menjadi 400 atau berapapun yang anda mau, jika anda rubah ke nilai yang lebih besar maka gambarnya akan membesar tapi tidak akan melampaui ukuran aslinya, dan jika anda ingin melihat ukuran asli dari gambarnya anda bisa rubah angkanya menjadi 1600 maka akan muncul ukuran asli dari gambar tersebut gak percaya . . ? silahkan di coba sendiri. saya sengaja memposting seperti ini karena jika gambar anda terlalu besar maka akan memberatkan loading blog anda, jadi ini juga salah satu trik meringankan blog yaitu dengan mengubah ukuran gambar asli nya, nah jika anda ingin ringan maka gunakan URL gambar yang angkanya telah di rubah ke 120 atau 220 jadi begini nanti URL nya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1kAgK6xgnr2v_MSy-43XecllSGOPiFmOPZfmQpIbZCUP12PF4S9Ka6YG1Hzk5bN2nQF-d_aj9R49Wl1vzNIakQHEFhEXzbHwnw1jOi4NKU4rJiHLcD0puwq0A8kRcfeeBzGyQdzDX7U/s220/cewek%2Bcantik.jpg
karena URL setiap ukurang berbeda jadi gunakan saja ukuran yang kecil dan berikan tautan pada gambar tersebut ke URL gambar yang asli nya yaitu angkanya 1600 jadi begini nanti URL nya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1kAgK6xgnr2v_MSy-43XecllSGOPiFmOPZfmQpIbZCUP12PF4S9Ka6YG1Hzk5bN2nQF-d_aj9R49Wl1vzNIakQHEFhEXzbHwnw1jOi4NKU4rJiHLcD0puwq0A8kRcfeeBzGyQdzDX7U/s1600/cewek%2Bcantik.jpg
Jadi intinya jika blog ingin ringan gunakan saja URL gambar yang ukurannya kecil ok sekian dari saya dan semoga bermanfaat. jika ragu langsung saja cek URL2 di atas buka satu satu.
Media Files
ss.jpg (JPEG Image)
   
   
Teks Transparan Dengan CSS3
February 2, 2012 at 3:49 AM
 
Teks Transparan Dengan CSS3
Teks Transparan Dengan CSS3, ini mampu memberi kehidupan di dalam seni teks hehhehe ( sok seni segala hehehe), Teks Transparan Dengan CSS ini juga terlihat lebih indah menurut saya dengan style2 yang bisa di kembangkan lebih lanjut oleh anda - anda semua yang membaca postingan ini, ok dari pada bersusah - susah membaca tulisan saya mending kita bersenang - senang melihat DEMO nya, lihat demonya di bawah ini
Pastikan Peramban anda mendukung CSS3 karena di DEMO semua serba CSS3 sesuai dengan teks yang ada di dalam nya yaitu serba css3 moga - moga aja browser anda bisa melihat secara modern, agar demo nya terlihat secara sempurna dan atraktif.
karena di demo saya lengkapi dengan efek transition agar pergerakan teks yang ber-background kuning itu lebih lembut dan halus hehehheehe kayak kulit aja halus, kode warna pada teks yang di gunakan adalah kode warna RGBA ( red, green, blue, alpha ) jadi jika anda ingin gunakan pada teks silahkan gunakan kode warna RGBA di bawah ini di dalam Class css anda,
color:rgba(255, 255, 255, 0.5);
itu adalah kode warna putih, untuk mencari kode warna RGBA silahkan ke css3 generator, nah di menu drop down nya silahkan pilih RGBA dan tuliskan di sana kode warna dan opacity nya contoh opacity nya yaitu yang 0.5, sebenarnya kalau gak mau repot silahkan lihat kode warna RGB di Photoshop, dan nanti saat anda ingin memberi efek alpha atau opacity nya silahkan ganti saja teks RGB dengan RGBA dan tambahkan opacity di belakang nya jadi jika kode warna RGB biasa seperti ini
color:rgb(255, 255, 255);
Dan setelah anda rubah teks RGB ke RGBA maka kodenya juga harus ada tambahan nya yaitu efek opcity nya dan kodenya pun akan jadi seperti di bawah ini
color:rgba(255, 255, 255, 0.5);
anda lihat kan kode warna merah yang 0.5 itu yang bikin efek transparan pada teks, kode RGBA juga bisa di buat untuk background silahkan utak atik sendiri nanti hehehe semoga sedikit postingan ini bisa menambah referensi anda dalam mendalami CSS dan semoga bermanfaat buat anda semua sekian / wassalam
Media Files
teks-transparan.jpg (JPEG Image)
   
   
Menseleksi link eksternal dengan css
January 30, 2012 at 11:25 PM
 
icon di samping link eksternal
Menseleksi link eksternal dengan css, jika anda bingung dengan artinya bisa juga di katakan seperti ini Menandai link eksternal dengan css, apa fungsi nya. . . .?
sebenarnya fungsi ini sama dengan fungsi, menambah icon di setiap link eksternal dengan jquery, tapi yang akan kita buat kali ini hanya dengan menggunakan CSS saja, jadi bisa di bilang menambah icon di setiap link eksternal dengan css, yang belum paham link eksternal akan saya jelaskan sedikit, link eksternal itu adalah link yang terbuka di tab baru, jadi nanti semua link yang terbuka di tab baru, yang ada di blog anda, maka akan otomatis ada icon di samping nya, contohnya ada di bawah ini,
itu adalah contoh link eksternal yang dimana jika di klik akan terbuka di tab baru, nah coba agan2 lihat di samping link tersebut terdapat icon tanda panah yang merupakan tanda bahwa link tersebut akan terbuka di tab baru, nah untuk mendapatkan icon tersebut kita hanya perlu menambahkan sedikit kode CSS, caranya :
  1. Log in di blog anda
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari kode ]]></b:skin>
  5. lalu simpan kode di bawah ini di atas kode ]]></b:skin>
a[target="_blank"]:after,
a[target="new"]:after {
margin:0 0 0 3px;
padding:1px;
color:#333;
content: "\279C";
} 
Nah setelah itu klik SIMPAN TEMPLATE, Dan Coba lihat link - link eksternal yang ada di blog agan2 semua, apakah sudah ada iconX atau belum. semoga bermanfaat. wassalam
Media Files
seleksi-link-external.jpg (JPEG Image)
   
   
Percantik sidebar anda dengan box shadow
January 28, 2012 at 12:19 AM
 
box shadow inset
Assalamualaikum Wr. Wb . . .
Kali saya akan membahas tentang sidebar di blog kita, jika sidebar anda biasa - biasa saja, semoga dengan tutorial ini bisa Mempercantik sidebar anda hemmmm sebenarnya kita hanya akan menambahkan box shadow inset ke dalam sidebar anda, jadi sidebar akan lebih cantik / ganteng semua nya hehehhee tanpa banyak ngomel silahkan langsung coba ke blog anda.

  1. Log In ke blog anda
  2. Klik Rancangan
  3. Klik Edit Html
  4. Cari kode #sidebar-wrapper
  5. Bentuk kode #sidebar-wrapper itu biasa nya seperti ini
#sidebar-wrapper {    /* ini namaX tag pembuka CSS */
   . . . . . . . .
    /* sengaja saya beri titik - titik karena biasanya kode yang ada disini di setiap template berbeda */
    }   /* ini tag penutup CSS nya */
Ok kalau sudah ketemu tambahkan kode di bawah ini sebelum tag penutup css nya.
-webkit-box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
Jadi nanti kode nya seperti di bawah ini :
#sidebar-wrapper {    /* ini  tag pembuka CSS */
   . . . . . . . .
-webkit-box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}   /* ini tag penutup CSS nya */
Setelah itu simpan kode nya dan lihat sidebar anda. semoga postingan sidebar dengan efek box shadow ini bermanfaat wassalam

Note : hampir Lupa kode warna Merah yang 10px itu silahkan perbesar nilainya agar kelihatan lebih ke dalam box shadow nya.
Media Files
box-shadow.png (PNG Image)
   
   
Teknologi HZO Membuat Ponsel Anti Air
January 27, 2012 at 1:55 PM
 
ponsel anti air
Sebuah teknologi terbaru yang bernama HZO mampu membuat ponsel anti-air, baik secara internal maupun eksternal dari ponsel tersebut. Teknologi ini pertama kali dipertontonkan ke khalayak umum pada gelaran CES 2012 yang baru saja berakhir, di mana produsen teknologi ini, mempertontonkan ponsel yang direndam ke dalam sebuah akuarium ikan.
Teknologi ini tidak seperti teknologi anti-air yang sebelumnya sudah diperkenalkan oleh beberapa produsen ponsel, di mana yang anti-air hanya bagian luar ponsel. Pemakaian teknologi HZO ini dilakukan pada setiap tahap produksi ponsel, melapisi setiap bagian internal dari ponsel, bahkan sampai ke bagian terkecil yang ada di ponsel.

Perusahaan yang membuat teknologi HZO ini mengklaim kalau teknologi mereka mampu melapisi setiap bagian dari ponsel sampai ke molekul-molekul yang membentuknya. Kalau klaim ini benar, maka bila ponsel kalian terbungkus dengan molekul nano HZO maka kalian tidak perlu khawatir kalau-kalau ponsel kalian tidak sengaja tersiram minuman atau bahkan tidak sengaja terjatuh ke dalam kolam. Salah seorang perwakilan dari perusahaan yang memproduksi HZO ini mengatakan kepada Pocket Lint."Kami telah menunjukkan teknologi kami ke hadapan Petinggi Samsung, di mana kami membuat Galaxy S yang telah dilengkapi molekul nano HZO dan dia tidak percaya dengan apa yang dia lihat,"ujarnya. Petinggi Samsung tersebut sangat takjub dengan teknologi HZO yang kami perkenalkan. HZO juga mengatakan kalau pihaknya sudah berbicara dengan Apple dan menyatakan kalau ponsel generasi berikutnya mungkin akan anti-air.

Source / Sumber
Media Files
2012%2BHZO-air.jpg (JPEG Image)
   
   
Border transparan keren dengan css
January 25, 2012 at 1:21 PM
 
abg cantik
Assalamualaikum Wr. Wb . . .
Border transparan dengan css ini terbentuk saat saya lagi iseng - iseng gak ada kerjaan jadi mending coba - coba aja nge-buat border transparan dan ternyata bisa, bersyukur banget bisa jadi bisa buat update postingan hari ini. border ini beda Loh, kalau border biasa kan berada di luar gambar nah kalau border ini berada di dalam gambar tapi dengan ukuran yang sesuai agar gambar juga terlihat cantik / ganteng hehhehee jika penasaran langsung saja lihat demo nya
Perhatikan gambar yang berada di kiri dan kanan itu memakai border transparan yang ada di dalam gambar, sedangkan gambar yang di tengah menggunakan border biasa yang berada di luar gambar, perhatikan baik - baik siapa tau nanti agan2 kira sama, padahal beda. di gambar itu juga sengaja saya beri box shadow yang inset ( masuk ) biar keliatan fresh gambarnya ini menurut saya, gak tau kalau menurut agan2 beda hehehhee. ok kalau dah liat perbedaanX mari kita bersemedi sama - sama etss memulai tutorialx maksud nya gan.
  1. Log in / masuk di blogg anda.
  2. Klik Rancangan
  3. Klik Tambah gadget
  4. Pilih HTML/Javascript
  5. masukan kode di bawah ini di kotak bagian bawah
<div class="system-of-blogYow"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidSyRI0gkl5kZrr46ze7toJvsBsyR_5BaIARddnH93RIGJWJ-pYxMxk5YS5NrtctBYhOYUfMoTbk_optpzDsvBnzkUw-ZuapEon9DalRmZK0SDnSzfm1lTiDRaZz02WjdFfSlJ_UKYe28/s1600/cosplay-girls-japanese.jpg' width='200' height='270'/></div>
<style type="text/css">
.system-of-blogYow {
    width: 200px;
    height: 270px;
    float: left;
    border: 1px solid rgb(30, 144, 255);
    -webkit-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    -moz-box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    box-shadow: 0 0 5px 1px rgb(30, 144, 255);
    }
.system-of-blogYow:before {
    content: "";
    position: absolute;
    border: 15px solid rgba(30, 144, 255, 0.5);
    width: 170px;
    height: 240px;
    -webkit-box-shadow: inset 0 0 45px #F0F;
    -moz-box-shadow: inset 0 0 45px #F0F;
    box-shadow: inset 0 0 45px #F0F;
    }
</style>
Perhatian, sedikit penjelasan tentang kode yang saya beri warna,
Kode Berwarna biru silahkan ganti dengan url gambar anda.
Kode Berwarna biru ( warna biru ke dua ) anda harus samakan tinggi dan lebarnya.
Kode Berwarna merah lebar dan tinggi elemen bordernya, tinggi dan lebarnya lebih kecil agar bordernya berada di dalam gambar, jadi jika anda rubah kode 200px dan juga 270px silahkan anda sesuaikan juga kode berwarna merah tersebut agar kelihatan indah.
Sekian dan semoga bermanfaat, wassalam
Media Files
demo+cantik.png (PNG Image)
   
   
Template blogazine for you
January 24, 2012 at 1:43 PM
 
سْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Assalamualaikum Wr. Wb . . .
Download template blogazine, Untuk Anda, Template ini buatan bang Andre Pandet Rank Khoerai, dan template yang di buat nya baru ll semoga ada lagi selanjutnya dan selanjutnya dan ini free / gratis dan semoga dengan adanya template ini bisa menambah jumlah pengguna blogazine di tanah airQ indonesia ini hehehehehe


Dan Yang kedua di bawah ini modelX mirip FB mas / mbak bro hehheehe


Ok sedikit penjelasan tentang apa itu blogazine. . . .?
Blogazine adalah Konsep para blogger yang membuat tampilan setiap postnya berbeda, seperti layout setiap artikel di majalah, yang tiap layoutnya berbeda - beda, kurang lebih seperti itu. dan jika anda ingin tau caranya silahkan lihat post saya Cara menerapkan Blogazine di blogspot apa lagi dengan adanya template ini akan semakin mudah membuatnya.

Nah itu sedikit penjelasan tentang blogazine, dan sekarang silahkan simak instruksi yang di berikan oleh bang Andre Pandet Rank Khoerai,
Di template ini saya bikin lebar default postingan nya 780px dengan nama element .post-dalem{ jadi kalau sobat pengen mengubah ukuran post nya, sobat bisa otak atik css dari element .post-dalem{ contoh dengan ukuran penuh:
.post-dalem{
width:100%;
}
oh iya...ini sangat penting,template ini bermasalah dengan widget Entri Populer/Popular Posts,gak tahu kenapa widget ini menampilkan keseluruhan isi dari halaman postingan termasuk kode css,jadi klw kita ngotak ngatik css halaman postingan nya,di halaman depan nya juga terpangaruh.jadi diseandai nya sobat menggunakan widget Entri Populer/Popular Posts dari blogspot,setelah sobat menambakan widget tersebut silahkan sobat lansung ke edit HTML template jangan lupa centang dulu lalu cari kode ini :
<div class='item-snippet'><data:post.snippet/></div>
lalu sobat hapus kode tersebut dan selesai.
Ok semoga bermanfaat template Blogazine ini :)
Media Files
templta-blogazine.gif (GIF Image)
   
     
 
This email was sent to sharepaste.autopostmail@blogger.com.
Delivered by Feed My Inbox
PO Box 682532 Franklin, TN 37068 		Create Account
Unsubscribe Here Feed My Inbox
 
     
nah sekian itu artikel postingan tentang 2/9 SYSTEM OF BLOG semoga sharepaste dapat memberikan tebaik untuk anda , jangan lupa ada yang terkait tuh di bawah ini dan ada juga yang musti kamu baca lewat daftar isinya ^_^

Sponsored
usahaberhasil.com, bisnis internet sukses, uang, rupiah, dollar
Copyright 2012. All rights reserved. Check PageRank
Present by kackdir mata-update