Membuat Efek 3D Membuka Pada Teks Dengan CSS

Membuat Efek 3D Membuka Pada Teks Dengan CSS - Dengan menggunakan fungsi pseudo-elemen, CSS transformasi dan transisi, kita akan membuat efek 3D (3 Dimensi) dengan sangat menarik seperti yang akan saya bagikan berikut ini, membuat efek 3 Dimensi membuka pada teks. Dan efek membuka pada teks ini cocok untuk semua browser karena adanya penggunaan transisi pseudo-elemen khususnya untuk Chrome dan Firefox

Namun saya teidak bisa menerapkannya didalam blog ini dikarenakna kode CSS yang digunakan untuk membuat efek 3D membuka pada teks ini lumayan banyak, sedangkan di template blog ini sendiri sudah banyak penggunaan kode CSSnya, apalagi kode HTML juga lumayan. Namun meski menggunakan kode CSS yang lumayan banyak tidak akan mempengaruhi loading blog dan saya sudah membuat serta memasangnya di sebuah blog yang sementara ini khusus hanya untuk menampilkan DEMO dari efek 3 dimensi membuka pada teks ini. Silahkan klik tombol berikut ini untuk melihat DEMOnya langsung

Klik DEMO Disini

Sudah melihat DEMOnya? Mari kita lanjutkan... Efek membuka pada teks dari Tympanus ini bukan milik saya dan melalui artikel ini saya hanya memberikan infonya saja sedangkan untuk penerapannya, silahkan dikembangkan sendiri :)

Jika Anda belum melihat DEMOnya, saya yakin Anda tidak akan tahu seperti apa tampilan dari efek membuka pada teks ini dan jika Anda sudah melihat DEMOnya, saya juga akan berpikir "Lalu akan saya pasang dimana?" Karena melihat tampilan DEMOnya saja sudah sangat menarik namun tetap bingung untuk memasangnya hihihii..

Sekali lagi, kode CSS untuk efek 3D pada teks membuka ini saya sesuaikan dengan halaman DEMO yang telah saya buat. Jika Anda ingin menampilkannya secara per kalimat dalam bentuk minimal atau sesuai dengan keinginan Anda, silahkan dikembangkan sendiri

CSS

*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
font-weight: 300;
color: #f0f0f0;
font-family: 'Lato', Arial, sans-serif;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
a {
color: #e74d3c;
text-decoration: none;
outline: none;
}

a:hover, a:focus {
color: #fff;
}
.codrops-header {
font-size: 14px;
padding: 20px;
text-align: left;
}
.codrops-header h1 {
font-size: 38px;
line-height: 36px;
padding: 0 0 15px;
font-weight: 400;
color: #ea6657;
margin: 0;
}
.codrops-header a {
display: block;
margin: 10px 0;
font-weight: 400;
}
.grid li .codrops-header a span {
color: #e74d3c;
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.grid li .codrops-header a:hover span {
color: #fff;
}
.codrops-icon:before {
font-family: 'codropsicons';
margin: 0 4px;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.related {
clear: both;
text-align: center;
font-size: 2em;
padding: 1em 0;
}
@media screen and (max-width: 25em) {
.codrops-icon span {
display: none;
}
}
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
font-size: 12em;
line-height: 1.5;
max-height: 290px;
text-align: center;
width: 16.6666667%;
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
}
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: hsla(0, 0%, 0%, 0.6);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
}
.grid li span:before,
.grid li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
.ot-letter-left { background: #e74d3c; }
.ot-letter-left span { text-shadow: 1px 4px 6px #e74d3c, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e74d3c; }
.ot-letter-left span:after { color: #e74d3c; }
.ot-letter-left:hover span:after { color: #ea6253; }
.ot-letter-right { background: #ea6657; }
.ot-letter-right span { text-shadow: 1px 4px 6px #ea6657, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ea6657; }
.ot-letter-right span:after { color: #ea6657; }
.ot-letter-right:hover span:after { color: #ed7a6e; }
.ot-letter-top { background: #ee7f72; }
.ot-letter-top span { text-shadow: 1px 4px 6px #ee7f72, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #ee7f72; }
.ot-letter-top span:after { color: #ee7f72; }
.ot-letter-top:hover span:after { color: #f09389; }
.ot-letter-bottom { background: #e95949; }
.ot-letter-bottom span { text-shadow: 1px 4px 6px #e95949, 0 0 0 hsla(0, 0%, 0%, 0.3), 1px 4px 6px #e95949; }
.ot-letter-bottom span:after { color: #e95949; }
.ot-letter-bottom:hover span:after { color: #eb6e60; }
.ot-letter-left span:before,
.ot-letter-left span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before {
-webkit-transform: scale(1.08,1) skew(0deg,1deg);
-ms-transform: scale(1.08,1) skew(0deg,1deg);
transform: scale(1.08,1) skew(0deg,1deg);
}
.ot-letter-left span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.ot-letter-left:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,20deg);
-ms-transform: scale(0.85,1) skew(0deg,20deg);
transform: scale(0.85,1) skew(0deg,20deg);
}
.ot-letter-left:hover span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.ot-letter-right span:before {
-webkit-transform: scale(0.85,1) skew(0deg,1deg);
-ms-transform: scale(0.85,1) skew(0deg,1deg);
transform: scale(0.85,1) skew(0deg,1deg);
}
.ot-letter-right span:after {
text-shadow: 1px 0px 0px hsla(360, 100%, 100%, 0.1), -3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(15deg);
-ms-transform: rotateY(15deg);
transform: rotateY(15deg);
}
.ot-letter-right:hover span:before {
-webkit-transform: scale(0.85,1) skew(0deg,-20deg);
-ms-transform: scale(0.85,1) skew(0deg,-20deg);
transform: scale(0.85,1) skew(0deg,-20deg);
}
.ot-letter-right:hover span:after {
-webkit-transform: rotateY(40deg);
-ms-transform: rotateY(40deg);
transform: rotateY(40deg);
}
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1,0.95) skew(-4deg,0deg);
-ms-transform: scale(1,0.95) skew(-4deg,0deg);
transform: scale(1,0.95) skew(-4deg,0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
-ms-transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
transform: translateY(-0.050em) scale(1,0.55) skew(-10deg,0deg);
}
.ot-letter-top:hover span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1,1.05) skew(4deg,0deg);
-ms-transform: scale(1,1.05) skew(4deg,0deg);
transform: scale(1,1.05) skew(4deg,0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.ot-letter-bottom:hover span:before {
-webkit-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
-ms-transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
}
.ot-letter-bottom:hover span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
@media screen and (max-width: 1190px) {
.grid li {
width: 20%;
width: -webkit-calc(100% / 5);
width: calc(100% / 5);
}
}
@media screen and (max-width: 945px) {
.grid li {
width: 25%;
width: -webkit-calc(100% / 4);
width: calc(100% / 4);
}
}
@media screen and (max-width: 760px) {
.grid li {
width: 33.3333333%;
width: -webkit-calc(100% / 3);
width: calc(100% / 3);
}
}
@media screen and (max-width: 560px) {
.grid li {
width: 50%;
width: -webkit-calc(100% / 2);
width: calc(100% / 2);
}
}
@media screen and (max-width: 340px) {
.grid li {
width: 100%;
}
}

HTML
Untuk pemasangan kode HTML berikut ini, Anda hanya perlu mengganti tiap=tipa abjad yang ada sesuai dengan keinginan Anda serta beberapa kode yang perlu diganti seperli adanya link yang tercantum. Dan sekali lagi, kode HTML dan CSS yang dibagikan di artikel ini merupakan bentuk dari halaman DEMO

<div class='container'>
<div class='component'>
<ul class='grid'>
<li><div class='codrops-header'><h1>Animasi Membuka Pada Teks</h1><a class='codrops-icon codrops-icon-prev' href='http://www.panduantemplateblog.com' target='_blank'><span>Home</span></a><a class='codrops-icon codrops-icon-drop' href='http://www.panduantemplateblog.com/2014/12/membuat-efek-3d-membuka-pada-teks.html' target='_blank'><span>Tutorial</span></a><a class='codrops-icon codrops-icon-drop' href='http://panduantemplateblog.com/p/arsip-blog.html' target='_blank'><span>Articles</span></a></div></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-bottom'><span data-letter='D'>D</span></li>
<li class='ot-letter-left'><span data-letter='U'>U</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-right'><span data-letter='N'>N</span></li>
<li class='ot-letter-left'><span data-letter='T'>T</span></li>
<li class='ot-letter-top'><span data-letter='E'>E</span></li>
<li class='ot-letter-right'><span data-letter='M'>M</span></li>
<li class='ot-letter-left'><span data-letter='P'>P</span></li>
<li class='ot-letter-top'><span data-letter='L'>L</span></li>
<li class='ot-letter-left'><span data-letter='A'>A</span></li>
<li class='ot-letter-top'><span data-letter='T'>T</span></li>
<li class='ot-letter-right'><span data-letter='E'>E</span></li>
<li class='ot-letter-bottom'><span data-letter='B'>B</span></li>
<li class='ot-letter-right'><span data-letter='L'>L</span></li>
<li class='ot-letter-bottom'><span data-letter='O'>O</span></li>
<li class='ot-letter-right'><span data-letter='G'>G</span></li>
<li class='ot-letter-left'><span data-letter='.'>.</span></li>
<li class='ot-letter-top'><span data-letter='C'>C</span></li>
<li class='ot-letter-right'><span data-letter='O'>O</span></li>
<li class='ot-letter-left'><span data-letter='M'>M</span></li>
<li class='ot-letter-top'><span data-letter='1'>1</span></li>
<li class='ot-letter-left'><span data-letter='2'>2</span></li>
<li class='ot-letter-top'><span data-letter='3'>3</span></li>
<li class='ot-letter-right'><span data-letter='4'>4</span></li>
<li class='ot-letter-bottom'><span data-letter='5'>5</span></li>
<li class='ot-letter-left'><span data-letter='6'>6</span></li>
<li class='ot-letter-bottom'><span data-letter='7'>7</span></li>
<li class='ot-letter-right'><span data-letter='8'>8</span></li>
<li class='ot-letter-left'><span data-letter='9'>9</span></li>
<li class='ot-letter-top'><span data-letter='0'>0</span></li>
<li class='ot-letter-right'><span data-letter='?'>?</span></li>
<li class='ot-letter-left'><span data-letter='@'>@</span></li>
</ul>
</div>
<section class='related'>
<p>Baca juga Artikel berikut ini:</p>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-css-sosial-media-3d.html'><h4>3D Shading Social Media with Box-Shadows</h4></a></div>
<div><a href='http://www.panduantemplateblog.com/2014/02/membuat-tombol-3d-animasi-css-di-blog.html'><h4>3D Button Animated</h4></a></div>
<span>Original by <a href='http://tympanus.net/codrops/2013/11/14/animated-opening-type/' rel='nofollow' target='_blank'>Codrops</a></span>
</section>r
</div>

Bagaimana? Cukup banyak bukan kodenya? Jika Anda berminat untuk membuat efek 3 Dimensi membuka pada teks ini, silahkan.. Sengaja saya tidak memberikan contoh per kalimat secara minimal karena semata-mata hanya untuk memberikan pemahaman dengan adanya kode-kode yang banyak tersebut agar bisa berkreasi karena menerapkan kode CSS tidak semudah menerapkan kode-kode script atau mungkin lebih sulit :)

Mengganti Warna Blog Untuk CSS Variable Definitions

Mengganti Warna Blog Untuk CSS Variable Definitions - Kemarin ada seorang teman blogger yang bertanya cara mengganti warna background blog untuk kode background-color:$headerBgColor yaitu mbak Imel D. Hafidania dengan pertanyaan seperti berikut ini:

"Mbak Ana, saya mau ganti warna font header di html editor, tapi di html, script nya tuh kyk gini: background-color: $headerBgColor;... itu apa maksudnya ya? soalnya isi html templatenya beda sama yg laen.. makasihh...

Beberapa template blog seperti yang terdapat didalam Blogger sendiri masih memiliki kode CSS Variable Definitions dan ada yang tidak memiliki atau tidak terpasang CSS Variable Definitions, misalnya template blog yang saya gunakan ini. Dengan adanya css definisi variable ini akan memudahkan dalam melakukan customisasi tampilan sebuah blog, khususnya untuk lebar, bentuk font blog, dan perubahan untuk warna blog, seperti warna background, warna teks dan warna yang lainnya. Dengan adanya CSS Variable Definitions ini, kita tidak perlu mengganti lebar blog dan warna blog secara manual dengan mengganti kode warna didalam CSS Template. Lalu bagaimana cara mengganti warna blog untuk CSS Variable Definitions ?

Misalnya pertanyaan yang diajukan oleh mbak +Imel D.Hafidania. Kode background-color: $headerBgColor; merupakan kode CSS Variable Definitions untuk Warna Background header blog yang jika ditulis kedalam bentuk CSS Template maka hasilnya seperti berikut ini:

.header {
background-color: $headerBgColor;
....
}

Jika kita atau mbak Imel mengganti mengganti warna Background untuk header blog secara manual dengan cara menghapus $headerBgColor menjadi kode warna maka tidak akan memberikan pengaruh apapun terhadap warna background header tersebut, malah yang terjadi adalah Header blog tidak akan memiliki warna

.header {
background-color: #444444;
....
....
....
}

Ingat! Kita tidak bisa mengganti Warna Background seperti kode CSS disamping jika didalam kode template blog sudah terdapat CSS Variable Definitions karena Kode CSS seperti disamping ini tidak akan menampilkan warna yang telah ditetapkan didalam kode definisi variable

Lalu bagaimana cara mengganti warna background untuk variable background-color:$headerBgColor tersebut?
Sebelum mengganti kode tersebut, sedikit saya jelaskan tentang Variable Definitions yaitu suatu cara yang digunakan untuk mendefinisikan jenis warna, ukuran lebar blog, jarak, atau bentuk font sesuai dengan keingininan untuk mengubah variabel-variable tersebut secara langsung didalam Dashboard Blogger tanpa harus mengganti kode CSS atau HTML didalam template blog

Dimana Letak Variable Definitions Tersebut?
Definisi variabel berada didalam kode template blog dan Anda bisa mengetahui atau membukanya di menu Template >> Edit HTML dan Variable Definitions barada setelah kode <b:skin><![CDATA[

Untuk template yang ada didalam dashboard Blogger hampir semuanya menggunakan Variable Definitions, sedangkan untuk template-template buatan para master Template ada yang memasangnya dan ada yang tidak. Jika blog Anda menggunakan Template dengan kode Variable Definitions didalamnya maka Anda harus bersyukur karena akan lebih memudahkan dalam melakukan perubahan tampilan blog tanpa harus menguasai atau mengganti kode CSS untuk template blog tersebut

Namun perlu di ingat juga, untuk kode Variable Definitions setiap blog memiliki variable yang berbeda juga namun tetap bisa diubah-sesuaikan dengan keinginan dengan cara seperti berikut ini:
Klik menu Template >> Sesuaikan atau lihat pada contoh gambar bergerak berikut ini dalam Mengganti warna untuk Judul Blog

Pada gambar diatas Anda sebenarnya sudah masuk kedalam Perancang Template dan panduan penggunaanya sudah saya jelaskan di Cara Menggunakan Perancang Template Blogger

Jadi untuk kode background-color: $headerBgColor; pada Perancang Template Blogger, pilih poin Latar belakang untuk mengganti warna Background header tersebut

Bagaimana Jika Pada Perancang Template Blogger Tidak Sesuai dengan Pengaturan yang ada di kode Variable Definitions Template?
Ganti kode warna yang terdapat pada background-color: $headerBgColor; yang ada di kode Variable definitions secara manual dengan masuk ke Edit HTML
Contoh: Untuk contoh kode CSSnya saya ambil dari kode template bawaan Blogger dan bukan milik mbak Imel

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

Memiliki kode variable definitions seperti berikut:

<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>

Maka gantilah color value="#000000" sesuai dengan keinginan untuk mengganti warna font seperti pada contoh diatas. Jangan mengganti $(description.text.color); atau $headerBgColor; dengan kode warna karena tidak memberikan efek apapun, kecuali semua kode Variable Definitions didalam blog di hapus

Silahkan baca Cara menghapus variable definitions template blog

Hmmm.. intinya untuk mengganti warna blog pada template dengan CSS Variable Definitions, saya menyarankan lebih baik diganti secara manual saja karena saya sendiri lebih senang menggantinya secara manual seperti yang saya contohkan diatas. Namun jika tetap untuk menggunakan Perancang Template Blogger juga tidak apa-apa dan jika ada perubahan tampilan yang lain pada blog Anda jangan salahkan saya ya :)

Membuat Efek Berkilau Dengan CSS Di Blog

Membuat Efek Berkilau Dengan CSS Di Blog merupakan artikel terbaru yang saya buat setelah 2 minggu tidak melakukan update untuk blog ini. Tidak adanya update untuk blog ini dikarenakan ada kesibukan di offline yang tidak bisa dibiarkan dan harus fokus untuk dikerjakan, dan Alhamdulillah semuanya lancar dikerjakan dan akhirnya kembali ke blog ini dengan artikel membuat efek berkilau dengan CSS di blog :)

Membuat efek berkilau ini murni hanya dengan menggunakan kode CSS tanpa perlu menggunakan Script sehingga lebih memudahkan dalam pemasangannya di blog. Efek berkilau ini menggunakan efek transisi dari sebuah kode CSS yang dikombinasikan dengan penggunaan mouse-over atau efek hover yang ditimbulkan pada element jika pointer mouse diarahkan pada element tersebut

Baca juga Kumpulan efek mouse over atau Klik disini sehingga Anda menemukan efek seperti dibawah ini

Rugi kalau tidak dibaca..

DEMO Efek Berkilau

Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya

Efek Berkilau Pada Teks

Jika Anda tertarik untuk membuat efek berkilau dengan CSS di blog tersebut didalam blog Anda khususnya untuk judul logo blog seperti yang terlihat pada DEMO diatas, caranya pun sangat mudah dengan menyalin kode CSS berikut ini kedalam kode template blog Anda

.mask-shine {
position:relative;
display:block;
width:150px;
height:64px;
text-align:center;
margin:0 auto;
background:none;
}
.mask-shine:after {
content: "";
position:absolute;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(255,255,255,0.4);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;}
.mask-shine:hover:after {
width:120%;
background-color:rgba(255,255,255,0);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

Untuk markup HTML dibuat seperti berikut ini:
<div class="mask-shine">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpu629IOQ9KIcfl4B0iOZC_IYAx1OfMtt1t7-C05JQJSJXBwnhp0dklTPmSE5dfhEw5YmfYnaSDY1POx6KEDGvOrh7CcA0nDYq5KM-VtJe4wWZ4fLV4xjz4rhJEVBis-6NhOLGdA26_pw/s1600/logoku.png"/>
</a>
</div>
* Ganti url gambar

Sedangkna untuk membuat efek berkilau pada teks, untuk kode CSSnya sama saja. Hanya perlu menyesuaikan beberapa value seperti lebar, tinggi, warna background, url gambar, dan letak posisi. Silahkan berkreasi :)

Cukup mudah kok untuk membuat efek berkilau dengan CSS di blog seperti yang telah saya jelaskan diatas, hanya perlu mengedit beberapa kode saja untuk merubah tampilannya. Okey, terimakasih :)

Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS

Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS - Memiliki blog yang bagus dan selalu terupdate dengan artikel-artikel yang berkualitas pasti akan menjadi rujukan bagi pemilik blog yang lainnya. Baik untuk mempelajari apa yang di bahas didalam blog tersebut, sekedar membaca isinya, atau sekedar meninggalkan komentar sebagai salah satu ciri khas dalam blogwalking. Dari sekian cara yang dilakukan pengunjung blog adalah kebiasaan lama yang mungkin tidak bisa hilang yaitu melakukan copy paste artikel, gambar, video, atau pun konten lainnya yang mungkin konten tersebut akan melengkapi konten atau artikel blog yang lainnya yang ada didalam blog mereka

Banyaknya pengunjung blog yang datang dengan berbagai sifat, sikap dan perilaku terkadang membuat khuatir bagi pemilik blog dan akhirnya memilih untuk melindungi semua atau sebagian artikel yang ada di blognya agar artikel tersebut tidak bisa di copy paste. Dan bagi Anda yang khawatir dengan artikel blog Anda dan ingin melindungi artikel tersebut, silahkan gunakan cara yang akan saya bahas berikut ini. Namun jika Anda menginginkan artikel blog Anda diberi password, silahkan baca Memasang password artikel blog

Untuk melindungi blognya agar artikel tidak bisa di copy paste, banyak yang menggunakan script anti copy paste, baik script yang berupa peringatan atau mematikan fungsi klik kanan pada mouse dan pada artikel ini saya menggunakan kode css agar artikel blog tidak bisa di copy paste yaitu dengan mematikan atau mendisable fungsi blog pada artikel yang dipilih menggunakan mouse atau dalam bahasa awamnya adalah Disable Text Selection

Daaann ternyata sudah banyak yang membahas tentang disbale text selection ini, saya sendiri menulisnya sesuai dengan ide saya sedangkan untuk sumbernya tidak mungkin saya tulis karena di Google sudah sangat banyak yang membahasnya. Nanti kalau saya tulis satu sumber, yang lainnya malah minta di tulis juga, namun yang pastinya tidak ada artikel yang sama seperti apa yang saya tulis ini karena saya menulis menggunakan kalimat dan bahasa saya sendiri. Kalau ada yang mengaku ada tulisan atau artikel yang sama dengan artikel ini, silahkan banding kemanapun

Perhatikan tampilan gambar berikut ini




Gambar diatas merupakan bentuk dari penerapan dari text selection yang saya buat sedemikian rupa. Ada 2 tampilan yang terdapat didalam gambar tersebut yaitu adanya artikel yang bisa di blok dan tidak bisa di blok. Sedangkan untuk DEMO langsung dari, saya menerapkan disable text selection ini pada 2 tulisan berikut ini

Gunakan mouse Anda untuk memblok 2 artikel berikut ini dan lihat hasilnya

1. Belajar ngeblog di Panduantemplateblog.com ternyata mudah sekali
   
2. Hayoo ajak teman-teman Anda untuk belajar disini! Gratis loh....

Itulah cara kerja text selection, jika kita memblok sebuah artikel atau paragrap maka akan terpilih sesuai dengan keinginan dan kita bisa menyalin artikel yang telah dipilih tersebut. Namun jika kita mendisable text selection ini maka hasilnya akan seperti pada poin 1 atau pada gambar yang bergerak diatas. Dan dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung

Dengan menggunakan kode CSS dari Text Selection ini lah, kita bisa melindungi blog kita agar artikel tidak bisa di copy paste. Dan untuk menerapkannya kedalam blog, salin kode berikut ini kedalam kode template blog

.disable_text_selection {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

Dan salin markup html berikut ini untuk memanggil fungsi dari kode CSS disable_text_selection diatas. Penempatan kode markup sesuai dengan keinginan, bisa di artikel atau pun di bagian sidebar blog

<div class="disable_text_selection">
Letakkan artikel blog disini agar tidak bisa di copy paste
</div>

Jadi dengan menggunakan kode CSS dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung. Memang cara ini sangat sederhana namun setidaknya masih membingungkan orang yang akan melakukan copy paste terhadap artikel blog kita

Membuat Efek Kembang Api dengan CSS

Membuat Efek Kembang Api dengan CSS - Pernah bermain kembang api? Atau pernah melihat kembang api meledak dan bertaburan di angkasa di malam hari? Pernah dong.. Biasanya pada hari perayaan seperti hari raya Idul Fitri dan Tahun Baru banyak orang yang merayakannya dengan pesta kembang api



Baca juga Menerapkan efek malam di Blog

Tampilan diatas merupakan DEMO dari efek kembang api dengan CSS yang sudah saya pasang di blog ini. Namun sayangnya, untuk membuat efek kembang api dengan CSS ini tidak hanya diperlukan kode CSS saja tapi juga menggunakan kode script. Meski panduan ini saya berikan, kemungkinan besar tidak banyak yang akan menggunakannya karena tidak ada kegunaannya jika ditampilkan di blog, meskipun itu untuk memperindah tampilan blog. Saya kira tidak ada gunanya, sama dengan efek-efek lainnya seperti turun salju, atau daun berjatuhan :)

Baca juga Efek Rontok dengan CSS

Jika ingin memasang efek kembang api dengan css ini kedalam blog Anda, silahkan saja. Namun perlu dipertimbangkan juga untuk penggunaan dan pemasangan kode yang akan bertambah di dalam template blog, jangan sampai seperti blog saya ini, sudah sangat banyak kode css, javascript dan html yang terpasang yang secara langsung juga mempengaruhi loading blog. Jika kode blognya masih sedikit, silahkan dipasang... :)

CSS
Letakkan sebelum ]]></b:skin> atau diantara <style type='text/css'> dan </style>

#stage {
position:relative;
height:400px;
background:#000;
background-image:-webkit-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYePg9wuvWDqgvxJRVf701yMP9jR_QjHYC2hbPPELSn-_afSoRddPxCBQoFO9KAJdAcIvsEWBvoZ7AE057Zpb6KRPExVEZE2UxRAY3Uiw8kIutJGg_yT8uSrz3K5QfQJ4Oe3hR9MVmH8I/s1600/efek-kembang-api-css.gif);
background-image:-moz-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -o-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: -ms-linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
background-image: linear-gradient(bottom, #017c0a, #014906 100px, rgba(0,0,0,1) 100px, rgba(0,0,0,0) 300px);
}
.launcher {
position:absolute;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
background:#fc073b;
border-bottom: 3px solid #2420e1;
}
.launcher div {
position:absolute;opacity:0;
-webkit-animation-name:explosion;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:explosion;
-moz-animation-duration:4s;
-moz-animation-iteration-count:infinite;
left:3px;
top:3px;
width:10px;
height:4px;
border-right:4px solid #2420e1;
border-radius:2px;
-webkit-transform-origin:0 0;
-moz-transform-origin: 0 0;}

HTML
Letakkan kode HTMLnya sesuai keinginan. Misalnya di sidebar melalui menu Tata Letak dengan menambahkan kolom Widget disana :)

<div id="stage">
</div>

SCRIPT
Simpan kode scriptnya sebelum </body>
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var num_launchers = 12;
var num_flares = 20;
var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'white', 'blue', 'green'];
var cssIdx = document.styleSheets.length - 1;

function myRandom(from, to)
{
return from + Math.floor(Math.random() * (to-from));
}

var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
+ "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
+ " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";

for(var i=0; i < num_launchers; i++) {
leftfrom = myRandom(15, 85);
lefttop = myRandom(30, 70);
toptop = myRandom(20, 200);
leftend = lefttop + (lefttop-leftfrom)/2;
botbot = toptop + 100;

csscode = keyframes_template;
csscode = csscode.replace(/LEFTFROM/, leftfrom);
csscode = csscode.replace(/LEFTTOP/, lefttop);
csscode = csscode.replace(/TOPTOP/, toptop);
csscode = csscode.replace(/LEFTEND/, leftend);
csscode = csscode.replace(/BOTBOT/, botbot);

try { // WebKit browsers
csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }

try { // Mozilla browsers
csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
}

for(var i=0; i < num_launchers; i++) {
var rand = myRandom(0, flare_colours.length - 1);
var rand_colour = flare_colours[rand];
var launch_delay = myRandom(0,100) / 10;

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
+ " -webkit-animation-name: flight_" + i + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-name: flight_" + i + ";\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);

csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
+ " border-color: " + rand_colour + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_flares; i++) {
csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
+ " -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ " -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}

for(var i=0; i < num_launchers; i++) {
var newdiv = document.createElement("div");
newdiv.className = "launcher";
for(var j=0; j < num_flares; j++) {
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
}, false);

// ]]>
</script>

Silahkan jika tertarik untuk membuat dan memasang efek kembang api dengan CSS seperti yang telah dibahas di atas. Semoga bermanfaat

Validasi Kode HTML5 & CSS Blog

Validasi Kode HTML5 & CSS Blog - Pada saat blogwalking kemarin ada sebuah artikel dari teman saya yang mengingatkan saya akan validasi kode HTML atau CSS blog. Didalam artikel teman saya tersebut dijelaskan bagaimana agar kode HTML yang tidak valid menjadi valid. Setelah membaca artikel yang ada di blognya teman tersebut, saya pun mencoba untuk mengecek kode html blog ini, apakah masih valid atau tidak. Dan ternyata hasilnya sebagai berikut

atau bisa di cek langsung di http://validator.w3.org/check?uri=http%3A%2F%2Fwww.panduantemplateblog.com%2F

Saya cek validasi kode HTML5 & CSS blog ini karena hanya ingin melihat apakah ada kode error yang sama yang seperti dijelaskan oleh +yanto cungkup didalam artikelnya hapus kode dir ltr dan ternyata setelah saya cek hasilnya; tidak ada kode HTML yang error alias kode HTML5 blog ini masih valid atau seperti yang terlihat pada gambar diatas

Baca juga Penggunaan Template Valid Pada Blog

Kenapa saat melakukan validasi kode HTML5 pada blog ini masih memiliki kode html yang valid? Padahal kalau dilihat dari sumber kode blog ini di view-source:http://www.panduantemplateblog.com, Anda semua pasti akan kaget kalau kode template blog ini (html, javascript, dan css) jumlah sangat banyak sekali. Mungkin saking banyaknya, saya beranggapan kalau tidak ada blog yang memiliki kode-kode template sebanyak blog saya ini. Belum lagi kode CSS dan javascript yang tersimpan dalam Google Drive

Baca juga Cara Edit Kode CSS di Google Drive

Jika pada kode HTML5 blog ini valid, namun pada kode CSSnya khususnya CSS3 sungguh lebih sangat mengejutkan. Dengan banyaknya kode CSS yang ada didalam template blog ini, sudah bisa ditebak kalau untuk kode CSS blog tidak valid. Bahkan sangat tidak valid seperti pada tampilan gambar berikut ini

Ternyata banyak error yang terjadi pada kode CSS template blog ini. Apakah itu membuat saya pusing dan harus memikirkannya agar valid CSS3? Tidak, saya tidak mau memikirkan mengenai validasi kode HTML & CSS blog ini karena menurut saya hal ini akan sangat tidak perlu. Valid atau tidak valid kode template blog tidak berpengaruh pada nilai SEO blog. Yang sekarang adalah lebih baik teman-teman meninggalkan komentar untuk artikel blog ini karena itu lebih penting dari segalanya :)

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks - Saya tidak tahu apa nama efek yang saya buat ini, karena adanya hasil efek berputar maka saya menamakannya "Roll Spin Effect" - Roll adalah gulungan dan Spin adalah berputar. Jadi seperti itulah, entah nyambung atau tidak yang penting efek dari hasilnya adalah berputar. Selain menimbulkan efek berputar pada teks, efek lainnya adalah bisa menghentikan efek berputar tersebut dengan mengarahkan kursor mouse

Membuat roll-spin effect atau efek berputar pada teks ini hanya menggunakan sedikit kode CSS dan tanpa script sama sekali sehingga tidak akan memperberat loading blog Anda

Baca juga

DEMOnya dibawah ini ya..

Roll-Spin atau Berputar-putar

Cara Membuat Roll-Spin Effect (Efek Berputar) Pada Teks
Salin kode CSS berikut ini kedalam template blog

#roll-bg {
margin:1em auto;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px;
}
#roll-bg p {
font-size:30px;
text-align:center;
color:#444;
padding:10px 0;
}
#roll-spin {
-webkit-animation-name:roll-spin;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:6s;
animation-name:roll-spin;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-duration:6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#roll-spin:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes roll-spin {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(-360deg);}
}
@keyframes roll-spin {
from {-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
transform:rotateY(0deg);}
to {-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
transform:rotateY(-360deg);}
}

HTML
<div id="roll-bg">
<p id="roll-spin">
Roll-Spin atau Berputar-putar</p>
</div>

Kode diatas merupakan pengembangan dari efek jatuh yang pernah saya buat sebelumnya, silahkan baca di

Silahkan jika tertarik untuk membuat rool spin effect diatas, agar teks di blog Anda bisa berputar

Membuat Agar Tinggi Kontainer Mengikuti Tinggi Latar Gambarnya yang Responsif/Adaptif

Saya agak kesulitan untuk menemukan istilah yang tepat untuk menyatakan “latar gambar yang ukurannya bisa menyesuaikan diri dengan kontainer setiap kali ukuran kontainer berubah”, jadi Saya sebut saja sebagai ‘responsif’ atau ‘adaptif’, meskipun istilah tersebut sebenarnya kurang tepat. Istilah fluid lebih tepat.

Ketika kita ingin membuat sebuah gambar menjadi fluid, kita bisa mengeset lebar gambar tersebut ke dalam satuan persen dan tinggi gambar sebagai auto untuk menjaga agar ukuran tingginya tetap proporsional:

img {
  width:100%;
  height:auto;
}

Lihat Demo

Bagaimana dengan latar gambar? Kita bisa menggunakan properti background-size dengan nilai cover atau 100% auto. Hanya saja, di sini masalahnya adalah kita tidak bisa membuat tinggi kontainer mengikuti tinggi latar gambar setiap kali lebar kontainer berubah:

div {
  background:transparent url('path/to/image.jpg') no-repeat 50% 0;
  background-size:100% auto;
  height:615px;
}

Lihat Demo

Rasio Ukuran Tinggi Proporsional

Ada sebuah metode yang bisa digunakan untuk membuat tinggi kontainer gambar bisa mengikuti tinggi latar gambar yang ada di dalamnya (di belakangnya), yaitu dengan cara mengeset ukuran tinggi kontainer menjadi 0 dan menentukan nilai sebuah sisi padding vertikal dalam satuan persen untuk menciptakan ukuran tinggi kontainer palsu. Nilainya berupa hasil perbandingan antara tinggi gambar dengan lebar gambar dalam bentuk persen. Perhitungannya seperti ini:

Rasio = (Tinggi / Lebar * 100) + '%';

Atau jika diterjemahkan ke dalam bahasa yang sederhana adalah: “Tinggi proporsional X adalah sama dengan sekian persen dari lebarnya.”

Saya menggunakan gambar dengan ukuran lebar 800 piksel dan tinggi 615 piksel pada halaman demo, jadi:

Rasio Tinggi = (615 / 800 * 100) + '%';
Rasio Tinggi = 76.875%;

div {
  background:transparent url('path/to/image.jpg') no-repeat 50% 0;
  background-size:100% auto;
  height:0; /* Set tinggi kontainer menjadi `0` */
  padding-bottom:76.875%; /* Gunakan `padding` untuk menciptakan dimensi tinggi */
}

Lihat Demo

Catatan: Jika Anda telah menerapkan CSS Universal Box-Sizing, Saya sarankan Anda untuk menambahkan properti box-sizing dengan nilai content-box pada kontainer untuk mengembalikan logika box-model ke keadaan semula. Meskipun ketika Saya coba tanpa menambahkan properti itu sebenarnya tidak ada masalah. Ini cuma untuk memantapkan saja:

div {
  background:transparent url('path/to/image.jpg') no-repeat 50% 0;
  background-size:100% auto;
  height:0;
  padding-bottom:76.875%;
  box-sizing:content-box;
}

Menambahkan Konten ke dalam Kontainer

Anda memerlukan sebuah elemen tambahan untuk diposisikan sebagai elemen absolute karena kontainer yang sekarang sudah tidak memiliki ruang lagi (tinggi kontainer sekarang adalah 0 piksel):

HTML

<div class="container">
  <div class="container-content">Konten di sini…</div>
</div>

CSS

.container {
  background:transparent url('path/to/image.jpg') no-repeat 50% 0;
  background-size:100% auto;
  height:0;
  padding-bottom:76.875%;
  box-sizing:content-box;
  position:relative;
}

.container-content {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:auto;
}

Lihat Demo

Efisien dengan `inherit`

Terkadang kita menemui sebuah saat dimana kita harus membuat sebuah elemen judul bersatu dengan tautan, namun keduanya harus tetap memiliki warna yang sama. Bagian yang paling sering mendapatkan kondisi seperti ini adalah ada pada bagian header sebuah halaman web:

<header class="blog-header">
  <h1 class="blog-title">
    <a href="/">Blog Title</a>
  </h1>
  <p class="blog-slogan">Blog slogan goes here.</p>
</header>

Pada web-web standar, umumnya bagian ini memiliki sebuah sikap yang unik, yaitu ketika seorang pengguna sedang berada di halaman muka, maka tautan tidak akan diterapkan pada judul tersebut, akan tetapi ketika pengguna tersebut sedang berada di halaman yang lain, maka tautan menuju halaman muka akan diterapkan pada judul tersebut. Seperti inilah kira-kira kondisinya:

<header class='blog-header'>
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <h1 class='blog-title'>
      <a expr:href='data:blog.url'>Blog Title</a>
    </h1>
  <b:else/>
    <h1 class='blog-title'>Blog Title</h1>
  </b:if>
  <p class='blog-slogan'>Blog slogan goes here.</p>
</header>

Memastikan agar warna elemen judul tetap sama di mana saja itu penting agar semuanya terlihat konsisten. Katakanlah kita akan membuat warna judul blog di atas menjadi hijau:

.blog-header h1 {color:green}

Ini akan berhasil jika kita sedang berada di halaman depan. Judul halaman akan berwarna hijau. Akan tetapi ketika kita berpindah ke halaman lain, warna judul akan berubah menjadi sama dengan warna tautan karena teks judul sekarang terbungkus oleh tautan yang posisinya berada di dalam elemen judul.

Untuk mengatasi masalah tersebut, biasanya kita akan melakukan hal ini:

.blog-header h1 {color:green}
.blog-header h1 a {color:green}

Saya biasa menemui deklarasi CSS semacam itu pada judul-judul posting di dalam sebuah templat Blogger:

.post-title {
  font:normal normal 20px/1.4 "Open Sans",Sans-Serif;
  margin:0 0 .5em;
  text-shadow:none;
  color:#5686D6;
}

.post-title a,
.post-title a:focus,
.post-title a:hover,
.post-title a:active {
  color:#5686D6;
  text-decoration:none;
}

Ini tidak efisien, karena jika suatu hari nanti kita ingin mengganti warna elemen judul tersebut, maka kita harus mengubah kode warnanya sebanyak minimal dua kali. Seandainya jumlah deklarasi semacam ini cuma ada satu saja mungkin tidak masalah, tapi bagaimana kalau ada banyak? Apalagi jika posisinya tidak berdekatan seperti contoh di atas. Mungkin posisi deklarasi warna elemen judul berada di sebelah sini dan posisi deklarasi warna tautan judul berada di sebelah sana. Pasti akan tambah susah lagi untuk mencarinya.

“Each property may also have a cascaded value of ‘inherit’, which means that, for a given element, the property takes the same specified value as the property for the element’s parent.” — CSS2 – The ‘inherit’ Value

Menggunakan nilai inherit bisa menjadi solusi. Dengan menuliskan nilai inherit pada properti CSS tertentu, maka nilai properti tersebut akan mengikuti nilai properti yang sama dari elemen induknya:

.blog-header h1 {color:green}
.blog-header h1 a {color:inherit}

Dengan begitu, setiap kali kita mengubah warna elemen judul pada contoh di atas, maka warna tautan di dalamnya akan selalu mengikuti.

Contoh lain ada pada masalah warna border. Terkadang kita menemui sebuah kasus dimana kita harus membuat sebuah tata letak halaman dengan beberapa border di dalamnya yang semua warnanya harus sama. Dengan memanfaatkan nilai inherit, kita bisa mewarnai semua border cukup pada elemen induknya saja:

Lihat Demo

Contoh lain lagi adalah mengenai cara paling efisien untuk mengubah tipe fon pada elemen-elemen formulir menjadi sama dengan tipe fon pada halaman:

button,
input,
select,
textarea {font:inherit}

Lihat Demo

Wizpert Belajar Coding Secara Gratis

Wizpert Belajar Coding Secara Gratis - Internet memang menyediakan segala sumber informasi untuk belajar berbagai ilmu dan salah satu tempat belajar adalah Wizpert. Kenapa Wizpert? Karena disana disediakan banyak informasi yang kebanyakan dibutuhkan oleh orang. Salah satu topik yang saya senangi untuk belajar di wizpert adalah HTML/CSS. Bahkan saya sendiri membuka diri untuk memberikan ilmu saya disana tentang HTML dan CSS, Anda pun bisa bertanya ke saya melalui chat secara langsung

Apakah Wizpert hanya menyediakan satu topik saja? Tentu tidak, selain topik HTML/CSS, Anda juga bisa memilih topik-topik yang ingin Anda ketahui dan ingin dipelajari secara langsung

Bagaimana metode belajarnya? Untuk belajar apapun di Wizpert seperti Programing/Coding, Bisnis atau pekerjaan, Hiburan, Pendidikan, Rumah tangga dan sebagainya, cukup dengan memilih topik yang disediakan dan memilih orang-orang yang membahas topik tersebut dan bertanyalah tentang apa yang Anda tanyakan maka pertanyaan Anda akan langsung dijawab dengan cara chatting langsung. Jika ingin melakukan chat dengan saya silahkan klik tombol berikut ini

Apakah Wizpert gratis? Sesuai dengan petunjuk yang saya dapatkan, Wizpert gratis untuk digunakan namun untuk menggunakannya terlebih dahulu harus memiliki akun disana. Untuk pendaftaran silahkan klik www.Wizpert.com

Kenapa saya merekomendasikan Wizpert ini? Karena saya yakin, wizpert merupakan tempat yang cocok untuk belajar apa yang ingin saya ketahui yaitu tentang HTML/CSS secara khusus. Namun saya juga tidak mengharuskan atau memaksa Anda untuk bergabung di Wizpert bersama saya :)

Dodecahedron: Pentagonal Efek Hover CSS

Dodecahedron: Pentagonal Efek Hover CSS - Entahlah apa namanya, yang pasti saat saya melakukan pencarian dengan kata kunci pentagon css dan css modern akhirnya saya temukan sebuah website yang hanya menampilkan efek hover yang sangat menakjubkan. Bahkan dari kata kunci css modern, saya juga mendapatkan script dan css yang disebut Modernizr. Dan dibeberapa forum ternyata kode Modernizr ini telah banyak dibahas juga, namun yang pastinya yang saya ketahui sumber asli dari pentagon efek hover ini berasal dari themaninblur dan menamakan efek hover ini sebagai Dodecahedron

Sumber dari Dodecahedron: Pentagonal Efek Hover CSS ini saya dapatkan dari sebuah situs yang hanya menayangkan dari efek hover tersebut dan pentagonal, saya namakan sendiri karena ada bentuk segi lima yang terdapat pada tampilannya (seperti gambar diatas). Dan disitus itu sendiri tidak terdapat panduan atau artikel yang menjelaskan cara membuat efek hover tersebut. Sehingga, karena tidak ada penjelasannya dari situs tersebut, saya pun mencuri kode dari Dodecahedron tersebut atau dari kode Modernizr

Untuk situsnya silahkan Anda buka CSS3 Dodecahedron

Dodecahedron: Pentagonal Efek Hover CSS

Jika Anda kesulitan untuk menemukan kode yang terdapat pada situs yang menayangkan tampilan langsung dari efek hover Dodecahedron dan Modernizr ini, silahkan gunakan kode yang telah saya ambil berikut ini. Saya mengambil kode ini bukan untuk tujuan komersial tapi hanya sebagai pembelajaran dengan tetap menyertakan sumber dari situs yang telah menayangkannya. Begitupun dengan kode CSS dan javascript dari kode Modernizr ini masih sesuai aslinya. Jika anda ingin menggunakan kode berikut ini, silahkan saja dan saya tidak bertanggungjawab dari penggunaan yang Anda lakukan

DEMO

Silahkan mainkan mouse Anda pada kubik segi lima ini dan keluarkan kursor mouse kearah tepi atau pinggir

KODE CSS3 DODECAHEDRON

#dodecahedron {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: -90px 0 0 -70px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 70px 80px -100px;
 -moz-transform-origin: 70px 80px -100px;
 transform-origin: 70px 80px -100px;
}

.group {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 transform-origin: 0 100%;
 -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

#group1 {
 left: -23px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed #group1 {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

.groupB {
 left: 55px;
 top: -173px;
 -webkit-transform: rotateZ(36deg) rotateX(20deg);
 -moz-transform: rotateZ(36deg) rotateX(20deg);
 transform: rotateZ(36deg) rotateX(20deg);
}

#dodecahedron.closed .groupB {
 -webkit-transform: rotateZ(36deg) rotateX(63deg);
 -moz-transform: rotateZ(36deg) rotateX(63deg);
 transform: rotateZ(36deg) rotateX(63deg);
}

.groupC {
 left: -24px;
 top: -78px;
 -webkit-transform: rotateZ(-36deg) rotateX(20deg);
 -moz-transform: rotateZ(-36deg) rotateX(20deg);
 transform: rotateZ(-36deg) rotateX(20deg);
}

#dodecahedron.closed .groupC {
 -webkit-transform: rotateZ(-36deg) rotateX(63deg);
 -moz-transform: rotateZ(-36deg) rotateX(63deg);
 transform: rotateZ(-36deg) rotateX(63deg);
}

#group2 {
 left: 43px;
 top: 26px;
 -webkit-transform: rotateZ(-108deg) rotateX(20deg);
 -moz-transform: rotateZ(-108deg) rotateX(20deg);
 transform: rotateZ(-108deg) rotateX(20deg);
}

#dodecahedron.closed #group2 {
 -webkit-transform: rotateZ(-108deg) rotateX(63deg);
 -moz-transform: rotateZ(-108deg) rotateX(63deg);
 transform: rotateZ(-108deg) rotateX(63deg);
}

#group3 {
 left: 162px;
 top: -4px;
 -webkit-transform: rotateZ(-180deg) rotateX(20deg);
 -moz-transform: rotateZ(-180deg) rotateX(20deg);
 transform: rotateZ(-180deg) rotateX(20deg);
}

#dodecahedron.closed #group3 {
 -webkit-transform: rotateZ(-180deg) rotateX(63deg);
 -moz-transform: rotateZ(-180deg) rotateX(63deg);
 transform: rotateZ(-180deg) rotateX(63deg);
}

#group4 {
 left: 169px;
 top: -128px;
 -webkit-transform: rotateZ(-252deg) rotateX(20deg);
 -moz-transform: rotateZ(-252deg) rotateX(20deg);
 transform: rotateZ(-252deg) rotateX(20deg);
}

#dodecahedron.closed #group4 {
 -webkit-transform: rotateZ(-252deg) rotateX(63deg);
 -moz-transform: rotateZ(-252deg) rotateX(63deg);
 transform: rotateZ(-252deg) rotateX(63deg);
}

#group5 {
 left: 54px;
 top: -173px;
 -webkit-transform: rotateZ(-324deg) rotateX(20deg);
 -moz-transform: rotateZ(-324deg) rotateX(20deg);
 transform: rotateZ(-324deg) rotateX(20deg);
}

#dodecahedron.closed #group5 {
 -webkit-transform: rotateZ(-324deg) rotateX(63deg);
 -moz-transform: rotateZ(-324deg) rotateX(63deg);
 transform: rotateZ(-324deg) rotateX(63deg);
}

.pentagon {
 position: absolute;
 left: 0;
 top: 0;
 width: 166px;
 height: 156px;
 opacity: 0.67;
}

.p {
    position: absolute;
}

.p1 {
    position: absolute;
    left: 31px;
    top: 58px;
    width: 100px;
    height: 96px;
    background-color: #ff0000;
}

.p2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 59px solid #ff0000;
    border-left: 81px solid transparent;
    border-right: 81px solid transparent;
}

.p3 {
    position: absolute;
    left: 0px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-right: 32px solid #ff0000;
}

.p4 {
    position: absolute;
    left: 130px;
    top: 58px;
    width: 0;
    height: 0;
    border-bottom: 96px solid transparent;
    border-left: 32px solid #ff0000;
}

#pentagon2 .p1 {
 background-color: #ff6600;
}

#pentagon2 .p2 {
 border-bottom-color: #ff6600;
}

#pentagon2 .p3 {
 border-right-color: #ff6600;
}

#pentagon2 .p4 {
 border-left-color: #ff6600;
}

#pentagon3 .p1 {
 background-color: #ffcc00;
}

#pentagon3 .p2 {
 border-bottom-color: #ffcc00;
}

#pentagon3 .p3 {
 border-right-color: #ffcc00;
}

#pentagon3 .p4 {
 border-left-color: #ffcc00;
}

#pentagon4 .p1 {
 background-color: #ccff00;
}

#pentagon4 .p2 {
 border-bottom-color: #ccff00;
}

#pentagon4 .p3 {
 border-right-color: #ccff00;
}

#pentagon4 .p4 {
 border-left-color: #ccff00;
}

#pentagon5 .p1 {
 background-color: #66ff00;
}

#pentagon5 .p2 {
 border-bottom-color: #66ff00;
}

#pentagon5 .p3 {
 border-right-color: #66ff00;
}

#pentagon5 .p4 {
 border-left-color: #66ff00;
}

#pentagon6 .p1 {
 background-color: #00cc33;
}

#pentagon6 .p2 {
 border-bottom-color: #00cc33;
}

#pentagon6 .p3 {
 border-right-color: #00cc33;
}

#pentagon6 .p4 {
 border-left-color: #00cc33;
}

#pentagon7 .p1 {
 background-color: #00cc99;
}

#pentagon7 .p2 {
 border-bottom-color: #00cc99;
}

#pentagon7 .p3 {
 border-right-color: #00cc99;
}

#pentagon7 .p4 {
 border-left-color: #00cc99;
}

#pentagon8 .p1 {
 background-color: #00ccff;
}

#pentagon8 .p2 {
 border-bottom-color: #00ccff;
}

#pentagon8 .p3 {
 border-right-color: #00ccff;
}

#pentagon8 .p4 {
 border-left-color: #00ccff;
}

#pentagon9 .p1 {
 background-color: #0066ff;
}

#pentagon9 .p2 {
 border-bottom-color: #0066ff;
}

#pentagon9 .p3 {
 border-right-color: #0066ff;
}

#pentagon9 .p4 {
 border-left-color: #0066ff;
}

#pentagon10 .p1 {
 background-color: #0000ff;
}

#pentagon10 .p2 {
 border-bottom-color: #0000ff;
}

#pentagon10 .p3 {
 border-right-color: #0000ff;
}

#pentagon10 .p4 {
 border-left-color: #0000ff;
}

#pentagon11 .p1 {
 background-color: #6600ff;
}

#pentagon11 .p2 {
 border-bottom-color: #6600ff;
}

#pentagon11 .p3 {
 border-right-color: #6600ff;
}

#pentagon11 .p4 {
 border-left-color: #6600ff;
}

#pentagon12 .p1 {
 background-color: #cc00ff;
}

#pentagon12 .p2 {
 border-bottom-color: #cc00ff;
}

#pentagon12 .p3 {
 border-right-color: #cc00ff;
}

#pentagon12 .p4 {
 border-left-color: #cc00ff;
}

p {
 margin: 1em 0 0 0;
 -webkit-transform: translateZ(9999px);
 -moz-transform: translateZ(9999px);
 transform: translateZ(9999px);
 text-align: center;
}

p a:last-child {
 margin-left: 1em;
 border-left: 1px solid #4c4c4c;
 padding-left: 1em;
}

KODE HTML DODECAHEDRON

 <div id="dodecahedron">
  <div id="pentagon1" class="pentagon">
   <div class="p p1"></div>
   <div class="p p2"></div>
   <div class="p p3"></div>
   <div class="p p4"></div>
  </div> <!-- /.pentagon -->
  <div id="group1" class="group">
   <div id="pentagon2" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon3" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
     <div class="group groupC">
      <div id="pentagon4" class="pentagon">
       <div class="p p1"></div>
       <div class="p p2"></div>
       <div class="p p3"></div>
       <div class="p p4"></div>
      </div> <!-- /.pentagon -->
     </div> <!-- /.groupC -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group1 -->
  <div id="group2" class="group">
   <div id="pentagon5" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon6" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group2 -->
  <div id="group3" class="group">
   <div id="pentagon7" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon8" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group3 -->
  <div id="group4" class="group">
   <div id="pentagon9" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon10" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group4 -->
  <div id="group5" class="group">
   <div id="pentagon11" class="pentagon">
    <div class="p p1"></div>
    <div class="p p2"></div>
    <div class="p p3"></div>
    <div class="p p4"></div>
   </div> <!-- /.pentagon -->
   <div class="group groupB">
    <div id="pentagon12" class="pentagon">
     <div class="p p1"></div>
     <div class="p p2"></div>
     <div class="p p3"></div>
     <div class="p p4"></div>
    </div> <!-- /.pentagon -->
   </div> <!-- /.groupB -->
  </div> <!-- /#group5 -->
 </div> <!-- /#dodecahedron -->

KODE JAVASCRIPT MODERNIZR 1

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Contains: csstransforms3d | teststyles | testprop | prefixes
 */
;window.Modernizr=function(a,b,c){function z(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(m.join(a+";")+(b||""))}function v(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n={},o={},p={},q=[],r=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["&shy;","<style>",a,"</style>"].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)};var A=function(a,c){var d=a.join(""),f=c.length;r(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);n.csstransforms3d=function(){var a=!!z(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a};for(var B in n)u(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));v(""),i=k=null,e._version=d,e._prefixes=m,e.testProp=function(a){return z([a])},e.testStyles=r;return e}(this,this.document);

KODE JAVASCRIPT MODERNIZR 2

var lastEventX = null;
var lastEventY = null;
var velocityX = 0;
var velocityY = 0;
var movementTimer = null;

$(init);

function init() {
 if (!Modernizr.csstransforms3d) {
  alert('This demo requires a browser that has 3D CSS transforms. As of December 15, 2011 that means the latest Chrome, Safari or Firefox Aurora');
 }
 
 $(document).mousemove(function(event) {
  if (movementTimer != null) {
   clearTimeout(movementTimer);
  }
  
  $('#dodecahedron').addClass('closed');
  
  movementTimer = setTimeout(function() {
   $('#dodecahedron').removeClass('closed');
  }, 1600);
  
  if (lastEventX != null) {
   var velocityX = (event.clientX - lastEventX) * 0.025;
   var velocityY = (event.clientY - lastEventY) * 0.025;
   var maxVelocity = velocityX;
   
   if (Math.abs(velocityX) < Math.abs(velocityY)) {
    maxVelocity = velocityY;
   }
   
   window.velocityX += velocityX;
   window.velocityY += velocityY;
  }
  
  lastEventX = event.clientX;
  lastEventY = event.clientY;
 });
 
 var body = document.getElementsByTagName('body')[0];
 body.addEventListener('touchmove', touchMove, false);
 body.addEventListener('touchstart', touchStart, false);
 body.addEventListener('touchend', touchEnd, false);

 setTimeout(function() {
  $(document).mousemove(hideInstructions);
  body.addEventListener('touchmove', hideInstructions, false);
  
  function hideInstructions() {
   $('#instructions').animate({opacity: 0}, 500, function() {
    $(this).remove();
   });
  }
 }, 2000);

 draw();
}

function draw() {
 var FRICTION = 0.96;
 var MIN_VELOCITY = 0.01;
 
 var dodecahedron = $('#dodecahedron');
 
 if (dodecahedron.data('angleX') == null) {
  dodecahedron.data('angleX', 0);
  dodecahedron.data('angleY', 0);
 }
 
 var angleX = dodecahedron.data('angleX');
 var angleY = dodecahedron.data('angleY');
 
 angleX = (angleX + velocityX) % 360;
 dodecahedron.data('angleX', angleX);
 velocityX *= FRICTION;
 if (Math.abs(velocityX) < MIN_VELOCITY) {
  velocityX = 0;
 }

 angleY = (angleY + velocityY) % 360;
 dodecahedron.data('angleY', angleY);
 velocityY *= FRICTION;
 if (Math.abs(velocityY) < MIN_VELOCITY) {
  velocityY = 0;
 }

 dodecahedron
  .css('-webkit-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('-moz-transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')
  .css('transform', 'rotateX(' + angleY +'deg) rotateY(' + -angleX + 'deg)')

 setTimeout(draw, 25);
}

function touchStart(event) {
 event.preventDefault();
}

function touchEnd(event) {
 event.preventDefault();
}

function touchMove(event) {
 event.preventDefault();

 if (lastEventX != null) {
  var velocityX = (event.touches[0].pageX - lastEventX) * 0.025;
  var velocityY = (event.touches[0].pageY - lastEventY) * 0.025;
  var maxVelocity = velocityX;
  
  if (Math.abs(velocityX) < Math.abs(velocityY)) {
   maxVelocity = velocityY;
  }
  
  window.velocityX = window.velocityX + velocityX;
  window.velocityY = window.velocityY + velocityY;
 }
 
 lastEventX = event.touches[0].pageX;
 lastEventY = event.touches[0].pageY;
}

Untuk cara penggunaannya salin kode CSS diatas kedalam template blog dan untuk penggunaan kode javascript, saya sarankan lebih baik di simpan di Google Drive dan letakkan kode javascript tersebut sebelum kode </head>

Maaf, saya tidak bisa menjelaskan secara langsung penggunaan dari Dodecahedron: Pentagonal Efek Hover CSS ini. Toh manfaat dari efek hover ini tidak begitu penting untuk blog, Namun jika Anda ingin memasangnya, silahkan gunakan saja dan jangan lupa pasang kode jQuery jika di template blog belum tersedia

Membuat Popular Post Keren dan Berwarna

Popular post/artikel populer adalah artikel yang banyak dilihat oleh pengunjung. Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat. Untuk tampilan popular post akan terlihat seperti gambar dibawah ini.

Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda
2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.

3. Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Selamat sekarang Anda mempunyai tampilan popular keren, unik, warna - warni dan menarik. Anda juga bisa mengganti warna tersebut dengan mengubah nilai pada CSS Pengaturan Warna ;)

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar - Dari beberapa kode efek yang ada di template blog ini, saya coba untuk mengkombinasikannya menjadi efek yang lain seperti yang akan saya jelaskan pada artikel ini, efek jatuh. Efek jatuh ini bisa digunakan pada teks atau gambar dan penggunaannya pun cukup mudah karena hanya menggunakan kode css saja

PANDUAN TEMPLATE BLOG

Untuk membuat efek jatuh dengan css pada teks atau gambar seperti contoh diatas, caranya cukup mudah

• Login ke akun Blogger Anda
• Pilih menu Template >> Edit HTML
• Cari kode ]]></b:skin> atau </style>. Untuk mencari kode silahkan gunakan caranya disini
• Salin kode css berikut sebelum kode ]]></b:skin> atau </style>
• Kode CSS
  

  .imganimasi{
   -webkit-animation-duration: 3s;
       -webkit-animation-delay: 2s;
       -webkit-animation-iteration-count: infinite;
  }
  .animasijatuh {
   -webkit-animation-name: animasijatuh;
   -moz-animation-name: animasijatuh;
   -o-animation-name: animasijatuh;
   animation-name: animasijatuh;
  }
  @-webkit-keyframes animasijatuh {
   0%{-webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
   20%, 60%{ -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
   40%{-webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
   80%{-webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
   100%{-webkit-transform: translateY(700px); opacity: 0; }
  }
  @-moz-keyframes animasijatuh {
   0%{-moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
   20%, 60%{-moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
   40%{-moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
   80%{-moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
   100%{-moz-transform: translateY(700px); opacity: 0;}
  }
  @-o-keyframes animasijatuh {
   0%{-o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
   20%, 60%{-o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
   40%{-o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
   80%{-o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
   100%{-o-transform: translateY(700px); opacity: 0;}
  }
  @keyframes animasijatuh {
   0%{transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out;} 
   20%, 60%{transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out;} 
   40%{transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out;} 
   80%{transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out;} 
   100%{transform: translateY(700px); opacity: 0;}
  }

• Salin kode html berikut ini dimanapun yang ingin Anda berikan efek jatuh didalam blog Anda

• <div class="imganimasi animasijatuh"></div>

• Pemasangan efek jatuh pada teks
  

  <div class="imganimasi animasijatuh">Masukkan Teks Disini</div>

• Pemasangan efek jatuh pada gambar
  

  <div class="imganimasi animasijatuh"><img src="ganti-dengan-link-gambar-disini" /></div>

Tertarik menggunakan efek jatuh dengan css pada teks dan gambar seperti contoh diatas? Silahkan dan semoga bermanfaat