Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «


6 komentar:

  1. saya jadi binggung nich.
    kemaren manggil mas, tp manggil pak.
    cocoknya manggil apa ya?
    oy...sy mau tanya nich, saya udah kepasan tuh nama outerya.mau saya ganti dengan yang ini cara ngilangin auter lama gimana ya.

    BalasHapus
  2. Maaf Pak Blog saya tidak bisa login k facebook.. tolong pak solusinya bagaimana...
    Sebelumnya saya ucapkan terima kasih

    BalasHapus
  3. Coba lihat Blog saya pa... tolong di rapihkan karena saya sudah pusing..ngurusnya... sebelumnya terima kasih.
    Blog saya. kangbad-ikhtiar.blogspot.com

    BalasHapus
  4. thank Mas Bro share artikelnya kunjungin blog saya...!

    BalasHapus
  5. Apakah Anda mencari pinjaman untuk membayar utang Anda? Kami menawarkan pinjaman dari semua jenis dengan bunga 2%. Mohon mengisi formulir di bawah ini.

    Nama Anda:
    negara:
    Jumlah Dibutuhkan:
    Durasi Pinjaman:
    Nomor Handphone:
    Email: honeywell240@gmail.com
    James Hook

    BalasHapus
  6. Halo,

    Apakah Anda dalam setiap jenis kesulitan keuangan? Apakah Anda membutuhkan pinjaman untuk melunasi hutang-hutang Anda? Apakah Anda seorang pengusaha atau wanita yang berniat untuk memperluas perusahaan nya? kami menawarkan pinjaman dari semua jenis kepada individu, perusahaan dan bekerja sama badan-badan yang membutuhkan pinjaman pada tingkat bunga rendah dari 3% hubungi kami hari ini untuk pinjaman asli melalui email:
    royalsilverloanservices@gmail.com

    PINJAMAN FORMULIR PENDAFTARAN

    Pemohon Nama:
    negara:
    pekerjaan:
    seks:
    Tujuan pinjaman:
    Umur:
    Nomor Telepon:
    Jumlah Dibutuhkan:
    Durasi Pinjaman:
    Pendapatan Bulanan:

    Mr RoyalSilver

    BalasHapus

 
GR | Edited by | gubhug reyot