Cara Menciptakan Author Dibawah Posting Blog

Cara menciptakan author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih gampang untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar dapat lihat dibawah ini.

Untuk lebih jelasnya wacana cara menciptakan author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

1. Login keblogger, pilh pengaturan template.
2. Klik edit HTML dan cari isyarat <data:post.body/> kemudian masukan isyarat ini dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gambar'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBTXH3gRFgIOSf1rWyNrWCV3trvj8Kvg7_UPthunCw9lOOHOMNdO_fiu26EQsYt11nl5-YhXxUARm_ojo-AucClSkvF945OYDxXEDw_D_eUYlx76SzXVv3HykRVtOOBknn2DQLDZFkW-N/s361/Fandra%2520Juani.jpg'/>

<div class='Penulis'>
<span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

<div class='keterangan'>
<span>Ada Pertanyaan wacana artikel diatas, silakan masukan komentar dibawah. </span>

<div class='terimakasih'>
<span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
<div style='clear:both;'/>
</div></div></div></div></b:if>
<div style='clear: both;'/>
</div>
3. Kode <data:post.body/> di template blog, biasanya ada 3, masukan isyarat langkah 2, di bawah isyarat <data:post.body/>, ketiga2nya.
4. Selanjutnya, cari isyarat ]]></b:skin> kemudian masukan isyarat ini didalamnya.
.gambar {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduvepXUIhTR7aNqx7Qk43eaeuo7qKWAGN0Xqm5tA0DhOnM8NN62Daw4eXEaz_n_1L_mHd5w78ti359VaL0Z2dLIdEXSKLsiyfeUbX6ZVFfaES7_CETSg4Bup_IQmaZpUIOOlYI-NFWuY6/s1600/gt.jpg) repeat-x top center;
box-shadow:0px 1px 10px #aaaaaa;
border:2px solid #eeeeee;
padding:0;
margin:10px 0;
font:bold 12px Arial,Sans-Serif;height:100px;}

.gambar img{
width:70px;
height:70px;
margin:10px;
float:left;
padding:4px;
background:#ffffff;
border:1px solid #dddddd;
position: relative;
-moz-transition:all .4s ease-in-out;;
-ms-transition:all .4s ease-in-out;;
-o-transition:all .4s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .4s ease-in-out;}

.gambar img:hover{
-o-transform: scale(1) rotate(720deg);
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);}

.Penulis{
float:left;
margin:10px 0px 0px 0px;
text-shadow: 2px 2px 5px #107cde;
font-weight:bold;color:white;}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}

.Penulis a{
text-transform:uppercase;
font-family:Ravie;
font-size:12px;
text-shadow:2px 2px 5px #1780dd;
font-weight:bold;padding:0}

.keterangan{
padding:15px 0px 0px 0px;
color:white;font:italic 12px Arial, Sans-Serif;
text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

.terimakasih{
margin:13px 0px 0px 150px;
font:italic 12px Arial, Sans-Serif;color:black;
text-shadow: 2px 2px 5px #ffffff;}
5. Save template, selesai.

Keterangan isyarat langkah 2: 

• Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
• Penulis isi dengan nama kamu, tulisannya aku buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan isyarat langkah 4: 

• Gambar untuk menawarkan background disemua tulisan. Height nya aku atur 100px dapat anda ganti sesuai dengan cita-cita anda.
• .gambar img{ untuk mengatur ukuran gambar profil author dan juga embel-embel isyarat gambar berputar.
• .gambar img:hover{ gambar akan berputar dikala disentuh mouse. Penjelasannya baca di artikel cara menciptakan gambar berputar diblog
• .Penulis a{ untuk mengatur font atau jenis goresan pena nama author.
• .keterangan{ jika memakai keterangan yang panjang. Hapus isyarat float:left; yang ada di isyarat .Penulis{ biar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan cita-cita anda sendiri. Dan baca juga artikel wacana cara menciptakan tanda penulis dikotak komentar blog, biar terlihat berbeda dengan komentar dari pengunjung, sehingga orang dapat membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.