Membuat 5 Elemen Baru di atas Footer BloggerMembuat 5 Elemen Baru di atas Footer Blogger

Klik untuk memperbesar gambar!Tak ada elemen blogger yang berukuran kecil karena jumlah maksimal elemen yang telah disediakan blogger melalui pilihan yang tersedia di "Perancang Template Blogger - Tata letak hanya berjumlah 3 elemen di bagian footer. Anda bisa melihatnya melalui Dasbor - Templpate - Ubahsuaian - Tata Letak (perancang Template Blogger).
Membuat elemen baru yang lebih kecil memungkinkan kita membuat 5 atau lebih elemen dalam deret horizontal. Anda bisa menggunakan elemen baru ini untuk memuat widget/gadget baru dalam ukuran yang relatif kecil sehingga dalam satu deret horizontal akan bisa ditampilkan beberapa widget sekaligus. Ukuran yang lebih kecil seperti ini bisa dimanfaatkan untuk box adsense/iklan, misalnya, atau anda bisa manfaatkan juga sebagai box widget bagi kode2 css, javascript.

Animasi Hover Link Widget Archive Blogger dg css3 AnimationAnimasi Hover Link Widget Archive Blogger dg css3 Animation

Animasi link di widget archive bisa dibuat dengan beberapa cara dan dalam berbagai bentuk yang berbeda (dg kode css atau javascript). Setelah di posting sebelumnya "Animasi Link Widget Archive dg css3 TransitionKlik disini untuk mengikuti panduan cara membuat animasi hover link dg css3 transition di widget archive blogger ", kita akan membuat animasi yang jauh lebih menarik dengan kode css3 animation. Sedikit yang membedakan terutama pada animasi gerak link. Jika di posting sebelumnya saat cursor menyentuh link di widget archive animasi yang terjadi berupa pergeseran link ke kiri, maka melalui kode css3 animation bentuk animasinya berupa pergerakan link ke arah kanan yang dibarengi dengan perubahan teks link dalam bentuk transparan, baru kemudian link akan terlihat kembali bersamaan dengan pergeseran ke kiri.

D E M O

Silahkan lihat widget arsip melalui link di bawah ini, kemudian arahkan cursor diatas setiap link widget arsip.
Demo Animasi Link Widget Archive Blogger dg css3 AnimationSilahkan klik di link ini untuk melihat bagaimana bentuk animasi link di widget archive blogger yang diciptakan dengan css3 animation.

Kode CSS untuk membuat Animasi Hover LInk di Widget Archive Blogger

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}

Cara menggunakan kode CSS animasi widget archive blogger

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat penampilan Animasi Widget Archive blogger anda!

Posisi kode css di template :

@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}
]]></b:skin>

Animasi Link Widget Archive dg css3 TransitionAnimasi Link Widget Archive dg css3 Transition

CSS3 animation menjadi sebuah pilihan yang sangat menarik untuk pengembangan desain blog. Disamping mudah dipelajari, perkembangan yang terjadi pada css3 transition, transform dan css3 animation memungkinkan banyak fungsi yang sebelumnya hanya bisa dibangun dengan javascript, kini cukup dilakukan dengan kode css. Salah satu yang akan kita buat adalah animasi link di widget archive blogger. Dengan css3 transition sebuah link di widget archive bisa bergerak ke arah kanan atau kiri dalam bentuk animasi. Gerakan pergeseran dapat diatur dengan durasi kecepatan tertentu dalam hitungan detik (second atau milisecond).

Membuat List di Widget Archive/Arsip BloggerMembuat List di Widget Archive/Arsip Blogger

Membuat list di widget arsip blogger sangat bermanfaat karena memudahkan pembaca membedakan setiap item dari deret judul posting yang ditampilkan. List menjadi sebuah penanda setiap judul posting, dimana bentuk list dapat kita pilih dari beberapa yang tersedia, seperti misalnya circle, decimal, square, disc dan georgian. Untuk list dalam bentuk icon/gambar lebih banyak pilihan yang dapat dilakukan. Anda bisa membuatnya atau browsing untuk mendapatkan berbagai macam image/icon list. Kode CSS pembentuk list sangat simpel karena hanya menggunakan satu deret kecil kode css. Kode ini bisa disimpan di atas kode ]]></b:skin>.

Animasi Image Profil Blogger dg css3 AnimationAnimasi Image Profil Blogger dg css3 Animation

Kini sudah saatnya para blogger untuk menggunakan kode css3 transisiton, css3 transformation dan css3 animation untuk mengembangkan desain blog agar menjadi lebih menarik. Hanya melalui css3 transition & css3 transformation berbagai fungsi menarik & cantik sudah bisa dibuat, apalagi jika kita menggabungkannya dengan css3 animation. Anda bisa melihat salah satu hasil penggunaan css3 animation yang digabungkan dengan css3 transition, css3 transformation dan beberapa css property lainnya melalui demo animasi image profil blogger di bawah. Animasi pada image profil blogger murni menggunakan kode css dan sama sekali tanpa javascript. Kode CSS animasi seperti yang digunakan dalam image blogger dalam demo dapat anda lihat dan gunakan. Silahkan copy dan mungkin bisa anda kembangkan untuk mendapatkan bentuk animasi yang berbeda.

Trik menghilangkan dan mengganti Icon Bogger di Widget profileTrik menghilangkan dan mengganti Icon Bogger di Widget profile

Jika mungkin anda tertarik untuk menghilangkan atau mengganti icon blogger di widget profile blogger, inilah cara yang paling tepat. Anda hanya perlu menambah sedikit kode CSS di atas kode ]]></b:skin>, maka dalam sekejap ucon blogger akan hilang atau berganti dengan icon baru. Bahkan, jika ingin menambah daya tarik tampilan widget profle, anda bisa menggunakan sebuah image/gambar animasi (bergerak), seperti misalnya bendera negara atau emoticon dan berbagai gambar animasi lain dengan ukuran kecil. Gunakan icon pengganti dengan ukuran lebar max 20px dan tinggi 20px.

Trik merubah Image Profil Blogger menjadi berbentuk bulatTrik merubah Image Profil Blogger menjadi berbentuk bulat

Semua image profile blogger yang ditampilkan di halaman blog sebagai pelengkap widget profile (About me atau Tentang saya) ditampilkan dalam bentuk kotak dengan ukuran tinggi atau lebar sebesar 80px. Bentuk profile image tak harus selalu dalam bentuk bujur sangkar (segi 4 sama sisi), namun bisa juga meninggi atau melebar dengan salah satu sisi 80px dan sisi yang lain kurang dari 80px, yang bergantung pada bentuk & ukuran image profile yang diupload melalui halaman dasbor blogger (seperti dalam gambar di samping.

Trik menampilkan Widget Blogger di Halaman TertentuTrik menampilkan Widget Blogger di Halaman Tertentu

Untuk menampilkan widget agar hanya ditampilkan di halaman tertentu kita perlu menambahkan kode html baru. Kode ini digunakan blogger untuk melakukan pengaturan tampilan blog sehingga beberapa bagian dari blog dapat ditampilkan hanya dibagian yang ditentukan. Banyak yang dapat kita manfaatkan dari kode ini, diantaranya bisa untuk membuat sebuah widget hanya terlihat di homepage, post page, halaman static, diposting tertentu (menggunakan URL posting). Selain untuk hal seperti di atas, kode html ini juga bisa digunakan untuk sesuatu yang lebih ekstrim seperti misalnya menyembunyikan sidebar blog, menyembunyikan header blog atau footer blog di halaman tertentu. Sebagai contoh misalnya membuat homepage dalam bentuk tanpa sidebar sementara di halaman posting ditampilkan sidebar blog.