Cara Membuat Blockquote dengan menggunakan CSS3 di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmouVTADpQLu1hTbV6iiQ7lJVlbUgjPLqHRKK94bVRMR6aXk3FrvUCk-4km6Ku9hFs4oAQqscw8zvuvcM-J2van2V8xv104_1gUhZdjcbqdO_4ETZ1taa9c4yiLxYBbQKkEcIoCI748FmO/s1600/css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmouVTADpQLu1hTbV6iiQ7lJVlbUgjPLqHRKK94bVRMR6aXk3FrvUCk-4km6Ku9hFs4oAQqscw8zvuvcM-J2van2V8xv104_1gUhZdjcbqdO_4ETZ1taa9c4yiLxYBbQKkEcIoCI748FmO/s1600/css.jpg" /></a></div>
 
Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan 
CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text 
shadow dan 3 (tiga) buah background image untuk background blockquote 
dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote
 yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog Anda ? Adakah manfaatnya? 
 
Blockquote bukanlah "gadis yang 
jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi 
blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag 
spesial yang sebenarnya amat pantas dipakai ini, ya? atau 
barangkali tak begitu kenal dengan blockquote? Atau kalian merasa 
antipati terlebih dahulu? Ataukah  Anda ketularan blogger lain yang 
jarang menggunakan blockquote? Coba rasakan betapa mudah 
dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan 
untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting !  Anda tak perlu membuat tag baru untuk melakukan itu. Cukup 
blockquote! 
 
 
<div class="gray">
Cara Membuat Blockquote dengan CSS3</div>
<a href="https://www.blogger.com/blogger.g?blogID=2280420673319463854" name="more"></a>Kode CSS: 
 
<blockquote class="tr_bq">
blockquote {          padding: 10px;          margin: 10px 0 10px 20px;          background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);          font: 13px/17px Serif, Times, Helvetica;          font-style: italic;          color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */          text-shadow: 1px 1px 1px #000;          border: 1px ridge  #0099FF;          border-radius: 20px 10px 20px 10px;         -moz-border-radius: 20px 10px 20px 10px;         -webkit-border-radius: 20px 10px 20px 10px;         -o-transition: all 1.2s ease-in;         -moz-transition: all 1.2s ease-in;         -webkit-transition: all 1.2s ease-in; } blockquote:hover {          color: #eee;         -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);         -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);         -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);} blockquote span.bbuka, blockquote span.btutup {          float: left;          margin-right: 5px;          height: 17px;          width: 22px;          background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;         -o-transition: all 1.2s ease-in;         -moz-transition: all 1.2s ease-in;         -webkit-transition: all 1.2s ease-in; } blockquote span.bbtutup {          float: right;          margin-left: 5px;          margin-right: 0;          background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat; } blockquote:hover span.bbuka, blockquote:hover span.btutup {         -o-transform: rotate(1090deg) scale(1.1);         -moz-transform: rotate(1090deg) scale(1.1);         -webkit-transform: rotate(1090deg) scale(1.1); }</blockquote>
 
Cara Menyimpan Kode CSS: 
 
<ol>
<li>Login : Login kee Blogger.<ul class="dua">
<li class="dua">Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".</li>
<li class="dua">Tuliskan "Password (Sandi)".</li>
<li class="dua">KLIK "Login".</li>
</ul>
</li>
<li>Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..</li>
<li>Design/Rancangan : Cari dan klik link Edit HTML.</li>
<li>Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.</li>
<li>KLIK SAVE Templates/Simpan Template.</li>
<li>KLIK link Posting.</li>
<li>KLIK Entri Baru/New Entry.</li>
<li>Gunakan blockquote untuk melakukan posting. Anda bisa menggunakan contoh di bawah ini.</li>
<li>Buka hasil posting di halaman blog untuk melihat hasilnya.</li>
</ol>
Contoh bentuk kode untuk posting 
 
Silahkan di copy untuk percobaan! 
 
<blockquote class="tr_bq">
Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.<blockquote> Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog. Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!<blockquote> The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover. In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.</blockquote>
 
Catatan: 
 
<ol>
<li>Bila dalam template  Anda sebelumnya sudah ada tag blockquote bawaan template asli, sebaiknya dihapus saja. Cari menggunakan Ctrl+F.</li>
<li>Jika merasa ada kesulitan untuk mencari kode atau yang lain, coba buka Special Tutorials
 (menu di kiri). Di dalamnya terdapat beberapa tutorial penting 
berkaitan dengan modifikasi template termasuk cara cepat cari kode HTML.</li>
<li>Untuk menggunakan blockquote,  Anda harus memasukkan kodenya melalui posting mode "Edit HTML" (ada dua mode: mode Compose dan Edit HTML).</li>
</ol>
 
 
 
</div>

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text shadow dan 3 (tiga) buah background image untuk background blockquote dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote yang benar-benar lain dari pada yang lain ini? Cocokkah untuk b…

Baca selengkapnya...

14 Komentar

jalupangna Label: tips dan triks blogger 10.10 14 komentar

Cara membuat textarea indah, cantik dan mempesona di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qvRPAapeHPB3LeNt6gty2VSP4K7iKQrVpRm23Pb01_cSSMrY8AzYPqejCaqHGmpLevizhZsmru97600CAvGjleSOxUj1l4xRvzVvYFVirKQBpz_FK07Q9Qon65S-9eNeFrFzx_Nq3p6B/s1600/textarea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qvRPAapeHPB3LeNt6gty2VSP4K7iKQrVpRm23Pb01_cSSMrY8AzYPqejCaqHGmpLevizhZsmru97600CAvGjleSOxUj1l4xRvzVvYFVirKQBpz_FK07Q9Qon65S-9eNeFrFzx_Nq3p6B/s320/textarea.jpg" width="320" /></a></div>
 
Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya 
untuk wadah link exchange, banner exchange atau kode html dan teks yang 
lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak 
seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. 
Anda dapat menggunakan textarea penuh gaya ini di blog untuk wadah baru 
yang tampil indah, cantik dan mempesona. 
 
Menghilangkan border bawaan yang berupa warna border dan tebal border, 
serta menghilangkan outline menjadi kunci hingga textarea menampilkan 
diri dalam perwujudan yang berbeda. Tentu saja itu tak cukup. Kode CSS 
dan CSS3 menejadi baju baru yang menjadikan textarea seakan baru keluar 
dari salon dengan dandanan yang serba"wah" dan penampilan "elegan, 
manis dan cantik. 
Kita akan gunakan CSS3 border-radius, CSS3 drop shadow (box shadow), 
CSS3 text-shadow, CSS3 text-shadow, CSS3 Transition serta beberapa kode 
CSS seperti margin, padding, border dan outline. Mengapa kita gunakan 
"outline"? 
 
Outline: none; berfungsi untuk melenyapkan border yang muncul ketika 
bagian di textarea "di klik", baik untuk copy code ataupun sekedar 
sebuah "klik" tak sengaja. Tanpa menghilangkaan "outline" tentu saja 
bagi beberapa yang tahu kode html akan segera sadar bahwa apa yang di 
hadapannya adalah sebuah textarea. Sampeyan bisa tambahkan atau rubah 
beberapa kode CSS yang disertakan di sini bila ingin membuat textarea 
ini tampil dengan gaya yang berbeda. 
 
<div class="gray">
Cara Membuat textarea indah, cantik dan mempesona:</div>
<ol>
<li>Login to blogger.</li>
<li>KLIK link "Design (Rancangan)".</li>
<li>KLIK link "Edit HTML".</li>
<li>Cari kode ]]></b:skin> .</li>
<li>Copy dan patekan kode CSS textarea di atas kode ]]></b:skin>.</li>
<li>KLIK "SAVE Templates (Simpan Template)".</li>
<li>Lanjutkan dengan cara menggunakan xHTML textarea.</li>
</ol>
<div class="gray">
Kode CSS textarea indah, cantik dan mempesona: 
</div>
<div class="gray">
</div>
<div class="gray">
<blockquote class="tr_bq">
 textarea.GRetarea { 
       font-size: 14px; 
       font-family: Arial, Tahoma, Helvetica; 
       border: 0px solid transparent; 
       outline: none; 
       border: 5px solid; 
       border-color: #ccc #aaa #aaa #ccc; 
       border-radius: 12px; 
      -moz-border-radius: 12px; 
      -webkit-border-radius: 12px;       
       background: #eee; 
       box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;   
      -moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555; 
      -webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555; 
       text-shadow: 1px 1px 1px #666; 
       padding: 5px 5px 2px; 
       color: #625F3C; 
       margin: 15px 5px; 
      -o-transition: all 1s ease-out; 
      -moz-transition: all 1s ease-out; 
      -webkit-transition: all 1s ease-out;     
} 
textarea.GRetarea:hover { 
       border-color: #aaa #888 #888 #aaa; 
       border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkit-border-radius: 8px;       
       background: #fff; 
       color: #111; 
       text-shadow: 1px 1px 1px #aaa; 
       box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;   
      -moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222; 
      -webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222; 
}</blockquote>
 
Cara menggunakan textarea indah, cantik dan mempesona: 
 
Gunakan kode HTML berikut saat digunakan di halaman posting. 
 
<blockquote class="tr_bq">
<textarea class="GReterea" row="6" cols="60"> 
Tuliskan Teks atau Kode HTML di sini !</blockquote>
 
Catatan :
 
<ol>
<li>Textarea berfungsi sebagai wadah 
teks dimana semua bentuk teks akan di tampilkan apa adanya, termasuk 
kode HTML. Jadi bila sampeyan menuliskan kode berbentuk seperti ini : 
<style typt="text/CSS"> maka dalam box textarea akan terlihat 
seperti itu juga (ditampilkan apa adanya sesuai yang dituliskan).</li>
<li>row="6" adalah ukuran tinggi textarea. Rubah nilainya untuk merubah ketinggian textarea ;Semakin kecil akan semakin pendek, sedang apabila diperbesar akan semakin tinggi.</li>
<li>cols="60" adalah ukuran lebar. Semakin besar semakin lebar dan sebaliknya bila diperkecil maka akan semakin berkurang lebarnya.</li>
<li>Ukuran text dapat dirubah dengan merubah nilai pada : font-size: 14px;</li>
</ol>
Semoga bermanfaat... 
 
 </div>
</div>

Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya untuk wadah link exchange, banner exchange atau kode html dan teks yang lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. Anda dapat menggunakan textarea penuh gaya ini di blog untuk wad…

Baca selengkapnya...

3 Komentar

jalupangna Label: tips dan triks blogger 09.55 3 komentar

Cara membuat saving mode CSS3 keren dan cantik di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyGQWT6N-2emgdAmcybD46aa_Khl6ejM2HwygHXFd-uE1C2iafiF9-9H5xM-Wy-PPlKJtoyghexkxtsKn1lhdZNyzFQkQIZxx7KvSPADyvZW818jlOLXMIU5qN7Zf8K-0Ukqt8OGQROkx/s1600/saving+mode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyGQWT6N-2emgdAmcybD46aa_Khl6ejM2HwygHXFd-uE1C2iafiF9-9H5xM-Wy-PPlKJtoyghexkxtsKn1lhdZNyzFQkQIZxx7KvSPADyvZW818jlOLXMIU5qN7Zf8K-0Ukqt8OGQROkx/s1600/saving+mode.jpg" /></a></div>
 
Setelah beberapa kali penulis blog walking di tetangga sebelah, akhirnya
 penulis menemukan artikel menarik berkaitang dengan postingan membuat 
saving mode dengan CSS3. Dan penulis berinisiatif untuk memposting 
kembali di blog penulis, maklum saja penulis masih newbie di dunia 
blogger dan masih dalam tahap belajar. 
 
 
Hebohnya Energy Saving Mode yang di release 2009 lalu benar-benar 
membuat banyak blogger penasaran dan tertarik untuk ikut menggunakannya 
di blog. Bagi beberapa sobat blogger yang sebelumnya telah menggunakan 
jQuery.1.3.2.js atau jQuery.1.3.2.min.js adalah sebuah keberuntungan 
karena pemanfaatan jquery.1.3.2.min.js dalam desain energy saving mode 
sekaligus dapat digunakan untuk meng-cover kebutuhan blog akan 
jquery.1.3.2.js. 
 
Hal sebaliknya akan terjadi pada blogger yang selama ini blognya sama 
sekali tidak menggunakan jQuery.1.3.2.min.js atau jquery.1.3.2.js untuk 
berbagai fungsi/fasilitas blog. Pemaksaan untuk menggunakan Energy Saving Mode justru bukan sebuah tindakan yang menguntungkan sekaligus
 bukan suatu langkah sebagai cerminan maksud dan tujuan dibuatnya energy
 saving mode. Ya ..., karena jelas-jelas beban blog akan bertambah 
dengan sebuah jQuery.1.3.2.min.js. Sekalipun jquery.1.3.2.min.js tidak 
akan menjadi beban tambahan yang fatal, namun setidaknya beban loading 
pasti akan cukup meningkat. Diluar hal ini "kemubaziran" akan 
terjadi. Yah jika memang tak satupun fungsi lain terdukung dengan 
digunakannya jQuery.1.3.2.min.js yang terdapat di desain Energy Saving 
Mode, trus apa ya nggak rugi jika jQuery.min.1.3.2.min.js yang jelas-jelas menambah beban dan loading blog ini hanya dimanfaatkan "untuk sekedar bisa menggunakan Energy Saving Mode?" 
 
Menyikapi trend baru yang banyak menghanyutkan "nafsu" dan "keinginan" 
untuk ikut-ikutan menggunakan Energy Saving Mode tanpa melihat untung 
ruginya ini (karena bagi yang blognya tidak menggunakan jQuery.1.3.2.min.js jelas bikin kerugian),
 satu desain menarik Energy Saving Mode yang hanya menggunakan kode CSS 
telah coba aku buat. Energy Saving Mode hasil produksi anak negeri yang 
asli dalam negeri ini merupakan wujud kepedulian terhadap sementara 
blogger yang sebenarnya tidak membutuhkan jQuery.1.3.2.min.js dalam 
desain blognya, akan tetapi ingin menggunakan dan memasang Energy Saving
 Mode sebagai upaya mempercantik blog sekaligus untuk ikut mendukung 
upaya penghematan energy bagi dunia. Jika mungkin sampeyan tertarik dan 
ingin melihat seperti apa, sih, Energy Saving Mode tanpa 
jQuery.1.3.2.min.js, cantik atau buruk rupakah dia? Kira-kira cocok atau
 tidakkah buat blog anda? 
 
<div class="blue">
Perbandingan Energy Saving Mode Menggunakan JQuery dan CSS3</div>
<a href="https://www.blogger.com/blogger.g?blogID=2280420673319463854" name="more"></a> 
Energy Saving Mode Menggunakan jQuery.1.3.2.min.js 
<ol>
<li>Kode yang digunakan: Javascipt: 2 kbyte, jquery.1.3.2.min.js: 56 kbyte, kode CSS: 1 kbyte</li>
<li>Energy Saving Mode bekerja secara rutin tiap 10000s (bisa di atur). 
Energy Saving Mode bahkan selalu aktif/bekerja saat pengunjung masih 
menikmati posting (cenderung mengganggu!).</li>
<li>Energy Saving Mode bekerja saat pengunjung meninggalkan blog/web 
selama durasi yang ditentukan (10000s dan bisa diatur durasinya).</li>
<li>Menggunakan animasi gerak dan opacity.</li>
<li>Harus memanfaatkan file Hosting (javascript dan jQuery.1.3.2.min.js).</li>
<li>Efek penggunaan Energy Saving Mode hanya terlihat di halaman blog.</li>
<li>Bekerja dengan sempurna di semua browser meskipun bentuk animasi terjadi pergeseran tempat (saat mulai aktif).</li>
</ol>
Energy Saving Mode Menggunakan CSS3 
<ol>
<li>Kode yang digunakan: Kode CSS: 4 kbyte (super irit).</li>
<li>Energy Saving Mode bekerja secara rutin tiap 10s (bisa di atur). 
Energy Saving Mode Using CSS3 hanya bekerja ketika cursor berada di luar
 halaman blog. Selama cursor di atas halaman blog maka Energy Saving 
Mode tidak akan aktif sehingga seluruh aktifitas pengunjung/pembaca 
tidak akan terganggu..</li>
<li>Menggunakan animasi gerak dan opacity dan beberapa efek lain seperti background color.</li>
<li>Tidak perlu diupload di file Hosting (langsung simpan di template alias praktis).</li>
<li>Efek penggunaan Energy Saving Mode akan terlihat di Halaman Blog dan
 di Page Elemen/Elemen Laman (tidak mengganggu karena saat Elemen Laman 
tersentuh cursor maka teks yang tertulis dalam Energy Saving Mode akan 
terbang melenyapkan diri!).</li>
<li>Bekerja dengan baik di semua browser. Animasi hanya bekerja di 
browser yang mendukung CSS3 (Opera 1063, Mozilla 4 beta 0 ke atas , 
Google Chrome dan Safari serta beberapa browser lain). 
nb: mulai sekarang gunakan selalu browser yang sudah mendukung CSS3 karena blog menjadi lebih enak untuk dijelajahi dan dinikmati</li>
</ol>
Dari perbandingan di atas, kiranya anda bisa menentukan sendiri kira-kira lebih nyaman menggunakan yang mana. 
 
Kode CSS Energi Saving Mode Menggunakan CSS3: 
 
<blockquote class="tr_bq">
* { margin:0; padding: 0; } 
#navbar-iframe { 
       height: 0; 
       opacity: 0.0; 
       -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
} 
body:hover #navbar-iframe { 
       height: 30px; 
       opacity: 1.0; 
       -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
} 
body .bgsGR_esm { 
       position: fixed; 
       width: 100%; 
       top: 0; 
       height: 100%; 
       opacity: 0.97; 
       filter: alpha(opacity=97); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; 
       background: #000; 
       border-bottom: 3px solid transparent; 
       z-index: 99999999; 
       -o-transition: all 3s ease-in-out 10s; 
       -moz-transition: all 3s ease-in-out 10s; 
       -webkit-transition: all 3s ease-in-out 10s; 
} 
body:hover .bgsGR_esm { 
       opacity: 0.0; 
       height: 0.001%; 
       filter: alpha(opacity=0); 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
       background: #0a7f01; 
       border-bottom: 5px solid #333; 
       -o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s; 
       -moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; 
       -webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; 
} 
body .bgsGR_esm p.esm1 { 
       margin: 0; 
       padding: 0; 
       width: 92%; 
       background: transparent; 
       font-size: 100px; 
       font-family: "Serif", Times New Roman; 
       color: #333; /* original code by: gubhugreyot.blogspot.com */ 
       text-shadow: 1px 1px 2px #ccc; 
       position: relative; 
       margin-top: 200px; 
       line-height: 20px; 
       font-weight: bold; 
       text-align: center; 
       border: 30px solid transparent; 
       border-radius: 20px; 
       -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s; 
       -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s; 
       -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s; 
} 
body:hover .bgsGR_esm p.esm1{ 
       font-size: 10px; 
       color: red; 
       width: 25%; 
       margin: 340px 0 0 300px; 
       padding: 25px; 
       background: #aaa; 
       border: 20px solid #888; 
       border-radius: 170px; 
       -o-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; 
       -moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; 
       -webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in; 
} 
.bgsGR_esm p span.esm2 { 
       font-size: 18px; 
       opacity: 0.5; 
       filter: alpha(opacity=50); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
       display: block; /* original code by: gubhugreyot.blogspot.com */ 
       text-align: center; 
       width: 300px; 
       margin: -10px auto; 
       font-weight: normal; 
       padding: 2px 8px; 
       background: #000; 
       border: 1px solid #333; 
       border-radius: 0; 
       color: #0000FF; 
       text-shadow: none; 
       font-family: Arial, Helvetica, sans-serif; 
       -o-transition: 1s ease-out; 
       -moz-transition: 1s ease-out; 
       -webkit-transition: 1s ease-out; 
} 
.bgsGR_esm:hover p span.esm2{ 
       font-size: 10px; 
       width: 200px; /* original code by: gubhugreyot.blogspot.com */ 
       padding: 0; 
} 
.bgsGR_esm p span.esm3{ 
       color: #ccc; 
       font-family: "Tahoma", Arial, Helvetica; 
       display: block; 
       margin:10px auto; 
       background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) left center repeat-x; 
       background: -moz-linear-gradient(top,#666,#111); 
       background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666)); 
       opacity: 0.6; 
       filter: alpha(opacity=60); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
       width: 250px; 
       text-shadow: 1px 1px 1px #000; 
       border: 1px solid #333; 
       border-radius: 4px; 
       padding:2px 10px; 
       font-size: 12px; 
       font-weight: normal; 
       line-height: 16px; 
} 
.bgsGR_esm .by_gubhugreyot { 
       margin-left: 30px; 
       text-align: left; 
       color: #015828; 
       font-size: 12px; 
       font-weight: normal; 
       position: absolute; 
       top: 550px; /* original code by: gubhugreyot.blogspot.com */ 
       width: 100%; 
       height: 20px; 
       left: 0; 
} 
.bgsGR_esm .by_gubhugreyot span.esm4 { 
       color: #aaa; 
       font-style:italic; 
}</blockquote>
 
<ol>
<li>Desain Energy Saving Mode sekaligus menyertakan animasi pada 
navbar. Jika anda suka menampilkan navbar sebagai pelengkap blog, 
maka kode ini dapat langsung disimpan di template. Sebuah animasi cantik
 tidak hanya terjadi di Energy Saving Mode, namun animasi juga akan 
terjadi pada navbar. Sangat cantik! Cobalah jika anda tidak percaya!</li>
<li>Jika anda tidak akan menampilkan navbar, silahkan rubah ganti kode yang seperti berikut dengan kode baru di bawahnya.  </li>
</ol>
 
<blockquote class="tr_bq">
#navbar-iframe { 
       height: 0; 
       opacity:0.0;        
       -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
} 
body:hover #navbar-iframe { 
       height: 30px; 
       opacity: 1.0; 
       -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
} </blockquote>
 
Kode CSS pengganti: 
 
<blockquote class="tr_bq">
 #navbar-iframe { 
       display: none; 
}</blockquote>
 
xHTML Energy Saving Mode Using CSS3: 
 
<blockquote class="tr_bq">
<div class='bgsGR_esm'> 
 
gubhug reyot 
Energy Saving Mode Using CSS3 
Move your mouse to go back to the page! Gerakkan mouse anda dan silahkan nikmati kembali posting kami! 
 
<div class='by_gubhugreyot'> 
Copyright 2010 gubhugreyot.blogspot.com - All rights reserved</div> 
</div></blockquote>
 
<ol>
<li>Silahkan anda rubah teks yang cetak tebal untuk menampilkan teks dalam bentuk berbeda.</li>
<li>Teks "gubhug reyot yang cetak tebal menggunakan font yang cukup besar (font-size: 100px;).
 Jika ingin menuliskan nama blog atau nama yang lain dengan teks cukup 
panjang, sampeyan bisa kecilkan ukuran font yang terdapat dalam syntax. </li>
</ol>
<blockquote class="tr_bq">
body .bgsGR_esm p.esm1{font-size: 100px;}</blockquote>
 
Ukuran font bisa diperkecil (misalnya 50px) hingga bisa terlihat ideal di blog! 
 
Cara Menggunakan Kode Energy Saving Mode dengan CSS3: 
 
<ol>
<li>Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".</li>
<li>Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".</li>
<li>Design/Rancangan : Cari dan klik "Edit HTML".</li>
<li>Edit HTML : Amankan template terlebih dahulu (back-up templates).<ul class="dua">
<li class="dua">KLIK Download Template Lengkap.</li>
<li class="dua">Simpan file Template di folder PC.</li>
<li class="dua">Kembali ke halaman "Edit HTML".</li>
</ul>
</li>
<li>Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya!</li>
<li>Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!</li>
<li>Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.</li>
<li>SAVE Templates/Simpan Template : KLIK SAVE Templates.</li>
<li>Buka blog untuk melihat hasilnya!</li>
</ol>
Catatan/Keterangan: 
<ul>
<li>Untuk membuat layar menjadi gelap penuh saat Energy Saving Mode 
bekerja, rubahlah nilai opacity: 0.97; dan filter:alpha ... opacity=97, 
serta -ms-filter: ... opacity=97 menjadi 1.0 dan 100.</li>
<li>Untuk mengatur durasi bekerjanya "Energy Saving Mode using CSS3, atur nilai pada kode berikut:</li>
</ul>
<blockquote class="tr_bq">
 body .bgsGR_esm{ 
       -o-transition: all 3s ease-in-out 10s; 
       -moz-transition: all 3s ease-in-out 10s; 
       -webkit-transition: all 3s ease-in-out 10s; 
} 
body .bgsGR_esm p.esm1 { 
       -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s; 
       -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s; 
       -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s; 
}</blockquote>
 
<ul>
<li>Angka 10s merupakan durasi aktifnya Energy Saving Mode. </li>
<li>Jika navbar digunakan, anda juga harus mengganti angka juga : </li>
</ul>
<blockquote class="tr_bq">
#navbar-iframe {      
-o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
-moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
-webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
}</blockquote>
 
<ul>
<li>Pengurangan nilai sebesar -4s dan -6s dari durasi aktifnya Energy Saving Mode using CSS3 (10s). </li>
</ul>
 
Semoga bermanfaat! 
 
Sumber: http://gubhugreyot.blogspot.com 
 </div>

Setelah beberapa kali penulis blog walking di tetangga sebelah, akhirnya penulis menemukan artikel menarik berkaitang dengan postingan membuat saving mode dengan CSS3. Dan penulis berinisiatif untuk memposting kembali di blog penulis, maklum saja penulis masih newbie di dunia blogger dan masih dalam tahap belajar. Hebohnya Energy Saving Mode y…

Baca selengkapnya...

4 Komentar

jalupangna Label: tips dan triks blogger 09.34 4 komentar