Raihan Controller | Troll: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

23.24

Memperindah Loading Blog Dengan Keyframe

kali ini Kuntoro Cyber mau share artikel Memperindah Loading Blog Dengan Keyframe .. tau gak Keyframe ???? -_- .. kalo gak tau DEzooooo .. brakakakakakakakkaka .. Keyframe ini gunanya untuk apa ya ??? pokoknya untuk memperindah dengan CSS . gak usah basa - basa lagi yah langsung aja diliat .......

1. Login ke akun Blogger sobat ..
2.Copy and paste Kode dibawah ini diatas ]]></b:skin>

#wrapper, #sidebar {
-webkit-animation: css3Animasi 4s ease-in;
-moz-animation: css3Animasi 4s ease-in;
-ms-animation: css3Animasi 4s ease-in;
-o-animation: css3Animasi 4s ease-in;
animation: css3Animasi 4s ease-in
}
@-webkit-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-moz-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-ms-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-o-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}

NB : kode yang berwarna merah bisa anda tentukan dengan pilihan anda ..
Contoh : jika ingin menampilkan pada sidebar hapus kode #wrapper , begitupun sebaliknya ...

Terima kasih sudah membaca artikel Memperindah Loading Blog Dengan Keyframe ... semoga bermanfaat untuk anda .. Silahkan tinggalkan komentar ..
sumber script

09.08

Cara Memasang Emoticon Gundam Dalam Postingan Blogger

Cara Memasang Emoticon Gundam Dalam Postingan Blogger - Bagian terpenting dalam suatu blog adalah Area postingan. betul?? karena itu , sekecil apapun kesalahan yang di lakukan di area postingan berkemungkinan akan menghalagi kinerja googlebot dalam membaca isi dari artikel sobat. Saya pernah menemukan blog yang tidak punya sidebar, footer bahkan header ( header di sembunyikan ), tapi tak pernah saya menemukan blog yang tidak punya area postingan ( tempat artikel )

Kali ini saya ada sedikit tips bagi sobat blogger yang ingin memperindah area artikelnya. Kali ini kita akan coba menambahkan emoticon gundam di dalam postingan blogspot, seperti yang sobat lihat pada bagian bawah postingan ini.

Postingan ini hampir sama dengan postingan sebelumnya ( baca : cara memasang emoticon dalam postingan blog ), bedanya adalah emoticonnya. Kalau yang lalu saya menggunakan emoticon emogirl dan emoboy, kali ini saya meggunakan Emoticon Gundam.

Sobat yang tertarik memasang emoticon gundam di postingan atau artikel blog, silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan -> edit Html
3. Letakkan script berikut di atas kode </body>

4. Klik simpan.

Untuk menampilkan emoticon di postingan silahkan sobat gunakan kode pemanggil seperti berikut.

:a: untuk emoticon

:b: untuk emoticon

:c: untuk emoticon

:d: untuk emoticon

:e: untuk emoticon

:f: untuk emoticon

:g: untuk emoticon

:h: untuk emoticon

:i: untuk emoticon

:j: untuk emoticon

:k: untuk emoticon

:l: untuk emoticon

:m: untuk emoticon

:n: untuk emoticon

Nah.. selesai dech!! silakan berkreasi dengan emoticon dalam postingan ..

09.04

Cara Memasang Emoticon Kaskus di Kotak Komentar Blog

Setelah sebelumnya saya pernah memposting Bagaimana cara memasang emoticon skype di kotak komentar blog, kali ini lagi - lagi Ide bagus akan memposting cara yang mirip yaitu memasang emoticon kaskus di kotak komentar blog. Scriptnya saya ambil dari http://tejahtc.blogspot.com Tertarik untuk memasangnya?? ikuti langkah - langkah berikut.

1. Log in ke akun bog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand widget template widget.
3. Letakkan kode berikut di atas kode ]]></b:skin>

#kaskusemoticon {
width:auto;
margin:10px;
padding:10px;
}

4. Letakkan script berikut di atas kode </body>

<script src='http://muhammadsuteja.googlecode.com/files/emoticon1.js' type='text/javascript'/>
<script src='http://muhammadsuteja.googlecode.com/files/emoticon.js' type='text/javascript'/>

5. Cari kode berikut menggunakan Ctrl+f ( memudahkan pencarian )

<b:include data='post' name='comment-form'/>

6. Letakkan kode berikut di bawahnya..

<b>
<div style='overflow:auto; width:100%px; height:100px; padding:10px; border:3px inset #FF0000;'>
<img height='50' src='http://img202.imageshack.us/img202/4846/kompinterjuara1.gif' width='50'/>
:k1
<img height='50' src='http://img72.imageshack.us/img72/398/kompinterbatamerah.gif' width='50'/>
:k2
<img height='50' src='http://img687.imageshack.us/img687/1351/kompintercendol.gif' width='50'/>
:k3
<img height='50' src='http://img94.imageshack.us/img94/4219/kompinterlovindo.gif' width='50'/>
:k4
<img height='50' src='http://img8.imageshack.us/img8/3483/kompintermarah.gif' width='50'/>
:k5
<img height='50' src='http://img532.imageshack.us/img532/931/kompintermalu2.gif' width='50'/>
:k6
<img height='50' src='http://img693.imageshack.us/img693/7193/kompinterkecewa.gif' width='50'/>
:k7
<img height='50' src='http://img171.imageshack.us/img171/4809/kompinterngacir2.gif' width='50'/>
:k8
<img height='50' src='http://img412.imageshack.us/img412/3662/kompintersempurna.gif' width='50'/>
:k9
<img height='50' src='http://img291.imageshack.us/img291/6651/kompinterbingung.gif' width='50'/>
:a1
<img height='50' src='http://img709.imageshack.us/img709/2609/kompinterngakak.gif' width='50'/>
:a2
<img height='50' src='http://img641.imageshack.us/img641/3540/kompintertakut.gif' width='50'/>
:a3
<img height='50' src='http://img514.imageshack.us/img514/7169/kompinterterimahkasi.gif' width='50'/>
:a4
<img height='50' src='http://img169.imageshack.us/img169/5500/kompinteralay.gif' width='50'/>
:a5
<img height='50' src='http://img28.imageshack.us/img28/4954/kompintertkp.gif' width='50'/>
:a6
<img height='50' src='http://img138.imageshack.us/img138/3621/kompinternosara.gif' width='50'/>
:a7
<img height='50' src='http://img202.imageshack.us/img202/8307/kompinterliat.gif' width='50'/>
:a8
<img height='50' src='http://img693.imageshack.us/img693/8240/kompintersundul.gif' width='50'/>
:a9
</div>
</b><BR/>

7. Klik simpan template. SELESAI...!!

Ada pertanyaan?? tanyakan di kotak komentar...

09.03

Cara Memasang Emoticon Gundam di Kotak Komentar Blog

Cara Memasang Emoticon Gundam di Kotak Komentar Blog - Mungkin sobat sudah sering membaca judul yang mirip dengan judul dalam postingan ini, karena apa?? di blog ini hampir semua emoticon sudah saya posting, mulai dari emoticon skype, emoticon kaskus, emoticon onion, emoticon emo girl dan emo boy dan saat ini kita membahas cara memasang emoticon gundam di komentar blogger.

Sebenarnya saya sendiri sudah bosen memposting tentang emoticon, karna itu pada postingan sebelumnya saya memposting tentang cara memasang readmore di blog. Satu alasan mengapa saya selalu memposting topik tentang emoticon yaitu karena saya tahu cara membuat emoticon sendiri. hehehe..

Silahkan ikuti tutorial berikut jika sobat tertarik membuat emoticon gundam di komentar blog.

Emoticon Gundam di Kotak Komentar Blog

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
3. Letakkan kode berikut di atas kode </head>

4. Cari kode <b:if cond='data:post.embedCommentForm'> dan letakkan kode berikut ini di bawahnya.

5. Klik save dan lihat hasilnya...

Raihan Controller | Troll

Memperindah Loading Blog Dengan Keyframe

Cara Memasang Emoticon Gundam Dalam Postingan Blogger

Cara Memasang Emoticon Kaskus di Kotak Komentar Blog

Cara Memasang Emoticon Gundam di Kotak Komentar Blog

Sponsor

Categories

Blog Archive

Cloud

Template Information

Template Information

Test Footer 2