Kamis, 05 September 2013

Animated Button with CSS3

8 Comments
Animated Button with CSS3

Pada tutorial blog sebelumnya kita sudah membahas tentang cara Membuat Seleksi Otomatis Pada Tag Blockquote, sekarang kita akan membuat Animated Button with CSS3. Button berguna untuk menyisipkan suatu link yang akan tertuju pada link tertentu.

Demo




Jika sobat ingin memasangnya pada blog sobat ikuti langkah berikut :

CSS
Copy kode dibawah ini di atas kode ]]></b:skin>
/* Animated Button with CSS3 */
.a-btn{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-text{
    padding-top:8px;
    display:block;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:15px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url("http://i.imgur.com/8LvvDUP.png") no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn:hover{
    padding-right:180px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.a-btn:hover .a-btn-slide-text{
    width:120px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}

HTML
Letakkan pada saat kita memposting
<a class="a-btn" href="#">
<span class="a-btn-text">Animated Button with CSS3</span>
<span class="a-btn-slide-text">DEMO</span>
<span class="a-btn-icon-right"><span></span></span>
</a>

Modifikasi sesuka hati sobat...
Semoga bermanfaat :)

Rabu, 04 September 2013

Membuat Seleksi Otomatis Pada Tag Blockquote

Add Comment
Pada tutorial sebelumnya admin sudah membahas tentang cara Membuat Efek Loading pada Form Komentar. Nah, tutorial sekarang kita akan membahas tentang cara Membuat Seleksi Otomatis Pada Tag Blackquote. Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode.

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

Seleksi Otomatis

Sebagai contoh penerapan seleksi otomatis ini, saya gunakan pada kode yang saya bagikan, sobat tinggal klik ganda, maka semua kode akan terseleksi. Saya menggunakan tag pre untuk semua kode yang saya bagikan. Bagi sobat yang menggunakan tag blockquote, untuk menerapkan seleksi otomatis ini, simpan kode dibawah ini sebelum </body>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
Sebetulnya script di atas tidak mutlak untuk tag blockquote, karena selektornya berupa blockquote maka hanya berlaku untuk tag blockquote.

Editing Script

Seperti saya jelaskan sebelumnya, script di atas berlaku untuk tag apapun, apabila sobat ingin menerapkan untuk tag pre, maka ganti blockquote pada baris ke 2, menjadi pre.

Pada script di atas, saya menggunakan klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.

Semoga bermanfaat...

Source

Selasa, 03 September 2013

Membuat Efek Loading pada Form Komentar

12 Comments
Efek Loading Form Komentar
Assalamu'alaikum dan selamat siang sahabat Greenz Blogger. Siang ini admin akan berbagi sedikit ilmu tentang cara Membuat Efek Loading pada Form Komentar. Mungkin beberapa dari sahabat Greenz Blogger udah tau dengan cara ini, tapi tidak ada salahnya admin ingin berbagi kepada sahabat Greenz Blogger yang belum tau caranya.

Screenshot

Membuat Efek Loading pada Form Komentar

Apabila ingin menerapkan cara ini di blog sahabat Greenz Blogger, silahkan ikuti langkah berikut ini :
  1. Login Blogger
  2. Klik Template >> Edit HTML
  3. Letakkan kode ini  diatas ]]></b:skin>
    4. #comment-editor {background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_Y9tmsXrrNJymBwR8tu85maNC_CjbeJvjthz25z9FofNOxoGoX9IxiJvW7ZWu_DtwCIj69Ix5QCbWR8_02WuihWmgP94b6f2c6fqqJp6fuPWUBLYvkJG6WDlufYeqx9MjeYU4Vzj4CMb/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}
  4. Simpan template
Sebenarnya cara di atas hanya memanipulasi background form komentar, sebelum memunculkan iframe. Apabila sobat ingin mengganti efek loadingnya, silahkan kunjungi beberapa Web di bawah ini :

Minggu, 14 Juli 2013

Membuat Tampilan Video Youtube Di Blog Seperti Televisi

12 Comments
Tampilan Video Youtube Di Blog Seperti Televisi

Udah lihat kan contoh gambar di atas ??? Yuk langsung saja kita buat !!! Bagaimana caranya ??? Berikut step by step cara Membuat Tampilan Video Youtube Di Blog Seperti Televisi :
  1. Login Blogger > Template > Edit HTML
  2. Cari kode ]]></b:skin> kemudian copy CSS di bawah dan letakkan di atas kode tadi

    3. /* Video Youtube */
    .video-player{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3jsNkH_9VzFIWxFMiGmsgy4rxTE5VpDSCt84S1uAGuEVmWFslIUnBPQ3FhuOeD3Npc9loXnovNUSTXLfueVuia1O753fJgn6mjtJZxuzwp36YfltJBA4F0upmcSku2eJLFQSPNrggvXE/s1600/psd-samsung-p2370-monitor+3.png) no-repeat top center;height:458px;width:580px;padding-top:38px;margin:auto}

  3. Untuk memanggil di postingan sobat, gunakan script di bawah ini pada tab HTML

    4. <div style="text-align: center;">
    <div class="video-player">
    <iframe allowfullscreen="" frameborder="0" height="283" src="URL Video" width="505"></iframe>
    </div>
    </div>
  4. Silahkan atur sendiri padding dan margin pada kode CSS dan height dan widht pada script pemanggil diatas
  5. Pratinjau dulu agar tidak terjadi kesalahan
  6. Simpan template
Untuk kode URL Video kita memakai kode embed pada Youtube, cara mendapatkan kode embed bagi yang belum tau lihat gambar di bawah ini

Kode Embed Video Youtube

Jika sobat penasaran bagaiman hasilnya silahkan lihat pada postingan Video - Cara Membuat Logo Windows Simple ini.
Bagaimana ??? Keren kan ??? ^_^. Sekian dulu Tips and Trik Blogger pada hari ini, jika ada yang ditanyakan silahkan berkomentar.

Thankz to Mas Kompi.

Selasa, 09 Juli 2013

Label Cloud dengan CSS Sederhana

2 Comments
S
elamat pagi sahabat Greenz Blogger. Adakah yang udah puasa hari ini ??? Kalau admin hari ini udah mulai puasa karena admin mengikuti Muhammadiyah bukan Pemerintah :D. Ok sahabat Greenz Blogger pada pagi ini admin mau berbagi sedikit Tutorial tentang Blog. Yuppsss.....sesuai dengan Judulnya sekarang kita akan membuat Label Cloud dengan CSS Sederhana. Bagaimanakah bentuknya ???? Lihat Screenshot dibawah ini :
Label Cloud dengan CSS Sederhana
Langkah-Langkah :
  • Login Dashboard Blogger > Template > Edit HTML
  • Tekan CTRL+F kemudian cari kode ]]></b:skin>
  • Kalau sudah ketemu copy kode CSS di bawah ini dan letakkan tepat diatas kode ]]></b:skin>
.label-size{font-size:14px; margin:5px 0 5px 0; float:left; text-decoration:none; padding:5px; border:1px #FFF solid; background:#037400;  color:#FFF; box-shadow:1px 1px 5px rgba(1,1,1,.1)} .label-size a{color:#FFF} .label-size a:hover{color:#00ff00;text-decoration:line-through;} .label-size:hover{background:#000;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transform:scale(1.5) rotate(7deg);-moz-transform:scale(1.5 )rotate(7deg);-webkit-transform:scale(1.5) rotate(7deg) 
  • Simpan Template
NOTE : Ada baiknya kalau sahabat Greenz Blogger membackup terlebih dahulu templatenya agar tidak ada terjadi kesalahan !

Semoga Tutorial hari ini bisa bermanfaat buat sahabat Greenz Blogger semua ^_^

Langganan: Postingan (Atom)