Tambah/Tampilkan Nama Author di Bawah Judul Posting



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! Ho...ho ... Sekali lagi..., 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


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

]]></b:skin>

Cara Pembuatan


  • Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".
  • Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".
  • Design/Rancangan : Cari dan klik "Edit HTML".
  • Edit HTML-1 : KLIK "Download Template Lengkap" untuk melakukan "back-up" templates. Tunggu beberapa saat kemudian simpan file template di folder PC.
  • KLIK "Expand Widget Templates".
  • Edit HTML-2 : tetap di Edit HTMl, kemudian Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode!
  • Copy-Paste : Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
  • Cari kode <div class='post-header-line-1'/>, kemudian ganti kode tersebut dengan kode di bawah ini.
  • SAVE Templates/Simpan Template : KLIK SAVE Templates dan lihat hasilnya dengan membuka blog.
<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;'/>

Catatan/Keterangan:


  • Ganti kode yang berwarna merah dengan link yang sampeyan inginkan untuk di tampilkan di bagian author tersebut.
  • Ganti kode yang berwarna kuning dengan teks lain yang lebih cocok berkaitan dengan link yang di pasang.
  • Jika ada kesulitan untuk mencari kode ataupun back-up template, silahkan buka Special Tutorials yang terletak di daftar menu sebelah kiri.
  • Untuk menambahkan teks di depan nama author, silahkan tulis teks di sebelah kanan <b:if cond='data:top.showAuthor'>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «


Comments

Post a Comment