He ... he ... Lucu juga tak pikir-pikir. Aha ... mengapa aku begitu "ngebet" sama CSS3? Aneh nggak, ya?
Berhari-hari sudah dan beberapa posting terakhir yang berjumlah belasan, semuanya hampir tak pernah lepas dari CSS3 Transition dan Transformation. He ... heh .. Kadang aku heran juga sama diri ku sendiri. Knapa CSS terbaru ini begitu membelenggu pikiran hingga semua konsentrasi posting dan tutorial tercurah ke sana. Bahkan aku punya sedikit ide gila (membuat sebuah demo CSS3) yang pastinya akan mengejutkan bagi pengunjung blog tertentu. Nggak perlu aku omongkan dulu karena hal ini masih aku pertimbangkan dalam "otak sinting ku". Tentu saja ide gila ini sering-membuat aku tersenyum sendiri membayangkan berbagai hal yang pasti akan terjadi seandainya jadi aku buat. Gila, lucu, konyol (bukan konyol jaran "kuda", broer. Ah ..., pikiran kalian selalu ngeres "kotor"), bikin penasaran, bikin marah dan tentu saja beberapa orang akan senang dan sebaliknya beberapa orang akan malu, kaget atau mengumpat. He ... he ... coba tebak apa yang ada di otak jelek si gubhug reyot?!
CSS3 adalah sebuah obsesi besar untuk membuat desain blog menjadi lebih simple, dinamis sekaligus bikin decak kagum pengunjung. Ini pasti akan segera terjadi dan tak lama lagi semua desain akan berubah total dengan melibatkan 90% CSS3. Pertimbangan inilah yang melandasi konsentrasi posting ku belakangan ini. Di bawah ini adalah satu desain kecil untuk merubah tampilan read more blogspot. Membuat animasi pada read more blogspot baru. Hanya dengan menambahkan kode CSS di atas ]]></b:skin>, maka selesai sudah. Sampeyan tinggal lihat hasilnya dengan membuka blog. Gampang, toh! Mau lihat bentuk read more beranimasi ini?!
.jump-link {
padding: 10px 0;
height: 40px;
}
.jump-link a {
padding: 0px 10px;
border: 2px outset #993300;
background: #888;
text-decoration: blink;
text-align: center;
float: right;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font: 16px Times;
font-weight: bold;
color: #99FFFF;
text-shadow: 1px 1px 1px #000;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
.jump-link:hover a {
color: red;
background: #66CCFF;
font-size: 18px;
-o-transform: translate(-40px) scale(1.1) rotate(-10deg);
-moz-transform: translate(-40px) scale(1.1) rotate(-10deg);
-webkit-transform: translate(-40px) scale(1.1) rotate(-10deg);
text-decoration: none;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
.jump-link a:active {
color: #0000CC;
background: #aaa;
border:2px outset #333;
-o-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}
Cara membuat read more beranimasi dengan CSS3
- Login : Login to Blogger. Gunakan User Name atau Email Address serta Password. Setelah data tersebut dituliskan dengan benar, KLIK "Login".
- Dasboard (Dasbor) : Ini halaman yang akan dijumpai setelah login. Akan terlihat beberapa buah link di dalamnya. Cari dan KLIK "Design (Rancangan)". Tunggu beberapa saat!
- Design (Rancangan) : KLIK link "Edit HTML".
- Edit HTML : Setelah halaman ini terbuka, maka akan terlihat kode html penyusun blog. Silahkan cari kode ]]></b:skin>.
- Copy - Paste : Copy kode CSS di atas dan pastekan tepat di atas kode ]]></b:skin>.
- SAVE Templates (Simpan Template) : KLIK "SAVE Templates"
selanjutnya anda cari kode
Dan Diantara Kode
sampean harus menempatkan kode pemanggil kode read more beranimasi dengan CSS3
<div class="jump-link">
.......................
</div>
.......................
</div>
Jadi Keseluruan Kode Akan Seperti Di Bawah Ini :
<div class="jump-link">
</div>
</div>
kemudian bukalah blog sampeyan. Sebuah tampilan read baru yang sangat menarik akan menjadi penghias blog sampeyan!
1 komentar: