Banyak desain template selalu menempatkan nama author di bawah posting, bahkan dalam ukuran relatif kecil. Hal seperti ini sebetulnya juga bukan jadi masalah besar. Tetapi Jika kita bisa selalu menampilkan nama author tepat dibawah judul posting tanpa selalu harus stiap kali menuliskan di halaman posting, mengapa tidak? Bukankah posting tersebut juga sudah kita buat dengan segala pengorbanan. Jadi apa salahnya jika "nama kita sebagai author" kita "tongkrongkan" di bagian teratas posting?! Bukan untuk kesombongan, sih. Hanya sekedar sebagai "pertanda" supaya sobat-blogger" lebih banyak mengenal tentang "si penulis posting" sekaligus sebagai "obat atas pengorbanan" yang telah diberikan selama mengelola blog. Terlebih, melalui satu bagian kecil ini kitapun dapat melakukan beberapa perubahan dan penambahan kode CSS atau HTML untuk membuat tampilan blog semakin menarik. Dan ada satu lagi yang lain: Sampeyan bisa memasukkan sembarang link di nama author tersebut! kenapa tidak di coba?!
Meskipun saat ini ada sebuah desain menarik yang telah coba aku buat pada bagian ini, namun kita akan postingkan di beberapa hari ke depan. Desain tersebut tak lepas dari apa yang akan kita buat sekarang, hanya satu nilai lebih yang dimiliki oleh desain tadi adalah: melalui "nama author" ini, kita bisa menampilkan "photo blogger" yang akan terlihat ketika cursor disentuhkan "tepat pada boks kecil" dimana nama author tertulis. Tentu saja ini akan jadi sesuatu yang menarik karena akan melibatkan animasi yang dibuat dengan kode CSS3 transition dan transformation. Oke ..., kita akan coba buat yang bahan-bahannya sudah tersedia lengkap terlebih dahulu. Sampeyan bisa melihat bentuk penambahan nama author di bawah judul posting pada gambar di atas. Seperti itulah kira-kira bentuknya. Adapun jika ingin tambahkan beberapa teks di depan nama author, sampeyan tinggal buat saja dan teks tersebut akan ikutan "nongol" di bagian tersebut.
Kode CSS di bawah taruh di atas ]]></b:skin>
.post-header span.post-author {
margin-bottom: 8px;
float: right;
color: #bdbdfd;
font-style: italic;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/animaBlacktoRedH5V5.gif);
padding: 2px 5px 2px 20px;
border-radius: 4px 3px 3px 22px;
-moz-border-radius: 4px 3px 3px 20px;
-webkit-border-radius: 4px 3px 3px 22px;
border: 1px solid #777;
}
.post-header span.post-author a {
color: #CC9900;
margin-left: 20px;
font-style: normal;
font-weight: normal;
text-shadow: 0 1px 0 #eee;
cursor: pointer;
}
.post-header span.post-author:hover a {
color: red; /* original code by: gubhugreyot.blogspot.com */
text-shadow: 1px 1px 1px #000;
text-decoration: none;
}
lalu selanjutnya cari kode <div class='post-header-line-1'/> dan ganti dengan kode di bawah
<div class='post-header-line-1'/><div style='clear:both;margin:3px 0 1px;height:3px;background:#222;'/>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<a href='http://gubhugreyot.blogspot.com/' target='_blank' title='Silahkan klik di sini!'><data:top.authorLabel/>
<data:post.author/>
</a><!-- gubhugreyot.blogspot.com -->
</b:if>
</span>
<div style='clear:both;'/>
semoga bermanpaat......
