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.