Subscribe:
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Minggu, 03 Juni 2012

Trik Hover gambar kaya FB pake CSS


Assalamualaikum Wr. Wb.
Di Hari minggu ini saya akan membagikan trik hover kepada sobat DC tercinta...
Kebetulan gambar ini adalah teman saya....#Hapunteun Neng geulis photo na ku Aa dianggo trik.
Langsung aja kita praktek ....






DC Community
Wanita Berkerudung Mping.




DC Community
Wanita Berkerudung Mping.




DC Community
Wanita Berkerudung Mping.




DC Community
Wanita Berkerudung Mping.















Berikut CSS nya :


Berikut HTML-nya :



Gimana, cantik ga ceweknya.,.,wkwkwk.,.,
Baca Selengkapnya»»

Rabu, 23 Mei 2012

Cara Membuat Effect Terang Dan Gelap Pada Gambar


Assalamualaikum WR. WB.
Kali ini DC akan membahas tentang Cara Membuat Effect Terang Dan Gelap Pada Gambar.
Langsung aja kita ke TKP...
Gelap ke Terang

  Terang ke Gelap

Terang ke Gelap


Gelap ke Terang
Baca Selengkapnya»»

Senin, 23 Januari 2012

Cara Membuat Menu Animasi CSS3


Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan Membuat Menu Dropdown dengan CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com

Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi.. ?
Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini.

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://dinarcool.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>


Masukkan ke Gadget HTML/JavaScript


Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.
  1. angka 0.5s menandakan waktu perubahan dari animasi
  2. angka 25deg menandakan rotasi perputaran dari area menu
  3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
  4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya
Source:http://lora-malunk.blogspot.com/2011/11/cara-membuat-menu-animasi-css3.html
Baca Selengkapnya»»

Kamis, 29 Desember 2011

Cara Membuat Cursor Berbayang-bayang

Mengumpulkan trick jQuery plugin memang tidak ada habisnya... Sekarang DC akan berbagi seputaran trik jQuery plugins disekitaran area cursor. Menambahkan embel-embel disekitaran cursor dengan menggunakan sebuah gambar. Sebelum masuk sesi script, ada baiknya saya mengingatkan kembali cara penulisan struktur jQuery plugin ke dalam template. Versi script jQuery teranyar kepunyaan google
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Bila sobat sekalian sudah mempunyai jQuery script tersebut, jangan dipasang lagi. Kalau masih pakai versi lama, boleh diupdate ke versi anyar 1.7.1
Yuk kita mulai membuat gambar selalu mengikuti cursor dengan jQuery plugin

Movement of the Shadow Effect



Script jQuery plugin yang kedua ini, menampilkan efek bayangan ketika cursor digerakkan. Contoh bisa lihat di blog ini.


source : http://beben-koben.blogspot.com/2011/12/decoration-jquery-plugin-around-cursor.html
Baca Selengkapnya»»

Kamis, 11 Agustus 2011

Cara membuat tulisan berbayang (shadow) pake CODE HTML


Membuat tulisan berbayang (shadow) itu lah topik saya kali ini. di mana suatu blog kita temukan tulisan nya berbayang. nah pasti ada yang udah tahu kan. untuk membuat nya sangatlah mudah. trik ini hanya menggunakan kode CSS dan sedikit HTML. ikuti langkah-langkah di bawah ini
  • Log ini dulu ke blogger
  • Tata letak
  • Klik edit HTML
  • Kasi tanda centang di "Expand Widget Template"
  • Kemudian cari kode ]]></b:skin>
  • Letak kan kode dibawah ini diatas kode ]]></b:skin>
    .tshadow {
    color: #000;
    background: transparant;
    height: 35px;
    width: auto;
    padding-left: 20px;
    line-height: 32px;
    font-size: 1.8em;
    margin-bottom: 5px;
    margin-left: 5px;
    text-shadow: 2px 2px 3px #000; /* IMPORTANT */
    }
  • Simpan Tamplate anda
  • Setelah itu kode untuk posting. Sobat hanya menambah kode dibawah ini untuk membuat tulisan berbayang:
    <div class="tshadow">Tulisan Yang Ingin Dibuat Berbayang</div>
  • Silahkan liat hasilnya.
PENTING
  • Kode ini atau Trik ini hanya support dan berfungsi pada beberapa browser.
Selamat mencoba............

cara membuat tulisan berbayang (shadow) di blog, langkah menambah tulisan berbayang shadow di blogspot, tutorial tulisan berbayang shadow, cara memasang tulisan berbayang shadow, cara membuat tulisan berbayang unik.
Baca Selengkapnya»»

Senin, 01 Agustus 2011

Cara memberi background pada widget


Background Efek

Cara Membuat Background Efek pada Widget Blog
Widget atau gadget sendiri adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi. [ wikipedia .org ] Jika dalam bahasa sederhana blogger widget adalah pernak pernik dalam blog sebagai penghias blog dan memiliki berbagai fungsi.

Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
  1. Colour Background Style
    Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
    #side-wrapper {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 25px 0px 0px 0px;
    width: 315px;
    background: #ffffff;
    }
    Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
  2. Image Background Style
    Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
    Cara Memberi efek background pada widget blogspot Image Background
 StyleNah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
    .post-footer {
    display: block;
    margin: 15px 0px 25px 0px;
    padding: 7px 20px 7px 20px;
    text-align: left;
    font: $postfooterTextFont;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-lYldjKJa1uG_G9iX6zxF4bKryrc2JpoQRz-ScAK9cj1XT3Uha0A25w8ojV5A8TSz4DDl9_aQ_d_FAZZg3Mm5DXjYqlxELaFIX3KUeZm1FHK31EgYMfA-trcK-BhXtg6ErfWhib00yE/s1600/banner+demomaskolis.jpg");
    background-color:#0092dd;
    background-position:top right;
    background-repeat:no-repeat;
    border: 1px solid $postfooterBorderColor;
    }
    Penjelasannya adalah:
    • Background Image diisi URL gambar.
    • Background Color diisi kode warna yang sesuai dengan gambar.
    • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
    • Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi:background-repeat: repeat-y;Untuk ke samping, gunakan repeat-x menjadi:background-repeat: repeat-x;Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
  3. Hover Image Background Style
    Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }
    Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
    #sidebar .widget {
    margin: 0px;
    padding: 0px;
    }
    Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    #main .widget:hover {
    background:#e3e3e3;
    }

Temen-temen semua bisa memodifikasi sesuai selera, ingat harus disesuaikan dengan template yang dipakai. Selamat mencoba dan semoga bermanfaat.
Baca Selengkapnya»»

Sabtu, 23 Juli 2011

Cara Mudah Membuat Tampilan Blog/Web Maintenance

Cara Mudah Membuat Tampilan Blog/Web Maintenance. Yups, kali ini DC akan share mengenai Cara Mudah Membuat Tampilan Blog/Web Maintenance. Cara ini bisa sobat pakai bila sobat ingin membuat tampilan maintenance pada blog/web sobat.

Cara ini hanya menggunakan trik CSS dengan penambahan gambar saja kok. Tapi trik ini bisa membuat blog/web sobat seakan-akan seperti sedang maintenance.



Yups ok mari kita langsung aja pada langkah" Cara Mudah Membuat Tampilan Blog/Web Maintenance:
1. login blog
2. buka rancangan >> edit HTML
3. taruh kode dibawah ini diatas kode ]]></b:skin>

html {
  height: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDqz-ePR8ySdVcUQqyslWZPctt9WOzw3aXqAjmSOBN6ol4oRXfcpLuqrgqj7Cl_AsMlE8HQNifowEKfwH36inLDnNzUNAhtk-DFyaLAJeWMpa7V6u9qbWupGr7sqeVajk23pNKTq-lnM/s1600/under-maintenance.gif) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

4. sobat bisa mengganti tulisan yang berwarna merah dengan alamat gambar yang lain.

Selamat mencoba sob ^_^
Baca Selengkapnya»»

Minggu, 03 Juli 2011

Cara Kompres Kode CSS dan JavaScript

kali ini saya akan membahas bagaimana Cara Kompres Kode CSS dan JavaScript
agar lebih ringkas dan nambah cepat loading Blog
Layanan Online yang dapat sobat pergunakan untuk Mengkompres adalah Online YUI Compressor

Cara menggunakan layanan ini juga tidak sulit, sobat tinggal memasukan semua kode JavaScript yang ingin di Kompres.
Ingat! tanpa memasukan tag

<script type='text/javascript'> ... </script> atau
<script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Berikut cara menggunakan Online YUI Compressor
Kunjungi Situs http://refresh-sf.com/yui/ jika sudah
Masukkan kode JavaScript dalam kotak Code
Pada pilihan Dropdown jenis file pada File Type pilih JS atau CSS yang akan di Kompres
Selanjutnya untuk opsi-opsi kosongkan.
Klik tombol Compress
Tunggu beberapa saat file di Kompres dan hasilnya akan ditampilkan tepat di bawah tombol Compress

Copy kode tersebut dan Paste di antara tag
<script type='text/javascript'> ... </script> atau
<script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam Blog sobat

Contoh :
JavaScript otomatis Read More

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Catatan :
Kode yang berwarna biru merupakan kode yang dimasukkan dalam kotak Code pada Situs Online YUI Compressor

Hasilnya setelah di Kompres dan dimasukkan dalam full kode JavaScript Read More Otomatis

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
Baca Selengkapnya»»

Cara Kompres CSS dengan CSS Compressor

kali ini saya akan membahas Cara Kompres CSS dengan CSS Compressor
Berikut Cara Kompres CSS dengan CSS Compressor :
Kunjungi situs http://www.csscompressor.com/
Kemudian pilih mode kompresi yang sobat inginkan, apakah itu Highest, Hight, Standart, atau Low.
Copy lalu Paste kode CSS yang akan sobat Kompres ke kotak CSS input, lalu klik tombol Compress.
Setelah ada hasil kompresi, klik tombol Select All, Copy lalu Paste pada Template sobat.
Selesai.

Selamat mencoba
Baca Selengkapnya»»

Cara Pasang Kotak Script dalam Postingan

Postingan kali ini saya akan membahas bagaimana Cara Pasang Kotak Script dalam Postingan.
Caranya sangat mudah, sobat tinggal menambahkan sedikit kode CSS dan HTML kedalam Template dan Postingan.
Jika ada diantara sobat Blogger yang ingin memasang
Berikut cara memasangnya :

Login ke Blogger
Klik RancanganEdit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Kemudian Copy kode dibawah ini dan Paste diatas nya


.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #ffffff;
border: 1px solid #000000;
border-left: 15px solid #000000}
Keterangan : kode yang berwarna biru adalah kode warna. silahkan ganti yang sesuai dengan background Blog sobat
kemudian SIMPAN TEMPLATE.
Supaya kode atau scriptnya nanti bisa muncul kotak highlight-nya maka untuk memposting harus pakai cara tersendiri. Yaitu dengan menambahkan kode berikut :

<p class="alert">

kode atau script yg akan diberi highlight

</p>

Selamat mencoba
Baca Selengkapnya»»