Cara Membuat Authore Box + Permalink dibawah Postingan


Assalamualaikum Wr. Wb.
Selamat malam kawan-kawan semua, pada kesempatan kali ini Bang Dayat mau share nih penemuan baru Bang Dayat, tetapi hanya sekedar penemuan baru yang sangat sederhana yaitu Cara Membuat Authore Box + Permalink dibawah Postingan, dan saya bermain-main dengan CSS beberapa jam, oya kalo di baca dari judulnya saja pasti membuat hati kalian bertanya-tanya, oke saya akan jelaskan secara singkat, jelas, padat, dan berisi. Wahahaha.


Authore Box adalah semacam kotak yang berisikan foto authore atau admin yang di sertai dengan profil dirinya, dan terletak di bawah atau di akhir suatu postingan, kalau saya sendiri enak nyebutnya dengan kotak profil. Sedangkan Permalink adalah sebuah kotak yang berisikan informasi link alamat, dan menyarankan orang untuk mengkopi-paste artikel dengan menyertakan blog awal sebagai sumber artikelnya.

Jika anda ingin memasang Authore Box dan Permalink hasilnya pasti akan menjadi 2 kotak yang terpisah, Authore Box sendiri dan Permalink sendiri. Tetapi kali ini saya akan memberikan solusinya yaitu menggabungkan keduannya menjadi satu, Yuk mari simak berikut ini.

  • Loggin ke Blogger
  • Rancangan
  • Edit Template HTML
  • Download template lengkap (untuk berjaga-jaga jika terjadi kesalahan)
  • Expand Template Widget
  • Cari kode <div class='post-footer-line post-footer-line-1'> lalu letakkan kode di bawah ini tepat di bawah kode <div class='post-footer-line post-footer-line-1'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://lh3.googleusercontent.com/-m7SSpTNVhTs/T12UKrNPtjI/AAAAAAAAAeo/1GbJeWGuuUc/s110-c/406324_282785638437964_100001195915387_766884_1945919999_n.jpg' width='70'/><b>Pesan Muhammad Hidayat</b><br/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:blog.pageName/></a></b> dan saya sangat senang sekali jika anda menyebar luaskan atau copy paste artikel ini, namun jangan lupa untuk meletakkan link <u><b><a expr:href='data:post.url'><data:blog.pageName/></a></b></u> ini sebagai sumbernya.  <blink><b>Terima Kasih...</b></blink><br/></p>
</div>
</b:if>
  • Kemudian cari lagi kode ]]></b:skin> lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
.author-box {
background: #f0f0f0;
border: 1px solid #000000;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#000;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#000;
}
.author-box img {
background: #FFFFFF;
border: 1px solid #000000;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}
  • Terakhir Simpan
Catatan :
  1. Warna merah ganti dengan URL foto kalian.
  2. Warna biru sesuaikan dengan keinginan kalian.
Jika sudah anda simpan bukalah salah satu postingan artikel kalian dan lihatlah bagian bawah postingan kalian, maka hasilnya akan tampak seperti screenshoot di bawah ini.


Oke kawan-kawan sekalian pembahasan kita tentang Cara Membuat Authore Box + Permalink dibawah Postingan, telah selesai dan saya menjamin bahwa postingan saya ini bukan REPOST, jika ada pertanyaan silahkan berkomentar di bawah. Selamat siang, Salam Bang Dayat.


Related Posts:

  • Cara Verifikasi atau Claim Blog di TechnoratiCara Verifikasi atau Claim Blog di Technorati » The FIM Site kali ini akan sedikit berbagi info mengenai Cara Verifikasi atau Claim Blog di Technorati. Technorati merupakan sosial bookmark atau salah satu situs search en… Read More
  • Cara Membuat TV Online di BlogCara Membuat TV Online di Blog » The FIM Site kali ini akan sedikit berbagi info mengenai Cara Membuat TV Online di Blog. Banyak cara untuk memanjakan pengunjung pada blog Anda agar betah untuk berlama-lama atau bisa berkunju… Read More
  • Tips untuk Bermain SEO di Search EngineTips untuk Bermain SEO di Search Engine » The FIM Site kali ini akan sedikit berbagi info mengenai Tips untuk Bermain SEO di Search Engine. Ada banyak hal yang harus diperhatikan untuk menarik minat pengunjung blog untuk berl… Read More
  • Membuat Menu Tab View Tanpa Edit HTMLMembuat Menu Tab View Tanpa Edit HTML » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Menu Tab View Tanpa Edit HTML. Setelah sebelumnya saya memposting Membuat Menu Accordion Tanpa Edit HTML kali ini saya j… Read More
  • Membuat Menu Accordion Tanpa Edit HTMLMembuat Menu Accordion Tanpa Edit HTML » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Menu Accordion Tanpa Edit HTML. Setelah lama saya tidak posting pad The FIM Site dikarenakan saya juga tengah sibuk men… Read More