Trik Merubah Nama Author (Penulis) di Post Footer BloggerTrik Merubah Nama Author (Penulis) di Post Footer Blogger

Yang dimaksudkan sebagai Nama Author (Penulis) di Post Footer adalah sebuah teks atau teks link yang berisi nama penulis posting (author) dan biasanya terletak di bawah posting (di homepage/beranda dan halaman posting). Anda akan melihatnya terletak tepat tepat di atas kolom komentar ketika yang dibuka adalah post page (halaman posting).

Trik mengganti nama penulis (author) di post footer blogger adalah sebagai sebuah upaya untuk membuat tampilan blog yang unik dan berbeda dibandingkan dengan blog lain. Diluar hal tersebut, dengan trik ini juga diharapkan menjadi sebuah panduan bagi blogger untuk lebih mengenal kode html yang digunakan ditemplate. Seperti pepatah mengatakan "Tak kenal, maka tak sayang", oleh karena itu semoga berbagai tips dan tutorial blogger yang terpostingkan dalam blog ini akan semakin membuat anda lebih mengenal desain blog, sekaligus lebih memahami berbagai kode yang digunakan sehingga memunculkan rasa sayang dan kecintaan untuk terus berkarya dengan posting-posting yang baru.

Trik Merubah Posisi Readmore di Kanan, Kiri & TengahTrik Merubah Posisi Readmore di Kanan, Kiri & Tengah

Readmore tidak harus selalu di kiri halaman blog, di kanan atau ditengah-tengah. Anda bisa merubahnya sesuka hati disesuaikan dengan kenyamanan hati saat melihatnya atau agar lebih terlihat pas di blog. Trik merubah posisi readmore blogger ini didasarkan pada kode html yang digunakan di New Blogger Template. Selain merubah posisi, dengan sedikit menambahkan kode yang lain, bahkan anda bisa merubah ukuran teks link readmore atau jika dikehendaki dapat pula dirubah warna tampilannya. Semua perubahan hanya dilakukan melalui kode css, sehingga tak perlu merubah xHTML yang terdapat diantara tag pembuka body & tag penutupnya. Sebuah trik yang sangat praktis dan dipastikan dapat dilakukan dengan mudah oleh siapapun juga.

Teks & Image dg Efek Kedip (Blink Effect) css3 AnimationTeks & Image dg Efek Kedip (Blink Effect) css3 Animation

Sekalipun dengan mudah kita dapat membuat efek berkedip dengan menggunakan blink efek melalui text-decoration property (blink), namun efek kedip ini hanya bisa digunakan pada teks. Dengan memanfaatkan kode css3 animation, sebuah efek kedip bisa digunakan untuk semua hal. Anda bisa menerapkannya pada image, teks, box atau yang lainnya. Membuatnya terhitung cukup mudah dan kode yang digunakanpun tidak terlalu banyak. Anda bisa memanfaatkannya melalui "class", "id" atau menggunakan "syntax bebas" yang saat ini juga didukung oleh semua browser.

Tips Penataan Link/Styling LinksTips Penataan Link/Styling Links

Link berfungsi untuk menghubungkan sebuah bagian blog/web dengan bagian yang lain dari blog atau dengan bagian blog/web yang lain. Link bisa berbentuk teks (teks link) atau link image/gambar (image link). Jika dalam bentuk teks, biasanya link dibuat dalam rupa berbeda dengan teks yang laian. Bisa dengan menggunakan warna berbeda, ditambahkan sebuah background, garis bawah (text-decoration:underline), bentuk huruf atau yang lebih tebal. Ciri utama sebuah link adalah berubahnya bentuk cursor ketika diarahkan tepat di atasnya. Link dibentuk menggunakan kode css link property untuk menndukung kode html tag "a" agar mampu memberikan sebuah "tanda link" secara maksimal. Agar penanda ini bekerja secara optimal, aturan baku harus diterapkan pada setiap bagian (elemen) css link property. 4 bagian property link yang harus ditata secara berurutan adalah sebagai berikut:

Kode Paling Tepat Menghilangkan Navbar BloggerKode Paling Tepat Menghilangkan Navbar Blogger

Ada banyak sekali tutorial tentang cara menghapus atau menghilangkan navbar blogger. Di New Blogger Template ternyata tak sepenuhnya berhasil diterapkan. Jika anda mengalami hal seperti itu, dimana sekalipun navbar tak terlihat, namun masih menyisakan ruang kosong di atas header blog, silahkan untuk menggunakan kode css di bawah ini. Hanya satu kode CSS tanpa perlu menambah attribute !important, namun ditanggung navbar iframe blogger akan lenyap tanpa sisa dalam bentuk apapun. Silahkan kode css disimpan di atas ]]></b:skin> yang posisinya beberapa baris di atas kode </head>.

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>.

Automatic thumbnail on Blogger Readmore - Menampilkan Thumbnail di ReadmoreAutomatic thumbnail on Blogger Readmore - Menampilkan Thumbnail di Readmore

Contoh penggunaaan Automatic Thumbnail on Blogger Readmore.Jika anda menginginkan sebuah thumbnail selalu ditampilkan ketika readmore digunakan, ini akan menolong anda. Cara ini adalah sebuah pilihan menggunakan readmore tanpa javascript yang memungkinkan anda untuk tetap bisa mengatur seberapa banyak teks yang akan ditampilkan melalui readmore. Tentu saja kita harus menggunakan cara manual dengan memasukkan kode jump break. Menggunakan cara seperti ini adalah sebuah solusi ketika kita melihat bahwa "Auto Readmore with Thumbnail" tanpa script hanya menampilkan karakter posting sangat terbatas (sejumlah 140 karakter) sehingga readmore akan menyisakan ruang kosong yang cukup besar.

Trik Menggunakan Kode CSS di bagian tertentu blogTrik Menggunakan Kode CSS di bagian tertentu blog

Trik ini dimaksudkan untuk membuat fungsi baru kode css. Anda dapat membuat kode css yang benar-benar baru dan mempunyai fungsi tertentu, meniadakan fungsi kode css yang telah ada agar tidak berfungsi dibagian tertentu blog atau hanya merubah beberapa variabel tertentu dari kode css agar dibagian tertentu dari blog ditampilkan berbeda dari bagian blog lainnya. Agar lebih jelas, sebagai contoh misalnya anda ingin dihalaman utama (homepage) hanya ditampilkan judul posting (post title) tanpa konten sama sekali, menghilangkan sidebar di homepage, merubah warna link di homepage dan post page menjadi berbeda, membuat background homepage berbeda dengan post page, menggunakan font berbeda di posting tertentu (berdasar URL posting) serta berbagai perubahan dan perbedaan lainnya. Anda bisa mengembangkan trik ini untuk membuat blog menjadi jauh lebih berbeda & jauh lebih menarik.

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.

Menampilkan Deskripsi Blog melalui Attribute TitleMenampilkan Deskripsi Blog melalui Attribute Title

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.

Trick Membuat Hyperlink Blog Title di HomepageTrick Membuat Hyperlink Blog Title di Homepage

Sebuah celah pada Blog Title atau Nama Blog bisa dimanfaatkan sebagai sebuah hyperlink dengan memasang sebuah alamat blog atau web yang berbeda. Celah ini bisa kita dapatkan di homepage (halaman utama blog) dimana blog title hanya ditampilkan sebagai teks biasa (bukan link). Hyperlink baru kita buat dengan menambahkan html baru berupa sebuah tag "a" yang dilengkapi dengan link title. Trik ini sudah dicoba di New Blogger template dengan hasil sempurna. Selain membuat blog menjadi lebih menarik, namun melalui hyperlink ini diharapkan mampu mendatangkan lebih banyak pengunjung di blog/web kita yang lain.

Membuat Post Title atau Judul Posting sebagai HyperLinkMembuat Post Title atau Judul Posting sebagai HyperLink

Jika anda mencermati post title atau judul posting yang ada di halaman posting, maka akan terlihat perbedaan dengan yang terdapat di homepage (halaman utama blog). Post title tersebut bukanlah sebuah link sehingga ketika anda mencoba mengarahkan cursor di atasnya (menyorot dg cursor) sama sekali tak ada reaksi apapun. Ini akan berbeda dengan yang kita jumpai di homepage karena post title yang tertuliskan disini merupakan sebuah link. Link yang berfungsi mengarahkan kita ke halaman posting (alamat) sesuai dengan post title yang terlihat.

Akan sangat bermanfaat jika post title di halaman posting kita rubah menjadi sebuah hyperlink. Dengan perubahan ini post title bukan lagi sebuah teks biasa, namun merupakan sebuah hyperlink yang bisa membuat pengunjung kita bawa untuk berkunjung di blog atau web lain. Sebuah tag "a" kita tambahkan pada kode html yang terletak di bagian body, dimana sebuah alamat tertentu (URL) kita tambahkan di dalamnya.